Создание сайтов в Приволье, ЛНР. Как сделать так, чтобы ваш сайт прошел тест 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?

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

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

Дисплей первого ввода (FID). Это измеряет, насколько быстро страница реагирует на действия пользователя.

Совокупный сдвиг макета (CLS). Это измеряет неожиданное перемещение содержимого при просмотре страницы.

Для более глубокого погружения вы можете ознакомиться с нашим руководством по Core Web Vitals.

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

Измерение основных веб-показателей быстро и легко с помощью Google PageSpeed ​​Insights.

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

Статистика Google PageSpeed

Core Web Vitals можно найти в разделах «Полевые данные «и «Лабораторные данные «.

Основные веб-жизненные показатели Google

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

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

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

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

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

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

FID: хороший порог для оценки FID потребует задержки менее 100 мс. Однако превышение 300 мс означает плохое взаимодействие с пользователем.

CLS: показатель CLS ниже 0,1 считается хорошим, но все, что выше 0,25, считается плохим.

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

Конкретные методы улучшения самой крупной содержательной отрисовки

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

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

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

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

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

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

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

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

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

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

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

Рендеринг на стороне клиента

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

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

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

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

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

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

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

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

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

GTMetrix

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

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

Сокращение времени выполнения JavaScript

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

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

Google Маяк

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

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

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

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

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

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

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

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

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

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

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

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

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

Поместите атрибуты ширины и высоты

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

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

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

реклама на сайте

Источник скриншота

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

Задайте определенную высоту и ширину рекламного места с помощью элемента.