Главная » Статьи » 3 техники оптимизации для улучшения производительности пользовательских шрифтов

3 техники оптимизации для улучшения производительности пользовательских шрифтов

3 техники оптимизации для улучшения производительности пользовательских шрифтов

От автора: оптимизация шрифтов получила новые возможности! Теперь использовать пользовательские шрифты стало легче и быстрее. Давайте разберем, что можно сделать при использовании пользовательских шрифтов, чтобы максимально повысить производительность.

Предстоящая версия Microsoft Edge реализует unicode-range (последний современный браузер, который сделает это).

Предварительная загрузка и font-display появятся в Safari и Firefox

Переменные шрифты доступны во всех браузерах

Уменьшите размер файла

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

В таких случаях полезно делать subsetting. Subsetting – это удаление ненужных символов. Это можно сделать через инструмент командной строки pyftsubset, который можно загрузить вместе с FontTools. (сайт FontSquirrel предлагает GUI для subsetting. Это популярная альтернатива, которую стоит рассмотреть. Но знайте, что она не поддерживает переменные шрифты.) Легче всего задать символы, которые необходимо сохранить, через Юникод. Юникод – это стандарт, обеспечивающий каждый символ уникальным кодом языков мира.

После команды pyftsubset указывается название файла шрифта и Юникод с диапазоном. Ниже представлен поднабор для английского языка.

pyftsubset SourceSansPro.ttf --unicodes="U+0020-007F"

Размер файла можно еще больше уменьшить с помощью сжатия woff2 формата. Это можно сделать в отдельной утилите командной строки от Google или добавив дополнительные опции к команде pyftsubset:

pyftsubset SourceSansPro.ttf --unicodes="U+0020-007F" --flavor="woff2" --output-file="SourceSansPro.woff2"

Если вы уверены, вы не будете использовать удаленные символы. Это все, что нужно сделать – вы значительно уменьшили размер шрифта. Теперь его можно использовать через @font-face, как обычно. Но что если некоторые страницы на сайте используют удаленные символы? Вы не захотите показывать эти символы на фолбек шрифте. Чтобы решить эту проблему, обязательно обратите внимание на диапазон, используемый при создании подмножества с помощью pyftsubset. Вы хотите указать его в блоке @font-face.

@font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansPro.woff2') format('woff2'); unicode-range: U+0020-007F; /* The bare minimum for the English Language */
}

unicode-range сверху задает символы, которые будут использоваться на всех страницах сайта. Поэтому этот шрифт будет загружаться на всех страницах.

Я создал еще одни файл с помощью pyftsubset. В нем не будут повторяться символы из первого. В нем содержатся только редко используемые на сайте символы.

pyftsubset SourceSansPro.ttf --unicodes="U+00A0-00FF,U+0100-017F" --output-file="SourceSansProExtra.ttf"

Указав еще раз unicode-range в другом @font-face, мы делаем так, чтобы файл загружался только при необходимости – когда символ на странице входит в заданный диапазон.

@font-face { font-family: 'Source Sans Pro'; src: url('/fonts/SourceSansProExtra.woff2') format('woff2'); unicode-range: U+00A0-00FF, U+0100-017F; /* additional glyphs */
}

Диапазон стоит подбирать под свои цели. Если в футере или хедере есть необычные знаки препинания или букв, включите их в основной файл шрифта, иначе всегда будут загружаться оба файла. Например, на сайте, над которым я работаю, символ © (U+00A) я включил в основное подмножество, так как он используется внизу каждой страницы. Список Юникод символов можно найти на Wikipedia.

Загружайте ключевые файлы шрифтов как можно раньше

Представьте, что в вашем CSS есть только 100 @font-face и следующие строки:

* { font-family: 'Lora'; font-style: italic; font-weight: bold;
}

Сколько шрифтов загрузит браузер? Сотню? Ответ – всего один. По умолчанию шрифты загружаются лениво. Это умно со стороны разработчиков браузеров – загружать только то, что действительно необходимо. Но есть и минус. Чтобы понять, какие варианты шрифта используются, браузер должен распарсить весь HTML и CSS. Только после этого будут запрошены файлы шрифтов. Если мы хотим ускорить это, нам придется использовать предварительную загрузку.

Предварительная загрузка так же проста, как добавить тег link в head документа.

<link rel="preload" href="/fonts/Lora-Regular.woff2" as="font" type="font/woff2" crossorigin>

Не стоит предварительно загружать слишком много ресурсов или использовать ее впустую для загрузки ресурсов, которые могут не понадобиться на странице. Поэтому я использую предварительную загрузку только для нежирного и некурсивного файла. Меня меньше заботит поздняя загрузка жирного и курсивного файла, поскольку эти стили реже используются на сайте. Мигание нестилизованного текста (МНТ или FOUT) для этих файлов менее разрушительно, чем FOUT для обычного шрифта Roman, который используется в основном тексте. С использованием переменного шрифта это не проблема. Предварительная загрузка переменных шрифтов сейчас представляет собой проблему.

Стоит ли предварительно загружать переменный шрифт?

Абсолютно бесполезно слать в браузер ресурс, который он не сможет использовать. Вот почему мы включили атрибут type, который определяет MIME-тип ресурса. Если браузер не поддерживает ресурс, он не будет загружен. Для шрифтов мы определили type=»font/woff2″. Edge, Safari и Firefox одновременно реализуют переменные шрифты и предварительную загрузку – с этими браузерами проблем не возникнет. Chrome и Opera поддерживают предварительную загрузку с 2016. Переменные шрифты – новое дополнение, в котором woff2 поддерживается с 2014. Поэтому предварительная загрузка переменного woff2 вынудит старые версии Chrome и Opera загрузить ресурс, с которым они не знают, что делать.

В идеале, мы могли бы указать ресурс как переменный шрифт в атрибуте type, но это совсем не нужно. Chrome – вечно зеленый. Каждые 6 недель выходит обновление, и браузер обновляется в фоновом режиме. Относительно малое количество посетителей будут использовать древнюю версию. Переменные шрифты доступны в Chrome уже несколько версий, поэтому использовать предварительную загрузку безопасно.

Управление FOUT и FOIT

До сих пор мы говорили об ускорении загрузки шрифта. Хороший UX – это не только общее время загрузки страницы или шрифта. Это также то, нравится ли пользователю ваш сайт во время загрузки. Если хотите задержать пользователей на сайте, подумайте о воспринимаемой производительности. Браузеры по-разному загружают шрифты. Теперь мы можем решить стратегию загрузки с помощью CSS font-display.

Свойство font-display определяется внутри @font-face.

@font-face { font-family: ExampleFont; src: url(/fonts/SourceSansPro.woff2) format('woff2'); font-display: fallback;
} 

Доступные варианты — block, optional, swap и fallback. Какой взять?

Optional, вроде бы, хороший вариант – шрифты являются приятным дополнением, но не строгой необходимостью. На деле же, я выяснил, что это плохой вариант. Пользователей смущает смена шрифта во время навигации по сайту или перезагрузке. Временное окно на загрузку пользовательского шрифта крайне мало. Если вы собираетесь загружать его предварительно, он, скорее всего, загрузится в это время. Если нет, пользователи часто будут натыкаться на фолбек шрифт – даже на хорошем соединении и дорогом ПК. Не очень хорошо для единообразия бренда. Если вы потратите много времени на поиски похожего фолбек шрифта, это подойдет. Но если производительность важнее всего, то, может, стоит вообще подумать, зачем использовать этот шрифт.

Значение swap – вариант получше. Безопасный фолбек шрифт показывается моментально и заменяется на кастомный после его загрузки. К сожалению, период подмены бесконечен. На медленном соединении шрифт может поменяться уже после того, как пользователь погрузился в текст, создавая тем самым тряску и ухудшая UX.

Значение fallback похоже на поведение по умолчанию в большинстве браузеров – сначала короткий период невидимого текста, который сменяется на фолбек шрифт, если кастомный до сих пор не загрузился. В отличие от swap, здесь есть таймаут. Если пользовательский шрифт не загрузился за 3 секунды, шрифт не изменится – пользователь останется на фолбеке. Можете прочесть целую статью на CSS-Tricks по font-display и решить, что лучше подходит вам.

Заключение

На большинстве сайтов текст составляет подавляющую часть контента. Поэтому загрузка шрифтов – важная составляющая паззла производительности. Если хотите идти в ногу с событиями в области загрузки шрифтов, Zach Leatherman начал рассылку по этой теме.

Автор: Ollie Williams

Источник: https://css-tricks.com/

Редакция: Команда webformyself.