5 способов начать оптимизацию вашего бизнес-сайта для Core Web Vitals

Опубликовано: 2022-05-04

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

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

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

Core Web Vitals призваны изменить способ ранжирования веб-сайтов в Google. Он охватывает три основных показателя, а именно:

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

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

И вот пять эффективных способов сделать это:

  1. Оптимизируйте свои изображения и видео

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

Эффективный способ сделать это — масштабировать и сжимать все изображения на вашем веб-сайте. Некоторые инструменты оптимизации изображений, которые можно использовать, — это tinypng или ShortPixel. Вы также можете преобразовать свои изображения в более эффективные современные форматы, такие как .png, а также убедиться, что они являются адаптивными изображениями, которые идеально выглядят как на мобильных, так и на настольных устройствах.

Проведите различие между «оптимизацией» и «уменьшением размера». Вы можете попытаться уменьшить размер изображений, чтобы ускорить их загрузку. Но помните, что весь смысл Core Web Vitals заключается в том, чтобы предоставить пользователям лучший опыт. Ваши изображения (или видео) могут загружаться быстрее, но посетители вашего веб-сайта могут не счесть их полезными, если они размыты или имеют низкое качество.

  1. Ленивая загрузка изображений и сторонние скрипты

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

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

Один из способов ленивой загрузки изображения — через HTML. Вам просто нужно следовать этой разметке:

<img src="imagename.png" loading="lazy" alt="image1"/>

<iframe src="content1.html" loading='lazy"></iframe>

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

  1. Убедитесь, что все элементы на вашей странице не сдвинутся с места

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

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

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

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

  1. Исправьте свои шаблоны UX для настольных и мобильных устройств

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

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

  1. Улучшите настройку мониторинга реальных пользователей (RUM)

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

Консоль поиска Google (GSC) — это полезный инструмент, который покажет вам производительность страниц на основе групп URL-адресов или групп URL-адресов с похожей структурой HTML.

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

Бонусный совет:

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

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

Как определить, что у вас медленное время отклика сервера? Используйте такие инструменты, как WebPage Test и Lighthouse.

В Lighthouse, в частности, есть элемент аудита страниц под названием «Уменьшить начальное время отклика сервера». Если вы видите это в своем аудиторском отчете, это означает, что вам нужно потратить время на изучение проблемы с вашими веб-разработчиками.

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


Core Web Vitals предназначены для того, чтобы помочь пользователям получать удовольствие от работы в Интернете. С его обновлением Google стремится расставить приоритеты в скорости сайта и пользовательском опыте. Но единой формулы оптимизации не существует, потому что она будет зависеть от текущей производительности вашего веб-сайта, ваших целей и отрасли, в которой вы работаете.

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