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

Итак, в этой статье мы расскажем о том, как CSS влияет на веб-показатели, и узнаем, как их можно оптимизировать при правильном использовании CSS.

Как CSS влияет на веб-показатели

CSS-это ресурс, блокирующий рендеринг, это означает, что браузер не будет отображать обработанные данные до тех пор, пока не будет построена объектная модель CSS (CSSOM).

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

1. Сведем к минимуму изменения макета при вставке содержимого в DOM

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

Такое поведение известно как layout shift, другими словами - сдвиг макета, и рекомендуется свести эти изменения содержимого к минимуму, чтобы улучшить время загрузки приложения и удобство работы с пользователем.

 

 

Если вы используете инструмент Lighthouse для мониторинга веб-показателей, он покажет все смещенные элементы страницы в разделе “Избегайте больших изменений макета”.

 

 

Эти результаты могут не включать сообщение об установке, так как оно не меняется при загрузке. Вместо этого он сдвигает то, что находится под ним (div.af.jj.iu и div.lc.af.ld) на странице.

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

Например, мы можем разместить сообщение об установке вверху или внизу страницы всего с 2 стилями CSS, чтобы преодолеть эту проблему.

 

 

2.Заменим анимацию на CSS

Анимация оказывает наибольшее влияние на веб-показатели с точки зрения изменения макета. Поэтому мы всегда должны стараться заменять анимацию свойствами CSS, такими как transform, opacity и filter, поскольку они предоставляют более надежные альтернативы.

Запуск макета и анимация -это 2 типа анимации, которые больше всего влияют на элементы страницы.

Аудит Lighthouse “Avoid non-composited animations” поможет вам найти анимации, которые работают плохо.

 

 

Например, давайте предположим, что приведенная выше анимация круга прогресса реализована путем перехода свойства margin-left

 

 

Мы можем улучшить производительность этой анимации, заменив переходы полей на transform: translateX()

 

 

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

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

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

Надеемся, что теперь у вас есть лучшее представление о том, как правильно использовать CSS для улучшения веб-функций.

Спасибо, что дочитали эту статью. 

SkillPass