Thread by @jsunderhood

9️⃣ Шрифты.

Кастомные шрифты — одна из проблем, которая часто влияет на FMP. И один из low-hanging fruits, который легко починить.

9.1. Проблема с кастомными шрифтами в том, что по умолчанию браузеры не рендерят текст, пока не загрузят этот шрифт — или пока не пройдёт три секунды.

Это значит, что если у человека медленная сеть, он не увидит свой контент 3 лишних секунды. Его FMP будет на 3 секунды хуже.

9.2. Чтобы решить это, придумали CSS-свойство font-display.

font-display регулирует это поведение браузеров. Он говорит, как долго браузеру дожидаться кастомного шрифта и что делать, когда шрифт наконец загрузится.

Больше про font-display: font-display.glitch.me

Таким образом:
— если вы селф-хостите шрифты, посмотрите документацию font-display, выберите подходящее значение (их всего 4) и добавьте его в ваш @​font-face
— а если у вас Google Fonts, добавьте атрибут &display=<font-display value> в урл

и ваш FMP улучшится вплоть до 3 секунд

Ещё пара заметок:

1) Если не уверены, что выбрать, выберите font-display: swap. Это то, что по умолчанию рекомендуют Google Fonts

2) Не используйте font-display с иконочными шрифтами! С ними стандартное поведение браузеров как раз имеет смысл

9.3. Как ещё ускорить рендеринг шрифтов?

Разбить шрифты на unicode ranges.

Каждый woff2-файл с начертанием шрифта включает в себя все символы этого начертания.

Поэтому, если на вашем сайте только английский, и вы подключаете на него Roboto Regular, то roboto-regular.woff2 всё равно загрузит символы для всех алфавитов (и ещё кучу другого юникода).

Чтобы не загружать ненужные символы шрифтов:

1) разбейте файл шрифта на несколько — по разным блокам юникода (отдельно латиница, отдельно кириллица, и т.д.): stackoverflow.com/q/49729468/119…

2) и подключите в @​font-display эти файлы, указав их unicode ranges: developer.mozilla.org/en-US/docs/Web…

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

Кстати, если вы используете Google Fonts, то делать этого не нужно — они уже делают это сами.

9.4. И есть ещё более экстремальный способ оптимизировать, как быстро отрендерится шрифт.

Это — разбить файл шрифта не по блокам юникода, а по символам, которые видны на первом экране страницы (above the fold).

То есть, есть у вас есть лендинг и шрифт на нём, то вы:
— смотрите, какие символы используются above the fold
— выносите именно эти символы в отдельный файл
— вставляете этот файл в @​font-face с unicode-range
— и вставляете в другой @​font-face оставшийся кусок шрифта

Таким образом, браузер может очень быстро скачать и применить маленький файл — и отрендерить above-the-fold-контент с кастомным шрифтом.

А к тому моменту, когда пользователь начнёт скроллить, он успеет докачать и применить оставшийся шрифт.

9.5.

https://twitter.com/_cpotter/status/1139434003927379968?s=21