Оптимизация шрифтов

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

Как проходит работа? 

Оптимизация проводится в 4 этапа:
•    подбор требуемого набора (он не должен быть большим по размеру, важно оставить только используемые шрифты);
•    обращение к возможностям Google Fonts API или самостоятельное размещение на хостинге;
•    кэширование файла, чтобы обеспечить ускоренную загрузку;
•    настройка отложенной отрисовки. 

Использование разработки Google 

Предстоит решить проблему с размером файлов шрифтов, которые необходимо загружать на странице. Это приводит к увеличению времени загрузки, что раздражает пользователей и является причиной скорого ухода со страницы. Проблема имеет несколько решений.
Проводится инвентаризация, то есть удаляются неиспользуемые символы. Инвентаризовать требуется и все варианты написания (жирный, курсивный). Благодаря Fonts API возможно загружать не весь набор, а только необходимые варианты и символы, которые требуются для определенной страницы. Инструмент text={letters} позволяет оставить требуемые символы, если, например, выбранный шрифт применяется только для заголовков. Это способствует ускорению загрузки ресурса. 

Оптимизация размеров 

Работа складывается из нескольких этапов: обратной совместимости, сжатия и устранения ненужных глифов. Важно просмотреть набор шрифтов и определиться, какие из них требуется использовать на ресурсе. Определим этапы работы подробнее:
•    Обеспечение обратной совместимости. Символы должны адекватно отображаться на гаджетах, в том числе на смартфонах и планшетах. Текст должен быть удобным для чтения в любых браузерах. Для этого требуется внести информацию, какое запасное шрифтовое семейство допустимо применить, если набор символов окажется недоступным. Подходящая альтернатива прописывается в font-face.
•    Сжатие. При использовании статического сжатия создаются архивные файлы. Для динамического сжатия необходимо убедиться, что шрифтовые форматы передаются с хостинга в сжатом состоянии. Это позволит уменьшить размер на 20–50%.
•    Устранение неиспользуемых глифов. Чтобы отображать тексты, не нужны все символы, включенные в стандартный набор. Многие из них относятся к иным языкам, при этом в стандартном наборе присутствуют символы, которые используются редко. Для их удаления используется Font Squirrel или другое программное обеспечение. Уменьшение количества глифов обеспечивает сокращение файла минимум на 10%. 

Использование трех методик гарантирует адекватное изображение букв на мониторах любых устройств, при этом скорость загрузки страницы увеличивается. Применение их в облаке сокращает величину шрифтов, поступающих с хостинга, минимум на 80%. Эффективной методикой является отложенная загрузка. Кэширование файлов сокращает время загрузки страницы при повторных посещениях. Применение технологий Font Loading API позволяет перерисовать шрифт страницы за несколько миллисекунд, поэтому посетители не заметят задержки.