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

Загрузка

Для ускорения загрузки шрифта следует использовать отдельный атрибут link с атрибутами rel="preload" и as="font". Поддержка браузерами небольшая, но атрибуты никому не мешают.

<link rel="preload" href="src-font.woff" as="font">

Preload (предзагрузка) - это будущий стандарт WRC, предназначенный для улучшения производительности и предоставления разработчиком более точного контроля над загрузкой ресурсов.

Отрисовка

Для немедленного пояления текста на странице (FOUT) следует применять css свойство font-display со значениями swap или optional.

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

Свойство работает только с новыми браузерам

font-display: swap;
font-display: optional;

Почитать:

Похожие записи

Кратко о внедрение зависимостей и сервис контейнере

Cтатья о том, что такое "Внедрение зависимостей" и "Сервис-контейнер" отталкиваясь от их реализации в PHP фреймворках. Статья написана по мотивам статей Фабьена Потенсье, ведущиго разработчика и идеолога фреймворка Symfony, а также документации фреймворка Laravel.

Идемпотентные методы HTTP

Методы GET, PUT, DELETE являются идемпотентными - многократные идентичные запросы такого типа приводят к такому же эффекту, как и от одиночного запроса, при условии что не сервер не меняет своё состояние между запросами