203 КБ шрифтов и Performance 87

Замер боевого домена лендинга психолога, Lighthouse 12.8.2, мобильный профиль, медиана трёх прогонов: Accessibility 100, SEO 100, CLS 0 — и Performance 87. Очки съедает одна забытая строка в CSS.

Что происходит

Шесть файлов шрифтов на 203 КБ из 291 КБ всей страницы объявлены без unicode-range. Браузер не знает, какие символы лежат внутри какого файла, поэтому качает все, которые упомянуты в правилах для используемых начертаний. Русский текст на странице — а латиница, расширенная кириллица и греческий приезжают вместе с ним.

Что делать

unicode-range говорит браузеру, за какие символы отвечает файл. Шрифт скачается только если на странице встретился символ из диапазона.

@font-face {
  font-family: 'Onest Variable';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest Variable';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

Это объявление с этого сайта. Подмножеств ровно два — кириллица и латиница. Расширенные наборы cyrillic-ext и latin-ext не берутся: они про языки, которых здесь не будет, а это ещё 18 КБ.

Две вещи рядом

Одной строки мало, если начертаний много. Переменный шрифт с одной осью wght закрывает весь диапазон толщин одним файлом: 520 у пунктов навигации и 700 у заголовка приезжают из того же файла, что и обычный текст.

И preload — на подмножество своего языка, с обязательным crossorigin. Шрифты качаются в режиме CORS, и без атрибута предзагрузка не засчитывается: файл скачается дважды.

Цифра 87 в кейс лендинга не вынесена — чинить чужой сайт задачи не было, а показывать Performance, зная причину, нечестно.