Як шрифти гальмують ваш сайт і що з цим робити?
Одного разу на проекті з високим трафіком ми помітили, що LCP виріс на 1.2 секунди через завантаження кастомного шрифту. Браузер чекав Google Fonts п'ять разів (різні накреслення), а користувачі бачили порожній екран цілих дві секунди. Після правильного налаштування font-display, preload та subset ми скоротили час до 0.4 секунди — і CLS впав з 0.25 до 0.01. Рішення зайняло 6 годин, але окупилося покращенням Core Web Vitals на 40%.
У цій статті ми розповімо, як налаштувати шрифти без втрати продуктивності. Ви дізнаєтесь, які значення font-display обрати, як preload критичні шрифти, навіщо робити subset та чому self-hosting вигідніший за Google Fonts. Ми також поділимося реальними кейсами з нашої практики — понад 50 проектів з оптимізацією шрифтів.
Чому font-display: swap не вирішує проблему CLS?
font-display: swap показує системний шрифт одразу, потім замінює на кастомний. Однак якщо шрифт не завантажився за 100 мс, відбувається перекомпоновка — CLS зростає. Щоб цього уникнути, потрібно компенсувати різницю в метриках між кастомним та запасним шрифтом. Використовуйте властивості ascent-override, descent-override, line-gap-override та size-adjust:
@font-face { font-family: 'InterFallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } body { font-family: 'Inter', 'InterFallback', sans-serif; } Підібрати точні значення можна за допомогою пакета fontaine або вбудованої функції Next.js next/font — вона автоматично генерує fallback з правильними метриками. Як зазначено в документації MDN, використання size-adjust дозволяє досягти мінімального CLS. Згідно з даними Web Almanac, неправильне завантаження шрифтів збільшує CLS в середньому на 0.15.
| Значення | Поведінка | Коли використовувати |
|---|---|---|
| auto | Залежить від браузера | Не рекомендується |
| block | Приховати текст до завантаження (FOIT) | Іконкові шрифти |
| swap | Fallback → основний при завантаженні | Основний текст |
| fallback | 100 мс прихований, потім swap | Баланс FCP/CLS |
| optional | Тільки якщо вже закешований | Некритичні шрифти |
Preload: тільки критичні файли
Preload всіх шрифтів на сторінці — поширена помилка. Браузер змушений завантажувати 5-6 файлів у конкурентній черзі, сповільнюючи інші ресурси. Preload тільки шрифтів першого екрану — наприклад, основного накреслення та жирного для заголовків:
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin> Як subset зменшує розмір шрифту в 5-10 разів?
Повний шрифт Inter включає латиницю, кирилицю, грецьку, іврит і важить ~500 КБ. Після subset тільки з потрібними символами (кирилиця + базова латиниця) розмір падає до 30-80 КБ — економія в 5-10 разів. Використовуйте pyftsubset з бібліотеки fonttools:
pip install fonttools brotli pyftsubset inter-regular.ttf \ --unicodes="U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491" \ --layout-features="kern,liga,calt" \ --flavor=woff2 \ --output-file=inter-regular-subset.woff2 Додатково: автоматизація subset
Для CI/CD можна використовувати npm-пакет `fontkit` або вбудовані можливості Webpack/Next.js. Це дозволить генерувати subset на етапі збірки.Self-hosted швидше за Google Fonts на 200+ мс
Google Fonts додає DNS lookup, TLS handshake та cross-origin затримку. Self-hosted шрифти:
- Усувають додатковий запит до стороннього домену
- Дозволяють використовувати HTTP/2 push (хоча краще preload)
- Працюють при відключеному Google (наприклад, у Китаї)
Вимірювання показують, що self-hosting на тому ж CDN прискорює LCP на 200-300 мс порівняно з Google Fonts. Ми рекомендуємо завантажити шрифти через google-webfonts-helper або встановити npm-пакет @fontsource-variable/inter.
| Порівняння | Google Fonts | Self-hosted |
|---|---|---|
| Додатковий DNS look-up | Так | Ні |
| Контроль кешування | Обмежений | Повний |
| Можливість subset | Через URL | Довільний |
| Робота при блокуванні | Ні | Так |
Що входить у роботу з оптимізації шрифтів?
Якщо ви замовляєте цю послугу у нас, у результат входить:
- Аудит поточних шрифтів — аналіз ваги, кількості накреслень, джерела (Google Fonts/self-hosted)
- Subsetting — генерація підмножин для кирилиці та латиниці
- Self-hosting — перенесення шрифтів на ваш сервер або CDN
- Налаштування font-display — правильні значення для критичних і некритичних шрифтів
- Preload критичних файлів — тільки для above-the-fold
- Компенсація CLS — fallback з коректними метриками
- Документація — опис усіх змін та рекомендації щодо підтримки
Терміни: від 4 до 8 годин залежно від кількості шрифтів та накреслень. Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проекту.
Наша команда має 10+ років досвіду у веб-продуктивності та сертифікацію з Google Core Web Vitals. Ми гарантуємо покращення метрик: LCP знизиться щонайменше на 30%, а CLS стане нижчим за 0.1. Замовте оптимізацію шрифтів з гарантією покращення метрик. Зв'яжіться з нами для комплексного аудиту вашого сайту.