Повысьте производительность веб-сайта с помощью трех показателей

Jan 25, 2024

Интернет является быстрорастущей средой. Ежедневно регистрируются тысячи новых сайтов, как получить преимущество над конкурентами? Одна упущенная из виду категория, которая улучшает ваш веб-сайт и помогает увеличить время взаимодействия с пользователем, — это производительность. Производительность имеет значение! Производительность веб-сайта имеет решающее значение для создания положительного пользовательского опыта, обеспечения доступности и увеличения трафика. Недостаточная производительность может изменить эти показатели и стать помехой, создавая более сложную среду для процветания бизнеса. Повышение производительности также приведет к лучшей поисковой оптимизации (SEO).

Существует множество показателей производительности. Мы рассмотрим улучшения для трех: накопительный сдвиг макета (CLS), наибольшая отрисовка контента (LCP) и общее время блокировки (TBT). В текущей версии Lighthouse 9 на эти три совокупных показателя приходится 70% показателя производительности Google Lighthouse.

Совокупный сдвиг макета (CLS) — один из самых простых для понимания показателей пользовательского опыта. Отдельные компоненты на конкретной странице могут улучшить или испортить впечатление пользователя. Иногда пользователи не получают того, чего ожидают, при первоначальной загрузке страницы. Каждый компонент должен иметь предсказуемое действие для пользователя.

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

Анимация — это уникальный способ сделать страницу приятной для пользователя, если все сделано правильно. Избегайте использования позиций (сверху, справа, снизу, слева) и ширины/высоты для анимации. Вместо этого используйте селектор преобразования и его атрибут перевода для определения позиции. Для большей гибкости включите селекторы полей. Селектор преобразования не запускает макет без крайней необходимости.

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

Метрика Largest Contentful Paint (LCP) измеряет, сколько дополнительного времени затрачивается на рендеринг элемента (изображения, видео, текста). Чтобы обеспечить отличный пользовательский опыт, стремитесь к показателю менее 2,5 секунд. Чтобы улучшить LCP с помощью текста, используйте ту же стратегию, что и для CLS. Чтобы снизить скорость LCP для изображений, оптимизируйте изображение с помощью следующих действий.

Весь процесс создания Largest Contentful Paint заключается в том, чтобы его элемент (изображение, видео, текст) отображался на странице как можно быстрее. Эти стратегии помогают расставить приоритеты важных элементов на вкладке сети. Любые файлы JavaScript, которые не потребуются при начальной загрузке области просмотра, следует отложить на более поздний срок.

Общее время блокировки (TBT) — это показатель производительности для измерения реакции на нагрузку на странице. Хотя это последняя категория в этой статье, она также имеет самый высокий вес — 30%. TBT измеряет время, в течение которого страница заблокирована от ответа на ввод пользователя, независимо от того, является ли этот ввод щелчками мыши, касаниями экрана или нажатиями клавиатуры. Время взаимодействия (TTI) измеряет, сколько времени требуется странице, чтобы стать отзывчивой. Первая контентная отрисовка (FCP) — это когда браузер отображает первый бит контента из объектной модели документа (DOM). TBT представляет собой сумму всех периодов между FCP и TTI. Чтобы улучшить эту категорию, вам необходимо сначала разобрать собственные и сторонние скрипты.

В результате общее время блокировки является наиболее важным показателем производительности. Time to Interactive и First Contentful Paint играют огромную роль в TBT и его основной теме. Рассмотрите возможность анализа FCP или TTI, если вы застряли на TBT.