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

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

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

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

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

• 0:00 – Ответим на самые частые вопросы о правильном подключении шрифтов и как ускорить их загрузку. Сравниваем скорости загрузки Google Fonts и шрифтов с локального сервера

• 2:50 – Вопрос из зала о системных шрифтах: «Для скорости загрузки сайта лучше всего использовать System Font Stack? Например, шрифт Arial есть во всех ОС»

• 3:38 – Как вычислить системный ли шрифт или нет

• 6:20 – Вопросы по подключению скриптов из эфира задавайте на почту sale@loading.express. Скрипты получить можно из предыдущих эфиров по отложенной загрузке https://www.youtube.com/watch?v=9tueOTjl3z8&t=1262s

• 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 и загрузить на сервер

• 24:00 – Вопрос из предыдущего выпуска: «Из-за пользовательского кэширования выдавались одни и те же файлы, несмотря на отсутствие поддержки webp». Скрипт для отображения изображений webp или jpeg форматов в зависимости от поддержки браузера, получить можно здесь

• 24:57 – Если скрипт подключения, отложенного видео YouTube, не работает в WordPress.

• 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 не подгружается, есть ли решение?»

• 36:17 – О PWA и о следующем эфире про настройку HTTP/2 + Server Push, что значит пушить шрифты/стили https://www.youtube.com/watch?v=mXrVhH5jcUs&t=1782s

• 37:36 – Годная пятиминутка по ссылке https://www.youtube.com/watch?v=x9Qx9-T3vWk