Чи є виграш від локального розміщення (self-hosting) шрифтів Google?

Коли ви працюєте над своїм сайтом і все глибше поринаєте у технології, – дуже багато речей, що раніше були тривіальними, – вже такими не будуть здаватися. Наприклад, ви багато дізнаєтеся про веб-шрифти, та специфіку їх використання. Особливо, коли постане екзистенційне питання: а чи варто замінити підключення шрифтів Google з віддаленого серверу на свій?

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

Нюанси використання сторонніх ресурсів з віддаленого хостингу

Деякий час було модно використовувати CDN для підключення ресурсів (наприклад, jQuery) з чужого домену, що базувалося на обмеженнях браузерів по кількість підключень. Сьогодні ж, при повсюдності HTTPS та HTTP/2, (який виграє від одного «великого» з’єднання, а не багатьох «маленьких»), використання інших доменів часто призводить до втрати продуктивності через «дорогі» підключення.

Багато хто йшов шляхом шардування домену, і розділяв його на кілька піддоменів для ресурсів (наприклад, fonts.site.com), щоб збільшити діапазон підключень, але сьогодні від цього вже не буде тієї користі, як могло би бути колись.

Конфіденційність та безпека

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

Не кажучи вже про наслідки для безпеки. Хоча можна використовувати SRI (Subresource Integrity), – механізм безпеки з перевіркою завантажених ресурсів, коли браузер порівнює їх хеш з вказаним у атрибуті integrity, – однак, це працює лише для статичних файлів. Непроходження перевірки може стати єдиною точкою відмови (SPOF, Single Point of Failure), що призведе до блокування всього сайту. Хоча Google Fonts важко вивести з ладу, але гіпотетично його можуть блокувати проксі-сервери країн з диктатурою.

Тож, все більше доводів складається на користь самостійного розміщення статичних ресурсів. Шрифти – це статичні ресурси, отже їх бажано розміщувати на своєму сервері, чи не так? Виявляється, що все не так просто.

Шрифти Google та як вони працюють

Google Fonts — це чудовий безкоштовний ресурс, що містить велику кількість шрифтів з відкритим кодом. Його принада — функція постачальника веб-ресурсів (CDN), що дозволяє почати використовувати шрифт, просто додавши один рядок коду на сайт:

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

Суттєвим недоліком є неочевидність впливу на продуктивність. Ваш сайт спочатку завантажує таблицю стилів з fonts.googleapis.com, яка, в свою чергу, містить CSS-код з посиланнями на файли шрифтів на домені fonts.gstatic.com. Ось як приблизно виглядає файл підключення шрифтів:

/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ... інші мовні підмножини ... */
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ... */

Така конструкція має вплив на продуктивність: оскільки шрифти виявляються браузером пізно під час завантаження сторінки (адже потрібно завантажити ще й CSS), ще й домен інший, ще й потрібно встановити HTTPS-з’єднання. Може пройти кілька секунд, перш ніж почне завантажуватися сам шрифт.

Як покращити підключення шрифтів Google?

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

Цей один рядок коду дозволяє трохи покращити продуктивність. Попередньо завантажувати самі шрифти неможливо, оскільки Google Fonts використовує унікальні хеші в їх назвах (наприклад, 4iCs6KVjbNBYlgoKcg72j00.woff2 замість Ubuntu.woff2).

Заміна відображення шрифту (Font Display Swap)

Інструкція font-display: swap; повідомляє браузеру спочатку використовувати резервний системний шрифт, а потім замінити його справжнім після завантаження. Це покращує продуктивність, оскільки рендеринг контенту не відкладається. Проте, це призводить до “спалаху нестилізованого тексту” (Flash of Unstyled Text, FOUT), що може бути трохи різким для очей. Альтернативою (з сумнівною репутацією) є “спалах невидимого тексту” (Flash of Invisible Text, FOIT), коли текст приховується, доки не з’явиться потрібний шрифт. Якщо ви використовуєте шрифти Google, перевірте, чи є параметр &display=swap у URL-адресі, і якщо ні, додайте його.

Self-hosting: основні моменти та складнощі

Чи не краще локальне розміщення і CSS, і шрифта? Адже існують онлайн-інструменти, які здатні завантажувати та конвертувати будь-які шрифти. Здається, що все просто: завантажили шрифт до себе на сервер, підключили і не потрібно покладатися на сторонні домени.

Однак, при заглибленні у тему, можна помітити, що файли шрифтів стали більшими. Чому так? Тому що при самостійному локальному розміщенні ви втрачаєте розумні оптимізації Google:

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

Що таке змінні шрифти?

Змінні (варіативні) шрифти дозволяють використовувати різні стилі (товщину, нахил) без необхідності завантажувати окремі файли для кожного стилю. Це значно зменшує кількість запитів та загальний обсяг даних. Наприклад, замість завантаження окремо `Normal`, `Bold`, `Italic` та `Bold Italic` (що може важити 500 КБ і більше), ви завантажуєте один файл і керуєте стилями через CSS.

Висновок: тож чи варто розміщувати шрифти локально?

Відповідаючи на питання в заголовку: так, у більшості випадків краще розміщувати ресурси локально, оскільки це значно покращує продуктивність. За середніми підрахунками, локально розміщені шрифти скорочують час завантаження приблизно вдвічі. Основна причина: ви позбуваєтесь зайвого CSS-файлу з іншого домену, який блокує рендеринг сторінки. Браузер бачить, що є CSS для завантаження, тому блокує всю сторінку, поки ми підключаємося до цього домену, а потім завантажуємо його. У цьому випадку весь ваш сайт буде заблоковано для рендерингу, доки не закінчиться тайм-аут браузера.

Однак, Google Fonts — це не просто сховище шрифтів, це розумний механізм доставки. Перехід на self-hosting вимагає від вас самостійної реалізації багатьох оптимізацій: font-display: swap, font-subsetting та видалення хінтінгу (зміни контуру шрифту під час його растеризації).

Якщо ви справді зацікавлені в продуктивності свого сайту (а вам варто!), тоді краще робити це правильно. Самостійне розміщення шрифтів трохи складніше, ніж використання CDN шрифтів від Google, але тепер у вас є краще розуміння цього процесу. Тестуйте, тестуйте і ще раз тестуйте, щоб знайти оптимальне рішення саме для вашого сайту.

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