Core Web Vitals – это основные показатели, которые должны оптимизировать все владельцы сайтов для обеспечения превосходного пользовательского опыта, улучшения SEO и получения многих преимуществ. Они направлены на оптимизацию скорости загрузки сайта, отзывчивости и стабильности всех визуальных элементов, чтобы пользователи могли быстрее просматривать контент и легко взаимодействовать с вашим сайтом. Им нужны более быстрые, отзывчивые сайты, чтобы легко взаимодействовать с ними и выполнять желаемые действия, например, заказывать еду онлайн. Причина в том, что сегодня пользователи ненавидят медленные сайты, которые отнимают много времени и приводят к разочарованию. Вот где Core Web Vitals блистает! В этой статье я расскажу о Core Web Vitals и о том, как вы можете улучшить Core Web Vitals своего сайта. Давайте начнем поездку!
Что вы имеете в виду под показателями Core Web Vitals?
Core Web Vitals от Google – это три основные метрики, связанные со скоростью загрузки страницы, интерактивностью и визуальной стабильностью, которые измеряют пользовательский опыт на сайте. Эти показатели были включены Google в качестве фактора ранжирования поисковых систем в свой алгоритм в 2021 году. Ваш сайт получает либо “хороший”, либо “плохой” балл по этим показателям, что означает, оптимизирован ли ваш сайт по этим трем показателям или нуждается в улучшении. Показатели Core Web Vitals входят в раздел Web Vitals, применимых ко всем веб-сайтам и веб-страницам, которые владельцы сайтов должны измерять и улучшать. Итак, тремя показателями Core Web Vitals являются:
- Крупнейшая содержательная краска (LCP)
- Задержка первого входа (FID)
- Кумулятивный сдвиг компоновки (CLS)
Основные показатели веб-интерфейса в деталях
LCP – Largest Contentful Paint (Loading)
Large Contentful Paint (LCP) означает скорость загрузки страницы сайта, чтобы посетители могли быстро получить доступ к вашему сайту, что является важным фактором для улучшения пользовательского опыта. Для этого LCP должен быть в пределах 2,5 секунд. Он подразумевает время, которое требуется вашему сайту, когда пользователь нажимает на ссылку для просмотра содержимого на экране.
- Если он составляет от 2,5 до 4 секунд, ваш сайт нуждается в улучшении загрузки страниц.
- Кроме того, если он превышает 4 секунды, скорость загрузки страницы плохая, и вы должны быстро поработать над этим.
LCP больше фокусируется на пользовательском опыте в реальном времени с точки зрения скорости загрузки страницы – позволяя пользователям видеть контент на странице и взаимодействовать с ним. Это отличается от First Contextual Paint, TTFB и других измерений скорости загрузки страницы. Например, если на вашей веб-странице есть более крупное изображение и простой текст, то более крупное изображение будет LCP. Это связано с тем, что это самый большой элемент, который загружается в браузере и производит значительное впечатление. Поэтому оптимизация изображения для более быстрой загрузки поможет веб-странице загружаться быстрее, что способствует улучшению пользовательского опыта. Другими словами, LCP – это время загрузки наиболее значимого элемента или части контента на экране пользователя. Этим элементом могут быть изображения, видео, текст или другие типы контента.
FID – задержка первого входа (интерактивность)
Задержка первого ввода (FID) измеряет отзывчивость или интерактивность пользователей при работе с вашим сайтом. FID – это время, которое требуется веб-браузеру для ответа, когда пользователь впервые взаимодействует с веб-страницей. Это означает, что если браузер реагирует на взаимодействие быстрее, то веб-страница будет более отзывчивой и отобразит запрашиваемый контент. Чтобы обеспечить хорошее восприятие сайта пользователями, поддерживайте FID в пределах 100 миллисекунд (мс).
- Если FID находится в диапазоне от 100 до 300 мс, ваш сайт нуждается в улучшении отзывчивости.
- Но если он превышает 300 мс, то отзывчивость вашего сайта плохая, и вы должны немедленно исправить это, чтобы обеспечить отличный пользовательский опыт.
Иногда задержки происходят, если браузер выполняет другие задачи в фоновом режиме. Даже если он хорошо отобразил страницу и содержимое видно, при нажатии на кнопку может ничего не произойти. Это означает, что веб-страница просто не реагирует на ваше взаимодействие, а если и реагирует, то очень вяло. Это может разочаровать пользователя, что приведет к плохому опыту. Причина в том, что браузер отвечает за множество задач и не может выполнять все сразу, иначе он может дать сбой. Поскольку веб-сайты становятся все более сложными, на браузер ложится все больше задач. Следовательно, оптимизация FID стала необходимой, чтобы сделать веб-страницу более интерактивной или отзывчивой на запросы пользователя.
CLS – Кумулятивный сдвиг макета (визуальная стабильность)
Cumulative Layout Shift (CLS) измеряет визуальную стабильность сайта. Он определяет, насколько стабильно элементы страницы загружаются на экран пользователя и насколько сильно он колеблется. Если сайт нестабилен, это приводит к плохому пользовательскому опыту. Например, пользователь хочет нажать на кнопку, отображаемую на веб-странице, пока она еще загружается. Когда он собирается нажать на нее, страница завершает загрузку, и кнопка немного смещается. В результате пользователь может в итоге нажать на что-то другое или вообще никуда не нажать, что усиливает разочарование. Такие неровности и смещения могут происходить по многим причинам, например, из-за рекламы, тяжелого материала на сайте и т.д. Поэтому оптимизация CLS вашего сайта очень важна для поддержания стабильной работы сайта в любое время, чтобы макет, дизайн и кнопки вели себя так, как ожидается. Чтобы обеспечить хороший пользовательский опыт, CLS должен быть меньше 0,1.
- Вы должны улучшить визуальную стабильность вашего сайта, если CLS составляет от 0,1 до 0,25.
- А если он больше 0,25, то визуальная стабильность плохая и требует быстрого исправления, если вы хотите обеспечить лучший пользовательский опыт.
Чтобы достичь цели для большинства пользователей, измерьте каждый из показателей Core Web Vitals на уровне 75th процентиля. Начиная с 2021 года Google считает опыт страницы важным и официальным фактором ранжирования для всех сайтов, появляющихся в результатах поиска. Теперь опыт страницы зависит от многих факторов. Вот некоторые из важных показателей:
- Скорость загрузки
- Визуальная стабильность
- Отзывчивость
- Удобство для мобильных устройств
- HTTPS
- Безопасный просмотр
Среди них первые три – скорость загрузки, отзывчивость и визуальная стабильность – являются основными показателями сайта, которые каждый владелец сайта должен оптимизировать для обеспечения хорошего рейтинга в Google. Они способны сделать или сорвать сделку. Поэтому, когда вы оптимизируете LCP, FID и CLS, вы улучшаете свои SEO-показатели и пользовательский опыт, что поможет росту вашего сайта. Вот преимущества, которые вы можете ожидать от этого:
Быстрая загрузка: Людям нравятся более быстрые сайты, которые загружаются в мгновение ока. Это не только экономит их время, но и предоставляет им информацию, которую они ищут, не заставляя их ждать. Это повышает их пользовательский опыт, и ваше появление в поисковых системах улучшается. Оптимизация вашего LCP может помочь вам достичь этого.
Отзывчивость: Бесполезно, если ваш сайт загружается, но плохо реагирует на запросы пользователей. Но если вы улучшите FID вашего сайта, вы сможете улучшить его отзывчивость, которая нравится всем. В результате все больше и больше людей будут приходить и регулярно взаимодействовать с вашим сайтом, читая статьи, совершая покупки, ища информацию и т.д. Все это повышает ваш SEO и присутствие, привлекает больше посетителей и побуждает их продолжать возвращаться.
Выполнение макетов и элементов: Независимо от того, насколько хорошо вы разработали элементы, такие как кнопки, фоны, макеты и т.д., они, скорее всего, будут работать неправильно во время загрузки сайта, если вы их не оптимизируете, что приведет к плохому опыту. Но оптимизация визуальной стабильности вашего сайта позволит каждому элементу отлично работать и поможет пользователям лучше взаимодействовать с визуальными эффектами.
Как улучшить основные веб-показатели?
Теперь, когда мы обсудили улучшение основных показателей веб-сайта для обеспечения превосходного пользовательского опыта, давайте разберемся, как это сделать.
Как улучшить LCP
В идеале, большая содержательная картина (LCP) вашего сайта должна быть в пределах 2,5 секунд минимум для 75% всех посещений страницы. На способность браузера загрузить и отобразить веб-страницу влияет множество факторов. Любая задержка или блокировка любого из этих факторов может повлиять на LCP. LCP – это жизненно важный показатель, для которого большинство веб-сайтов нуждаются в оптимизации. LCP измеряет, насколько быстро загружается основное содержимое веб-страницы. Таким образом, эта метрика влияет на основные изображения, шрифты, видео, лениво загружающийся контент, фоновые изображения и т.д. Таким образом, чтобы улучшить LCP, вам придется упорядочить весь процесс загрузки и оптимизировать его. Поскольку он может быть немного сложным, разбиение задачи на части делает ее более доступной.
Сжимайте размеры файлов: Если вы можете сжать или удалить размер какого-либо файла, это поможет ускорить скорость загрузки страницы. Вы можете проверить любой неиспользуемый код или файл и избавиться от него. А если вы хотите сжать размер файла, то это проще сделать для каждого типа файлов, будь то HTML, CSS, JavaScript или изображения.
Приблизить контент к пользователям: Если между пользователями и сервером, на котором хранится контент вашего сайта, большое расстояние, то на его загрузку будет уходить время, которое мы стремимся сократить. Поэтому выбирайте центр обработки данных для размещения контента вашего сайта там, где географически находится ваша аудитория. Вы также можете использовать CDN, если только ваша аудитория не относится к меньшему географическому региону. CDN поможет вам быстрее распространять контент независимо от его размера и обеспечит лучший пользовательский опыт, поскольку пользователи смогут быстрее получить доступ к контенту в любое время и в любом месте. Если возможно, используйте один и тот же сервер, чтобы избежать дополнительных задержек при установлении безопасного соединения между сервером и пользователем для каждого соединения. Вы также можете использовать предварительную выборку DNS или предварительное подключение, чтобы начать подключение раньше.
Кэширование ресурсов: Кэширование ресурсов поможет загрузить ресурсы для первого просмотра веб-страницы без обязательной загрузки для последующих просмотров. Поскольку ресурсы будут уже доступны, другие страницы будут загружаться быстрее.
Уменьшите TTFB: Доставляйте исходный HTML быстро, поскольку он напрямую влияет на последующие шаги. Поэтому сократите время до первого байта (TTFB), чтобы улучшить другие показатели загрузки страницы.
Установите приоритет ресурсов: Определите приоритет загрузки ресурсов на вашем сайте в пути рендеринга. Убедитесь, что они расположены в порядке загрузки и обработки. Вы можете начать с загрузки основных ресурсов, которые вы хотите, чтобы пользователи просматривали, а затем уже загружать остальные. Например, можно сначала загрузить главную страницу и критические таблицы стилей шрифтов. Можно встроить или уменьшить блокирующие рендеринг таблицы стилей и сначала загрузить важные HTML, JavaScript и CSS, а затем все остальное.
Как улучшить FID
LCP и First Contentful Paint (FCP) измеряют время, затрачиваемое на загрузку веб-страницы. Однако эти показатели не измеряют, насколько отзывчива страница на запросы пользователя. Таким образом, все идет насмарку, даже если ваш сайт загружается, а пользователь не может выполнить желаемое действие. Именно в этом случае показатель First Input Delay (FID) помогает оценить отзывчивость или интерактивность сайта на запрос пользователя. FID измеряет время между первым действием пользователя и моментом, когда сайт реагирует на это действие, например, на нажатие кнопки и переход на страницу. Эта метрика влияет на сторонний код, JavaScript, скрипты отслеживания и т.д. Идеальный FID составляет менее 100 мс, а способы улучшения FID следующие:
- Сократите объем выполняемого JavaScript: Если вы используете JavaScript-фреймворк, ему требуется много JavaScript для загрузки страницы, что может занять некоторое время для обработки в браузере. Из-за этого могут возникать задержки. Поэтому, если вы используете SSR или пререндеринг, вы можете переложить это бремя на сервер, а не на браузер.
- Разбейте свой JavaScript: Разбиение JavaScript на более мелкие части может помочь вам ускорить его выполнение. Поэтому найдите длинные задачи, задерживающие ответ на запросы пользователей, и разделите их на более мелкие, занимающие меньше времени. Это можно сделать с помощью разделения кода.
- Перемещение некоторых JavaScript: Перемещение части JavaScript в другой рабочий сервис. Это делает ваш код менее сложным и быстрее выполняется в браузере.
Кроме того, вы должны позаботиться еще об одном моменте. Поскольку работник службы не имеет доступа к объектной модели документа (DOM), он не может вносить какие-либо изменения или обновления. Поэтому, если вы хотите переместить свой JavaScript на другой сервисный работник, убедитесь, что знающий разработчик может позаботиться об этом.
Как улучшить CLS
CLS измеряет, насколько устойчивы элементы вашего сайта, такие как макеты, кнопки и т. д. Он определяет, насколько видимое содержимое смещается в области просмотра сайта в зависимости от размера содержимого и расстояния до него. Это влияет на размеры и габариты изображений, шрифты, анимацию, меню, всплывающие окна и т.д. Сдвиги макета могут отвлекать пользователей. Это мешает пользователям сосредоточиться на просматриваемом контенте, например, прочитать статью или просмотреть несколько фотографий. Это очень раздражает, и никто не захочет задерживаться на такой странице. Поэтому вы должны оптимизировать свой сайт для CLS. Вот как это сделать.
- Оптимизируйте изображения: Выделите место для изображений так, чтобы они оптимально заполняли пространство и не смещались. Для этого необходимо определить ширину и высоту изображений в теге < img>.
- Вводимый контент: Смещение макета может произойти, если вы динамически вставите часть контента поверх существующего. Поэтому, если вы планируете это, заранее выделите достаточно места.
- Шрифты: Убедитесь, что один шрифт не меняется местами с другими шрифтами, представленными на вашем сайте. Он также должен быстро загружаться на экран. Это необходимо, потому что при изменении шрифта может произойти заметный сдвиг, например, вспышка нестилизованного текста (FOUT) или вспышка невидимого текста (FOIT). Это влияет на удобство работы пользователя. Здесь может помочь использование системного шрифта. Таким образом, когда вам нечего загружать, не будет никаких изменений или задержек, вызывающих сдвиг.
Как оценить основные показатели вашего сайта?
Вы можете использовать любой инструмент для проверки показателей Core Web Vitals вашего сайта, например:
- PageSpeed Insights
- Google Search Console
- Маяк
- Расширение Chrome – Web Vitals
- Chrome DevTools
- Создатель приборной панели CrUX
- Сторонние плагины, такие как NitroPack, WP Rocket и т.д.
Воспользовавшись инструментом, вы можете собрать информацию о состоянии ваших Core Web Vitals. Вы можете просматривать метрики – LCP, FID, CLS, FCP, общее время блокировки, время до интерактива и индекс скорости.
- First Contentful Paint (FCP): измеряет время, необходимое браузеру пользователя для рендеринга DOM-элементов сайта, таких как SVG, изображения и т. д. Он также определяет блокирующие рендеринг ресурсы. 0-2 секунды считается быстрым FCP, 2-4 секунды – умеренным, а 4+ секунд – медленным.
- Индекс скорости: Показывает среднее время отображения содержимого сайта для пользователя. Он определяет объем избыточного JavaScript на вашем сайте. 0-4,3 секунды считается быстрым, 4,4-5,8 секунды – умеренным, а 5,8+ секунд – медленным.
- Время до интерактивности (TTI): время, необходимое для того, чтобы контент стал полностью интерактивным и функциональным. Определяется для веб-страниц с дополнительным JavaScript. 0-3,8 секунды считается быстрым, 3,9-7,3 секунды – умеренным, а 7,3+ секунд – медленным.
- Общее время блокировки (TBT): Позволяет проверить время, затрачиваемое веб-страницей на ответ на ввод данных пользователем. 0-300 мс считается быстрым, 300-600 мс – умеренным, а 600+ – медленным.
Инструмент отобразит оценку производительности Core Web Vitals вашего сайта. Вы также можете увидеть индивидуальные показатели по каждой из вышеперечисленных метрик и объяснить, где у вас недостатки и как улучшить показатели. Поскольку обеспечение отличного пользовательского опыта – это непрерывный путь, всегда следите за основными показателями сайта и регулярно оптимизируйте их.
Заключение
Обеспечение отличного пользовательского опыта необходимо для процветания всех веб-сайтов в Интернете; даже Google признал это. Именно поэтому в прошлом году они ввели Core Web Vitals, чтобы помочь обеспечить качественный пользовательский опыт. Вы можете использовать любой инструмент, упомянутый выше, чтобы проверить показатели Core Web Vitals вашего сайта и найти способы улучшить их с помощью вышеупомянутых советов и приемов.
