Прискорення сайтів: оптимізація підключаються шрифтів

  1. Способи підключення шрифтів
  2. Локальне розміщення шрифтів
  3. Використання сервісу Google Fonts
  4. Оптимізація процесу завантаження шрифтів
  5. Скорочення обсягу файлів шрифтів
  6. Збереження шрифтів на сервері з сайтом
  7. Тонкі оптимізації: Font Loading API
  8. висновки

к.е.н. Лавлинский Н. Е., технічний директор ТОВ «Метод Лаб» к

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

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

Способи підключення шрифтів

Для оптимізації процесу розглянемо два основних способи підключення шрифтів. Перший - розміщення на власному сервері, другий - використання сервісу Google Fonts.

Локальне розміщення шрифтів

Цей спосіб вимагає наявності файлів шрифтів на сервері поруч з сайтом. Адреси для завантаження в цьому випадку вказуються щодо домену сайту, наприклад: url ( '/ fonts / pts-webfont.eot').

Використання сервісу Google Fonts

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

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

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

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

Скорочення обсягу файлів шрифтів

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

  1. Використовувати найбільш просунутий формат WOFF2 (до 30% економії).
  2. Для форматів TTF, EOT, SVG використовувати gzip-стиснення.
  3. Збирати шрифти тільки з необхідних наборів символів і накреслень.
  4. Встановити кешируєтся заголовки для файлів шрифтів з великим терміном зберігання.
  5. Для рідкісних випадків (заголовки, логотип) можна формувати файли шрифтів по окремим символам.

Більшість цих оптимізацій можна реалізувати сервісами по конвертації шрифтів і настройками веб-сервера.

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

Збереження шрифтів на сервері з сайтом

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

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

Тонкі оптимізації: Font Loading API

Для повного контролю процесом завантаження шрифтів створена технологія Font Loading API. На даний момент вона підтримується не у всіх сучасних браузерах. За допомогою цього API можна примусово запускати завантаження шрифтів, управляти правилами показу контенту до завантаження шрифтів і так далі. Детальніше про це можна прочитати в керівництві для розробників Web Fundamentals .

висновки

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

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