В прошлом совете я рассказал о стратегии загрузки шрифтов в книгах бюро: о WOFF2, кешировании и предзагрузке шрифтов с помощью <link rel="preload">. К сожалению, не для всех книг и шрифтов эта стратегия оптимальна.
В книге Кристины Луниной «Японский язык без страха» используется отдельный шрифт для иероглифов — Noto Sans JP. Несмотря на оптимизации, которые используют Гугль‑шрифты, грузить его было накладно:
Гугль‑шрифты используют сабсеты: файл со шрифтом разбит на кусочки, которые включают в себя определенный интервал глифов. Но книга использует символы, которые попадают в 39 разных сабсетов, что даёт лишние запросы и трафик.
Чтобы ускорить загрузку Noto Sans JP, решили самостоятельно генерировать сабсет только из тех символов, что используются в книге. Для этого собрали микросервис, генерирующий сабсеты с помощью Glyphhanger на лету, и вписали его в книгу:
// Ищем японские символы в тексте страницы и упаковываем их в строку-ключ
const bodyText = document.body.textContent
const japaneseChars = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g
const usedChars = Array.from(new Set(bodyText.match(japaneseChars)))
.sort()
.join('')
const fonts = [
{ weight: 100, kind: 'Thin' },
{ weight: 300, kind: 'Light' },
{ weight: 400, kind: 'Regular' },
]
// Генерируем стили со ссылками на сабсеты с указанными символами и начертаниями
const fontFaces = fonts
.map(font => {
return {
...font,
...{ url: `/NotoSansJP/subset/${font.kind}/${usedChars}.woff2`}
}
})
.map(({ weight, url }) => {
return `@font-face {
font-family: Noto Sans JP;
font-weight: ${weight};
src: url(${url}) format('woff2');
}`
})
.join('\n')
// Добавляем стили со шрифтами на страницу
let style = document.createElement('style')
style.type = 'text/css'
style.appendChild(document.createTextNode(fontFaces))
document.head.appendChild(style)
После оптимизации загрузка шрифта и книги ускорилась на 30‑40%:
Важный момент: такой способ подходит для шрифтов, лицензия которых разрешает их модифицировать. У Noto Sans лицензия Апаче, которая разрешает свободно использовать и изменять шрифт.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.