Улучшаем CLS показатель за счет шрифтов

22
Алексей,
Улучшаем CLS показатель за счет шрифтов
Улучшаем CLS показатель за счет шрифтов

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

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

Решение банальное: необходимо подобрать максимально похожий системный или "безопасный" шрифт. Например для "Open Sans Condensed" я прописал такой вариант: font-family: 'Open Sans Condensed', 'Arial Narrow', sans-serif;

"Arial Narrow" не "безопасный" шрифт, но он есть у многих локально, т.к. поставляется с приложениями MS Office и он очень похож на "Open Sans Condensed", который у меня используется в заголовках.

В результате загрузка главной страницы выглядит так:

пример подмены шрифта
Опубликовано 1 августа 2022
производительность, верстка, шрифты, css, cls
Поделиться
Похожие статьи
Проблема с метрикой Cumulative Layout Shift
Google обновил свой инструмент Lighthouse до 6 версии, в котом были добавлены новые метрики. Показатели...
Читать дальше » 0
Алексей,
Комментарии
Авторизуйтесь чтобы получать уведомления об ответе
После загрузки кастомного шрифта, браузер заново рендерит текст на странице и т.к. ширина символов может быть сильно разной, размеры блоков меняются и элементы на сайте "прыгают".