6 инструментов для проверки скорости загрузки страниц сайта, и что с этим делать в 2023 году

Я Алексей из loading.express, сервиса, который измеряет скорость загрузки сайтов. В прошлой статье я описал 20 похожих сервисов (~137К просмотров). Обновляю информацию и список инструментов.

Медленный сайт — убийца продаж, конверсий и хорошего настроения

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

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

ТОП сервисы для измерения скорости загрузки сайта в 2023 году

  1. PageSpeed Insights — популярный сервис проверки скорости сайта в мире. Проверяет из США или Европы.
  2. Loading.express — популярный сервис проверки скорости сайта после PageSpeed. Проверки с серверов Москвы, Новосибирска и Германии. Всего более 20 локаций для проверки.
  3. Lighthouse 11 — движок от PageSpeed. Это как PageSpeed, только без лишних интерфейсов и из Москвы.
  4. TTFB — замер скорости ответа сервера в реальном времени. Москва, Новосибирск, Германия и другие города и страны.
  5. Core Web Vitals — живые данные, напрямую из базы Гугл CRuX.
  6. Расширение для Chrome или Yandex Browser для проверки в один клик.

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

Итак, возьмем для образца сайт dohome.ru. Покажу на его примере, как сделать всесторонний аудит скорости загрузки сайта.

Как это делаю я:

  • открываю сайт, который надо замерить. Жму на кнопку расширения из пункта 6 выше. Делаю замер. Получаю результаты замера;
Результат замера скорости загрузки сайта dohome.ru на loading.express
Результат замера скорости загрузки сайта dohome.ru на loading.express
  • внизу отчета видим две кнопки. Жмём обе. В новых окнах открываются замеры — раз, два;
Две кнопки, на которые надо нажать. Интерфейсы из отчета loading.express
Две кнопки, на которые надо нажать. Интерфейсы из отчета loading.express
  • анализируем показатели, в первую очередь смотрим на красные и желтые значения;
  • далее идем в верхнее меню сайта loading.express. Наводим курсор на «Сервисы». Жмём это.
Меню на ПК версии loading.express, на мобильном это скрыто.
Меню на ПК версии loading.express, на мобильном это скрыто.
  • Закидываем свой сайт на проверку и ожидаем, пока заполнится данными. Тут важное значение «Median», оно не должно быть выше 0,4.
Скорость ответа сервера здорового сайта (dohome.ru)
Скорость ответа сервера здорового сайта (dohome.ru)

Важное

Теперь надо проверить Core Web Vitals, что настоящие посетители получают на вашем сайте. Для этого надо получить «живые» данные, которые Гугл заботливо для нас собирает каждый месяц, по каждому сайту, в каждой стране.

Еще важнее. Живые данные относятся ко всем страницам сайта, на которые посетители могут зайти.

Не так давно, 7 февраля 2023, команда Chrome представила CrUX History API, поэтому теперь можно доставать данные Core Web Vitals через API.

Здесь видим такую картину:

Живые данные из CrUX History API
Живые данные из CrUX History API

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

Что делать со всеми этими замерами

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

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

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

Лахта Клиника — 13.165 сек.

Замер на loading.express показывает 2 из 10 баллов.

2/10 баллов, сайт загружается критично долго.
2/10 баллов, сайт загружается критично долго.

Что внутри замера.

Основные метрики страницы сайта клиники lahtaclinic.ru
Основные метрики страницы сайта клиники lahtaclinic.ru

Время полной загрузки 13.2 секунды.

Число http-запросов — 168, надо до 100. Гугл рекомендует до 50. Это можно сделать путем устранения лишних запросов при загрузке страницы. Запросы — это картинки, стили, скрипты, шрифты и любые ajax-запросы.

Общий размер страницы — 24.41 мегабайта. Вес страницы надо снижать. 71 картинка общим весом в 19.77 мегабайт — серьезная проблема, чтобы быстро загрузить это по медленной сети на смартфоне.

Детализированный отчет из loading.express по http-запросам
Детализированный отчет из loading.express по http-запросам

Скрипты весом в 1.74 мегабайта — чистить, отключать, переверстывать без JS.

Шрифты — 10 подключений весом 2.71 мегабайта. Необходимо заменить шрифты ttf на woff2, так как 630 килобайт по три раза совершенно нет необходимости подключать.

Детализированный список подключаемых шрифтов из loading.express
Детализированный список подключаемых шрифтов из loading.express

Изображения в png формате. Без оптимизации. Гигантского размера. PNG давно никто не использует. Все картинки урезать до необходимого размера, сжать без потери качества и выдавать в формате webp.

Детальный список изображений, загружающихся на странице.
Детальный список изображений, загружающихся на странице.

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

Рекомендации из аудита на loading.express — бери и делай.
Рекомендации из аудита на loading.express — бери и делай.

Аудит из Lighthouse содержит массу подробных инструкций, с чем работать.

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

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

Простой, но временный — переехать на более мощный сервер.

Данные из сервиса <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fttfb.loading.express&postId=694279" rel="nofollow noreferrer noopener" target="_blank">ttfb.loading.express</a>
Данные из сервиса ttfb.loading.express

Что на самом деле получают посетители этого сайта

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

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

LCP — 3 536 мс. Меньшее из бед, в порядке только 50% посетителей.
LCP — 3 536 мс. Меньшее из бед, в порядке только 50% посетителей.
CLS — 0,51. Очень сильно дергаются элементы сайта, что создает проблемы с просмотром контента и со взаимодействием с интерфейсами у посетителей
CLS — 0,51. Очень сильно дергаются элементы сайта, что создает проблемы с просмотром контента и со взаимодействием с интерфейсами у посетителей
FCP — 3 026 мс. Первая отрисовка после 3 секунд, это <b>большая</b> проблема, только 37% получают хороший пользовательский опыт по этому параметру.
FCP — 3 026 мс. Первая отрисовка после 3 секунд, это большая проблема, только 37% получают хороший пользовательский опыт по этому параметру.
TTFB — 1 852 мс. Вишенка. Ответ сервера 1.8 секунд. На одну страницу. <b>Катастрофа</b>. В порядке только 25% посетителей.
TTFB — 1 852 мс. Вишенка. Ответ сервера 1.8 секунд. На одну страницу. Катастрофа. В порядке только 25% посетителей.

Измерить скорость сайта теперь просто — как ускорить?

Ускорение сайта — это отдельная тема. Здесь нет секретных ингредиентов, но есть свои трюки и наработки.

После ускорения загрузки сайта, я рекомендую провести аудит юзабилити, то есть насколько сайт удобен для посетителя. Для этого можно обратиться ко мне.

Не так давно проводил вебинар у Михаила Шакина, вот нарезки на 2 минуты из него:

Нарезка из вебинара. Полная версия тут — https://www.youtube.com/live/x4AS4BA_6nU.

Подписывайтесь на канал loading в ТГ.

Увидимся!

3333
60 комментариев

Вот VC, понятно почему этот сайт такой непопулярный и почему сюда вообще никто не ходит.

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

И да, вот на примере VC — всё красит красным, но это один из самых юзер-френдли сайтов, быстрый и удобный для пользователя.

7
Ответить
Комментарий удалён автором поста

Кеш?

2
Ответить

У VC doubleclick.net тянет секунд 30-40 загрузку. Это Гугловский, ни то аналитикс, ни то что-то еще оттуда же...

2
Ответить

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

1
Ответить

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

4
Ответить

если совсем ничего не делать, то ничего и не поменяется

5
Ответить