Ускорение загрузки шрифтов на сайте
Опубликовано: 01.09.2018
На сегодняшний день почти каждый сайт использует те или иные шрифты (включая иконки) для улучшения удобства коммуникации с пользователями и создания уникального стиля. Еще 20 лет назад на веб-сайтах сложно было встретить какие-либо шрифты кроме стандартного Times New Roman или Helvetica, сейчас же шрифты является неотъемлемой частью веба.
Кроме очевидных удобств использования шрифты создают до 50% дополнительного времени ожидания при загрузке (отрисовке) первого экрана сайта. Мы уже разбирали как оптимизировать загрузку шрифтов на сайте, в этом материале подробнее поговорим, что дополнительно можно внедрить уже после проведенной оптимизации для улучшения ситуации со скоростью сайта.
Метрики скорости сайта: размер подключаемых шрифтов
Краткая история веб-типографики
Началось все в 1995 году, когда Netscape добавил поддержку тега font и возможность стилизовать текст страниц с помощью системного шрифта. Это позволило использовать порядка 10 различных шрифтов во всех браузерах. В 1997 году Internet Explorer добавил поддержку загружаемого шрифта в формате EOT (который был всеми отвергнут), это положило начало использованию @font-face в том виде, как мы его знаем сейчас.
Следующие 10 лет разработчики стандартов были сфокусированы на более глобальных вещах, поэтому рядовым веб-мастерам приходилось «изобретать велосипеды». Наиболее распространенной техникой «специальных» шрифтов на страницах сайта стали подмена изображениями, FLIR, (да-да, создавалась сотня изображений с «глифами» дизайнерского шрифта, которая использовалась для стилизации заголовков), Cufon (когда использовался JavaScript и векторная графика в связке SVG + VML) и sIFR на Flash . Последний подход работал в большинстве браузеров того времени, ибо поддержка Flash была очень широкой (вплоть до 98% в лучшие годы).
В 2006 году CTO Opera, Hakon Wium, развернул целую кампанию против использования формата EOT для веб-шрифтов, поскольку Microsoft закончила поддерживать развитие этого формата в 2002 году. В результате, в большинство браузеров была добавлена поддержка альтернативных, типографских, форматов, TTF и OTF, и к 2009 году использование font-face, практически, было утверждено в текущем варианте: множество различных форматов для разных браузеров.
Последней вехой в 2010 году стало появление формата WOFF, Web Open Font Format, который смог собрать лучшее из TTF и OTF, включая сжатие «из коробки» и дополнительные мета-данные, и запуск сервиса Google Fonts , который стал стандартом «де факто» для подключения нестандартных шрифтов.
Почему веб-шрифты такие медленные?
После окончания войны форматов (WOFF поддерживается 94% всех браузеров) веб-шрифтов началась война за скорость. В процессе разработки формата удалось договориться о подключении разных файлов шрифтов для разных браузеров в соответствии с их поддержкой этих форматов: это уже решило существенную часть проблем (для сравнения можно вспомнить еще недавние времена, когда в файл стилей записывались все возможные стили для всех браузеров, чтобы не загружать их отдельными файлами).
Но это не решило основную проблему производительности: загрузка шрифтов существенно блокировала отрисовку страниц сайта, и при большом количестве различных шрифтов сайт ужасно тормозил. Причин для этого несколько:
Большой размер файлов шрифтов: один нестандартный шрифт «весит» как все стили сайта (шрифт — бинарные векторные данные множества букв, глифов, а стили — это обычный текст, CSS код). Несколько нестандартных шрифтов нескольких начертаний уже существенно блокируют отрисовку страниц сайта.
Блокировка отрисовки страниц: текст на сайте, для которого назначен нестандартный шрифт, может быть отображен только после загрузки этого шрифта в браузере (ведь это могут быть иконки или штрих-коды). Из-за этого в большинстве случаев пользователь видит белый экран в браузере пока не загрузились нужные шрифты (а они могут быть очень большого размера).
Ускоряем загрузку шрифтов
Подробная инструкция, как работать с большим размером шрифтов, уже была опубликована. В этом материале разберем все подходы для устранения блокировки отрисовки страниц шрифтами, предполагая, что все меры по уменьшению их размера уже приняты.
Веб-разработчики ввели несколько сокращений, описывающих ситуации при загрузке шрифтов на сайте. Это FOIT (Flash of Invisible Text) – невидимый текст на странице по причине отсутствия шрифта в браузере для его отображения (в некоторых случаях сводится к появлению квадратов на месте иконок), FOUT (Flash of Unstyled Text) – отрисовка текста в неверной (запасной) гарнитуре по причине отсутствия шрифта и FOFT (Flash of Faux Text) – отрисовка текста в поддельной гарнитуре (лже-наклонной и лже-полужирной), базирующейся на обычном начертании шрифта при отсутствии специальных начертаний.
Механизмы работы с порядком загрузки шрифтов в браузере уже достаточно хорошо описаны, поэтому приведу конечную схему:
Мы разберем финальные варианты из этой схемы с некоторыми прикладными улучшениями.
Практические рекомендации
Для избежания FOIT на странице, минимизации времени FOUT или FOFT необходимо к загрузке файлов шрифтов применить следующие меры:
Добавить во все не-иконочные определения запасные варианты, максимально соответствующие нужной гарнитуре. На текущий момент кроме большого набора «стандартных» шрифтов браузеры также поддерживают общие начертания serif (с засечками), sans-serif (без засечек), monospace (моноширинные), cursive (от руки), fantasy (декоративные). Каждое назначение гарнитуры в CSS (через правила font*) должно оканчиваться одним из них. Например:
font - family : "Avenir Next Cyr" , Tahoma , sans - serif ; |
& lt ; link rel = ”preload” as = ”font” href = ” / assets / fonts / AvenirNextCyr - BoldItalic . woff” type = ” font / woff” crossorigin & gt ; |
Вопрос использования FOFT для ускорения отображения текста является дискуссионным (во многих случаях проще положиться на запасные шрифты), но может помочь вам в ряде контентных проектов.
Источник
Похожие материалы:
Автор публикации
не в сети 2 дня
admin
создание сайтов, seo, smm
Комментарии: 50 Публикации: 491 Регистрация: 06-11-2011