3 підказки для швидкого завантаження шрифтів

2

Від автора: напевно, в наші дні веб-шрифти — велика річ. Більшість з нас знають, як нині писати @font-face декларації. Ви знаєте все про WOFF і WOFF2, можливо, трохи про підмножину або, можливо, навіть про font-display для більш доступного надання тексту. Чорт, може, ви просто візьмете link тег з Google Fonts і підете? У будь-якому випадку, ось три підказки, з якими ви, можливо, ще не стикалися. Вони допоможуть зробити так, щоб завантаження шрифту була швидкою.

Хост-шрифти на вашому власному сервері

Більшість з нас бере фрагмент link Google Fonts і йде. Справедливості заради, це те, що я робив досить довгий час, але моя стандартна позиція при завантаженні сторонніх ресурсів з тих пір перейшла на одне з міркувань. Звичайно, сторонні ресурси витягують вигоду з CDN, які мінімізують затримку для кінцевого користувача. Це, звичайно, здорово, але я міг би так само легко помістити всі активи мого сайту за CDN і сам прийняти їх.

Єдина перевага використання стороннього сервісу, про який я можу думати, — це те, що кеш-атаки частіше виникають, так як кеш браузера може містити актив, який використовується також і іншим джерелом. Якщо ваш сайт використовує всюдисуще сімейство шрифтів, таких як Droid Sans або Open Sans, ви можете отримати вигоду з кешу, який може отримати доступ до послуг сторонніх розробників. Потенційні переваги кешування на стороні – наявність великої кількості хорошого хостингів, які можуть використовувати ваші власні шрифти:

Хостинг ваших власних шрифтів переводить на меншу кількість джерел браузера, щоб отримати дозвіл і згодом підключитися. Менше серверів = менше з’єднань = менше латентності в цілому.

Сторонні служби надають менше контролю над змістом @font-face декларації, тому що CSS контролюється і розміщується на стороні. Правда, такі сервіси, як Google Fonts, трохи пом’якшують цей параметр за допомогою параметрів рядка запиту, які дозволяють вам робити непрямі зміни в CSS, який вони надають. Але відсутність повного контролю над вашими @font-face засобами означає, що у вас буде менше гнучкості.

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

Незважаючи на вищенаведені переваги, можуть бути випадки, коли найкраща практика вашої організації в області розвитку передбачає використання стороннього постачальника. Чи є обмежуючим фактором. Або EULA не дозволяє розміщувати свої власні шрифти. Якщо це описує вашу ситуацію, ви повинні докласти трохи зусиль на пом’якшення потенційної затримки. Скажімо, у вас є типовий код Google Font для вставки в head. Ви можете звести до мінімуму час, необхідний для підключення до сервера за допомогою preconnect підказки ресурсу:

Більш широко сумісної альтернативою preconnect є dns-prefetch. Він не встановить з’єднання з сервером, але дозволить DNS для зазначеного хоста, який все ще може трохи прискорити роботу:

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

Агресивні підмножини шрифтів

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

3 підказки для швидкого завантаження шрифтів

Це заголовок в моєму блозі. Сімейство шрифтів, що використовується для тексту «WEB DEV BLOG», Monoton, і ця копія в заголовку сайту є єдиним місцем, де цей шрифт коли-небудь використовується. Цей вид елемента дизайну точно виграє у агресивного підмножини: він ніколи не змінюється і використовує невелику частину гліфів, що може запропонувати цей шрифт.

«Чому б просто не замінити його зображенням?» — це аргумент зчитувача, який я чекаю у відповідь на цю стратегію. Це потенційний варіант (за умови, що розумний alt текст є частиною рішення), але я б скоріше закодував цей елемент дизайну як текстовий вузол, щоб роботи / шукачі / зчитувачі екрану могли якомога простіше його розгледіти.
З іншого боку, якщо я вставляю латинське підмножина Monoton, використовуючи тег link, наданий Google Fonts, я завантажую велика кількість символів, які навряд чи коли-небудь будуть використані. У наведеній нижче таблиці показано, скільки важить кожен формат латинського підмножини Monoton, наданий Google Fonts:

3 підказки для швидкого завантаження шрифтів

* Використання gzip при встановленні рівня стиснення за замовчуванням 6.

У кращому випадку я прошу користувачів завантажити файл шрифту WOFF2, який важить 16 КБ, і який використовує тільки дев’ять унікальних гліфів. Звичайно, ми можемо зробити краще, якщо будемо агресивно множити цей шрифт на ці гліфи. Але як? Ця частина досить проста, якщо ви використовуєте glyphhanger утиліту командного рядка The Filament Group, плюс утиліту Python, яка називається pyftsubset (розподіляється разом з fonttools):

pyftsubset monoton.ttf \
—unicodes=$(glyphhanger ./chars.txt)\
—name-IDs=’*’\
—output-file=monoton-subset.ttf

У цьому прикладі ми використовуємо pyftsubset для підмножини monoton.ttf у monoton-subset.ttf. Діапазони юнікоду збираються шляхом виконання glyphhanger всередині підкоманди, яка зчитує вміст chars.txt. Зміст chars.txt в моєму прикладі — «WEB DEV BLOG». Коли glyphhanger закінчується, у нас залишається нове набір шрифтів TrueType, яке легше на 3,36 КБ. У цьому випадку це 10% від вихідного латинського підмножини.

Звичайно, шрифт TrueType є всього лише одним з компонентів повного рецепта @font-face. Вам знадобиться ще кілька форматів, щоб всі заповнити. Щоб зробити це, ви можете використовувати ttf2eot, ttf2woff і ttf2woff2 програми Node CLI таким чином:

ttf2eot monoton-subset.ttf monoton-subset.eot && \
ttf2woff monoton-subset.ttf monoton-subset.woff && \
cat monoton-subset.ttf | ttf2woff2 >> monoton-subset.woff2

Це дає наступні розміри активів:

3 підказки для швидкого завантаження шрифтів

* Використання gzip при встановленні рівня стиснення за замовчуванням 6.

Звичайно, ви можете використовувати glyphhanger для аналізу всього сайту і підмножини всіх шрифтів на основі вмісту сторінки. subfont це ще одна пропозиція, яка робить впевнену спробу вирішення цієї проблеми. В даний час я працюю над версією unicode-ranger 2, яка використовує Puppeteer для аналізу вмісту сторінки з розумної ступенем точності. Хоча я попередив, що unicode-ranger це незавершена робота, і вона не настільки зріла, як glyphhanger і subfont.

Знову ж таки, якщо ви не можете самостійно розміщувати свої власні файли шрифтів, створення крихітних підмножин шрифтів може бути для вас поганим варіантом, але є способи зробити це. Наприклад, в Google Fonts є функція, що дозволяє виконувати динамічне підмножина, якщо ви додаєте текст через text параметр рядка запиту в свій тег link google fonts. Якщо б я хотів використовувати Google Fonts для динамічного підмножини шрифту Monoton таким же чином, як і в наведеному вище прикладі, я б просто ввів наступне:

Пам’ятка: не забудьте закодированоное URL значення, яке ви передаєте через параметр text!

Відбір «симпатичних» шрифтів при наявності Save-Data

Ось цікавий рада, про який ви, можливо, ще не знаєте, він включає в себе визначення заголовка HTTP-запиту для Save-Data. Save-Data відправляється обраними браузерами, коли користувачі вказали у своїх уподобаннях, що вони воліли б додатка, що забезпечують більш легкий досвід. Ця функція недоступна у багатьох браузерах за межами Chrome на Android, але їх користувачі представляють собою значну частину всіх веб-користувачів.

Один коментатор моєї статті CSS-Tricks, Šime Vidas, запропонував відмінний спосіб відбракувати «симпатичні» шрифти, коли присутня Save-Data заголовок. Давайте розглянемо приклад того, як ви можете виконати цю задачу. Для початку можна використовувати мову back-end начебто PHP для перевірки заголовка:

Цей код перевіряє, чи встановлений Save-Data заголовок через ісеть функцію. Після того, як ми збережемо результат перевірки цієї змінної, ми зможемо використовувати її для умовного додавання no-save-data класу в body елемент наступним чином:

З такою логікою сервер буде посилати розмітку з класом no-save-data на елемент body, коли Save-Data відсутня. Потім можна писати стилі, які містяться в настроюваних шрифти, коли присутня no-save-data клас:

p {
font-family: sans-serif;
}
.no-save-data p {
font-family: «Open Sans», sans-serif;
}

За допомогою цього CSS браузер не буде завантажувати шрифти, зазначені у пункті @font-faceif, якщо властивість font або font-family в кінцевому підсумку не викликає їх після визначення каскаду стилю. У цьому прикладі

елемент за замовчуванням використовує загальний шрифт sans-serif. Якщо браузер не відправляє Save-Data заголовок (а потім додає no-save-data клас до body елементу в коді PHP вище), то він віддасть перевагу у використанні Open Sans. Нижче наведено приклад цього в дії:

3 підказки для швидкого завантаження шрифтів

Кілька більш просте рішення, не пов’язане з використанням класів CSS, могло б включати в себе @font-face оголошення в style тегах і виключення частини (або всіх) із них, якщо Save-Data присутній. Щоб бути абсолютно ясним, я не маю на увазі вбудовування шрифтів як URI даних, а тільки самих @font-faces.

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