⚡ Як оптимізувати Google Fonts для вашого сайту

Google Fonts — це потужний інструмент, який дозволяє легко та швидко додати шрифти до вашого сайту. Але щоб шрифти завантажувалися швидко, потрібно використовувати деякі прийоми оптимізації.

Ось кілька корисних порад:

1. Оптимізація запитів до Google Fonts

Використовуйте параметр text= у запиті, щоб завантажувати лише ті символи, які дійсно потрібні. Це може зменшити розмір файлу шрифту до 90%.

<!-- Завантаження всього шрифту -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">

<!-- Завантаження лише необхідних символів -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&text=Привіт!">

Це особливо корисно, якщо ви використовуєте шрифт у логотипі або заголовку.

2. Використовуйте лише потрібні стилі

Не завантажуйте всі можливі варіанти шрифту, якщо вам потрібні лише конкретні. Наприклад, якщо ви використовуєте тільки звичайний (400) і жирний (700) стиль, вкажіть це у запиті:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700">

Чому це важливо? Це значно скорочує розмір завантажуваного файлу та прискорює час завантаження сторінки.

3. Використовуйте font-display для управління рендерингом шрифтів

Додавання параметра font-display до запиту Google Fonts допомагає уникнути “пустого тексту” (Flash of Invisible Text, FOIT) і забезпечити кращий користувацький досвід.

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

• swap — текст буде відображено системним шрифтом, поки веб-шрифт завантажується.
• block — затримує відображення тексту до завантаження шрифту (може викликати затримку рендерингу).
• fallback — використовує системний шрифт, якщо веб-шрифт не завантажився.

Кращий вибір: swap, оскільки він забезпечує швидке відображення тексту.

4. Попереднє завантаження критично важливих шрифтів із preconnect

Для шрифтів, які мають відображатися якнайшвидше (наприклад, для заголовків), використовуйте <link rel="preconnect"> разом із підключенням основного шрифту. Це допомагає браузеру заздалегідь встановити з’єднання із серверами шрифтів, що зменшує час завантаження.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

• preconnect для fonts.googleapis.com дозволяє браузеру заздалегідь налаштувати з’єднання для отримання CSS шрифтів.
• preconnect для fonts.gstatic.com із атрибутом crossorigin дозволяє браузеру підготувати з’єднання для завантаження файлів шрифтів.

Чому це важливо? Ця техніка значно покращує час першого завантаження шрифтів, що є критично важливим для продуктивності вашого сайту.

Висновок:

Google Fonts — це не лише зручний, але й ефективний інструмент для роботи зі шрифтами. Використовуючи наведені поради, ви зможете значно підвищити його продуктивність.