В прошлом совете я рассказал о стратегии загрузки шрифтов в книгах бюро: о WOFF2, кешировании и предзагрузке шрифтов с помощью <link rel="preload">. К сожалению, не для всех книг и шрифтов эта стратегия оптимальна.

В книге Кристины Луниной «Японский язык без страха» используется отдельный шрифт для иероглифов — Noto Sans JP. Несмотря на оптимизации, которые используют Гугль‑шрифты, грузить его было накладно:

40 запросов, 994 КБ

Гугль‑шрифты используют сабсеты: файл со шрифтом разбит на кусочки, которые включают в себя определенный интервал глифов. Но книга использует символы, которые попадают в 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%:

3 запроса, 299 КБ

Важный момент: такой способ подходит для шрифтов, лицензия которых разрешает их модифицировать. У Noto Sans лицензия Апаче, которая разрешает свободно использовать и изменять шрифт.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы