Каждый веб-разработчик на той или иной стадии своей работы сталкивается с таким понятием, как "производительность" или "performance". Простыми словами - это насколько быстрым и оптимизированным является ваш сайт и как быстро он прогружается в браузере.

В подавляющем своем большинстве дизайн сайта отрисовывается с использованием сторонних шрифтов. И чтоб сайт одинаково отображался на разных пользовательских устройствах, эти шрифты необходимо дополнительно загружать.

Шрифты не только добавляют вес веб-сайту, но и могут негативно повлиять на CLS (кумулятивное смещение макета) при неправильной их загрузке. Поскольку CLS является частью основных показателей Core Web Vitals, его низкая оценка может значительно снизить рейтинг веб-сайта в результатах поиска Google.

Google на своем ресурсе Google Fonts предоставляет информацию (код), как реализовать желаемый шрифт на вашем веб-сайте. Однако проблема в том, что их решение негативно повлияет на ваш сайт. Мало того, что они загружаются из внешнего источника, скорость загрузки вашего сайта и внешних шрифтов может уменьшиться и вызвать CLS.

Широко рекомендуемый метод - размещать шрифты (даже те, что от Google) у себя. В большинстве случаев это может позитивно сказаться на CLS, но не всегда. Есть много факторов, влияющих на то, как загружаются эти шрифты, но если ваш хостинг плохой и вы не используете CDN, то мы также можем увидеть худшие результаты, чем загрузка шрифтов напрямую по рекоммендациям Google.

Автономные шрифты - самый правильный подход. Однако потребуется несколько настроек, прежде чем они будут хорошо работать в вопросах веб-производительности. Поэтому начнем с того, как их правильно загружать.

Автономные шрифты

Что вашему веб-сайту потребуется в первую очередь - это шрифты в формате WOFF (Web Open Font Format). Это формат, который поддерживается практически всеми браузерами, присутствующими в настоящее время на рынке.

Лайфхак! Существует две версии форматов WOFF: WOFF и WOFF2. Разница между ними заключается в алгоритме сжатия. Файлы WOFF2 меньше, поэтому загружаются быстрее.

По умолчанию рекомендуется использовать WOFF2, но также стоит иметь файлы WOFF в качестве резервных для старых браузеров.

Если вам нравятся шрифты Google, вы можете обратиться к помощнику веб-шрифтов Google, чтобы найти нужный шрифт и загрузить необходимые файлы вместе с кодом, который указывает, как их реализовать на вашем веб-сайте.

Этот сайт - настоящий золотой самородок. Будем использовать предоставленные им файлы, но не будем использовать предоставленный код (по крайней мере, не полностью) и совершим некоторые улучшенные настройки.

В качестве примера возьмем один из самых популярных шрифтов с засечками - Merriweather. По умолчанию, выберем кодировку латиницу и нормальный стиль. Дальше мы получим код css и прежде чем его скопировать, настроим префикс согласно папкам нашего проекта (допустим это будет просто /fonts/).

Файлы, полученные в результате распаковки:

/fonts/merriweather-v28-latin-regular.eot
/fonts/merriweather-v28-latin-regular.svg
/fonts/merriweather-v28-latin-regular.ttf
/fonts/merriweather-v28-latin-regular.woff
/fonts/merriweather-v28-latin-regular.woff2

А это правила для CSS, предлагаемые помощником:

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/merriweather-v28-latin-regular.eot'); /* IE9 и более поздние */
  src: local(''),
    url('/fonts/merriweather-v28-latin-regular.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
    url('/fonts/merriweather-v28-latin-regular.woff2') format('woff2'),  /* Современные браузеры */
    url('/fonts/merriweather-v28-latin-regular.woff') format('woff'),  /* Популярные браузеры */
    url('/fonts/merriweather-v28-latin-regular.ttf') format('truetype'),  /* Safari, Android, iOS */
    url('/fonts/merriweather-v28-latin-regular.svg#Merriweather') format('svg');  /* Legacy iOS */
}

Настройки для шрифтов

Прежде чем мы пойдем дальше, давайте посмотрим, в чем важная разница между кодом выше и кодом, предоставленным Google Fonts для того же шрифта:

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-4n0qyriQwlOrhSvowK_l521wRZWMf6hPvhPQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Кодировки

Что сразу бросается в глаза - Google импортирует кодировки, которые вам могут не понадобиться!

Локальные шрифты

Если вы будете использовать этот код, то весь промежуток времени до того, как ваш шрифт загрузится и поменяет стиль на сайте (font-display: swap;), текст будет использовать локально доступный шрифт (это время может быть долей секунды).

В зависимости от скорости вашего интернета, промежуток между отображением локального альтернативного шрифта (Merriweather недоступен по умолчанию в операционных системах) и самим Merriweather, скорее всего, вызовет смещение на вашем веб-сайте. Эту разницу как раз будет учитывать CLS, что негативно повлияет на ваш сайт.

Что делает код из ресурса-помощника google webfonts - это сообщает браузеру, что локальные шрифты должны быть недоступны, поэтому текст должен отображаться после загрузки и доступности шрифта.

Это часть кода, которая помогает нам бороться с нежелательным CLS при использовании пользовательских шрифтов на нашем веб-сайте:

src: local(''), url('/fonts/merriweather-v28-latin-regular.woff2')

Этот небольшой, но очень важный хак существенно влияет на Core Web Vital (особенно CLS).

Дескриптор font-display

Также в коде от помощника отсутствует, а в другом присутствует такая строка:

font-display: swap;

Дескриптор font-display определяет то, как шрифт, подключённый через @font-face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

Несмотря на то, что мы говорим, что доступных локальных шрифтов нет (local('')), на самом деле они есть, только они должны быть заменены как можно скорее загруженным шрифтом. Поэтому добавляем эту строку в наш код.

Рендеринг текста

Также в обоих приведенных выше кодах отсутствует одна важная опция - рендеринг текста, которая описывается свойством text-rendering. Это свойство CSS предоставляет информацию механизму визуализации о том, что нужно оптимизировать при рендеринге текста.

В качестве его значения подойдет optimizeLegibility, которое говорит браузеру сделать упор на удобочитаемость текста, а не на скорость его рендеринга. Это позволяет использовать кернинг и дополнительные лигатуры, т.к. некоторые шрифты могут выглядеть красиво, но их трудно читать при различных комбинациях букв.

Поскольку этот параметр обеспечивает четкость текста и облегчает чтение пользовательских шрифтов для нас, реальных пользователей, добавляем в наш код строку:

text-rendering: optimizeLegibility;

Окончательный код

Причесывая код с учетом вышеизложенных параметров, наведем дополнительный порядок в форматах шрифтов.

Кроме WOFF и WOFF2, нам не нужны другие шрифты в нашей папке /font/, поэтому удаляем их. Кроме того, WOFF2 рекомендуется использовать в первую очередь, поэтому меняем порядок загрузки форматов.

И вот как будет выглядеть в конце наш код:

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
    url('/fonts/merriweather-v28-latin-regular.woff2') format('woff2'),
    url('/fonts/merriweather-v28-latin-regular.woff') format('woff');
  text-rendering: optimizeLegibility;
}

Этот код рекомендуется размещать как можно выше в наших стилях.