Опыт оптимизации CLS и LCP e-commerce проекта
Андрэа Верличчи написал статью про опыт оптимизации метрик LCP и CLS e-commerce проекта — "Optimizing for web vitals on chloe.com".
С помощью Lighthouse можно найти DOM-узел, который генерирует LCP (Largest Contentful Paint). На chloe таким узлом был блок с изображениями товаров. Для того чтобы изображения загрузились раньше, был понижен приоритет второстепенных асинхронных запросов. У самих изображений была ограничена плотность пикселей до 2x, что позволило уменьшить размер изображений на 50%. На современных смартфонах с плотностью пикселей 3x пользователи не замечают такое уменьшение плотности изображений. Для ускорения времени отрисовки критический CSS инлайнят в html. Для этого на этапе сборки используется скрипт, который ищет все критичные CSS-блоки, содержащие специальное свойство critical: this;.
Для оптимизации CLS (Cumulative Layout Shift) было зарезервировано место для тех виджетов, которые рендерятся на клиенте. Был подобран такой дефолтный шрифт, который после замены, не вызывал сдвига контента.
Хорошая статья. Стоит заглянуть, если интересуетесь темой производительности.
https://medium.com/ynap-tech/optimizing-cls-and-lcp-on-chloe-com-8280a036122a