SEOFAQ Telegram, маркетинг и SEO Канал SEOFAQT в мессенджере Telegram

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


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

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

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

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

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&subset=cyrillic,cyrillic-ext,latin-ext">

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

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

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

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&subset=cyrillic,cyrillic-ext,latin-ext&display=swap">

Скорость отрисовки страницы возрастает. Оценки в 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;

}

Если у вас есть сторонние шрифты на сайте – проверьте обязательно, используете ли вы swap-параметр!

Ссылки из поста:
https://telegra.ph/file/36344bb3f3fca23f25ed4.jpg

Источник новости https://t.me/alaevseo/153...