Критичні веб-шрифти

21

Від автора: в історії завантаження веб-шрифтів можна виділити безліч етапів. У статті розглянуті дані етапи.

Отже, в історії завантаження веб-шрифтів можна виділити безліч етапів:

1. Етап, коли ніхто нічого не робив: у тому числі неправильне використання блоку @font-face. Я вважаю, що це можна назвати анти шаблоном. З таким підходом в деяких браузерах з’являється проблема миготіння невидимого тексту (МНТ) і навіть гірше, в браузерах без таймауту завантаження шрифту (WebKit) створюється єдина точка помилки.

2. Data URI для миготливого нестилизованного тексту: Асинхронне завантаження CSS стилів шрифтів (або з допомогою AJAX запитів), поданими через Data URI (і збереження їх на локальному носії для повторного використання). Даний метод застарів і може викликати короткі мигання невидимого тексту на деяких слабких пристроях.

3. Використання класу в області видимості для миготливого нестилизованного тексту: CSS Font Loading API (або полифил типу FontFaceOnload і fontfaceobserver) використовується для додавання класу, захищає наш контент від незагрузившихся веб-шрифтів. Цей метод, на мою думку, можна назвати мінімумом серед кращих практик або вступом у Font Loading 101.

4. Використання двох класів в області видимості для миготливого фальшивого тексту: Цей метод все трохи ускладнює і використовує два різних етапу в класах, що знаходяться в області видимості. На першому етапі завантажується Roman, шрифт, потім на другому етапі вже завантажується будь-яка варіація цього шрифту: Bold, Italic, Bold Italic. Відмінно підходить для повільних з’єднань, так як даний метод забирає на себе більшу частину всіх перестроювань сторінки, тим самим перебудова сторінки стає менш помітною і не так сильно впливає на користувача. Я б класифікував даний метод як середній Font Loading 201.

Наступний етап: критичні миготіння фальшивого тексту

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

Я реалізував цю техніку на своєму веб-сайті. Я використовую 4 шрифту: Lato Roman, Lato Bold, Lato Italic і Lato Bold Italic.

Оригінальний шрифт Lato Roman 25Кб у форматі WOFF2.

Lato Roman тільки знаки A-Za-z важить всього лише 9Кб у форматі WOFF2 (36% від оригіналу)

Досить відчутна втрата у вазі на першому етапі.

Порівняння по часу завантаження

Жовтою рамкою виділено момент завантаження і відтворення шрифту roman (коли він використовується для основного тексту). Зверніть увагу, що дані розгортки були зняті з мого сайту zachleat.com у браузері Chrome за допомогою спеціальної функції «Regular 3G».

За замовчуванням

Критичні веб-шрифти

Використання класу в області видимості для блимаючого тексту нестилизованного

Критичні веб-шрифти

Використання двох класів в області видимості для блимаючого тексту фальшивого

Критичні веб-шрифти

Використання двох класів в області видимості для критичного блимаючого тексту фальшивого

Критичні веб-шрифти

Порівняння продуктивності

Критичні веб-шрифти

Ми значно відтягнули момент повного завантаження сторінки для зниження стрибання тексту перед користувачем при перестроюванні. Коли метод font-size-adjust буде працювати не тільки в браузері Firefox, потреба в цій техніці відпаде якщо не зовсім, то значно. А поки цей момент не настав, я вважаю цей спосіб основним для зниження відволікаючий від читання факторів.

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

Код

Код даного методу можна подивитися на GitHub. В роботі методу використовується подія FontFaceOnload для полифила завантаження шрифту.

Якщо цікаво, то я реалізував схожий метод за допомогою FontFaceObserver Брема Штейна.

Для повторних переглядів можна використовувати той же самий механізм, що й раніше. Я використовую sessionStorage Брема Штейна таким чином, що мені не доводиться взагалі нічого робити на серверній стороні. Реалізацію можна подивитися в коді на GitHub в файлах initial.js і fonts.js (рядки 15 і 37 відповідно).

Ідеї щодо поліпшення

Деякі сервіси завантаження шрифтів вже пропонують механізм тонкого налаштування і динамічного зміни наборів шрифту. Dynamic Subsetting генерує набір шрифту нальоту, використовуючи тільки знаки зі сторінки. Dynamic Augmentation додає знаки в завантажений шрифт також нальоту, щось типу стрімінг шрифтів.

Даний підхід можна зробити більш поширеним за допомогою критичного CSS і сканування сторінок на символи, які відображаються у фіксованому вікні перегляду. (grunt-criticalcss використовує дозвіл 1200х900) Сканування дозволить більш точно виділити набори символів, використовуваних під конкретний розмір вікна, навіть найменші. Такий підхід вимагає більшої уваги, враховуючи те, що зі статичним контентом доводилося б передбачати, що станеться для кожної унікальної посилання. Або ж процес можна запустити динамічно за допомогою JS під час завантаження сторінки, що вимагає підключення величезної бібліотеки, знижує продуктивність.

Насправді, можна було б спробувати реалізувати даний підхід за допомогою приголомшливою бібліотеки Plumin.js, але для нашого випадку вона надто велика (минифицированная версія ~400Кб). На даний момент я обмежуся базовим шрифтом формату WOFF2 в 9Кб, підміняють повну версію 25Кб. Колективна бібліотека повинна бути як мінімум менше базового файлу (але я б не мріяв, що вага веб-шрифту і вага JS бібліотеки зрівняється – у них різний вплив на продуктивність).

Також варто згадати про статтю для сайту A List Apart Ендрю Джонсона. Слідкуйте за даним методом – з його допомогою ми б змогли динамічно генерувати будь-яку насиченість і стилі, як творці шрифтів. За допомогою різних наборів насиченості і стилів можжно було б економити байти в дизайні. Я б хотів, щоб даний метод стандартизували.