Використання шрифтів поширене на більшості веб-сторінок і часто містить помилки. Багато з цих помилок негативно впливають на бюджет веб-продуктивності. Ця стаття має на меті надати інформацію про використання веб-шрифтів і допомогти покращити роботу веб-сайту.
Як показано в ієрархії, застосованій під час візуалізації будь-якої веб-сторінки, елементи шрифту можуть затримувати рендеринг інших елементів, поки вони не завантажаться. Правильне керування цією затримкою важливо як для сукупного зсуву макета (CLS), так і для сприйняття користувачами.
Проблема із завантаженням шрифту
Поки шрифти сторінки не завантажено, видимість шрифтів під час процесу візуалізації HTML і CSS залежить від браузера. Ось короткий опис того, як різні браузери вирішують цю ситуацію:
| браузер | Поведінка за умовчанням, якщо шрифт не готовий… |
|---|---|
| край | Використовує системний шрифт, доки шрифт не буде готовий. Замінює шрифт. |
| Chrome | Приховує текст до 3 секунд. Якщо текст ще не готовий, використовується системний шрифт, доки шрифт не буде готовий. Замінює шрифт. |
| Firefox | Приховує текст до 3 секунд. Якщо текст ще не готовий, використовується системний шрифт, доки шрифт не буде готовий. Замінює шрифт. |
| Safari | Приховує текст, доки шрифт не буде готовий. |
Щоб вирішити цю проблему, не покладаючись на поведінку браузера, було введено параметр font-display. На даний момент 92% браузерів підтримують параметр font-display.
Що робить Font-Display?
Під час завантаження сторінки зовнішній вигляд шрифтів може змінюватися, доки вони не завантажаться повністю, залежно від браузера. Наприклад, деякі версії браузера Safari приховують текст, доки не завантажиться шрифт. The font-display: заміна Параметр CSS стандартизує цю поведінку, відображаючи текст із використанням системного шрифту, доки файли шрифтів не будуть завантажені. Після завантаження шрифтів системний шрифт замінюється на призначений шрифт. Ось приклад використання:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Попереднє завантаження шрифтів
Використання для завантаження шрифтів до того, як критичний шлях візуалізації може запобігти пропускам під час завантаження шрифтів.
БОНУС: галузевий підхід до використання шрифтів
Відповідно до даних SimilarTech, давайте поглянемо на важливу тенденцію та знімок світу Інтернету. Перший графік нижче показує використання шрифту на 10,000 100,000 найпопулярніших сторінок, а другий графік показує використання шрифтів на XNUMX XNUMX найпопулярніших сайтів. Давайте спочатку розглянемо ці графіки:
Існує 5% різниця у використанні Google Font і Font Awesome між 10,000 100,000 і XNUMX XNUMX найпопулярніших сайтів. Це говорить нам про те, що 10,000 XNUMX найпопулярніших сайтів оптимізували використання шрифтів. Рекомендуємо розглянути цю тему як заслуговує на увагу. Подумайте, як ви можете реалізувати веб-шрифти за допомогою власних рішень.
БОНУС 2: Статистика використання Google Font і Font Awesome
Звертаючись до першого бонусу, ми пропонуємо вивчити два графіки, що показують числові обсяги найбільш використовуваних бібліотек шрифтів. Кількість унікальних доменів тут перевищує мільйони, і ці мільйони представляють ваших конкурентів у SEO. Використання цих бібліотек краще й оптимальніше, ніж інші, може допомогти вам виділитися.
Дотримуючись цих порад і оптимізувавши використання шрифтів, ви можете значно покращити продуктивність веб-сайту та покращити взаємодію з користувачем.
