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

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

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

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

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

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

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

• открываю сайт, который надо замерить. Жму на кнопку расширения из пункта 6 выше. Делаю замер. Получаю результаты замера;

• внизу отчета видим две кнопки. Жмём обе. В новых окнах открываются замеры — раз, два;

• анализируем показатели, в первую очередь смотрим на красные и желтые значения;

• далее идем в верхнее меню сайта loading.express. Наводим курсор на «Сервисы». Жмём это.

• Закидываем свой сайт на проверку и ожидаем, пока заполнится данными. Тут важное значение «Median», оно не должно быть выше 0,4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Увидимся!