Рубрики
Live

99: как подключать шрифты Google Fonts, чтобы сайт не тормозил

Вы не поверите, но шрифты могут серьезно влиять на производительность, если подключены неправильно.

И да, одной инструкцией или лонгридом не обойтись. Проще послушать и посмотреть, наглядно, как это работает и на что влияет. Ниже видео с разными способами подключения шрифтов и скоростью их загрузки. Мы рассмотрим способы подключения шрифтов Legacy, Swap, Async, Preload, Preconnect.

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

99. Шрифты - как подключать шрифты, чтобы сайт не тормозил: про подключение Google Fonts.
Watch this video on YouTube.

Измеряйте скорость сайта из Москвы:

  • 0:00 – Ответим на самые частые вопросы о правильном подключении шрифтов и как ускорить их загрузку. Сравниваем скорости загрузки Google Fonts и шрифтов с локального сервера
  • 2:50 – Вопрос из зала о системных шрифтах: «Для скорости загрузки сайта лучше всего использовать System Font Stack? Например, шрифт Arial есть во всех ОС»
  • 3:38 – Как вычислить системный ли шрифт или нет
  • 7:37 – Что такое шрифты и как они могут влиять на скорость загрузки сайта
  • 8:40 – Как определить вес шрифта
  • 9:18 – 2 совета по уменьшению веса и оптимизации скорости подключения шрифтов: избавиться от неиспользуемых языков шрифта и сжимать диапазон используемых символов
  • 10:20 – Вопрос из зала: «”localstorage” практикуете для шрифтов или это больше не нужно?»
  • 11:50 – Рассмотрим 4 варианта оптимизации: Параметр display:swap / Подключение через Preload / Подключать через Google Fonts или с собственного сервиса/Использование CDN. Примеры всех типов подключения просмотреть по ссылке 15:54
  • 12:37 – Как выявить проблему со шрифтами и в каких случаях проблемы приоритетны для ускорения
  • 16:24 – Показываем визуальную разницу в скорости загрузки шрифтов при разных видах подключения. Как выбрать тип
  • 21:25 – Получить исходники готовых решений можно получить бесплатно по ссылке. Вопросы пишите на почту 6:20
  • 22:24 – Чтобы скачать шрифты Google Fonts без парсинга формата woff/woff2 и загрузить на сервер, используйте сервис Google Webfont Helper
  • 24:00 – Вопрос из предыдущего выпуска: «Из-за пользовательского кэширования выдавались одни и те же файлы, несмотря на отсутствие поддержки webp». Скрипт для отображения изображений webp или jpeg форматов в зависимости от поддержки браузера, получить можно здесь
  • 26:20 – Комментарий из зала по примеру подключения шрифтов: «По видео не видно мигания»
  • 26:20 – Как получить качественную работу по ускорению загрузки сайта
  • 28:48 – Вопрос от зрителя: «local storage мертв в целом или только для шрифтов?»
  • 30:55 – Вопрос про LCP (время отрисовки основного контента) из зала: «Зачем придавать шрифту preload, если используется font-display:swap?»
  • 32:00 – Рассказываем о предстоящем 100-ом эфире и про статью на VC: «Могильная версия сайта: как угробить конверсию, создав сайт на конструкторе»
  • 33:55 — Вопрос из зала: «При swap LCP и CLS как раз вырастет, разве нет?»
  • 34:56 – Вопрос из зала о TimThumb: «Есть скрипт timthumb выводящий миниатюры к статьям, ссылка на картинку не прямая, в результате формат картинки webp не подгружается, есть ли решение?»

Автор: Алексей

Маркетолог в ax.digital и в loading.express. Трехкратный отец.