Настройте предварительную загрузку ключевых запросов шрифты

PageSpeed Insights – Настройте предварительную загрузку ключевых запросов

FontAwesome (и другие шрифты) оптимизируем для Elementor

При очередном ускорении сайта, сервис PageSpeed Insights выдавал предупреждение:

Lighthouse was unable to automatically check the font-display value for the following URL: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/fontawesome-webfont.woff2.

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

Отключаем стили которые вызывают проблемные шрифты

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

И для начала нам нужно определиться со стилями которые вызывают “проблемные” шрифты. Для этого возвращаемся на страницу PageSpeed Insights и переходим к разделу…

Настройте показ всего текста во время загрузки веб-шрифтов

Здесь мы видим то количество шрифтов с которым нам и придется позаморачиваться. Что ж начнем.

После того как имя шрифта нам известно нужно найти тот css файл который отвечает за его подключение. Для этого Вам в помощь поиск по файлам в NotePad программе ++.

Далее найдите место в котором происходит подключение данного стиля и отключите его. В данной статье я подробно объяснил как это сделать.

Отключение и переподключение стилей вызывающих шрифты

Отключение

Благодаря коду ниже я произвел отключение стилей плагина Elementor и темы Astra, которые вызывали шрифты указанные в рекомендациях PageSpeed Insights . Данный код нужно добавить в function.php или в файл Вашего плагина.

Подключение Теперь когда стили были отключены создайте копии стилей где нибудь в удобной для Вас папке. В теле стилей Вам необходимо будет отключить подключение шрифта. Для этого просто закомментируйте код подключения. Для примера возьмем файл font-awesome.css плагина Elementor, который у него находится здесь:

Я его перенес в папку

И в данном CSS файле закомментировал код отвечающий за подключение шрифта:

Но как же теперь подключить шрифт? Спросите Вы, и будете очень правы… А подключать мы его будем в файле header.php. Да, этот метод добавит немного “хард кора” в тело страницы, но для получения нужного результата (а именно, сразу появляющийся текст при загрузке страницы) на сайте под управлением WordPress я другого пути не нашел.

Подключение шрифтов

И так мы отключили стили, сделали их переподключение, закомментировали код подключения файлов шрифта. Также скопировали данные шрифты в папку /fonts нашего сайта. Верно?

Тогда едем дальше.

Открываем header.php и под добавляем код ниже:

Готово, шрифты иконок успешно были подключены.

Как оптимизировать шрифты подключенные через Пользовательские шрифты в Elementor’е

Во первых переходим к нужному шрифту и изменяем путь к шрифту:

Во вторых, необходимо пересобрать все css стили и произвести обновление библиотеки:

Далее добавляем стили и link в header.php как указано коде ниже:

Важные заметки при подключении и стилей

Дополнения в окончании ссылок

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

Обратите внимание на окончание ссылки в данной строке:

А именно на ? #iefix

Дак вот, данного окончания не должно быть, то есть четко только ссылка на файл шрифта и после формата (в данном примере .eot ) не должно быть не каких добавлений.

Структура стилей

Итог моей работы показал что самый хорошо определяемый (сервисом PageSpeed Insights) формат стилей для шрифтов имеет такой вид:

Итоги

В данной статье мы рассмотрели каким образом можно переподключить шрифты сайта для ускоренного его отображения при загрузке страницы. Так же мы рассмотрели как можно работать с подключением, отключением и пере подключением как шрифтов так и стилей плагинов, для того чтобы достичь максимальное количество баллов производительности на сайте PageSpeed Insights. С Вами был Сергей Дудченко, спасибо за внимание.

Источник

Предварительная загрузка шрифтов

Начало работы

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

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

И, наконец, ссылка на файл шрифта была размещена во встроенном в страницу CSS-коде, в верхней части HTML-кода, а не во внешнем CSS-файле.

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

Неожиданность

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

В результате я ожидал того, что файл шрифта будет загружен очень быстро. Страницы моего ресурса были, в любом случае, достаточно «лёгкими», поэтому я полагал, что загрузке файла шрифта ничто не должно помешать.

Когда же я проанализировал сайт, я был слегка шокирован.

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

Изображения загружаются до загрузки шрифта

Мне это показалось полной бессмыслицей.

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

Предварительная загрузка шрифтов как решение проблемы

Атрибут preload указывает браузеру на то, что ему необходимо заранее загрузить соответствующий ресурс, нужный для вывода текущей страницы.

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

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

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

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

Я не ожидал, что на этом сайте мне придётся использовать механизмы предварительной загрузки ресурсов. Мой CSS-код весьма скромен, я встроил его в HTML-код страницы, поступив так для того, чтобы страницы быстрее выводились бы браузерами при первом посещении сайта. Так как мой шрифт не зависел от загрузки внешнего CSS-файла, браузер, в любом случае, должен был бы обнаружить его очень рано и без «подсказок» по поводу предварительной загрузки.

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

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

Предварительная загрузка и работа с файлом шрифта.

Возможно, полезнее будет рассмотреть раскадровку процесса загрузки страницы (здесь, для наглядности, использовалась имитация очень медленного соединения).

В верхней раскадровке предварительная загрузка не используется. В нижней — используется

Попутно отмечу, что я использовал дескриптор font-display: fallback . То есть — заголовок изначально выводился с использованием резервного шрифта в том случае, если мой шрифт загружался медленно. Однако для данного теста я эту возможность отключил, так как иначе очень сложно было бы различать этапы загрузки страницы.

Почему это сработало?

Для того чтобы вывести веб-страницу, браузеру нужно построить дерево DOM и дерево CSSOM, которые позже используются для построения дерева рендеринга.

Возникает такое ощущение, что использование для загрузки шрифта элемента
с атрибутом preload позволяет браузеру приступить к построению CSSOM до завершения создания DOM.

Увидеть это можно на следующих изображениях, на которых показано исследование процесса загрузки страницы с помощью инструментов разработчика Chrome.

Вот как выглядит работа с материалами страницы без использования предварительной загрузки. Сначала создаётся DOM и выполняется загрузка изображений, потом начинается создание CSSOM и выполняется загрузка шрифта.

Работа со страницей без использования предварительной загрузки

А вот — то же самое, но уже с применением предварительной загрузки. Здесь браузер приступает к созданию CSSOM, начинает загрузку шрифта, а потом уже создаёт DOM и начинает загрузку изображений.

Работа со страницей с использованием предварительной загрузки

Есть ли альтернативы предварительной загрузке?

Предположим, я не смог использовать атрибут preload для повышения приоритета файла шрифта. Как мне можно было бы тогда поступить? Как можно было бы понизить приоритет изображений?

Я, из любопытства, попытался реализовать вышеописанную идею и добавил к элементам, описывающим изображения, атрибут loading=»lazy» . В Chrome 76 (единственный браузер, который на момент написания статьи это поддерживал) это должно было бы понизить приоритет изображений, находящихся за пределами исходной видимой области страницы.

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

Разные браузеры ведут себя по-разному

Я протестировал проект в нескольких различных браузерах и на нескольких устройствах. В ходе испытаний я выяснил, что iOS Safari (iPhone 8) демонстрирует то же поведение, что и Chrome. А именно, шрифты, по умолчанию, загружаются после изображений, но использование атрибута preload позволяет исправить ситуацию.

Проблема поздней загрузки шрифтов возникла и в Firefox, но атрибут preload пока не поддерживается этим браузером по умолчанию, поэтому использование атрибута preload при просмотре сайта в Firefox ничего не изменило.

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

Я в предыдущем абзаце говорил о том, что у меня «возникло ощущение», и о том, что мне «показалось». Дело в том, что когда я попытался проверить это поведение с использованием собственной версии Edge, «двойные» загрузки пропали. Теперь у меня возникло такое ощущение, что использование атрибута preload не приводит к ускорению загрузки шрифтов. Возможно, такая разница в поведении страницы стала следствием исправления некоей ошибки в Edge, хотя если это так — ошибку исправили ценой изменения механизма предварительной загрузки ресурсов.

Итоги

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

Браузеры не всегда ведут себя так, как мы того хотим, или так, как мы того от них ожидаем. Но у нас есть инструменты, которые помогают повлиять на поведение браузеров, помогают склонить их в нужную нам сторону.

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

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

Уважаемые читатели! Используете ли вы механизмы предварительной загрузки шрифтов в своих веб-проектах?

Источник

Оптимизируем загрузку шрифтов Google

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

Справедливости ради стоит сказать, что шрифты Google чрезвычайно популярны. На момент написания этой статьи, их просмотрели в Интернете более 29 триллионов раз, и легко понять, почему – сервис предоставляет доступ к более чем 900 красивым шрифтам, которые вы можете бесплатно использовать на своем веб-сайте. Без шрифтов Google вы были бы ограничены несколькими, так называемыми, «системными шрифтами», установленными на устройстве пользователя.

Системные шрифты или «безопасные веб-шрифты» – это шрифты, которые чаще всего предустанавливаются в операционных системах. Например, шрифты Arial и Georgia поставляются с дистрибутивами Windows, macOS и Linux.

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

Шрифты Google уже оптимизированы

Google Fonts API делает больше, чем просто предоставляет файлы шрифтов в браузер, он также выполняет умную проверку, чтобы увидеть, как он может предоставить файлы в наиболее оптимизированном формате.

Давайте посмотрим на шрифт Roboto. GitHub говорит нам, что стандартный вариант этого шрифта весит 168kb:

Тем не менее, если запросить этот же вариант шрифта у Google Font API, то вы получите файл, размер которого будет всего 11kb. Как такое возможно?

Когда браузер делает запрос к API, Google сначала проверяет, какие типы файлов поддерживает браузер. Если вы используете последнюю версию Chrome, которая, как и большинство браузеров, поддерживает формат WOFF2, то шрифт будет предоставлен в этом сильно сжатом формате.

Если же заменить браузер на Internet Explorer 11, то вы получите шрифт в формате WOFF.

Наконец, если заменить браузер на IE8, то вы получите шрифт в формате EOT (Embedded OpenType).

Google Fonts поддерживает более 30 оптимизированных вариантов для каждого шрифта и автоматически определяет и предоставляет оптимальный вариант для каждой платформы и браузера. Илья Григорик

Это отличная особенность Google Fonts, — проверяя пользовательский агент, сервис предоставляет наиболее эффективные форматы шрифтов, которые поддерживает браузер.

Кэширование в браузере

Еще одна встроенная оптимизация Google Fonts — кеширование в браузере.

Из-за вездесущей природы Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. Например, сайт SmashingMagazine использует шрифт «Mija», если ваш браузер впервые видит этот шрифт, ему нужно будет полностью загрузить его до отображения текста, но при следующем посещении веб-сайта, использующего этот шрифт, браузер возьмет уже кэшированную версию.

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

Срок действия кэша браузера Google Fonts истекает через год, если он не будет очищен раньше.

Примечание: Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

Возможна дополнительная оптимизация

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

1. Ограничение семейств шрифтов

Самая простая оптимизация — использовать как можно меньше семейств шрифтов. Каждый шрифт может добавлять к весу вашей страницы до 400 КБ. Умножьте на несколько разных семейств шрифтов, и вот уже шрифты весят больше, чем вся ваша страница.

Мы рекомендуем использовать не более двух шрифтов — один для заголовков и другой для содержимого. Как правило, этого бывает вполне достаточно. При правильном использовании свойств font-size, font-weight и color можно добиться превосходного результата даже с одним шрифтом.

Три разных значения font-weight одного семейства шрифтов (Source Sans Pro):

2. Исключайте ненужные варианты

Благодаря высокому стандарту качества шрифтов Google многие семейства шрифтов содержат полный спектр доступных значений для свойства font-weight:

• тонкий (100)
• тонкий курсив (100i)
• светлый (300)
• светлый курсив (300i)
• обычный (400)
• обычный курсив (400i)
• средний (600)
• средний курсив (600i)
• жирный (700)
• жирный курсив (700i)
• черный (800)
• черный курсив (800i)

Это отлично подходит для продвинутых сценариев использования, в которых могут потребоваться все 12 вариантов, но для обычного веб-сайта это означает загрузку всех 12 вариантов, когда вам может понадобиться только 3 или 4.

Например, семейство шрифтов Roboto весит

144 КБ. Однако, если вы используете только варианты «обычный», «обычный курсив» и «жирный», то это число уменьшается до

36 КБ. Экономия 75%!

Код по умолчанию для загрузки шрифтов Google выглядит следующим образом:

Если вы так сделаете, то загрузится только вариант ‘обычный 400’. Это означает, что весь светлый, жирный и курсивный текст будет отображаться неправильно.

Чтобы вместо этого загрузить все варианты шрифтов, нам нужно указать их в URL вызова следующим образом:

Однако, очень редко веб-сайт использует все варианты шрифта от тонкого (100) до черного (900). И здесь оптимальной стратегией будет указать только те варианты, которые вы планируете использовать:

Это особенно важно, когда используется несколько семейств шрифтов. Например, если вы используете Lato для заголовков, имеет смысл запрашивать только жирный вариант (и, возможно, еще жирный курсив):

3. Объединяйте запросы

Фрагмент кода, с которым мы работали выше, обращается к серверам Google (fonts.googleapis.com). Это называется HTTP запросом. При этом, чем больше HTTP запросов делает ваша веб-страница, тем дольше она загружается.

Если вы хотите загрузить два шрифта, то вы можете сделать так:

Это отлично будет работать, но приведет к тому, что браузер сделает два запроса. Мы же можем оптимизировать это объединив все в один запрос:

При этом не существует ограничений на количество шрифтов и вариантов в одном запросе.

4. Ресурсные указания

Ресурсные указания – это особые функции, поддерживаемые современными браузерами, которые могут повысить производительность сайта. Мы рассмотрим два таких указания: «Предварительная выборка DNS» и «Предварительное подключение».

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

Предварительная выборка DNS
Предварительная выборка DNS позволяет браузеру начать подключение к Google Fonts API (fonts.googleapis.com), как только страница начнет загружаться. Это означает, что к тому времени, когда браузер готов сделать запрос, часть работы уже будет выполнена.

Чтобы реализовать предварительную выборку DNS для шрифтов Google, просто добавьте на свои веб-страницы в секции такую строчку:

Предварительное подключение
Если вы посмотрите на код добавления шрифтов Google Fonts, то вам покажется, что это будет один HTTP запрос:

Однако, если мы посетим этот URL, то мы увидим еще три запроса на другой URL — https://fonts.gstatic.com. Один дополнительный запрос для каждого варианта шрифта.

Проблема с этими дополнительными запросами заключается в том, что браузер не начнет выполнять эти процессы до тех пор, пока не будет выполнен первый запрос https://fonts.googleapis.com/css. Вот здесь и может помочь Предварительное подключение.

Предварительное подключение — это своего рода расширенная версия предварительной выборки. Оно устанавливается на конкретном URL, который браузер собирается загрузить. Вместо того, чтобы просто выполнять поиск DNS, также завершается согласование TLS и TCP синхронизация.

Как и в случае с Предварительной выборкой DNS, предварительное подключение может быть реализовано с помощью одной строки кода:

Просто добавив эту строчку кода можно сократить время загрузки страницы на 100 мс. Это становится возможным благодаря запуску соединения одновременно с первоначальным запросом, а не по окончанию ожидания его завершения.

5. Размещение шрифтов локально

Шрифты Google распространяются по лицензии «Libre» или как «свободное программное обеспечение», что дает вам свободу использовать, изменять и распространять шрифты без запроса разрешения. Это означает, что, если вы не хотите, то можете не использовать хостинг Google. Вы можете размещать эти шрифты на своем сервере!

Все файлы шрифтов доступны на Github. Также, можно скачать файл архива zip, содержащий все шрифты (387MB).

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

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

6. Отображение шрифта

Известно, что для загрузки шрифта Google браузеру требуется время. Но что будет с текстом, до того как шрифты будут готовы к использованию? Долгое время было так, что там, где должен находиться текст, браузер отображал пустое место.

Если ничего не показывать, то это может негативно сказаться на восприятии вашего сайта конечным пользователем. Было бы лучше в качестве запасного варианта использовать системный шрифт, а когда шрифт Google будет готов к использованию, просто «поменять» их. Это можно сделать при помощи CSS свойства font-display.

Добавляя значение font-display: swap; в декларацию @font-face, мы предписываем браузеру показывать запасной шрифт до тех пор, пока не станет доступен шрифт Google.

В 2019 году Google объявил, что добавляет поддержку font-display: swap. Для его использования достаточно добавить дополнительный параметр к URL шрифтов:

7. Используйте параметр Text

Малоизвестная особенность Google Fonts API – это параметр text. Этот редко используемый параметр позволяет загружать только те символы, которые вам нужны.

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

Это работает так:

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

Примечание: По умолчанию при использовании параметра text загружается только вариант шрифта «Обычный». Чтобы использовать другой вариант, вы должны явно указать его в URL.

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

Источник