Оптимизация сайта Google Pagespeed Insights

Как увеличить скорость отрисовки страницы и улучшить оценки в PageSpeed Insights?

загрузка веб-шрифтов PageSpeed Insights

Если при проверке в PageSpeed Insights видите пункт «Настройте показ всего текста во время загрузки веб-шрифтов», выполните следующие правки:

1. Если шрифты на сайт подключаются в HTML:
добавьте параметр &display=swap в конец URL-адреса. Пример:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,600&display=swap">

2. Если шрифты на сайт подключаются через CSS:
добавьте внутрь @font-face { … } строку font-display: swap; Пример:

@font-display: swap; {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
font-display: swap;
}

Параметр &display=swap указывает браузеру использовать дефолтный шрифт для отображения текста пока не будет полностью загружен пользовательский шрифт (FOUT).

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


3 комментария
  • АлаичЪ 21.09.2020

    Скопировала мой пост из тг 🙂 Молодец, чо!

  • Nicole 22.09.2020

    Ведь училась у лучших!) 😉
    Активно использую в работе) Очень полезная штука!

  • АлаичЪ 01.10.2020

    И это хорошо 🙂

Добавить комментарий