Оптимізація шрифтів сайту, Айрі

оптимізація

Оптимізація шрифтів сайту

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

Використання шрифтів

Власних шрифтів сайту, швидше за все, відсутні в браузері користувача. Тому необхідно вказати додаткові до завантаження файли, в яких міститиме технічна інформація про накреслення шрифтів (символи - гліфи, особливості спільного накреслення символів та рядків та інші дані). Як це часто буває, для кожного браузера потрібен свій файл - Google Chrome розуміє формат woff і woff2 (найбільш просунуті), старий Android розуміє тільки TTF, а IE - eot.

Для підтримки всіх браузерів зазвичай використовується набір файлів шрифтів для кожного зображення (гарнітури). Його можна створити, наприклад, через Font Squirrel: сервіс автоматично надасть CSS-код та набір файлів для розміщення на сервері.

Також цікавий підхід пропонує сервіс Google Fonts: ви вставляєте виклик скрипта сервісу на сайт, а залежно від браузера, що використовується, сервіс вже віддає відповідний CSS-код і файл шрифту, підтримуючи більше 30 різних комбінацій.

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

Оптимізація шрифтів

  • Зворотна сумісність. Для максимального прискорення відображення текстувашого сайту на будь-якому пристрої користувача ви повинні повідомити браузеру, який запасне сімейство шрифтів можна використовувати, якщо ваш власний шрифт недоступний (не завантажився ще або завантажується непідтримуваний формат). Для цього в директиві font-face після назви вашого шрифту потрібно вказати найбільш відповідну системну альтернативу з обов'язковим закінченням serif (шрифт із засічками), sans-serif (без засічок) або monospace (рівної ширини). Хоча зворотна сумісність призводить до FOUT, але ця альтернативна краще ніж невидимий на сайті текст.
  • Стискання шрифтів. Якщо ви використовуєте статичне стиснення, достатньо підготувати архіви з файлами шрифтів і розмістити їх поруч із файлами шрифтів. При динамічному стисненні перевірте, що всі основні формати шрифтів – EOT, TTF, OTF, SVG, WOFF та WOFF2 – віддаються з хостингу стиснутими. Якщо це не так, потрібно додати необхідні розширення або типи файлів до правил стиснення. Gzip (або zopfli) стиск дозволяє скоротити розмір шрифтів на 15-50%.
  • Усунення гліфів. Для відображення тексту на сайті зазвичай потрібні далеко не всі символи, включені до стандартного шрифту. Частина відноситься до іншої мови (наприклад, до китайської), частина - до спеціальних символів, які ви не використовуєте. Існує велика кількість інструментів для видалення зі шрифтів гліфів, що не використовуються. Найбільш популярні - це сервіс Font Squirrel (в режимі Advanced), а також Subset.py (замість FontPrep). Також Google Fonts дозволяє завантажувати лише набори символів, що використовуються. Цей метод оптимізації дозволяє скоротити результуючий файл на 10-50%.

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

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