Статья может быть интересна оптимизаторам, разработчикам, а также владельцам сайтов, для которых скорость среди других характеристик сайта стоит на первом месте (прямо перед красотой).
В погоне за желанной зеленой зоной 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, но название шрифта и семейства совпадают, то используется правильный шрифт, однако он подгрузился из вашего кеша. Если указаны два названия, то шрифт надо менять.
Часто неподходящие шрифты видны и невооруженным глазом — написание латиницы и кириллицы разительно отличаются.
Как решается описанная выше ситуация? Заменой неподходящих шрифтов на соответствующие языку контента сайта (примерный порядок действий описан выше). В редких случаях вы можете найти такой же шрифт с поддержкой нужного языка и использовать его.
Некорректным является и использование расширенных версий шрифтов без необходимости. Причем замечание касается как текстовых шрифтов, так и символьных.
Текстовые шрифты в «стандартной комплектации» могут содержать поддержку не только кириллицы и латиницы, а, к примеру, и греческого, и вьетнамского языков. Тут все просто: формируя наборы шрифтов, четко ограничивайте используемые языки только необходимыми.
Что касается символьных шрифтов (fontawesome, modules, revicons и т. п.), то, к примеру, шрифт от FontAwesome содержит 700–1000 иконок, хотя обычно используются 5–50 иконок. Удалив лишние иконки в шрифте с помощью специализированного редактора (например, High-Logic FontCreator), вы будете приятно удивлены изменением размера файла.
Размещение шрифтов
Загружать шрифты с Google, CDN или, наоборот, перенести их на свой сервер? На этот вопрос нет и не может быть однозначного ответа.
Изначально надо учитывать ограничения браузеров на количество одновременных загрузок с одного IP. Их в лучшем случае шесть.
Также не забывайте о возможностях, вернее, ограничениях своего тарифа на хостинге. И наконец, важно, чтобы файлы физически находились как можно ближе к посетителю страницы. Другими словами, нерационально отдавать 20 шрифтов с недорогого хостинга в Украине, если сайт предназначен для пользователей в США.
Итого, ориентируйтесь на замечания Google и здравый смысл. Общие рекомендации таковы:
1. Сайт с устоявшимся дизайном и небольшим количеством шрифтов — загружаем шрифты со своего сервера.
2. Сайт с большим количеством шрифтов — загружаем шрифты извне.
3. Сайт с плавающим дизайном, читай, набором шрифтов (постоянные доработки и «улучшения»), да еще и с визуальным редактором — шрифты только внешние.
4. Есть модифицированные или собственной разработки шрифты — такие шрифты загружаем с сервера.
Формат файла шрифта
Это отдельная тема для выражения негодования. Меня приводит в ступор размер подгружаемого шрифта под 200 Кб. А все потому, что он в формате ttf. На веб-сайтах используются такие форматы шрифтов: eot, ttf, svg, woff, woff2. Ради интереса посмотрите сравнительную таблицу поддержки форматов шрифтов браузерами.
На скриншоте ниже вы можете увидеть размеры уже оптимизированных файлов одного шрифта. Формат woff2 в три раза «легче», чем ttf. Вывод очевиден. Ваша задача проверить наличие файлов используемого на сайте шрифта в самых «легких» форматах (woff, woff2), а также правильность их записи в CSS.
Показ при загрузке
«Настройте показ всего текста во время загрузки веб-шрифтов» — одно из важных замечаний 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 секунды.
А что же делать с внешними шрифтами, стили которых находятся тоже на далеком Гугле, а значит, редактировать их не получится…
Вам нужно добавить параметр (касается только Google-шрифтов) в конец строки адреса, чтобы получилось:
Сделать эту правку вы можете непосредственно в файле, где записан этот адрес. Если же у вас сайт на Вордпресс, то попробуйте один из соответствующих плагинов.
Предзагрузка шрифтов
Когда шрифты задерживают рендеринг страницы, и их загрузка является одним из основных замедляющих факторов, 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, а также резервную копию на сервере. Почему три? Перестраховка. Редко попадаются сайты без ошибок, написанные ровными руками. Один раз мне особенно не повезло — я столкнулся с сайтом, где оба бэкапа отказались восстанавливаться как положено. В итоге я потратил весь день на восстановление сайта вручную…