Ускорение загрузки шрифтов на сайте

Опубликовано: 01.09.2018

видео Ускорение загрузки шрифтов на сайте

Скорость загрузки сайта Wix

На сегодняшний день почти каждый сайт использует те или иные шрифты (включая иконки) для улучшения удобства коммуникации с пользователями и создания уникального стиля. Еще 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 ;

Добавить в директиву для @font-face правило моментального отображения текста при наличии запасного варианта шрифта (это подойдет для не-иконочных шрифтов): Лучшей техникой для наискорейшей загрузки файла шрифта в браузере является тег preload, это позволяет обеспечить готовность файлов шрифтов к моменту отрисовки страницы (после загрузке стилей и блокирующих скриптов). Он поддерживается 68% браузеров ( https://caniuse.com/#search=preload ). Например:

& lt ; link rel = ”preload” as = ”font” href =/ assets / fonts / AvenirNextCyr - BoldItalic . woff” type =font / woff” crossorigin & gt ;

Для эмуляции preload в оставшихся 30% браузеров и более строгого кэширования шрифта через localStorage можно использовать предварительную загрузку шрифта через XHR. Скрипт, если его вставить в самом верху страницы, в head, позволяет обеспечить вызовы необходимых файлов шрифтов и кэширует их в localStorage. Предварительно файлы шрифтов (правила стилей) должны быть конвертированы в base64 для кэширования в localStorage (бинарные данные не удастся использовать). При использовании этого подхода нужно теги preload обернуть в <noscript> для исключения двойной загрузки шрифта. Для устранения FOIT для иконочных шрифтов можно использовать  Font Face Observer  и дополнительно ввести CSS класс для загруженного шрифта, инициализирующий font-face правило и назначаемый на html или body. В этом случае без наличия шрифта в браузере не будут отрисованы квадраты вместо иконок, а сразу после загрузки шрифта иконки появятся на странице. Для уменьшения времени FOUT при загрузке всех начертаний гарнитуры (нормальное-полужирное, нормальное-наклонная, полужирное-наклонное и т.д.) можно использовать FOFT и прописать основной шрифт единственном в нормальном начертании в другой font-family: в примере  LatoInitial . После проверки загрузки всех остальных начертаний (можно в асинхронном режиме) через Font Face Observer применяются классы, исправляющие ложные начертания шрифта на корректные.

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

Источник

Похожие материалы:

Автор публикации

не в сети 2 дня

admin

создание сайтов, seo, smm

Комментарии: 50 Публикации: 491 Регистрация: 06-11-2011
3D стерео фильмы для 5D
    Как купить билеты на поезд

    Я всегда в последнее время пользуюсь услугами настоящего интернет сайта. Он у меня внушает доверие. И здесь придбати квитки возможно в любое

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

    Custom plugins and WordPress themes
    Шаблоны страниц в WordPress являются отличным способом изменить структуру страниц или добавить им функциональности. Создание собственного шаблона страниц может быть не простым делом, особенно для новичков,

    Продукт WooCommerce
    Каждый умный человек в современном мире прекрасно понимает, что в двадцать первом веке просто нельзя упускать возможность узнать или же научиться чему-либо новому. Особенно, если речь касается электронной

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

    Заказ такси в Киеве от 30 грн
    Если неудачи в жизни для вас нормой, в первую очередь необходимо проанализировать, откуда растут корни ваших проблем. Скорее всего, вы человек неорганизованный и постоянно опаздываете. В мегаполисе это

    Тайверб Тайверб
    Прочие ингредиенты: целлюлоза микрокристаллическая, повидон К30, натрия крахмалгликолят, магния стеарат, opadry желтый YS-1-12524-A. Лапатиниб содержится в форме лапатиниба дитосилата моногидрата. № UA/8847/01/01

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

    Копаксон
    Конкурентно замещает антигены миелина в местах связывания с молекулами главного комплекса гистосовместимости класса II на поверхности клеток, несущих антигены. Следствием этого является активация образования

    Begin.com.ua/
    Подбором персонала занимается HR-менеджер, но часто такая должность отсутствует в компании, и его обязанности берут на себя или директор, или его заместитель. Если выбор сотрудников окажется неправильным 

rss