1. Что такое веб-шрифты?
2. Резервные шрифты
3. Блокировка рендеринга и критический рендеринг
4. Foit
5. Оптимизация доставки веб-шрифтов
6. 2 - Выберите только те стили, которые вам нужны
7. 3 - Наборы символов
8. 4 - Шрифты хоста локально или предварительная выборка
9. 5 - Хранить в LocalStorage с кодировкой Base64
10. Другой метод
11. Тест Google Fonts
12. Результаты
13. Тест безопасного веб-шрифта
14. Результаты
15. Тест локальных шрифтов
16. Результаты
17. Третья сторона: тест на комплект
18. Результаты
19. Резюме

Брайан Джексон

Обновлено 14 июня 2018 г.

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

Согласно архиву HTTP, 57% сайтов теперь используют пользовательские шрифты , Что на 850% больше, чем в 2011 году.

Что такое веб-шрифты?

Веб-шрифты - это те, которые не установлены на компьютере пользователя, поэтому их приходится загружать с веб-сервера. Они загружаются с помощью объявления CSS3 @ font-face и должны поддерживаться веб-браузером.

Четыре основных формата шрифтов, которые используются в Интернете сегодня.

• TrueType Font (TTF): разработанный в конце 80-х годов Apple и Microsoft. Это самый распространенный формат шрифта.
• Web Open Font Format (WOFF): формат шрифта, разработанный в 2009 году для использования на веб-страницах. WOFF - это в основном OpenType или TrueType со сжатием и дополнительными метаданными.
• Web Open Font Format (WOFF2): лучшее сжатие, чем WOFF.
• Встроенный открытый тип (EOT). Компактная форма шрифтов OpenType, разработанная Microsoft для использования в качестве встроенных шрифтов на веб-страницах.

Так какой из них вы должны использовать? В соответствии с могу ли я использовать 86% браузеров поддерживают формат WOFF . Только IE8 и более старые мобильные браузеры Android не поддерживают его. Таким образом, лучшая рекомендация - предоставить WOFF и WOFF2 (использовать дополнительное сжатие) для всех современных браузеров, а затем использовать безопасный веб-шрифт, такой как Arial для остальных, о чем мы подробнее расскажем ниже.

Для Intel ClearSans WOFF2 экономит 25% размера файла по сравнению с WOFF - Новый код

Если вы хотите предоставить определенный шрифт для всех браузеров, вам необходимо включить TTF, WOFF, WOFF2 и EOT. Это, однако, требует больше ресурсов.

Вот список поддержки браузеров для TTF, WOFF, WOFF2 и EOT.

Источник: W3Schools

Есть много преимуществ использования веб-шрифтов. Одна из главных причин, по которой компании используют веб-шрифты, заключается в том, что они могут добиться согласованного брендинга в различных средах. Веб-шрифты являются масштабируемыми, масштабируемыми и совместимы с высоким разрешением, что означает, что они могут быть легко показаны на настольных компьютерах, планшетах и ​​мобильных телефонах независимо от разрешения. Другими преимуществами использования веб-шрифтов являются дизайн, удобочитаемость и доступность.

Веб-шрифты имеют решающее значение для хорошего дизайна, UX и производительности. Илья Григорик - Инженер веб-производительности в Google

Самый большой недостаток использования веб-шрифтов заключается в том, что он мгновенно влияет на общую скорость рендеринга ваших страниц . Если вы используете стороннюю компанию, такую ​​как Google или Typekit, вы также не можете контролировать, будут ли недоступны их службы . Typekit был отключен только в прошлом месяце Это также добавляет дополнительные HTTP-запросы к внешним ресурсам. Вообще говоря, вы хотите свести HTTP-запросы к минимуму. Веб-шрифты также блокируют рендеринг.

Резервные шрифты

Вы всегда хотите иметь запасной шрифт в случае, если сторонний хост веб-шрифтов не работает или посетитель использует более старый браузер. Они называются веб-безопасными шрифтами, которые предварительно установлены во многих операционных системах и не используют декларацию CSS3 @ font-face.

Согласно cssfontstack.com, вот 5 лучших веб-шрифтов без засечек через Windows и Mac:

Шрифт Windows Mac Arial 99,84% 98,74% Verdana 99,84% 99,1% Требушет MS 99,67% 97,12% Tahoma 99,95% 91,71% Arial Black 98,08% 96,22%

И вот 5 лучших веб-безопасных шрифтов с засечками для Windows и Mac:

Шрифт Windows Mac Times New Roman 99,67% 97,48% Грузия 99,4% 97,48% Пфальц 99,29% 86,13% Лусида Брайт 76,12% 99,64% Гарамонд 86,47% 49,91%

Вы можете увидеть полный список веб-безопасных шрифтов на cssfontstack.com ,

А если вы используете мобильный телефон, шрифты Google поддерживаются большинством современных мобильных операционных систем, включая Android 2.2+ и iOS 4.2+. С момента выпуска Ice Cream Sandwich, Roboto стал стандартом гарнитура на Android , Начиная с Froyo, Noto была стандартной гарнитурой на Android для всех языков, не охватываемых Roboto. Это те шрифты, которые вы хотели бы использовать для резервных шрифтов. А для шрифтов iOS есть отличный ресурс на iosfontlist.com ,

Пример объявления CSS3 @font

Вот пример того, как использовать объявление @font с Open Sans. Это будет, если вы предоставляете форматы WOFF и WOFF2.

@ font-face {font-family: 'Open Sans'; src: local ('Open Sans'), local ('OpenSans'), формат url ('./ fonts / open-sans.woff2') ('woff2'), url ('./ fonts / open-sans.woff ') формат (' woff '); }

Пример резервного шрифта

И вот пример того, как использовать запасной шрифт. Таким образом, в случае, если Open Sans недоступен или не может быть найден, браузер прибегнет к Arial, который является веб-безопасным шрифтом. Это позаботится об остальных 14% браузеров, как мы упоминали ранее.

body {font: 18px / 28px 'Open Sans', Arial, без засечек; }

Блокировка рендеринга и критический рендеринг

Как мы обсуждали в нашем посте на « 10 инструментов тестирования скорости веб-сайта для анализа веб-производительности «По умолчанию CSS рассматривается как ресурс блокировки рендеринга. А поскольку вы вызываете свои веб-шрифты с помощью объявления CSS3 @font, это автоматически означает, что веб-шрифты также могут блокировать рендеринг , не давая вашей странице загружаться так быстро, как могла.

Вы должны принять во внимание критический путь рендеринга . Google определил критический путь рендеринга как последовательность шагов, которую проходит браузер, чтобы превратить «код и ресурсы, необходимые для визуализации начального вида веб-страницы», в реальные пиксели на экране.

Чтобы оптимизировать критический путь рендеринга и предотвратить блокировку рендеринга, вы можете включить CSS, необходимый для начального рендеринга, обычно стили для содержимого выше сгиба, непосредственно в разделе HEAD в элементах <style> </ style>. Затем переместите оставшуюся часть CSS вниз до элемента </ body>.

пример

Источник: Critical Path CSS Generator

Вы также можете загрузить свои шрифты Google асинхронно, используя Google Web Font Loader , Просто поместите следующий код в нижний колонтитул.

<script type = "text / javascript"> WebFontConfig = {google: {family: ['Open + Sans: 400,700: латиница']}}; (function () {var wf = document.createElement ('script'); wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = ' text / javascript '; wf.async =' true '; var s = document.getElementsByTagName (' script ') [0]; s.parentNode.insertBefore (wf, s);}) (); </ Скрипт>

Foit

FOIT или «Flash of Invisible Text» может быть еще одним большим недостатком при использовании веб-шрифтов. Это когда браузер скрывает весь текст, который должен быть оформлен с помощью пользовательского шрифта, до тех пор, пока этот шрифт не завершит загрузку. Это определенно то, чего вы хотите избежать при оптимизации производительности вашего шрифта, потому что пользователи будут видеть пустой экран. Это может увеличить ваш показатель отказов и вредит вашему брендингу.

Оптимизация доставки веб-шрифтов

1 - расстановка приоритетов на основе поддержки браузера

Как мы упоминали ранее, поскольку 86% всех современных браузеров поддерживают формат WOFF, предоставляют WOFF и WOFF2 (лучшее сжатие), а затем возвращаются к веб-безопасному шрифту.

2 - Выберите только те стили, которые вам нужны

Выбирайте только те стили, которые вам нужны. Это уменьшает размер до минимума. Обычно большинству сайтов нужен только нормальный стиль и смелый стиль. Вы можете выбрать, какие стили вы хотите в Google Fonts ,

3 - Наборы символов

Если вы не имеете дело с несколькими языками, убедитесь, что ваши наборы символов сведены к минимуму.

Вы также можете удалить шрифты и удалить кодировки, используя Font Squirrel Web Font Generator ,

4 - Шрифты хоста локально или предварительная выборка

Разместите свои шрифты локально . Многие шрифты находятся под лицензией с открытым исходным кодом. Open Sans - хороший пример того, что вы можете разместить локально. Если вы не размещаете хостинг локально, используйте предварительную выборку в Google Fonts, чтобы быстрее разрешить доменное имя. Включите это в раздел HEAD вашего HTML:

<link rel = "dns-prefetch" href = "// fonts.googleapis.com">

Узнайте больше о упреждающая выборка ,

5 - Хранить в LocalStorage с кодировкой Base64

Вы можете пойти еще дальше, используя скрипт для определения поддерживаемого формата шрифта, base64, кодирующий шрифты в один файл CSS и сохраняющий их в localStorage. Собственный кэш браузера довольно часто сбрасывается, особенно на мобильных устройствах. Таким образом, сохраняя в localStorage, файл постоянно кэшируется.

Откладывая загрузку веб-шрифтов и сохраняя их в localStorage, мы избежали задержки около 700 мс . Smashing Magazine

LocalStorage также упоминается как веб-хранилище хорошо поддерживается всеми браузерами , Вот пример того, как асинхронно загружать веб-шрифты из localStorage после начала рендеринга страницы.

Другой метод

Вот еще один метод, в котором Группа накаливания имела большой успех, используя Font Face Observer , Font Face Observer - это небольшой загрузчик и монитор @ font-face (уменьшенный на 5,2 КБ и Gzipped на 1,9 КБ), который можно использовать с Google Fonts, Typekit и т. Д. Они смогли сократить время начала рисования шрифта с 2,7 секунды. до 300 мс.

Источник: Филамент Групп

Узнайте больше о Font Face Observer и используя события шрифта ,

Мы решили провести несколько сравнительных тестов с различными веб-шрифтами и методами, чтобы увидеть, что загружается быстрее. Мы создали простую HTML-страницу с несколькими абзацами и без изображений. Это позволило нам сузить скорость шрифта без каких-либо других факторов.

Тест Google Fonts

Сначала мы взяли 10 лучших веб-шрифтов Google и проверил их каждый через тест, чтобы увидеть, какой из них загружается быстрее всего из CDN Google.

1. Open Sans
2. Roboto
3. Освальд
4. Лато
5. Slabo 27px
6. Droid Sans
7. Roboto Condensed
8. PT Sans
9. Open Sans Condensed
10. Source Sans Pro

С помощью WebPagetest мы запустили тесты со следующими настройками:

• Место проведения теста: Лос-Анджелес
• Браузер: Chrome
• Подключение: DSL (1,5 Мбит / с)
• Количество тестов: 8 (принять медиану)
• Вид: только первый вид
  • Мы выбрали первый вид только потому, что любые дальнейшие загрузки будут кэшировать шрифт в браузере

Результаты

Вот лучшие 10 шрифтов и их время загрузки страницы .

Время загрузки шрифта (с) мс задержка по сравнению с Open Sans Open Sans 0,476 - Освальд 0,477 1 PT Sans 0,479 3 Source Sans Pro 0,480 4 Slabo 27px 0,487 11 Roboto 0,489 12 Roboto Condensed 0,489 12 Droid Sans 0,490 13 Lato 0,497 20 Open Sans Condensed 0.503 26

Все они были довольно близки друг к другу, но, как вы можете видеть, Open Sans, безусловно, самый быстрый загружаемый шрифт, когда дело доходит до загрузки из CDN Google.

Тест безопасного веб-шрифта

Затем мы запустили тест с использованием Arial, безопасного веб-шрифта без засечек. Мы хотели посмотреть, в чем будет разница, если мы избавимся от этого внешнего запроса на //fonts.googleapis.com/.

Результаты

Вот сравнение Arial против Open Sans от Google.

Время загрузки шрифта Arial (Web Safe Font) 0,281 Open Sans (Google Font) 0,476

Итак, как вы можете видеть, существует почти 200 мс разница между использованием Open Sans, обращением к Google в качестве внешнего ресурса и использованием Arial, безопасного веб-шрифта. Это полезно иметь в виду и понимать, сколько задержки добавляется, просто добавляя внешние запросы и время загрузки шрифтов.

Тест локальных шрифтов

Затем мы запустили тестовый хостинг шрифта Open Sans локально на нашем веб-сервере, чтобы увидеть, как он будет сравниваться с использованием CDN Google и дополнительным внешним вызовом.

Вы можете легко получить версии Open Sans WOFF, используя Google-Helper-Веб-шрифты ,

Результаты

Вот сравнение хостинга Open Sans локально с Google CDN.

Шрифт DOC Выполнено (ы) Полностью загружено (ы) Open Sans Local 0,530 0,706 Open Sans (Google CDN) 0,476 0,724

Таким образом, как вы можете видеть хостинг локально, время завершения документа было почти на 50 мс медленнее. Но первая краска произошла в 0.347 с, в отличие от Google в 0.535 с. И он завершил полную загрузку также быстрее. Основная причина этих результатов из-за близости сервера. Сервер, на котором размещен контент, находится в Далласе, штат Техас. Тест проводится в Лос-Анджелесе, штат Калифорния. При использовании Google Font он обслуживался из их CDN по этому IP: 74.125.224.152, который расположен недалеко от места тестирования, и это привело к значительному уменьшению TTFB. Так что CDN имеют большое значение! Локальный хостинг больше не всегда является лучшим решением, потому что вы хотите, чтобы шрифт загружался из местоположения в непосредственной близости от пользователя.

Вы также можете переместите ваши Google Fonts на ваш CDN , Мы провели собственное сравнение между использованием CDN от Google и KeyCDN, и было быстрее использовать KeyCDN. Зачем? Поскольку это уменьшает количество HTTP-запросов, поиск DNS, позволяет вам воспользоваться преимуществами одного соединения HTTP / 2 и иметь больший контроль над кэшированием.

Тест скорости Google CDN (мс) KeyCDN (мс) Победитель WebPageTest Время загрузки 1871 мс 1815 мс KeyCDN WebPageTest полностью загружен 1929 мс 1862 мс KeyCDN Время загрузки Pingdom 355 мс 324 мс KeyCDN

Третья сторона: тест на комплект

Затем мы запустили тест с Typekit, чтобы проверить его производительность. TypeKit предоставляет вам расширенный код для встраивания, чтобы вы могли асинхронно загружать его на свой сайт. Если вы используете их код для встраивания по умолчанию, вы столкнетесь с проблемами с FOUT, который похож на FOIT, как мы описали ранее, но скорее это вспышка нестандартного текста . Также важно отметить, что в Chrome (36+), Opera (23+) и Firefox есть трехсекундный тайм-аут , после чего показывается запасной шрифт.

Расширенный код для встраивания

<script type = "text / javascript"> (function (d) {var config = {kitId: 'xxxxxxx', scriptTimeout: 3000}, h = d.documentElement, t = setTimeout (function () {h.className = h .className.replace (/ \ bwf-loading \ b / g, "") + "wf-inactive";}, config.scriptTimeout), tk = d.createElement ("script"), f = false, s = d .getElementsByTagName ("script") [0], a; h.className + = "wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadyst atechange = function () {a = this.readyState; if (f || a && a! = "complete" && a! = "loaded ") return; f = true; clearTimeout (t); try {Typekit.load (config)} catch (e) {}}; s.parentNode.insertBefore (tk, s)}) (document); </ Скрипт>

Результаты

Вот результаты использования Open Sans с TypeKit.

Время загрузки шрифта (s) Open Sans (TypeKit) 1.253 Open Sans (Google Font) 0.476

Как видите, не близко к скорости локального хостинга или использования Google Fonts. Одна из причин заключается в том, что с помощью TypeKit он мгновенно добавляет 3 HTTP-запроса. Кроме того, они Base64 кодируют все форматы для вас, что приятно, но это приводит к времени «загрузки контента» 495 мс только для шрифтов. Вот почему лучше просто обслуживать шрифты, которые вам нужны.

Резюме

Как вы можете видеть, существует множество способов улучшить производительность шрифта. Два основных момента, которые вы должны иметь в виду, это общее время загрузки, а затем сначала рисование или рендеринг вашего текста , чтобы вы могли избежать использования FOIT. Не забывайте запускать тесты для подключений 3G, потому что мобильные пользователи могут испытывать худшие впечатления, чем пользователи настольных компьютеров.

Расставьте приоритеты доставки шрифтов на основе поддержки браузера, выберите только те стили и наборы символов, которые вам нужны, разместите их с помощью шрифтов Google или локально, и экспериментируйте с хранением в localStorage, а также используйте другие методы, такие как Font Face Observer с событиями шрифтов.

Похожие

Комментарии