Включите замену отображения веб-шрифтов, чтобы ускорить работу вашего веб-сайта

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

Веб-шрифты блокируют рендеринг

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

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

Решение состоит в том, чтобы изменить способ обработки шрифтов. По умолчанию шрифты не являются необязательными, и весь текст блокируется до тех пор, пока он не будет отображен с использованием правильного шрифта. Но у всех пользователей установлены шрифты по умолчанию, такие как Arial и Times New Roman, поэтому можно сначала отобразить эти шрифты, а затем переключиться на веб-шрифт после его загрузки.

Вы можете указать это поведение в своей директиве @font-face, используя параметр font-display :

@font-face {
  font-display: swap;
}

Однако, если вы используете Google Fonts, директива font-face будет определена в файле CSS, который они предоставляют вам для добавления шрифта. Таким образом, вы не можете редактировать его напрямую, но, к счастью, Google недавно добавил поддержку font-display: swap в API. Он должен быть установлен по умолчанию, если вы добавляете новый шрифт, но если вы добавили шрифт некоторое время назад, вы можете обновить его, добавив параметр &display=swap URL в конце:

https://fonts.googleapis.com/css?family=Lobster&display=swap

Это все, что вам нужно сделать. Как только для шрифта установлено значение swap, он перестанет блокировать рендеринг. Вы можете заметить, что ваш сайт загружается со шрифтом по умолчанию, прежде чем быстро перейти на обновленный; чтобы свести к минимуму эту проблему, найдите шрифт по умолчанию, который наиболее точно соответствует вашему основному веб-шрифту. Большинство пользователей настольных компьютеров, вероятно, не заметят его вместе с остальной загрузкой страницы, хотя, если у пользователя медленное мобильное соединение, они могут заметить, что шрифт появляется через секунду.

Если вы не пытаетесь выжать каждую миллисекунду производительности, вы можете использовать другой вариант: параметр font-display: fallback отобразит блок в течение короткого промежутка времени (не более 100 мс в большинстве браузеров), а затем возвращаются к замене всякий раз, когда шрифт решает загрузиться. Это избавляет от проблемы мигания для большинства пользователей настольных компьютеров с хорошим подключением, но добавляет время загрузки в худшем случае ~ 100 мс (в зависимости от браузера), если шрифт не загружается вовремя.

Предварительно подключите fonts.gstatic.com

Этот совет не влияет на аспект блокировки рендеринга веб-шрифтов, но, в частности, ускоряет работу шрифтов Google.

Когда клиенту необходимо получить ресурс из другого источника, он должен выполнить рукопожатие TCP и (если сайт был создан в любое время в этом десятилетии) установить безопасное соединение HTTPS. Это требует времени, поэтому выполнение ненужных циклических обходов замедлит загрузку.

Это именно то, что делают Google Fonts. Сначала загружается таблица стилей CSS с сайта fonts.googleapis.com со всей информацией о шрифтах. Затем считывается параметр src начертания шрифта, и клиент подключается к fonts.gstatic.com , чтобы загрузить шрифт. Проблема здесь в том, что файл шрифта, который нам нужен, скрыт за таблицей стилей CSS в другом источнике.

Чтобы решить эту проблему, вы можете предварительно подключить fonts.gstatic.com. Предварительное подключение – это специальный параметр ссылка , который сообщает браузеру, что нужно продолжить и выполнить рукопожатие HTTPS до того, как ему будет предоставлена ссылка для открытия. Это значительно сокращает задержку при выполнении двух таких циклов.

Вы можете предварительно подключиться с помощью следующего тега link :

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Параметр crossorigin указывает браузеру выполнять рукопожатие HTTPS, а не простой поиск DNS (поведение по умолчанию).

Если вы сами обслуживаете шрифты, убедитесь, что ваши заголовки Cache-Control настроены правильно, чтобы ваши шрифты загружались из кеша при повторном посещении пользователем. Вы также можете рассмотреть возможность использования CDN, если хотите размещать шрифты самостоятельно, так как это сократит задержку при запросах статических объектов.