Учора ввечері зайшов у 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-параметр!
