Основні веб-показники: Як уникнути проблем з продуктивністю веб-шрифтів

Веб-шрифти додають особистість вашому сайту, але вони також збільшують вагу.

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

Це також шкодить Core Web Vitals — метрикам, які безпосередньо впливають на твій рейтинг у пошуку та досвід користувача.

Тут кожна мілісекунда має значення.

Отже, як ти можеш зберегти свій вибір веб-шрифтів, не жертвуючи продуктивністю?

Розберемо це поступово, крок за кроком.

Але спочатку, що таке безпечні для вебу шрифти та веб-шрифти?

Що Таке Веб-Безпечні Шрифти?

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

Ось безпечні для вебу шрифти, які ти можеш використовувати:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Навіть із обмеженим вибором, вправний дизайнер може творчо використовувати ці шрифти.

Але веб-безпечні шрифти часто використовуються надміру і надають вашому сайту «схожий» вигляд — навіть коли ти доклав багато зусиль та грошей для його дизайну.

Отже, як зробити його красивішим?

З веб-шрифтами.

Що Таке Веб-Шрифти?

Веб-шрифти дозволяють тобі відійти від часто вживаних безпечних для вебу шрифтів.

Замість використання шрифтів, доступних на пристрої користувача, веб-шрифти можуть бути завантажені з зовнішнього джерела, такого як Google Fonts, або безпосередньо з вашого сервера на пристрій користувача (тимчасово).

Це дозволяє тобі використовувати будь-який користувацький шрифт, який відповідає твоєму бренду або дизайнерським потребам.

Ми також підібрали найкращі шрифти Google, щоб допомогти тобі розпочати.

Коли користувач відвідує твій сайт, веб-шрифт тимчасово завантажується і застосовується до тексту за допомогою правила @font-face у CSS.

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

Шрифти також еволюціонували з часом, забезпечуючи більш ефективні формати зберігання. Як і формати зображень, шрифти мають TTF, WOFF, WOFF2 та EOT.

• Embedded OpenType (EOT): Сумісний зі старішими версіями Internet Explorer (нижче IE9). За замовчуванням не стиснутий, але може бути застосоване стиснення GZIP.
• TrueType (TTF): Підтримується старішими браузерами Android (нижче версії 4.4). За замовчуванням не стиснутий, але може бути стиснений GZIP.
• Web Open Font Format (WOFF): Підтримується більшістю сучасних браузерів і включає вбудоване стиснення.
• Web Open Font Format 2 (WOFF2): Сумісний з браузерами, які його підтримують, містить спеціальні алгоритми стиснення, які зменшують розмір файлу приблизно на 30% порівняно з іншими форматами.

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

Що Таке Основні Веб-Віталії (CWV) Показники?

Отже, справа в тому: Google хоче, щоб усі його користувачі мали чудовий досвід.

Будь-який сайт чи додаток, який забезпечує найкращий досвід користувачів Google, отримає більше «любові» від алгоритмів Google.

А як вимірюється цей “досвід“?

Google запустив Core Web Vitals на початку 2020 року саме для цієї мети.

CWV — це набір з трьох метрик, які показують Google, як ваш сайт або додаток працює для користувачів, яких вони туди направляють.

Вищі бали за цими метриками можуть допомогти тобі зайняти вищі позиції в Google. Давай швидко розглянемо ці метрики.

Найбільший Вмістовний Розпис (LCP)

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

Це зазвичай зображення або відео, але може бути великим блоком тексту або вбудованим відео.

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

Хороший показник LCP означає, що користувачі не чекають, коли з’явиться основний контент.

Взаємодія до наступного відображення (INP)

INP вимірює час між взаємодією користувача (наприклад, кліком або торканням) та моментом, коли сторінка візуально відгукується.

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

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

Кумулятивний Зсув Макета (CLS)

CLS вимірює стабільність завантаження вашої сторінки.

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

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

Як Оптимізувати Веб-Шрифти для Покращення Основних Веб-Показників

Отже, чому всі так хвилюються через продуктивність веб-шрифтів?

Чому ми не можемо просто додати веб-шрифти і завершити на цьому? Ну, можеш.

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

Це займає час.

І якщо це займає забагато часу, це впливає на твої основні веб-вітальності та швидкість конверсії вебсайту.

Давай подивимось на декілька способів оптимізації веб-шрифтів для кращих основних веб-показників.

1. Попереднє завантаження шрифтів

Ти хочеш, щоб твої шрифти були готові в момент завантаження сторінки.

Отже, коли сторінка готова для користувача, так само і шрифт.

Це називається попереднє завантаження.

Попереднє завантаження каже браузеру, «Гей, цей шрифт важливий. Будь ласка, завантаж його відразу.”

Скажімо, ти використовуєш популярний шрифт Google, Roboto.

Тобі потрібно додати один атрибут до свого HTML коду, щоб попередньо завантажити шрифт: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

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

Це скорочує час, необхідний для відображення найбільшого текстового блоку (LCP), тому користувачі бачать кінцеву версію твого сайту швидше.

2. Керуй Поведінкою Завантаження Шрифтів За Допомогою Властивості Font-Display

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

font-display property дозволяє тобі контролювати поведінку тексту, поки користувацькі шрифти ще завантажуються.

Це може допомогти тобі уникнути страшного Flash of Invisible Text (FOIT), коли користувачі бачать порожні місця, та Flash of Unstyled Text (FOUT), коли сторінка спочатку відображається із резервними шрифтами і одразу переключається на користувацькі шрифти.

Властивість font-display має чотири способи керування поведінкою тексту: block, swap, fallback та optional.

Подивимося на два, які тобі знадобляться.

font-display: swap — Цей варіант є найбезпечнішим способом для більшості сайтів. Він забезпечує негайне відображення тексту зі шрифтом за замовчуванням та замінює його на користувацький шрифт, коли той буде готовий.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Тут резервний шрифт (наприклад, Arial або інший системний шрифт) завантажується миттєво, зберігаючи сторінку читабельною.

Коли Roboto завантажено, воно замінює шрифт за замовчуванням без залишення порожнього місця на екрані.

Ось демонстрація того, як працює заміна font-display у реальному світі.

font-display: optional — Якщо ти переймаєшся швидкістю, це говорить браузеру пропустити використання власного шрифту, якщо він не завантажується достатньо швидко. Це працює, коли тобі не важливо, якщо буде використовуватися резервний шрифт.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

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

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

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

3. Вибіркове Використання Шрифтів

Більшість шрифтів містять сотні, навіть тисячі символів.

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

Так, ти можеш видалити зайві символи, щоб зменшити розмір файлу шрифту.

Припустимо, твій сайт потребує лише англійських символів.

Інструмент, як FontTools, може допомогти тобі зробити підмножину твого шрифту, щоб включити лише символи, які ти насправді використовуватимеш.

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

Це зменшує розмір файлу, скажімо, з 80 КБ до 30 КБ.

Менші файли означають швидше завантаження, що покращує LCP і CLS, оскільки шрифт швидко завантажується і не зміщує макет.

Ось приклад того, як ти можеш видалити все, крім англійських символів, використовуючи FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

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

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

4. Стиснення Шрифтів

Сучасні формати шрифтів, такі як WOFF2, пропонують стиснення, яке може зменшити розмір шрифту до 30% порівняно зі старішими форматами, такими як TTF.

Використання найбільш стислої версії твого шрифту може значно зменшити його вплив на час завантаження сторінки.

Наприклад, ось як ти можеш переконатися, що використовуєш WOFF2:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

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

Однак, якщо браузер не може використовувати WOFF2, він переходить на WOFF.

5. Кодування Base64

Це ще одна часто використовувана практика для оптимізації веб-шрифтів.

Однак, тобі потрібно бути обережним, коли використовувати шрифти, закодовані в Base64.

Кодування Base64 найбільш корисне для маленьких шрифтів або іконок.

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

Якщо ти хочеш використовувати кодування Base64 для іконок шрифту, спочатку потрібно конвертувати файл шрифту у формат Base64. Ось як це може виглядати:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Цей метод добре підходить для маленьких шрифтів іконок, які ти часто використовуєш на сайті.

Файл CSS завантажується з вбудованим шрифтом, усуваючи додатковий HTTP запит.

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

6. <link> проти CSS @import для Шрифтів

<link> та @import мають значну різницю у продуктивності завантаження.

Тег <link> завантажує шрифти асинхронно, що означає, що він не затримує рендер інших частин твоєї сторінки, тоді як @import працює трохи повільніше.

Використовуй <link> де це можливо.

“Для 90%+ випадків тобі, ймовірно, потрібен тег <link>. Як основне правило, слід уникати правил @import, оскільки вони відкладають завантаження включеного ресурсу до моменту отримання файлу.” Ілля Григорик, Інженер та технічний радник генерального директора Shopify

Він завантажує шрифти незалежно, дозволяючи решті сторінки завантажуватися без очікування на файл шрифту.

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

Це переважний метод завантаження Google Fonts або схожих зовнішніх служб шрифтів.

Розміщений у розділі <head> вашого HTML, він забезпечує раннє завантаження шрифту, не блокуючи інші ресурси.

Уникай @import для критичних шрифтів.

@import чекає, поки файл CSS повністю завантажиться, що може збільшити час завантаження та погіршити LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Використання @import для шрифтів працює лише для другорядних або менш важливих шрифтів. Як практика, уникайте його використання для будь-чого на першому екрані контенту.

7. Зменшення Візуальних Зсувів/CLS За Допомогою Підбору Шрифтів та Регулювання Розміру

Візуальні зміни — або кумулятивні зміни компонування (CLS), як називає їх Google — відбуваються, коли компонування змінюється несподівано, часто через заміну шрифтів.

Щоб мінімізувати цей ефект, обери резервні шрифти, які найбільше нагадують стиль та розміри твого власного шрифту.

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

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

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Тут, заміна Roboto (наприклад, Arial) зберігає сталі розміри, зменшуючи будь-які помітні рухи, коли Roboto повністю завантажується.

Коли ти узгодиш розмір та інтервали відступів запасного шрифту зі своїм налаштованим шрифтом, ти гарантуєш, що коли Roboto замінить Arial, зміна буде мінімальною, що зберігає низький CLS та покращує користувацький досвід.

8. Знайди Правильне Місце Для Розміщення Веб-Шрифтів

Самостійне розміщення твоїх шрифтів не завжди означає кращу продуктивність.

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

Web Almanac виявив, що деякі сайти з використанням шрифтів третіх сторін відображаються швидше, ніж ті, що мають самопідписані шрифти.

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

• Мережа доставки контенту (CDN): Забезпечує швидшу доставку шрифтів, використовуючи кілька локацій по всьому світу.
• HTTP/2: Підвищує швидкість завантаження, обробляючи кілька запитів одночасно, зменшуючи затримку.
• Політика веб-кешування: Ефективно кешує шрифти, тому їх не потрібно повторно завантажувати при кожному візиті.

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

Як Спростити Оптимізацію Продуктивності Вебу

Якщо вищезазначені техніки здаються занадто складними, плагін на кшталт Jetpack може полегшити процес.

Jetpack, розроблений Automattic (творцями WordPress), є універсальним рішенням, створеним спеціально для сайтів на WordPress.

Воно об’єднує ключові функції для безпеки, продуктивності та маркетингу, керовані з однієї платформи.

Навіть якщо ти не технічно обізнаний, Jetpack може допомогти покращити швидкість сайту, посилити безпеку та покращити користувацький досвід. (Складні налаштування не потрібні!)

Створи Ідеальний Баланс Між Красою Та Продуктивністю

Веб-шрифти надають вашому сайту унікальний, красивий вигляд.

Однак без правильних налаштувань вони також можуть сповільнити його та дратувати користувачів.

Ми розглянули основні техніки оптимізації шрифтів, але точне регулювання продуктивності включає безліч технічних деталей.

І отримання найкращих результатів може здаватися важким.

Ось тут професійні веб-розроблювальні послуги DreamHost стають у нагоді.

Ми забезпечимо, щоб твій сайт був красивим і оптимізованим для швидкості та зручності користувача.

Нехай ми займемося технічними аспектами, а ти зосередься на створенні сайту, який дійсно виділяється.

---

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