Оптимизация шрифтов для ускорения загрузки сайта

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

В погоне за желанной зеленой зоной PageSpeed многие оптимизаторы сайтов забывают о такой важной составляющей процесса, как оптимизация шрифтов. Грустно видеть, когда у сайта в списке невыполненных рекомендаций Google осталась только красная (от отсутствия внимания) строка «Настройте показ текста во время загрузки сайта». Сразу скажу, что эта рекомендация — лишь вершина айсберга. В этой статье я поделюсь проверенными методами выполнения рекомендации Google и максимального уменьшения влияния шрифтов на время загрузки сайта.

Вот список «шрифтовых» настроек, которые влияют на скорость загрузки сайта:

Рассмотрим каждый пункт отдельно.

Количество шрифтов

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

На быстрых сайтах обычно используется 1–3 разных шрифта с 3–4 начертаниями каждый.

Между тем многие сайты позволяют себе 5–8 шрифтов без ограничения числа начертаний. На деле это приводит к задержке в загрузке страниц на 2–5 секунд и скачиванию 2–5 Мб дополнительных данных. Тогда как страница должна загружаться за 1–3 секунды и иметь общий объем данных до 2 Мб.

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

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

Часто у шрифтов бывают отдельные файлы начертаний (font-style, font-weight), которые различаются по толщине, размеру и наклону символов. Они могут называться как словами (regular, italic), так и цифрами (300, 900). Необходимо следить, чтобы на странице подгружались только используемые начертания, при этом минимизировав их количество (3-5 обычно достаточно).

С этим придется повозиться, так как не всегда понятно, «кто» подтягивает конкретный шрифт.

Очень упрощенно стандартная цепочка возникновения на странице шрифта выглядит так:

  • блоку с текстом назначен класс <div class=”text-1”>Текст</div>
  • в одном из .css файлов этому классу прописано свойство font-family с названием шрифта
    .text-1{font-family:’Poppins’}
  • отдельно (чаще всего) существует .css файл с описанием конкретно этого шрифта и ссылками на файлы шрифта
    @font-face{font-family: ’Poppins’;src:url('../fonts/Poppins.woff2') format('woff2')}
  • При этом перечисленные .css тоже вызываются ссылками в других файлах.

Прервать эту цепочку и тем самым избежать загрузки конкретного файла шрифта можно на любом этапе, но чтобы при этом не появились ошибки в консоли (и не остались лишние запросы), лучше редактировать стиль оформления блока. То есть нужно найти все упоминания неприемлемого названия и заменить на нужные вам. Грубо говоря, если на странице используются шрифты Poppins и Roboto, а вы хотите избавиться от Poppins-а, то меняйте значение font-family с Poppins на Roboto.

Где искать? Посмотрите, в каком блоке используется шрифт, в какой папке находится файл стилей шрифта, поищите файл с названием шрифта или просмотрите список файлов .css в консоли (вкладка Network). Способов поиска много, включая поиск по содержимому файлов (скачайте сайт себе на диск, установите Notepad++ и сможете искать внутри файлов).

В случае использования внешних шрифтов (чаще всего Google Fonts) вам нужно искать не файл стилей, а строку запроса к нему. А после нахождения — удалить или закомментировать ее. Закомментировать (превратить в текстовый комментарий) в зависимости от формата файла можно одним из методов:

PHP, CSS: /* style */
HTML: <!-- style -->

В принципе, вы можете обойтись и без поиска в файлах, прописав замену с пометкой «важно»:

.text-1{font-family:Roboto!important}

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

*{font-family:’Roboto’!important}

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

Подбор шрифтов

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

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

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

Вы можете воспользоваться расширением браузера Chrome под названием Font Finder. Для этого нажмите на значок расширения на панели браузера и потом кликните на один из текстовых блоков сайта. В появившемся окне инспектора ищите строку «Font being Rendered» (какой шрифт используется). Название шрифта должно совпадать с названием семейства шрифтов (font-family, на строку выше). Справа при этом могут быть такие отметки: local (использован шрифт на вашем ПК), remote (шрифт загружен извне). Идеальный вариант — remote — стили шрифта работают корректно. Если local, но название шрифта и семейства совпадают, то используется правильный шрифт, однако он подгрузился из вашего кеша. Если указаны два названия, то шрифт надо менять.

Font being Rendered inspector

Часто неподходящие шрифты видны и невооруженным глазом — написание латиницы и кириллицы разительно отличаются.

wrong fonts cyrillic latin

Как решается описанная выше ситуация? Заменой неподходящих шрифтов на соответствующие языку контента сайта (примерный порядок действий описан выше). В редких случаях вы можете найти такой же шрифт с поддержкой нужного языка и использовать его.

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

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

Что касается символьных шрифтов (fontawesome, modules, revicons и т. п.), то, к примеру, шрифт от FontAwesome содержит 700–1000 иконок, хотя обычно используются 5–50 иконок. Удалив лишние иконки в шрифте с помощью специализированного редактора (например, High-Logic FontCreator), вы будете приятно удивлены изменением размера файла.

Размещение шрифтов

Загружать шрифты с Google, CDN или, наоборот, перенести их на свой сервер? На этот вопрос нет и не может быть однозначного ответа.

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

table browser connection limitations

Также не забывайте о возможностях, вернее, ограничениях своего тарифа на хостинге. И наконец, важно, чтобы файлы физически находились как можно ближе к посетителю страницы. Другими словами, нерационально отдавать 20 шрифтов с недорогого хостинга в Украине, если сайт предназначен для пользователей в США.

Итого, ориентируйтесь на замечания Google и здравый смысл. Общие рекомендации таковы:

1. Сайт с устоявшимся дизайном и небольшим количеством шрифтов — загружаем шрифты со своего сервера.

2. Сайт с большим количеством шрифтов — загружаем шрифты извне.

3. Сайт с плавающим дизайном, читай, набором шрифтов (постоянные доработки и «улучшения»), да еще и с визуальным редактором — шрифты только внешние.

4. Есть модифицированные или собственной разработки шрифты — такие шрифты загружаем с сервера.

Формат файла шрифта

Это отдельная тема для выражения негодования. Меня приводит в ступор размер подгружаемого шрифта под 200 Кб. А все потому, что он в формате ttf. На веб-сайтах используются такие форматы шрифтов: eot, ttf, svg, woff, woff2. Ради интереса посмотрите сравнительную таблицу поддержки форматов шрифтов браузерами.

supported fonts by browsers

На скриншоте ниже вы можете увидеть размеры уже оптимизированных файлов одного шрифта. Формат woff2 в три раза «легче», чем ttf. Вывод очевиден. Ваша задача проверить наличие файлов используемого на сайте шрифта в самых «легких» форматах (woff, woff2), а также правильность их записи в CSS.

font format and size

Показ при загрузке

«Настройте показ всего текста во время загрузки веб-шрифтов» — одно из важных замечаний PageSpeed Insights. Расшифровывается это просто: текст не отображается на странице, пока не загрузится файл шрифта. То есть какое-то время посетитель вынужден «пялиться» на белый экран.

Решается эта проблема добавлением свойства «font-display:swap» в стили шрифта, благодаря чему до загрузки файла вашего шрифта текст отображается системным шрифтом. Самое сложное — найти файлы, где эти самые стили прописаны (см. выше).

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

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v18-cyrillic-regular.eot'); /* IE9 Compat Modes */src: local(''),
url('../fonts/open-sans-v18-cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v18-cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v18-cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v18-cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v18-cyrillic-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
font-display:swap /* Эту строку вам и надо добавить */}

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

А что же делать с внешними шрифтами, стили которых находятся тоже на далеком Гугле, а значит, редактировать их не получится…

https://fonts.googleapis.com/css?family=Montserrat:100

Вам нужно добавить параметр (касается только Google-шрифтов) в конец строки адреса, чтобы получилось:

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

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

Предзагрузка шрифтов

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

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

Конечно, можно заморочиться и прописать условия предзагрузки в зависимости от страницы, но оно вам точно надо?

Предзагрузить шрифт можно плагинами (Вордпресс) или по старинке, прописав код в хедере сайта.

<link rel="preload" as="font" href="roboto.woff2?v=4.5.0" crossorigin>

Обратите внимание на версию файла (?v=4.5.0). Если Google в своем замечании показывает адрес шрифта с версией, значит в preload нужно использовать ее. Иначе браузер дважды загрузит один и тот же файл.

Счастливые обладатели сайтов на Вордпресс имеют возможность настроить preload в functions.php.

add_action( 'wp_head', function () {
$fonts_dir = get_template_directory_uri() . '/fonts/';?>
<link rel="preload" href="<?php echo plugins_url( '/fonts/roboto.woff' ); ?>" as="font" type="font/woff" crossorigin>
<?php } );

Продолжим затронутую тему блокировки рендеринга шрифтами. Допустим, вы уменьшили размер файлов шрифтов и их количество, добавили «фонт-дисплей», а неблагодарный Google пишет «Устраните ресурсы, блокирующие отображение», и среди таких ресурсов указан css-файл шрифта… Иногда файл лежит на сервере, но чаще всего это будет запрос к Google-шрифтам. Общеизвестный, хоть и спорный способ сделать загрузку шрифтов асинхронной — это предзагрузить стиль с неверным типом содержимого, а после загрузки страницы изменить тип. Способ подробно расписан здесь.

Полезное

В завершение поделюсь ссылками на несколько полезных ресурсов.

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

Transfonter — прихо́дите сюда с одним файлом шрифта, а получаете: архив со шрифтом во всех форматах + корректный CSS.

google-webfonts-helper — незаменимый сайт для переноса Google-шрифтов на сервер, полноценный конструктор.

И еще один совет: бэкапы.

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

Я взял себе за правило делать до начала работ на Вордпресс-сайте два-три бэкапа: плагинами Updraft и Duplicator, а также резервную копию на сервере. Почему три? Перестраховка. Редко попадаются сайты без ошибок, написанные ровными руками. Один раз мне особенно не повезло — я столкнулся с сайтом, где оба бэкапа отказались восстанавливаться как положено. В итоге я потратил весь день на восстановление сайта вручную…


От редакции. Спасибо Константину за то, что поделилися практической информацией.