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

13

Від автора: Webfonts — одна з перших речей, які ми додаємо наші сайти — будь то індивідуальні або стилістичні причини. На жаль, це також сумно відомий тим, що наші сайти болісно повільно і розчаровують. Який кінцевий результат? Розчаровані користувачі та безліч втрачених можливостей для бізнесу. На щастя, за останні пару років цьому приділялося багато уваги. Отже, давайте подивимося на три кращих способи того, як здійснюється завантаження шрифтів на веб-сайти. Але спочатку давайте коротко на одній сторінці поговоримо про те, що може піти і піде не так.

Три найбільші проблеми з Webfonts

Почнемо з двох найбільш відомих проблем: FOIT (Flash of Invisible Text) і FOUT (Flash of Unstyled Text). Дозволю собі припустити, що ви всі знаєте, як та чому ці проблеми виникають, але на випадок, якщо ви цього не знаєте, от дуже коротке пояснення: коли браузер виявляє використання користувальницького шрифту, він чекає, коли веб-сайт завантажиться перед рендерингом тексту (тобто FOIT). Якщо через ~ 3 секунди він ще не завантажений, він відображає текст з резервним шрифтом (зазвичай це системний шрифт, наприклад, Arial). Згодом, коли webfont завантажений, резервний шрифт замінюється вашим webfont (тобто FOUT). Чому це проблема? Оскільки веб-сайт може додати більше 2 секунд до часу завантаження сторінки, то він також може втратити до 50% відвідувачів.

Тепер до останнього питання, про яку люди не дуже часто замислюються: «Зсув вмісту. Ви коли-небудь читали статтю, а через 5-10 секунд змінювалися шрифти, і все на сторінці прокручувалося, змушуючи вас шукати, де ви зупинилися? Так … супер-розчарування і ще один побічний ефект webfonts. Це відбувається тому, що резервний шрифт, що використовується браузером, і ваш webfont мають різні показники — літери ширші, більш тонкі, коротше або вище інших. І який результат? Всі текстове вміст переміщається вгору або вниз, коли браузер переключається на використання вашого webfont. Эууу.

Методи завантаження шрифтів

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

Спосіб Amazon — легко і просто

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

Починати з завантаження сторінки, використовуючи тільки системні шрифти. Ефективний метод боротьби з FOIT.

Пізніше завантаження сторінки зробити асинхронний запит webfont, щоб браузер кэшировал його на диск для подальшого використання. Вони домагаються цього, використовуючи свої власні бібліотеки, але ви можете добитися чогось подібного, використовуючи вибірку або бібліотеки зразок https://github.com/bramstein/fontfaceobserver

По завершенні запиту асинхронизации вони встановлюють localStorage об’єкт, який вказує, що тепер шрифт «повинен» кешуватися на диску (див. Нижче).

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

При завантаженні наступної сторінки вбудована частина JS перевіряє наявність цього localStorage об’єкта. Якщо це так, JS встановлює клас в об’єкті body, який дозволяє використовувати користувальницький webfont. Так як на цій другій сторінці завантаження webfont «повинен» бути кешованих, то, коли webfont використовується, немає нерівного тексту і, отже, ніякого зсуву вмісту.

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

font-display: optional; спосіб майбутнього

Не тільки Amazon працює над тим, щоб зробити webfonts краще, але і комітет по стандартам! Після декількох років роботи і обговорень ми маємо абсолютно нове CSS властивість, яка дає нам контроль над тим, як браузер обробляє завантаження WebFonts: font-display.

Це тема, якою я з легкістю міг би написати цілу статтю, тому, щоб зберегти цю коротку інформацію, я хотів би вказати на розділ презентації Monica Dinculescu ( @notwaldorf ), який розповість майже все, що потрібно знати https://vimeo.com/241111413#t=1065 (або якщо ви віддаєте перевагу читати, https://developers.google.com/web/updates/2016/02/font-display).

Як можна побачити, є багато різних опцій, але я настійно рекомендую використовувати необов’язковий параметр, який говорить браузеру про те, щоб зробити наступне: негайно використовуйте веб-сайті, якщо він доступний. В іншому випадку використовуйте резервний шрифт до наступного перегляду сторінки. Це не дозволяє браузеру дочекатися вашого webfont (немає FOIT) або замінює його середнім переглядом сторінок (без FOUT або зсуву вмісту).

Звучить здорово, але в чому хитрість? Їх дві:

Тільки близько 50% (по США, якщо дивитися по всьому світу, справи йдуть трохи краще) мобільних браузерів підтримують цю функцію — ось де вона важлива: https://caniuse.com/#feat=css-font-rendering-controls

Властивість не може бути додано до певного елемента, наприклад html; воно повинно бути додано в тег @font-face. Що це означає? Якщо ви використовуєте щось на зразок шрифтів google, що найбільш важливо, вам доведеться вручну створювати і редагувати @font-face css. Складно? Немає. Втомлює? Небагато.

localStorage; Узявши справу в свої руки. Мій улюбленець

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

Завантажте на комп’ютер веб-сайти, які ви використовуєте, base64 / JSON закодуйте їх і завантажити назад на сервер. Назвіть файли як зразок Roboto.json

Як і в будь-якому іншому методі, ми уникаємо FOUT, так що при першому поданні нашої сторінки не використовуються настроювані шрифти.

Як у методі Amazon, на половині сторінки ми будемо асинхронно витягувати закодовані нами кодовані base64 / json шрифти і зберігати їх localStorage (див. Нижче). На перший взгля, це велике количествр даних для зберігання … але навіть 2-3 шрифту, закодовані таким чином, мають тенденцію важити менше 100 КБ.

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

Тепер, коли у нас є наш шрифт, на майбутніх завантаження сторінки ми можемо перевірити наявність localStorage об’єкта, і, якщо він існує, потрібно доюавить і вставити шрифт у тегах стилю з допомогою JS.

Після того, як ми побачимо, що введений шрифт був доданий, ми просто додаємо клас до об’єкта body (точно так само, як метод «Amazon»), який вказує, що наш webfont тепер доступний.

Отже, велика різниця між методами Amazon і The Guardian? Оскільки ми зберігаємо фактичний шрифт, localStorage, а потім вбудовуємо його, у нас ніколи не буде помилкових спрацьовувань щодо присутності нашого webfont. Крім того, в якості гарного бонусу, ваша сторінка тепер також може використовувати цей шрифт в автономному режимі. Однак одним з головних недоліків тут є кількість часу та інструментів, необхідних для його зняття.

Висновок

Отже, який метод ви повинні використовувати для завантаження своїх веб-сайтів? На жаль, відповідь буде така:

Якщо ви шукаєте швидкий і простий метод, використовуйте метод Amazon

Якщо вам потрібно щось більш ретельне і в ладах з обмеженою підтримкою браузера, спробуйте використовувати font-display: optional

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

Але незалежно від того, що ви виберете, тепер ви можете бути щасливі, що тепер ви є веб-сторінкою праворуч (див. Нижче):

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