Оптимізація шрифтів в Elementor: як прискорити WordPress-сайт

Чому зайві шрифти сповільнюють сайт

Кожне сімейство шрифту та його накреслення можуть бути окремим ресурсом. Наприклад, звичайний текст може використовувати Roboto 400, підзаголовки — Roboto 600, а кнопки випадково залишатися на іншому сімействі з накресленням 700. У результаті на сторінці з’являються непотрібні запити, навіть якщо візуально різниця між шрифтами майже непомітна.

Шрифти особливо впливають на мобільні пристрої: там повільніше з’єднання, вища затримка мережі та обмеженіші ресурси браузера. Якщо потрібний шрифт завантажується із затримкою, спочатку текст може відображатися системним шрифтом, а потім змінити ширину. Через це контент зміщується, а користувач бачить стрибок тексту.

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

• звичайний текст найчастіше потребує 400 або 400–500;
• заголовкам зазвичай достатньо 600 або 700;
• курсив, 300, 500 та інші варіанти варто залишати лише за реальної потреби;
• окремо перевіряйте шрифти, які використовуються кнопками, меню, формами та спливаючими вікнами.

Проведіть аудит шрифтів у Elementor

Почніть із глобальних налаштувань. У редакторі Elementor відкрийте налаштування сайту та розділ глобальних шрифтів. Назви пунктів можуть трохи відрізнятися залежно від версії Elementor або активної теми, але логіка однакова: тут задаються основні стилі для заголовків, основного тексту, акцентів і додаткових елементів.

Перевірте, які сімейства та товщини вказані для кожної ролі. Якщо основний текст використовує одне сімейство, а заголовки — інше, це може бути виправдано дизайном. Але три-чотири схожі шрифти без чіткої функції зазвичай лише збільшують кількість ресурсів і ускладнюють підтримку сайту.

Після цього перегляньте окремі віджети. Локальні налаштування віджета можуть перевизначати глобальні стилі. Саме там часто залишаються випадкові значення: інше сімейство, жирність 800 або окремий розмір для мобільної версії.

• порівняйте глобальні шрифти з налаштуваннями заголовків і текстових віджетів;
• перевірте кнопки, меню, форми, вкладки, попапи та шаблони Theme Builder;
• знайдіть віджети з ручним вибором сімейства або товщини;
• видаліть локальні перевизначення, якщо вони більше не потрібні;
• переконайтеся, що мобільні налаштування змінюють розмір, а не додають зайве сімейство чи накреслення.

Як зменшити кількість накреслень

Складіть просту типографічну систему до внесення змін. Наприклад: один шрифт для всього тексту, 400 для абзаців, 600 для заголовків і, за потреби, 700 для окремих акцентів. Така схема не є обов’язковою, але допомагає уникнути ситуації, коли кожен віджет має власну товщину.

Не варто замінювати всі значення механічно. Якщо бренд використовує тонкий шрифт або курсив у важливих елементах, спочатку перевірте дизайн на реальних сторінках. Надмірне спрощення може погіршити ієрархію заголовків, контрастність і читабельність.

Після зміни глобальних шрифтів перегляньте сторінки з довгими заголовками, таблицями, картками та кнопками. Інше накреслення може змінити ширину тексту й перенесення рядків, тому важливо перевіряти не лише головну сторінку.

• залишайте тільки ті товщини, які використовуються в макеті;
• не використовуйте 400, 500, 600 і 700 лише «про всяк випадок»;
• не підключайте окремий шрифт для кнопок, якщо він не створює помітної дизайнерської переваги;
• після очищення перевірте всі стани: звичайний, наведення, активний і мобільний.

Налаштуйте Custom Fonts без зайвих файлів

Якщо сайт використовує власні шрифти, завантажуйте тільки ті файли, які реально потрібні. У більшості сучасних випадків достатньо формату WOFF2: він добре стискається та підтримується актуальними браузерами. Старі формати можуть знадобитися лише через конкретні вимоги сумісності.

Для кожного сімейства перевірте, які файли додані в Custom Fonts: normal, italic, різні товщини та мовні набори. Файл для 300 не потрібен, якщо в Elementor ніде не використовується товщина 300. Так само не варто завантажувати italic, якщо курсив не застосовується в тексті або дизайні.

Обережно працюйте із субсетами та кирилицею. Якщо шрифт підготовлений тільки для латиниці, українські символи можуть відображатися системним шрифтом або некоректно. Перед видаленням мовних наборів перевірте українські, англійські та інші символи, які є на сайті.

Також переконайтеся, що одна й та сама гарнітура не підключається одночасно з кількох джерел — наприклад, як локальний Custom Font і через зовнішній сервіс або налаштування теми. Подвійне підключення збільшує кількість ресурсів і може створювати конфлікти.

• використовуйте WOFF2, якщо немає окремої потреби в інших форматах;
• завантажуйте тільки потрібні товщини та стилі;
• перевіряйте наявність кирилиці в локальних файлах;
• не підключайте те саме сімейство одночасно через Elementor, тему та сторонній плагін;
• зберігайте зрозумілі назви файлів, щоб не переплутати накреслення під час налаштування.

Як перевірити, які шрифти справді завантажуються

Після змін відкрийте сторінку в режимі інкогніто або очистьте кеш, якщо сайт використовує плагін кешування чи CDN. Потім скористайтеся інструментами розробника браузера. На вкладці Network можна відфільтрувати запити за типом Font і побачити, які файли завантажуються, з якого джерела та в якому обсязі.

Перевірку потрібно виконувати не лише на головній сторінці. Окремі шрифти можуть бути присутніми тільки в шаблоні блогу, кошику, формі, попапі або мобільному меню. Відкрийте кілька типових сторінок і порівняйте список запитів.

У Lighthouse або іншому інструменті аудиту зверніть увагу на проблеми, пов’язані з відображенням вебшрифтів і зміщенням макета. Результати таких тестів залежать від кешу, сервера та мережі, тому оцінюйте не одну цифру, а повторювану картину на кількох сторінках.

• перевірте назви та кількість запитів у категорії Font;
• з’ясуйте, чи не завантажується шрифт із двох різних джерел;
• подивіться сторінку на мобільному пристрої або в мобільній емуляції;
• порівняйте вигляд тексту до та після завантаження шрифту;
• очистьте кеш Elementor, плагіна кешування та CDN після значних змін.

Поширені помилки під час оптимізації шрифтів

Перша помилка — видалити накреслення, не перевіривши всі шаблони. У результаті частина тексту може перейти на інший шрифт або втратити потрібну візуальну ієрархію. Зміни краще вносити після аудиту, а не навмання.

Друга — оптимізувати тільки головну сторінку. У WordPress різні типи записів і шаблони Elementor можуть мати власні стилі. Перевіряйте сторінки послуг, блог, архіви, форми та службові екрани.

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

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

• не видаляйте файли без перевірки сторінок і шаблонів;
• не плутайте глобальні стилі Elementor із фактичними локальними перевизначеннями;
• не оцінюйте оптимізацію лише за десктопною версією;
• не забувайте перевірити кеш після змін;
• не жертвуйте читабельністю заради мінімальної кількості файлів.