Як оптимізувати завантаження шрифтів на сайті

1. Використання шрифтів
2. Google Fonts API
3. Оптимізація розміру шрифтів
4. Відкладене завантаження шрифтів

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

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

Коротко, інструкція по оптимізації виглядає так:

1. Збираємо потрібний набір шрифтів (залишаючи тільки найнеобхідніше).
2. Розміщуємо його на хостингу або використовуємо Google Fonts API.
3. Налаштовуємо кешування і стиснення для файлів шрифтів.
4. Налаштовуємо відкладену отрисовку і використання localStorage.

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

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

Додатково можна врахувати, що в окремих випадках шрифт може бути вже встановлено на пристрій користувача: в цьому випадку можна використовувати директиву local. Розгорнута CSS інструкція, що підключає відповідний шрифт на сайті, буде виглядати приблизно так (використовуємо різні формати для «попадання» в різні браузери):

@ Font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local ( 'Awesome Font'), url ( '/ fonts / awesome.woff2') format ( 'woff2'), url ( '/ fonts / awesome.woff') format ( 'woff'), url ( '/ fonts / awesome.ttf ') format (' ttf '), url (' / fonts / awesome.eot ') format (' eot '); }

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

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

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

Google Fonts API

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

Google Fonts API дозволяє завантажити тільки потрібні варіанти щріфта, а також завантажує шрифти по наборам символів (дозволяє браузери не завантажувати повністю шрифт, якщо не всі гліфи потрібні для відображення сторінки). Серед додаткових можливостей варто відзначити і параметр text = {letters}, який обрізає символи у переданому шрифті строго до заданих (якщо шрифт використовується тільки для логотипу, це може бути дуже цінно).

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

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

• Зворотна сумісність. Для максимального прискорення відображення тексту вашого сайту на будь-якому призначеному для користувача пристрої ви повинні повідомити браузеру, який запасне сімейство шрифтів можна використовувати, якщо ваш власний шрифт недоступний (не завантажили ще або завантажується підтримуваний формат). Для цього в директиві font-face після назви вашого шрифту потрібно вказати найбільш підходящу системну альтернативу з обов'язковим закінченням serif (шрифт із зарубками), sans-serif (без зарубок) або monospace (рівної ширини). Хоча зворотна сумісність призводить до FOUT, але ця альтернативна краще, ніж невидимий на сайті текст (FOIT).

• Стиснення шрифтів. Якщо ви використовуєте статичне стиснення, то досить підготувати архіви з файлами шрифтів і розмістити їх поруч з файлами шрифтів. При динамічному стискуванні перевірте, що всі основні формати шрифтів - EOT, TTF, OTF, SVG, WOFF і WOFF2 - віддаються з хостингу стислими ( перевірка стиснення ). Якщо це не так, то потрібно додати необхідні розширення або типи файлів в правила стиснення. Gzip ( або zopfli ) Стиснення дозволяє скоротити розмір шрифтів на 15-50%.

• Видалення гліфів. Для відображення тексту на сайті зазвичай потрібні далеко не всі символи, включені в шрифт за замовчуванням. Частина з них відноситься до іншої мови (наприклад, до китайського), частина - до спеціальних символів, які ви не використовуєте. існує велика кількість інструментів для видалення з шрифтів невикористовуваних гліфів та утиліти по Windows / Mac. Найбільш популярні - це сервіс Font Squirrel (в режимі Advanced), а також Subset.py і FontPrep . Також Google Fonts дозволяє завантажувати тільки використовувані набори символів. Цей метод оптимізації дозволяє скоротити результуючий файл ще на 10-50%.

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

Відкладене завантаження шрифтів

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

Перше - це жорстке кешування файлів (для звичайних користувачів) і base64-вистави (в localStorage, для мобільних користувачів). Прийом працює тільки для повернулися на сайт користувачів, але для них дозволяє істотно скоротити час завантаження ( Детальна інструкція по використання localStorage).

Друге - використання Font Loading API (Підтримується не всіма браузерами). При первинне завантаження сторінки можна показати текст в установленому у користувача шрифті, асинхронно завантажити потрібний шрифт - і витратити кілька десятків мілісекунд (майже невидиме «підвисання» браузера) на перемальовування сторінки по готовності шрифту. Існують бібліотеки для автоматизації процесу, одна з них представлена тут .

І третє - попередня завантаження шрифтів (якщо вони використовуються не з першої сторінки у користувачів, таких як в особистому кабінеті). Для цього підійде техніка prefetch , Яка вже дуже добре підтримується браузерами: http://caniuse.com/#feat=link-rel-prefetch ).

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