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

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

В современном быстро меняющемся мире всем нужны интерактивные веб-сайты с быстрой загрузкой.

Google сообщает о загрузке мобильных веб-страниц в среднем за 22 секунды. Однако 53 процента мобильных пользователей покидают страницу, загрузка которой занимает более трех секунд.

Эти цифры доказывают, что оптимизация вашего сайта для увеличения производительности должна быть главным приоритетом. Таким образом, Google объявил о создании Core Web Vitals, который включает в себя три показателя: самую большую отрисовку контента (LCP), задержку первого ввода (FID) и совокупный сдвиг макета (CLS).

По состоянию на середину июня 2021 года это обновление страницы Google является фактором ранжирования в поисковых системах.

Как сделать так, чтобы ваш веб-сайт прошел сертификацию Google Core Web Vitals?

Для начала мы обсудим следующие темы в этой статье:

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

Что такое основные показатели Google Web Vitals?

Вот главное, что вам нужно знать о Core Web Vitals:

• Самая большая содержательная краска (LCP). Это Core Web Vital, который измеряет количество времени, необходимое для визуализации основного содержимого или самого большого элемента содержимого, видимого на странице.
• Отображение первого входа (FID). Это измеряет, насколько быстро страница реагирует на действия пользователя.
• Накопительный сдвиг макета (CLS). Это измеряет неожиданное движение контента при просмотре страницы.

Как измерить основные показатели Web Vitals?

Измерение Core Web Vitals выполняется быстро и легко с помощью Google PageSpeed ​​Insights.

Просто поместите URL-адрес всего вашего сайта в текстовое поле, нажмите кнопку » Анализировать» и позвольте инструменту сделать все остальное.

Основные веб-данные можно найти в полевых данных и лабораторных данных.

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

Google PageSpeed ​​Insights использует более медленное сетевое соединение для лабораторного теста, чтобы учесть пользователей с низкой скоростью Интернета.

В примере, изображенном выше, полевые данные LCP составляют 1,7 секунды, а лабораторные LCP — 3,4 секунды. Между тем, FID составляет 19 мс, а совокупный сдвиг макета равен 0.

Каков хороший результат для Core Web Vitals от Google?

Теперь давайте посмотрим на баллы, к которым вы должны стремиться, чтобы пройти отчет о пользовательском опыте Chrome. Давайте разберемся:

• LCP : хороший результат составляет около 2,5 секунд или меньше. Веб-сайты, которые загружаются в течение 2,6–4 секунд, нуждаются в улучшении, в то время как сайты с временем загрузки более четырех секунд имеют плохую LCP.
• FID : хороший порог для оценки FID потребует задержки менее 100 мс. Однако превышение 300 мс означает плохой пользовательский опыт.
• CLS : показатель CLS ниже 0,1 считается хорошим, а все, что выше 0,25, считается плохим.

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

Конкретные методы улучшения

Давайте рассмотрим некоторые популярные тактики, чтобы улучшить свой результат LCP.

Сжатие изображения

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

Лучшие инструменты сжатия изображений включают Ezgif, Jpeg Optimizer, Tiny PNG и Compressor. Использование таких форматов изображений, как JPEG и WebP, также позволяет обрабатывать изображения быстрее.

Используйте сеть доставки контента (CDN)

CDN может уменьшить расстояние между пользователем и сервером, что приводит к более быстрому времени загрузки страницы и лучшему LCP. Даже если ваш сервер находится в Америке, пользователь из Франции или Австралии может наслаждаться положительными впечатлениями от страницы и быстрым временем загрузки, независимо от своего местоположения.

Как выбрать лучший CDN для вашего бизнеса? Сравнение CDN позволяет сравнивать функции каждого поставщика CDN на основе цены, основных функций, безопасности и поддержки.

Получите надежный веб-хостинг

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

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

Клиентский рендеринг

Рендеринг на стороне клиента позволяет разработчикам создавать веб-сайты, обработанные с помощью JavaScript.

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

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

Удалите неиспользуемые плагины

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

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

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

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

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

Конкретные методы улучшения задержки первого входа

А теперь вот несколько уловок для улучшения вашей оценки FID.

Уменьшить время выполнения JavaScript

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

К счастью, Google Lighthouse может найти файлы JavaScript, загрузка которых занимает более двух секунд. Как только вы узнаете, что больше всего влияет на время выполнения, вы можете асинхронно, отложить или удалить ненужный JavaScript.

Используйте веб-воркеров

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

Минимизировать файлы кода

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

Как и сжатие изображений, минимизация файлов кода сокращает время загрузки страницы. Хостинговые компании и CDN могут автоматически минимизировать файлы кода. Если эта функция недоступна по умолчанию, вы также можете использовать бесплатные инструменты, такие как Closure Compiler, Yuri Compressor, cssnano и CSSO, для минимизации файлов JavaScript и CSS.

Оценить сторонние скрипты

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

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

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

Конкретные методы улучшения кумулятивного сдвига макета

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

Включите атрибуты размера ширины и высоты для визуальной стабильности

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

Зарезервированное место для рекламного места

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

Хорошая новость: вы можете устранить это явление, зарезервировав место для рекламного места.

Есть несколько способов сделать это:

• Задайте для рекламного места определенную высоту и ширину с помощью <div>элемента.
• Зарезервируйте место как для самого большого, так и для минимального размера рекламного места.
• Посмотрите исторические данные, чтобы определить наиболее вероятный размер рекламного места.
• Избегайте размещения рекламы в верхней части области просмотра, потому что это приведет к перемещению большего количества элементов в нижних частях страницы. Объявления в середине не будут перемещать столько элементов.

Добавляйте контент динамически для визуальной стабильности