Четыре способа улучшить скорость страницы и освоить Core Web Vitals

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

Последнее крупное обновление Google для его поискового алгоритма в значительной степени сосредоточено на пользовательском опыте с помощью нового набора показателей факторов ранжирования, называемых Core Web Vitals. Первые результаты аудитов Core Web Vital показывают, что средний веб-сайт работает ниже этих новых стандартов. Исследование Searchmetrics показало, что в среднем сайты могут сократить время загрузки страницы почти на одну секунду, удалив неиспользуемый JavaScript.

Это дает прекрасную возможность превзойти другие веб-сайты, повысив рейтинг вашей собственной страницы.

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

Контент, созданный в партнерстве с Searchmetrics.

Что такое показатели Core Web Vitals?

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

1. Самая большая отрисовка содержимого (LCP) измеряет время загрузки самого большого изображения или текстового блока, видимого в точке обзора пользователя.
2. Задержка первого ввода (FID) измеряет интерактивность на странице, вычисляя время от момента, когда пользователь впервые взаимодействует с сайтом, до момента, когда браузер отвечает на это взаимодействие.
3. Кумулятивное смещение макета (CLS) относится к тому, насколько содержимое смещается во время рендеринга страницы.

Как проверить информацию о скорости страницы

Существует множество онлайн-инструментов, которые проверяют рейтинг вашей страницы, включая PageSpeed ​​Insights, Chrome User Experience Report, Lighthouse Audit и Search Console. Эти сайты измеряют скорость страницы в различных элементах и ​​отображают результаты с помощью системы светофора. PageSpeed ​​Insights предоставляет разбивку результатов и выделяет области, требующие улучшения.

Что означает «хорошая» производительность в цифрах?

Чтобы предоставить хороший пользовательский интерфейс, LCP должен произойти в течение 2,5 секунд, когда страница начинает загружаться в первый раз. Страницы должны иметь FID менее 100 миллисекунд и поддерживать CLS менее 0,1.

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

Посмотрите, где находится ваш сайт. Посещать Статистика PageSpeed и введите свой URL. Примечание. Верхнее число — это ваша оценка Lighthouse, также называемая оценкой PageSpeed, измеряемая от нуля до 100. Хотя это хороший общий ориентир для производительности вашего сайта. Это не совсем связано с тремя показателями Core Web Vitals, которые следует рассматривать как анализ LCP, FID и CLS.

Как улучшить скорость страницы

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

Том Уэллс, эксперт по креативному маркетингу в Searchmetrics, говорит:

«Все, что не нужно на веб-сайте, не должно быть там».

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

1. Негабаритные изображения

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

Оптимизация этих ресурсов с помощью адаптивного дизайна или форматирования изображений нового поколения, такого как WebP, JPEG 2000 и JPEG XR, может улучшить оценку за счет сокращения времени рендеринга. Часто изображения могут быть сжаты до гораздо меньшего размера без ущерба для качества изображения. Бесплатные ресурсы, такие как Squoosh, могут сделать это за вас.

2. Динамический контент и реклама

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

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

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

3. Веб-экономика, ориентированная на плагины

По словам Уэллса, плагины могут действовать как «штукатурка на трещины» для решения проблем веб-сайта. Несмотря на создание временного исправления, оно может замедлить и снизить производительность сети, поскольку весь код должен загрузиться, прежде чем пользователь сможет в полной мере взаимодействовать с веб-страницей.

Использование плагинов может увеличить количество запросов к серверу и увеличить время выполнения javascript. Все эти факторы могут снизить оценку FID сайта.

«Часто мы ищем расширенные исправления и решения, но иногда это так же просто, как удалить то, что не нужно», — говорит Уэллс.

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

4. Слишком много кода

Google советует сосредоточиться на общей производительности сайта.

«Для адаптивных и хорошо зарекомендовавших себя веб-сайтов очень важно быть как можно более легкими», — говорит Уэллс.

«Чем больше вещей должен загрузить сервер, тем медленнее будет общее время загрузки».

Хотя неиспользуемые CSS и JavaScript могут напрямую не влиять на показатель скорости страницы, они все же могут влиять на время загрузки сайта, создавать раздувание кода и негативно влиять на взаимодействие с пользователем.

Когда я должен начать?

Внедрение Google нового алгоритма началось в середине июня, поэтому стоит начать с проверки того, насколько хорошо ваш сайт оценивается в тестах скорости страниц. Веб-сайты с высоким рейтингом, как правило, имеют более высокие баллы Core Web Vitals, и эта тенденция сохранится, поскольку Google уделяет больше внимания пользовательскому опыту.
___
автор Аойф Морган
источник: SearchEngineWatch