Ускорьте свой веб-сайт за несколько минут, включив замену отображения веб-шрифтов — CloudSavvy IT

Сравнение шрифтов.

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

Веб-шрифты блокируются при визуализации

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Решение состоит в том, чтобы изменить способ обработки шрифтов. По умолчанию шрифты не являются обязательными, и весь текст блокируется, пока он не будет отображен с правильным шрифтом. Но у всех пользователей установлены шрифты по умолчанию, такие как 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, Предварительное подключение является особенным link опция, которая говорит браузеру идти вперед и выполнять рукопожатие HTTPS, прежде чем ему будет дана ссылка для открытия. Это значительно сокращает время выполнения двух поездок туда и обратно.

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *