Прийняття веб-шрифтів продовжує пришвидшуватися в Інтернеті. З 2014 року 37% найкращих 300 тис. Веб-сайтів використовують веб-шрифти. Прикладом використання веб-шрифтів є The Guardian або BBC, що означає збільшення вдвічі більше за останні дванадцять місяців. Але є й інші дуже важливі сайти, які використовують системні шрифти, такі як Washington Post, ABC, El Mundo або El País, оскільки це шрифти, які завантажуються дуже швидко, коли вони є в системі. Шрифт вже встановлений в ОС пристрою. Оптимізуйте веб-шрифти під час завантаження веб-сайту. Чи знаю я, що слід використовувати веб-шрифти?

завантаження шрифту

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

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

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

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

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

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

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

Використання @ font-face для завантаження користувальницьких веб-шрифтів - чудова особливість сучасних браузерів, щоб надати нашим сайтам унікальну естетику. Крім того, вже є веб-шрифти піктограм соціальних мереж, будинків, стрілок ..., що дозволяє уникнути необхідності завантажувати спрайти зображень в Інтернет. Будучи векторним, масштабування не відображатиме пікселів, що проходять разом із зображеннями.

Використовуючи власні шрифти в Інтернеті, завантажуючи їх за допомогою стандартних методів @ font-face та URL-адреси, це може сповільнити швидкість завантаження та ускладнити як фактичну, так і уявну продуктивність користувача. Є кілька методів, які, застосовуючи обережно, намагаються мінімізувати ефект FOIT та правильно збалансувати зручність, продуктивність та стиль, тобто ми втратимо деяку сумісність.

На наступному зображенні. Ми бачимо, як браузер завантажує веб-сторінку.

Як тільки ми дізнаємося, що бачимо, що у нас проблема з веб-шрифтом, коли робота WPO (Оптимізація веб-продуктивності) підкидає нас.

Браузер запитує HTML-документ
Браузер починає аналіз HTML-відповіді та побудову DOM
Браузер виявляє CSS, JS та інші ресурси та обробляє запити
Браузер створює дерево CSSOM після отримання всього вмісту CSS і поєднує його з деревом DOM для створення дерева відображення
Запити на шрифт обробляються, коли дерево відображення вказує, які варіанти шрифтів потрібні для відтворення вказаного тексту на сторінці
Браузер реалізує макет і малює вміст на екрані
Якщо шрифт ще недоступний, браузер може не відображати текстові пікселі

Проблема з @ font-face.

Декларація CSS @ font-face є стандартним методом посилання на власні шрифти в Інтернеті:

Легко, але, на жаль, за замовчуванням обробка більшості браузерів з @ font-face є проблематичною. Коли ви посилаєтесь на зовнішній веб-шрифт за допомогою @ font-face, більшість браузерів робить будь-який текст, який використовує цей шрифт, повністю невидимим під час завантаження зовнішнього шрифту.

IE негайно робить текст із запасним шрифтом і повертається до нього після завершення завантаження шрифту.
Firefox має візуалізацію шрифту до 3 секунд, після використання запасного шрифту, а після завершення завантаження шрифту ще раз відтворює текст із завантаженим шрифтом.
Chrome і Safari роблять шрифти призупиненими до завершення завантаження шрифтів. Це означає, що ми можемо залишатись порожнім Інтернетом.

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

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

Візуалізація шрифтів також вимагає часу в браузері користувача. Якщо у вас є старий смартфон або мобільний телефон, це може зайняти трохи більше часу. Якщо шрифт ще недоступний, браузер може не відображати текстові пікселі. Ефект FOIT. Коли шрифт доступний, браузер фарбує текстові пікселі.

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

Chrome, Safari зберігає текст візуалізації до завершення завантаження шрифту.
Firefox збереже візуалізацію шрифту до 3 секунд, а потім використає альтернативний шрифт. як тільки завантаження шрифту завершиться, вони знову відтворюють текст із завантаженим шрифтом.
IE негайно відтворює альтернативний шрифт, якщо запитуваний шрифт ще не доступний, і відтворює повторно, коли завантаження шрифту завершується.

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

Деякі веб-переглядачі чекатимуть заздалегідь визначеного періоду часу (зазвичай три секунди), поки шрифт завантажиться, перш ніж відмовитись і відобразити текст із використанням резервної сімейства шрифтів. Але, як вірне цуценя, браузери WebKit (Safari, браузер Android за замовчуванням, Blackberry) будуть чекати вічно (ну, часто 30 секунд і більше), щоб джерело повернулось. Це означає, що власні шрифти представляють потенційну точку відмови для придатного для використання сайту.

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

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

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

Є чотири основні моменти, які визначають вплив веб-шрифтів на ефективність роботи на сторінці:

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

Дизайнер сторінок повинен мінімізувати його використання. Якщо буде використано більше джерел, буде зроблено більше запитів і буде зроблено більше байтів. Загальна найкраща практика UX полягає в тому, щоб кількість шрифтів, що використовуються, була мінімальною, що також відповідає нашим цілям продуктивності. Крок перший: використовуйте веб-шрифти, але регулярно перевіряйте використання шрифтів і намагайтеся тримати його на відстані. Інша частина полягає в тому, що веб-шрифт повинен бути оптимізований за своєю вагою, це зробить дизайнер, або ви використовуєте оптимізовані шрифти Google, а з іншого боку, ми пояснимо, як поліпшити завантаження шрифту.

Веб-шрифт складається із серії гліфів, тобто векторних фігур, що описують букву або символ. Тому розмір конкретного файлу шрифту визначається двома простими змінними: складністю векторних шляхів для кожного гліфа та кількістю гліфів для певного шрифту. Наприклад, Open Sans, який є одним з найпопулярніших веб-шрифтів, складається з 897 гліфів, включаючи латинські, грецькі та кириличні символи. Ви повинні уникати символів мов, якими ви не користуєтесь. Дизайнеру слід спростити векторні форми та стиснути шрифт, щоб він не важив занадто багато.

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

В Інтернеті використовуються чотири формати контейнерів шрифтів: EOT, TTF, WOFF та WOFF2. На жаль, незважаючи на ці численні можливості, не існує єдиного універсального формату, який би працював у всіх браузерах, як старих, так і нових: EOT працює лише з IE, TTF частково сумісний з IE, WOFF має більшу сумісність, але він недоступний у деяких старих підтримка браузерів та підтримка WOFF 2.0 все ще впроваджується у багатьох браузерах і підтримується лише новими. Яка панорама. Завантаження шрифту передбачає завантаження декількох файлів для перегляду в більшості браузерів. Ми побачимо, як це виправити за допомогою умовного навантаження, виявляючи браузер користувача за допомогою javascript до

Скільки часу потрібно для того, щоб відвідувач завантажив ресурс веб-шрифтів на свій сайт? Найкращий спосіб відповісти на це питання - це інструментувати свій сайт за допомогою API синхронізації ресурсів, що дозволяє нам отримувати дані DNS, TCP та передавати дані про час для кожного шрифту - як бонус, нещодавно ввімкнені Google Fonts Ресурси синхронізації Ось приклад фрагмента повідомлення про затримки джерел до Google Analytics для ваших звітів:

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

IE негайно робить текст із запасним шрифтом і повертається до нього після завершення завантаження шрифту.
Firefox має візуалізацію шрифту до 3 секунд, після використання запасного шрифту, а після завершення завантаження шрифту ще раз відтворює текст із завантаженим шрифтом.
Chrome і Safari роблять шрифти призупиненими до завершення завантаження шрифтів.

браузер не може ініціювати запит на шрифт, поки він не має як DOM, так і CSSOM і не зможе вирішити шрифти, необхідні для поточної сторінки.

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

Перевіряйте використання джерела та завжди тримайте його в межах логіки. Зробіть оптимізованими ресурси шрифтів - див. Чити Google Web Fonts. Крива гліфів повинна бути зменшена.
Оптимізуйте затримку передачі для кожного джерела.
Оптимізуйте видалення непотрібних JS до або після веб-шрифтів або використовуйте його для асинхронного завантаження шрифту.
Потратьте трохи часу на гру з API завантаження подій шрифтів, щоб зрозуміти, як працюють веб-шрифти.
Те, що сторінка використовує шрифт, не означає, що вона сповільнить його, якщо зробити це вдало та в міру. Добре оптимізований сайт може запропонувати кращий та швидший досвід, наприклад, використовуючи шрифт значків, щоб уникнути багатьох зображень,

Google Fonts є безкоштовним та відкритим кодом, що дозволяє дуже ефективно кешувати між сайтами. Ви також можете зберегти пропускну здатність на своєму сервері. Фактично, 40 найкращих шрифтів Google використовуються понад 100 000 доменами. Іншими словами, використовуючи популярний Інтернет-шрифт, Ви можете переконатись, що багато користувачів матимуть його як кеш у своєму браузері. Наприклад, шрифт Sans широко використовується і розбірливий. Чим ширше прийняття, тим більша ймовірність потрапляння в кеш і краща продуктивність. Але що, якщо я хочу свій бренд для свого бренду. Не впадайте у відчай, є способи покращити навантаження.

Скориставшись кешем CSS та кешем самого шрифту, ви зможете швидко та легко розгорнути. Ви отримуєте швидкий перегляд, дуже близький до системного джерела. Поєднання його із глобальним CDN, оптимізованими форматами файлів та великим глобальним та спільним кешем покращить продуктивність. Пора також дізнатися:

Як ми відповідально використовуємо веб-шрифти, або, уникаючи @ font-face-palm?

Перемогти спалах невидимого тексту (FOIT) можна уникнути за допомогою функції Javascript loadCSS.

Спалах нестильового тексту (FOUT) - це спосіб поступово розфарбувати шрифт, коли його завантажили, і побачити його якомога швидше.

Приклад перемоги над спалахом невидимого тексту (FOIT) за допомогою loadCSS.

Також дуже цікавим трюком для збереження трасування HTTP є завантаження джерела в CSS в базі 64 замість url.

Приклад /url/to/woff.css та /url/to/ttf.css

Якщо ми додамо виявлення браузера, ми завантажимо необхідний тип файлу

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

Ми залишаємо вам javascript дуже близький до досконалості

Нарешті, і це вже на замітку, ми можемо зберегти типографіку не тільки в кеш-пам’яті, але й використовувати локальне сховище сучасного браузера. "Гардіан" та ВВС ним користуються. Це вже паранойя WPO та SEO. Це помістити веб-шрифт у Json, щоб скористатися тим, що браузер завантажує його раніше, і залишити збереженим у браузері користувача, щоб не потрібно було робити більше запитів. Це якщо це почесна реєстрація для оптимізації завантаження власного веб-шрифту.

Ми залишаємо вам реалізацію The Guardian. Після цього технік та дизайнер повинні знаходитись у клініці психічного здоров’я 🙂

Висновок, ми втратили страх перед веб-шрифтами в міру.