Как улучшить основные веб-показатели вашего сайта

Алгоритм поиска Google ценит веб-сайты с высокими техническими характеристиками и быстрой скоростью страниц. Это гарантирует, что страницы с высоким рейтингом в результатах поисковых систем загружаются быстро и обеспечивают бесперебойную интерактивность. Чтобы оценить удобство использования веб-сайтов, Google использует три показателя, называемые Core Web Vitals (CWV). Улучшив CWV вашего веб-сайта, вы можете сделать его более доступным для пользователей и повысить его шансы на достижение более высокого рейтинга на страницах результатов. 

Что такое основные веб-показатели?

Основные веб-показатели – это стандарты, которые Google использует для оценки технического состояния веб-сайта и определения его рейтинга на страницах результатов поиска (SERP). Алгоритм Google оценивает эти показатели для каждой страницы сайта. Это означает, что некоторые страницы могут получить более высокие оценки, чем другие. 

Существует три основных показателя Web Vitals:

1. Самая большая отрисовка контента (LCP)

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

2. Задержка первого ввода (FID)

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

FID — это ключевой показатель в основных веб-показателях вашего веб-сайта, но он будет заменен на показатель «Взаимодействие с следующей отрисовкой» (INP). ) в 2024 году. INP также измеряет скорость реагирования, но основное внимание уделяется времени, которое требуется для визуальной обратной связи после взаимодействия пользователя со страницей. Например, когда вы добавляете товар в корзину, вы ожидаете, что значок корзины обновится, указывая на то, что ваш товар был добавлен.

3. Совокупное смещение макета (CLS)

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

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

Как измерить основные веб-показатели

Google предоставляет несколько различных бесплатных инструментов для проведения оценки Core Web Vitals, в зависимости от ваших целей:

1. PageSpeed Insights

PageSpeed Insights (PSI) обеспечивает углубленный аудит одной страницы. Он оценивает не только основные веб-показатели, охватывая ряд показателей и факторов технической производительности, присваивая каждой странице общую оценку от 0 (худший) до 100 (лучший). PSI представляет результаты в приоритетном и действенном формате. Например, он оценивает потенциальное время, сэкономленное за счет внесения изменений. Большинство пользователей получают доступ к PSI через Интернет, но он также доступен через API.

2. Консоль поиска Google

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

3. CruUX Dashboard

Два предыдущих инструмента не зависят от браузера, то есть работают в любом веб-браузере. Google предоставляет более конкретный набор диагностики загрузки веб-сайтов в Chrome. Поскольку Google владеет Chrome, он может обеспечить более высокий уровень детализации загрузки сайта. Этот более конкретный анализ называется отчетом об опыте пользователей Chrome (CrUX), и Google предлагает эти данные бесплатно в Панель управления CrUX. 

Панель управления CrUX наиболее полезна, когда вам нужна более подробная информация о том, как ваш веб-сайт загружается в Браузер пользователя Chrome — или когда вам нужна более надежная визуализация для повышения производительности вашего сайта с течением времени.

Как улучшить основные веб-показатели

Чтобы улучшить показатели CWV, просмотрите диагностику в PageSpeed Insights, Search Console или панели управления CrUX. Эти инструменты подскажут вам, какие основные веб-показатели требуют наибольшей работы, и помогут вам их решить. Для каждого основного веб-важного показателя — LCP, FID и CLS — вам следует стремиться к хорошей оценке в PageSpeed Insights, что ставит его в 70-й процентиль страниц. 

Вот некоторые из наиболее эффективных исправления для каждого аспекта основных показателей веб-сайта:

Как улучшить показатели наибольшего количества контента (LCP)

Следуйте этим рекомендациям, чтобы увеличить скорость загрузки LCP вашей страницы:

Установите приоритет вашего ресурса LCP

Используйте PSI, чтобы определить ресурс LCP страницы (самый большой элемент) и добавьте атрибут fetchpriority=»high» к элементу, которому вы хотите назначить приоритет. Это гарантирует загрузку LCP раньше других менее важных элементов HTML.

Убедитесь, что ваш ресурс LCP доступен для обнаружения в HTML

Некоторые страницы на основе JavaScript отображают изображения без тега < img> тег. Это замедляет время LCP, поскольку JavaScript на странице должен загрузиться до того, как изображение станет видимым. Вместо этого загрузите изображение с помощью тега <img> со стандартным атрибутом src.

Реализуйте отложенную загрузку

Добавьте собственный атрибут отложенной загрузки (loading=»lazy») к ресурсам, отличным от LCP (большинство изображений, iframe и JavaScript, которые меньше по размеру или не загружаются в верхней части страницы). поэтому они загружаются после вашего ресурса LCP.

Настройте изображения

Создавайте изображения с более низким разрешением. Например, сохраните изображение с разрешением 72 dpi (точек на дюйм), которое является стандартом для Интернета, а не с разрешением 300 dpi, которое является стандартным для печати. Чтобы избежать длительной загрузки, создавайте изображения, адаптированные к размеру экрана. Используйте правильное расширение изображения, отдавая предпочтение JPG перед PNG.

Как улучшить показатели задержки первого ввода (FID)

FID обычно возникает из-за большого количества постоянно выполняемого JavaScript на странице. . Браузеру требуется время для запуска сценариев, что приводит к задержке при взаимодействии пользователей с элементом. Вот как вы можете улучшить показатель FID вашей страницы:

Уменьшите количество JavaScript на странице

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

Сжимайте сценарии

Инструменты управления тегами, такие как Диспетчер тегов Google может помочь вам объединить ваши скрипты в одну строку кода. Это может сократить объем работы, которую браузер должен выполнять в ответ на взаимодействие с пользователем.

Как улучшить показатели совокупного сдвига макета (CLS)

Вы можете свести к минимуму свой CLS, воспользовавшись этими советами:

Задайте явные размеры для загружаемого контента.

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

Избегайте анимации, влияющей на макет

Анимации (движение на странице) создают больший риск CLS для веб-сайтов. Анимации, влияющие на свойства полей или границ (например, кнопка, которая расширяется при наведении на нее курсора), скорее всего, приведут к проблемам CLS.