Вчера вечером зашел в Google Search Console и увидел, что для...

Вчера вечером зашел в Google Search Console и увидел, что для моего блога в отчете «Основные интернет-показатели» многие страницы требуют увеличения скорости. Гугл постоянно что-то меняет, добавляет новые тесты и проверки, в итоге если ранее все было классно, со временем может классно уже и не быть.

В общем, зашел в PageSpeed Insights и начал перебирать страницы и раскурил, как существенно повысить скорость сайта (а заодно и оценки, естественно) в пару действий.

Если вы подключаете сторонние шрифты – а сейчас это делают практически на каждом сайте – при этом не важно, со своего сервера подключаете или через googleapis, ниже я расскажу, что и как можно улучшить.

Проверьте свой сайт в PageSpeed Insights, и если у вас будеи пункт «Настройте показ всего текста во время загрузки веб-шрифтов», слушайте!

Обычно шрифты на сайт подключаются так (у меня на блоге подключались именно таким образом):

Но вчера я обратил внимание, что в fonts.google.com изменился код подключения:

Но смысл совсем не в новой версии, а в параметре &display=swap – который отвечает за то, чтобы пока не подгрузился выбранный вами фонт, текст на странице отображался с дефолтным шрифтом.

Таким образом, вам совсем не обязательно полностью менять код подключения шрифта, а надо добавить параметр в URL, в моем случае это выглядело бы вот так:

Скорость отрисовки страницы возрастает. Оценки в PageSpeed Insights тоже увеличиваются. Это тем эффективнее, чем больше шрифтов (либо стилей в рамках одного шрифта) вы подключаете.

Есть альтернатива, если фонт подключается не в html, а через css правилом @font-face { ... }

Надо добавить внутрь стиля строку font-display: swap;

Например, было так:

@font-face {

font-family: "Roboto";

src: url("/fonts/Roboto-Regular-webfont.woff2") format("woff2");

}

А будет так:

@font-face {

font-family: "Roboto";

src: url("/fonts/Roboto-Regular-webfont.woff2") format("woff2");

font-display: swap;