Как оптимизировать Core Web Vitals? Специалисты Google поделились четкой инструкцией
Профессиональные разработчики, работающие в команде Google, предоставили миру общую инструкцию по оптимизации и аудиту главных показателей интернет-ресурсов (их также называют Core Web Vitals). Она состоит из нескольких этапов, каждый из которых охватывает определенные инструменты и действия. В данном случае речь идет об ABC-подходе к оптимизации таких показателей.
В чем суть ABC-подхода?
Пост, опубликованный компанией, включает информацию о трёх основных этапах:
- оценка состояния и поиск проблемных мест сайта (A);
- оптимизация и настройка страниц (B);
- мониторинг показателей и совершенствование сайта (C).
Давайте рассмотрим их более детально.
Оценка состояния и поиск проблемных мест
Эта стадия в подходе Google именуется буквой «A». Для выполнения необходимых мероприятий привлекаются специалисты по аудиту. Им нужно определить ответы на несколько вопросов:
- Какой уровень производительности ресурса, и каким компонентам нужно уделить внимание?
- Показатели ухудшились или улучшились за последний период?
- Каким показателям, устройствам и страницам нужно отдать приоритеты?
Чтобы решить поставленные задачи, стоит использовать специальные инструменты. Одним из наиболее эффективных вариантов является PageSpeed Insights. Он идеально подходит для оценивания пользовательского опыта на каждой странице.
В результате использования инструмента специалистам веб студии удается создать список тех страниц, которые остро нуждаются в оптимизации. По завершению исследований можно переходить к следующей стадии.
Настройка и оптимизация страниц
Так называемый этап «B» тоже начинается с определения ответов на несколько вопросов. Но в отличие от предыдущего этапа, они имеют другое направление:
- Какие виды исправлений требуют планирования в дальнейшем?
- Каким способом стоит выполнять оптимизацию страниц?
- Какие проблемы нуждаются в первоочередном решении?
В процессе можно использовать сразу несколько инструментов – Chrome DevTools, расширение Web Vitals, Lighthouse. Первый вариант позволяет наблюдать за влиянием смещений макетов в реальном времени, тестировать изменения кода, а также удалять неиспользуемые коды. После внесения любых изменений рекомендуется начинать с первой стадии «A», чтобы узнать результат.
Lighthouse – это тот же инструмент, который применяется в PageSpeed Insights. Кроме этого, его можно найти на сайте web.dev и в Chrome DevTools. Они используются для определения возможных изменений, которые способствуют улучшению пользовательского опыта. Расширение Web Vitals охватывает CLS и FID, а также измеряет показатели в процессе взаимодействий со страницами.
Совершенствование и мониторинг
Завершает список этап «С». Его суть заключается в отслеживании эффективности внесенных изменений, а также в корректировке некоторых настроек. Многие исследования показали, что большинство интернет-ресурсов, которые повышают производительность, в течении полугода теряют позиции. Чтобы этого не происходило, необходимо внимательно изучать показатели, реагировать в случае упадка. На этом этапе стоит использовать несколько инструментов – Web-vitals.js, CrUX через BigQuery, PageSpeed Insights API и CrUX API.
Команда Google утверждает, что такая инструкция помогает точно определять проблемные зоны, а также оптимизировать Core Web Vitals. Кроме этого, ABC-подход помогает создать стратегию действий, которая в будущем будет способствовать поддержанию высокой производительности сайтов.
