Оптимизация сайта Google 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 существенно увеличиваются и  возрастает скорость отрисовки страницы. Чем больше шрифтов вы подключаете, тем заметнее результат.