7 Инструментов для проверки производительности основных веб-приложений — Техническое SEO

Показатели Core Web Vitals (также известные как CWV) повсюду. По крайней мере, именно так я себя чувствую, когда 70% моей ленты YouTube — это контент, связанный с CWV, а остальные 30% — видео об умных осьминогах (не спрашивайте, просто посмотрите). Итак, как вы проверяете показатели своего сайта? Какие инструменты следует использовать, чтобы убедиться, что последние исправления, которые вы внедрили, действительно улучшили показатели вашего сайта? В этой статье я хочу поделиться с вами 7 инструментами, которые вы можете использовать для проверки производительности web vitals. Я использую их практически ежедневно. Давайте начнем с краткого напоминания о том, что такое CWV и как они измеряются.

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

• Largest Contentful Paint (LCP): измеряет производительность загрузки. Чтобы обеспечить хороший пользовательский опыт, LCP должен появляться в течение 2,5 секунд после начала загрузки страницы.
• Задержка первого ввода (FID): измеряет интерактивность. Для обеспечения хорошего пользовательского восприятия страницы должны иметь FID не более 100 миллисекунд.
• Кумулятивный сдвиг макета (CLS): измеряет визуальную стабильность. Для обеспечения хорошего пользовательского опыта страницы должны поддерживать CLS на уровне 0,1 или меньше.

Лабораторные и полевые данные (CrUX):

• Полевые данные — основаны на анонимизированных данных из отчета Chrome User Experience Report.
• Лабораторные данные — основаны на моделировании, которое вы запускаете на своем устройстве (веб-сайт может удивительно хорошо работать на вашем игровом ноутбуке, но это может не отражать пользовательский опыт в реальном мире).

Не знаете, с чего начать? Начните с PageSpeed Insights.

Абсолютным основным инструментом любой SEO-ориентированной оптимизации производительности является PageSpeed Insights от Google. Это отличный инструмент для быстрого взгляда на производительность СЅЅ, который охватывает целый ряд метрик и рекомендаций с быстрым обзором того, как у вас обстоят дела на мобильных и настольных компьютерах. Инструменты предоставляют отчеты как о полевых, так и о лабораторных данных. Это отличный инструмент, но у него есть один недостаток: он проверяет только одну страницу. Используйте эту удобную закладку, чтобы быстро проверить производительность вашей страницы: speed-test

Нужно запустить несколько тестов в тестовой среде? Попробуйте Lighthouse.

Еще один сверхпопулярный инструмент для тестирования производительности. Lighthouse доступен через Chrome. Он предоставляет отчет, аналогичный PageSpeed Insights, но использует только лабораторные данные. Лично я использую Lighthouse в основном для тестирования производительности страниц в тестовой среде. Подобно PageSpeed Insights, Lighthouse присваивает балл протестированным страницам. Если вы хотите понять, как рассчитывается этот балл, посмотрите на Lighthouse Scoring Calculator.

Комментарии не нужны: это Google Search Console.

Инструмент, который вряд ли нуждается в представлении, Search Console предлагает совершенно новый отчет Core Web Vitals. Этот отчет использует данные CrUX и дает полезное представление о том, как ваш сайт работает в целом.

Два важных предупреждения об использовании этого отчета:

• Показатели URL группируются по статусу, типу метрики и группе URL (группы похожих веб-страниц). Таким образом, трудно детализировать и просмотреть производительность отдельного URL.
• Данные CrUX обновляются в течение 28 дней. Я знаю, что данные выглядят как непрерывные, но, по моему опыту, вы можете увидеть, как целая куча страниц внезапно переходит из состояния «Плохо» в состояние «Хорошо».

Интересно, оптимизируют ли ваши конкуренты для CWV? Визуализируйте данные CrUX в Google Data Studio.

Многие цифровые маркетологи знакомы со старой доброй Data Studio. А Google щедро делится со всеми данными CrUX через BigQuery. Я не буду вдаваться в подробности реализации, поскольку все это прекрасно описано в этой статье о WebDAV. Лично я использую этот отчет, чтобы посмотреть, как обстоят дела у конкурентов в моей нише — и, кроме того, он отлично смотрится в презентациях.

Хотите оценивать страницы еще быстрее? Web Vitals (расширение для Chrome).

Все любят хорошие расширения для Chrome, и это легкое и простое в использовании расширение измеряет показатели CWV в режиме реального времени на уровне страницы. Его безопасно использовать, поскольку данные в этом расширении соответствуют данным в других инструментах, таких как Lighthouse. Проверьте его!

Нужно копнуть немного глубже? Панель производительности DevTools.

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

Если вы никогда не пользовались ею раньше, не волнуйтесь. Все довольно просто. Просто выполните следующие действия:

1. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
2. Перейдите на вкладку «Производительность». (Убедитесь, что включена запись веб-показателей).
3. Нажмите кнопку Запись.
4. Вручную перезагрузите страницу.
5. Подождите, пока страница загрузится, а затем остановите запись. (Я обычно записываю не менее 3 секунд).

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

Хотите получить наглядное визуальное представление сдвига макета? Панель рендеринга Chrome DevTools.

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

Чтобы воспользоваться этой функцией, выполните следующие действия:

1. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
2. Нажмите Cmd + Shift + P > и введите Render.
3. Перейдите на панель Render и включите опцию Layout Shift Regions.
4. Вручную перезагрузите страницу.
5. Наблюдайте и наслаждайтесь. (Обычно я отключаю cash и включаю throttling, чтобы лучше видеть результаты).

Бонус: Платные инструменты.
Существует куча платных инструментов, уже вошедших в группу Core Web Vitals.

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

1. Screaming Frog
2. SEMrush
3. DeepCrawl
4. Botify

Заключение

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