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

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

Google планирует использовать Core Web Vitals в качестве сигналов в своем индексе поискового рейтинга. Первоначально запланированное на май 2021 года обновление было перенесено на июнь. Если ваши Web Vitals еще не в порядке, сейчас самое время действовать до того, как появятся изменения в поиске.

Три показателя

Более широкий проект Web Vitals нацелен на несколько аспектов работы в Интернете. Что касается Core Web Vitals, Google фокусируется на трех конкретных показателях. Плохие оценки по этим жизненно важным показателям могут разочаровать пользователей сайта.

Вот три показателя, о которых вам нужно знать:

• Самая большая отрисовка содержимого (LCP) — этот показатель измеряет скорость загрузки страницы. LCP менее 2,5 секунд — это «хорошо»; все, что превышает 4,0 секунды, считается «плохим».
• Задержка первого ввода (FID). Задержка первого ввода измеряет время, необходимое для того, чтобы страница стала реагировать на действия пользователя, такие как клики и прокрутки. Хороший сайт станет интерактивным в течение 100 мс; плохой сайт занимает больше 300 мс.
• Совокупное смещение макета (CLS). CLS – это показатель количества сдвига макета, который происходит во время загрузки страницы. Сдвиг макета происходит, когда асинхронно загружаемые элементы страницы, такие как изображения и рекламные баннеры, появляются после остальной части страницы, в результате чего содержимое под ними заметно прыгает вниз. Этот резкий эффект может расстраивать и сбивать с толку пользователей.

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

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

Измерение основных веб-показателей

У вас есть несколько вариантов, которые помогут вам добиться максимальной производительности Web Vitals. Лучшим выбором для разработчиков является отчет Lighthouse, доступный в инструментах разработчика Google Chrome F12.

Перейдите на свой сайт в Chrome. Запустите Инструменты разработчика и перейдите на вкладку Lighthouse. Нажмите кнопку «Создать отчет», чтобы начать анализ Lighthouse. Это может занять несколько секунд.

Когда отчет загрузится, прокрутите вниз до раздела «Производительность». Отображаются шесть метрик, в том числе три, которые составляют Core Web Vitals. В Chrome «First Contentful Paint» означает «Самое большое Contentful Paint», а «Time to Interactive» — то же самое, что и «First Input Delay».

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

Вы должны запустить Lighthouse дважды, один раз в режиме рабочего стола, а затем еще раз с выбранным переключателем «Мобильный». Отчеты для мобильных и настольных компьютеров выбираются на целевой странице вкладки Lighthouse, где отображается кнопка «Создать отчет». Метрики оцениваются по-разному в зависимости от типа устройства; Поиск Google также будет учитывать эту сегментацию. Если ваш мобильный сайт работает лучше, чем ваш настольный компьютер, вы можете обнаружить, что ваш сайт начинает занимать более высокое место при просмотре со смартфона (или наоборот).

Некоторые системы веб-управления Google также предоставляют данные Core Web Vitals. Вы можете просмотреть свои показатели в отчете об опыте использования Chrome, PageSpeed Insights и на панели инструментов Google Search Console.

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

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

Добавление собственных инструментов

Не только инструменты Google могут измерять Core Web Vitals. Проект также предоставляет библиотеку npm, которую вы можете интегрировать с JavaScript вашего сайта. Это позволяет программно измерять производительность Web Vitals. Затем вы можете отправить собранные данные в свою собственную службу аналитики.

Библиотека предоставляет функцию измерения для каждого из веб-показателей (например, LCP для крупнейшей отрисовки контента). Вызов функции будет измерять значение метрики. Функции принимают обратный вызов, который получит значение после завершения измерения.

import {getLCP} from "web-vitals";
 
getLCP(lcp => {
    console.log(lcp);
    callAnalyticsService({lcp});    // use custom analytics
});

const observer = new PerformanceObserver(entries => {
    for (const entry of entries.getEntries()) {
        console.log(`New LCP entry at ${entry.startTime}`);
    }
});
observer.observe({type: "largest-contentful-paint"});