Как проверить производительность сайта бесплатно? Тест на факторы Google Core Web Vitals
17 февраля 2021

Как проверить производительность сайта бесплатно? Тест на факторы Google Core Web Vitals

Официально: метрики производительности включены в фактор ранжирования Page Experience. Следовательно, влияют на позиции сайтов в поисковой выдаче.

Как узнать, есть ли проблемы с производительностью сайта? Как найти источник проблем?

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


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

Performance в переводе означает производительность.

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

Понятия скорость загрузки сайта и производительность сайта по сути являются разными.

Страницы сайта загружаются по мере выполнения кода и загрузки данных по сети.

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

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

Скорость не зависит от производительности.

Скорость загрузки и производительность

Как производительность сайта связана с позициями в поисковой выдаче?

Раньше поисковые системы использовали простые эвристики, эффективность которых докручивали поведенческими факторами.

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

Эвристики обладают следующими особенностями:

  • Не гарантирует нахождение решения, даже если решение заведомо существует;
  • Способна выдавать неверное решение в некоторых случаях;
  • Не гарантирует нахождение лучшего решения.

От эвристик алгоритмы усовершенствованы до уровня Google BERT. И Yandex YATI.

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

Оценка производительности страницы сайта

Тренд заключается в применении нейросетей и оценке сайта со стороны клиента.

Следовательно, метрики производительности начали влиять на ранжирование в поисковой выдаче. Влияние происходит так:


В Chrome 88 стали доступны данные по всем метрикам — LCP, FID CLS — которые входят в фактор ранжирования Page Experience.

Получение данных происходит через инструмент Google Chrome DevTools Performance.

Разберемся с инструментом подробно. Для каких целей использовать? Как получить пользу на практике?

Анализ производительности сайта через Performance


Google Chrome DevTools Performance — мощный, но сложный для понимания инструмент по работе над производительностью сайта.

Инструмент бесплатный.

Как использовать?

Постараюсь объяснить простым языком.

1 — Тестирование производительности сайта через Performance


Приступим сразу к практике. Performance является частью набора инструментов Google Chrome DevTools.

Запускается инструмент из браузера:

  • Открыть в браузере Chrome анализируемый сайт;
  • Нажать F12;
  • Перейти на вкладку под названием Performance.

Выглядит интерфейс инструмента Performance так:

Инструмент Performance

Разберемся с доступными настройками. В настройках доступны следующие опции:

  • Network — задает скорость соединения. Применяется для занижения скорости интернета;
  • CPU — задает ограничение на процессор. Применяется для торможения процессора;

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

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

Проблемы ярче проявляются на медленном соединении.

Дополнительные настройки:

  • Screenshots — применяется для создания скриншотов этапов отрисовки сайта. Позволяет узнать, что в каждый конкретный момент было отрисовано.
  • Memory — применяется для захвата данных о потребляемой оперативной памяти. Позволяет узнать сколько и на что памяти было затрачено. Используется для анализа тяжелых сайтов;
  • Enable advanced paint instrumentation — применяется для сбора более подробных данных об отрисовке элементов. Термин paint подразумевает вывод пикселей.

Все настройки в интерфейсе:

Настройки в Performance

Еще есть важная настройка, которая размещена на вкладке Network. Называется опция Disable cache. Напрямую влияет на данные в отчете.

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

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

Отключение кеша при анализе производительности сайта

Запуск сбора данных происходит по клику на кнопку запись или по нажатию ctrl+e. По клику данные начинают собираться с текущего состояния страницы.

Если сайт открыт до запуска инструмента, то запись будет вестись с дальнейших действий.

Если требуется анализ с чистого листа надо кликнуть кнопку reload или ctrl+shift+e.

Сбор профиля сайта происходит не быстро.

Пример результатов для сайта indexoid:

Отчет по производительности сайта

На простой странице находим разные проблем.

Разберемся с данными.

2 — Анализ производительности сайта


Ключевые графики в отчете выведены сверху:

  • FPS;
  • CPU;
  • NET.

Какая интерпретировать и извлечь пользу?

1 — FPS: Измерение плавности отрисовки при открытии сайта


FPS — frame per second. Метрика измеряется в количестве кадров в секунду. Оптимальным считается значением в 60 кадров за секунду, что на практике соответствует частоте обновления стандартного монитора.

Пустая часть на FPS графике означает, что ничего не отрисовывалось.

Красным обозначены области, когда кадр отрисовывался дольше 16 миллисекунд.

При частоте 60 кадров в секунду на 1 кадр приходится примерно 16 миллисекунд.

60 кадров / 1000 миллисекунд

1 кадр / 16 миллисекунд

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

Пример:

Проблема с производительностью сайта

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

Проблема приводит к ухудшению пользовательского опыта. Такие участки следует оптимизировать. Разобрались.

2 — CPU: Измерение нагрузки на процессор


Диаграмма CPU показывает уровень нагрузки процессора.

Разные цвета на диаграмме указывают на типы процессов, которые выполнялись процессором при открытии сайта.

Разъяснение по каждому цвету находится в сводке Summary.

Как получить пользу от графика? Если на графике есть участки с максимальной нагрузкой на процессор, такие участки следует оптимизировать.

Пример:

Измерение нагрузки на процессор при открытии сайта

3 — Скриншоты этапов загрузки страницы


Полоса из скриншотов полезна для анализа последовательности загрузки элементов на сайте.

Как получить пользу от графика? Через анализ на последовательность загрузки элементов. Оптимально, если в начале загружаются элементы первого экрана.

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

Пример. Инструмент позволяет выявить проблему рендеринга. Картинка загрузилась в начале. Но вывелась на экран в конце загрузки страницы. Так происходит из-за ошибок в коде сайта.

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

Как правильно на сайте проводить рендеринг элементов страницы

Также скриншоты помогают выявить проблемы смещения элементов после загрузки. Алгоритм оценивает стабильность макета после загрузки сайта. Метрика называется Cumulative Layout Shift.

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

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

На позиции сайта влияет и скорость загрузки сайта. Рекомендованные материалы в блоге MegaIndex на тему ускорения загрузки страниц сайта:


Найти другие проблемы на сайте способен инструмент по аудиту сайтов от MegaIndex.

Сервис бесплатный.

Ссылка на сервис — Аудит сайта.

Выводы

В фактор ранжирования Page Experience входят метрики web vitals которые характеризуют производительность:

  • Largest contentful paint;
  • First input delay;
  • Cumulative layout shift.

Как провести тест сайта на производительность? Инструмент Performance от Google позволяет проверить производительность любой страницы. В инструменте собирается профиль сайта, показывается как браузер отрисовывает страницу.

Как провести анализ данных о производительность сайта? Через погружение в данные по динамике рендеринга страницы и динамике взаимодействия со страницей. Практические примеры описаны выше.

Какие есть возможности в инструменте? Инструмент Performance позволяет найти конкретный участок в коде, который является источником проблемы. Далее устранением проблем должны заниматься разработчики сайта.

Планируете ли проверить сайт? Если есть вопросы по теме? Какие есть мысли по теме? Напишите в комментариях.

Обсуждение

w0504428020
15:34 18 февраля 2021
F12 на клавиатуре это яркость, какие еще есть варианты?
3dnewsmarketing
15:40 18 февраля 2021
Попробуйте fn+f12
Дмитрий Угниченко
15:42 18 февраля 2021
shift+ctrl+c нажмите.
holms
15:47 18 февраля 2021
Реально? Вы подписаны на рассылку, читаете "статьи про оптимизацию" и при этом не знаете как войти в DevTools ???
mahasamatmanhroft
16:18 18 февраля 2021
смотрим внимательно и учимся пользоваться клавиатурой на ноутбуках, используй кнопку Fn+F12
Дмитрий Угниченко
12:56 22 февраля 2021
Верно.
kubl
15:35 18 февраля 2021
Атмосфера
3dnewsmarketing
15:42 18 февраля 2021
Что, Atom имеете ввиду для правки кода?
holms
15:43 18 февраля 2021
>Как получить пользу от графика? Если на графике есть участки с максимальной нагрузкой на процессор, такие участки следует оптимизировать.
>Как исправлять производительность сайта? Практический каждый сайт уникальный. Проблемы разные. Задача поискового оптимизатора заключается в выявлении проблем, постановке задач и проверке выполненных работ по корректировке кода страницы.
Рекомендации, как всегда, кульные)
Дмитрий Угниченко
16:06 18 февраля 2021
Если подумать объективно, то
— Часть аудитории не знала, что такие факторы есть. Узнали. Полезно.
— Часть аудитории не знала как проверить самостоятельно.
— Часть аудитории пойдет дальше, проверит сайт и улучшит.
Так множество сайтов станет лучше.
Часть сайтов станет лучше ранжироватся.
holms
16:15 18 февраля 2021
Фуууу... вы так нагло отредактировали мой коммент, правда глаза режет?
Дмитрий Угниченко
16:19 18 февраля 2021
Вы пишите маты и оскорбляете участников. Прекращайте.
fonotekar
16:10 18 февраля 2021
Так пришлите ссылку на свой материал. Покажите класс. Только не перепутайте класс с голой жопой!
holms
16:17 18 февраля 2021
Тянет померяться у кого длиннее? Ида, мне безразличны твои влажные фантазии о "голой жопе"
fonotekar
20:58 18 февраля 2021
А, так вот в чем дело - у вас причандала то и нет, меряться у вас нечем, понятно. Только обиды на жизнь можете предложить. Поэтому и сидите под ником в интернете, хейт разводите. Жаль, что жизнь так с вами обошлась. Но с хейтерами так обычно и происходит. Попробуйте сделать что-то полезное.
seoggm
16:24 18 февраля 2021
Сервис говорите бесплатный? ))
Переходим по ссылке - Извините, сервис временно недоступен
Дмитрий Угниченко
16:35 18 февраля 2021
Речь шла про контент. Сервис отчасти тоже бесплатный.
seoggm
16:44 18 февраля 2021
См.выше:
Сервис бесплатный.
Ссылка на сервис — Аудит сайта.
Так вот именно по этой ссылке и нет никакого сервиса. Зачем тогда писать про бесплатно там, где этого бесплатно нет?
Дмитрий Угниченко
16:52 18 февраля 2021
Передал в поддержку, чтобы починили.
Дмитрий Угниченко
16:35 18 февраля 2021
Если не работает аудит, есть контакты технической поддержки - https://ru.megaindex.com/skype. Есть возможность написать, позвонить по Skype ли позвонить по телефону.
seoggm
16:45 18 февраля 2021
А оно мне надо? Переходя по ссылке всё должно работать. Не работает сразу - значит не будет работать и потом.
Дмитрий Угниченко
20:59 18 февраля 2021
Если свет в доме пропал, то уже и не будет потом? Исправят
dekorators
12:40 19 февраля 2021
Ваш Аудит сайта не умеет сканировать SPA сайты, не видит js. Устаревший инструмент в целом
Дмитрий Угниченко
12:24 22 февраля 2021
Поддержка принимает пожелания об улучшении сервиса. https://ru.megaindex.com/skype
bret.snk
13:37 19 февраля 2021
>Напрямую через сигналы web viATls,
Дмитрий Угниченко
12:25 22 февраля 2021
Спасибо за внимательно, поправил.
logband82
15:10 19 февраля 2021
Спасибо за статью!
Дмитрий Угниченко
12:23 22 февраля 2021
Спасибо за отклик!
wasp-city
19:58 20 февраля 2021
Всё еще не работает сервис. Толку от статьи?
Дмитрий Угниченко
12:25 22 февраля 2021
Сервис работает. Performace в браузере работает не зависимо от сервиса.
vladimir_lebedev79
16:40 1 марта 2021
Доброго времени суток.
Хотел поинтересоваться, какие ограничение (временные, объемные и т.п.) в бесплатной версии сервиса в сравнении с платной?
admin
14:55 2 марта 2021
В бесплатной версии есть ограничения на выгрузку количества строк. Подробнее разъяснит техническая поддержка — https://ru.megaindex.com/skype.
vladimir_lebedev79
18:40 2 марта 2021
Благодарю за ответ!
zafarmujahid2
21:35 2 марта 2021
Thanks for sharing the article.
zafarmujahid2
21:37 2 марта 2021
The Mega Index is good for website checking.
atlet_2191
23:25 20 марта 2021
mega
anv-webmaster
11:53 26 марта 2021
спасибо за статью
john_scott_brandis
23:31 12 May 2021
решения для игорного бизнеса любого размера.
bonbap2021
06:38 26 июня 2021
A very interesting topic that I have been looking at, I think this is one of the most important information for me. And I'm glad to read your post. Thanks for sharing! atari breakout
bonbap2021
06:38 26 июня 2021
Your article content is being interested by a lot of people, I am very impressed with your post
seolt.ru
15:19 10 октября 2021
Часто различные JS скрипты очень сильно просаживают производительность, например, VUE JS.
Для добавления комментария, пожалуйста, авторизуйтесь