Я Алексей из loading.express, сервиса, который измеряет скорость загрузки сайтов. В прошлой статье я описал 20 похожих сервисов (~137К просмотров). Обновляю информацию и список инструментов.
Медленный сайт — убийца продаж, конверсий и хорошего настроения
Я возьму два сайта и пошагово покажу какие надо делать замеры. Расскажу, на что смотреть в замерах и что с этим со всем делать.
Важное примечание. Сайт может быть медленным только на смартфоне. Если ваш сайт тормозит на ПК — у вас большие неприятности, потому что на мобилке он может вообще не откроется или будет ронять браузер.
ТОП сервисы для измерения скорости загрузки сайта в 2023 году
- PageSpeed Insights — популярный сервис проверки скорости сайта в мире. Проверяет из США или Европы.
- Loading.express — популярный сервис проверки скорости сайта после PageSpeed. Проверки с серверов Москвы, Новосибирска и Германии. Всего более 20 локаций для проверки.
- Lighthouse 11 — движок от PageSpeed. Это как PageSpeed, только без лишних интерфейсов и из Москвы.
- TTFB — замер скорости ответа сервера в реальном времени. Москва, Новосибирск, Германия и другие города и страны.
- Core Web Vitals — живые данные, напрямую из базы Гугл CRuX.
- Расширение для Chrome или Yandex Browser для проверки в один клик.
Пошаговый план: как измерять скорость загрузки сайта в 2023 году
Итак, возьмем для образца сайт dohome.ru. Покажу на его примере, как сделать всесторонний аудит скорости загрузки сайта.
Как это делаю я:
- открываю сайт, который надо замерить. Жму на кнопку расширения из пункта 6 выше. Делаю замер. Получаю результаты замера;
- анализируем показатели, в первую очередь смотрим на красные и желтые значения;
- далее идем в верхнее меню сайта loading.express. Наводим курсор на «Сервисы». Жмём это.
- Закидываем свой сайт на проверку и ожидаем, пока заполнится данными. Тут важное значение «Median», оно не должно быть выше 0,4.
Важное
Теперь надо проверить Core Web Vitals, что настоящие посетители получают на вашем сайте. Для этого надо получить «живые» данные, которые Гугл заботливо для нас собирает каждый месяц, по каждому сайту, в каждой стране.
Еще важнее. Живые данные относятся ко всем страницам сайта, на которые посетители могут зайти.
Не так давно, 7 февраля 2023, команда Chrome представила CrUX History API, поэтому теперь можно доставать данные Core Web Vitals через API.
Здесь видим такую картину:
Любые замеры сервисами могут показывать что угодно. Ваша задача понять, что сами посетители получают по скорости загрузки.
Что делать со всеми этими замерами
Если вы разработчик, то вы знаете, что делать. Если не совсем, то пишите, проведем обучение.
Если вы владелец сайта или маркетолог, то для вас простые обозначения. Красное убрать. Зеленое добавить. Все красные показатели говорят о том, что норма превышена, а значит с этим надо работать.
Давайте возьмем сайт из свежего рейтинга по ТОПовым медицинским клиникам России и на его примере я покажу, что именно с ним не так и что делать.
Лахта Клиника — 13.165 сек.
Замер на 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 в ТГ.
Увидимся!
Вот VC, понятно почему этот сайт такой непопулярный и почему сюда вообще никто не ходит.
Я не отрицаю того, что страница должна открываться быстро для пользователя и сам всегда за этим слежу на своих сайтах. Но не надо думать, что это панацея или ключевой, решающий аргумент.
И да, вот на примере VC — всё красит красным, но это один из самых юзер-френдли сайтов, быстрый и удобный для пользователя.
Комментарий удален автором поста
Кеш?
У VC doubleclick.net тянет секунд 30-40 загрузку. Это Гугловский, ни то аналитикс, ни то что-то еще оттуда же...
Не стоит всецело подмахивать pagespeedinsignts ибо он в большей степени указывает на оптимизацию под блинк подобные браузеры по этому оценку сего сервиса стоит делить на два.
Можно ничего не делать, просто подождать 10 лет и мощность устройств и скорость интернета станут достаточными, чтобы не обращать внимание на размер. Это произошло с программами для компьютера, всем теперь плевать, какого они размера.
если совсем ничего не делать, то ничего и не поменяется
Тут тоже есть согласие, потому что есть такая гипотеза. Но как будет на самом деле, не ясно.
Спасибо за упоминание!
На следующий день приходите в офис, и начальник такой: «И так, коллеги… записываем в тетрадь: Работа над ошибками!»
Велкам!
Когда писал SEO-отчеты использовал также данные по скорости сайтов от вашего сервиса. Он зашел больше.
Потому, что PageSpeed больше ориентирован на поиск ошибок (стили/технических) а не на замер скорости. И бывает, что PageSpeed показывает разные значения с разных ПК/Браузеров, хотя они подключены к одному вайфаю в одном помещении.
Мне же нужно было попроще. Где двумя скринами в отчете для клиента. Из серии Было/Стало.
О расширении не знал, спасибо.
Отличная статья! Видео внизу как будто на полтора часа, а оно на 2 минуты.))
Это был конечно жесткий пранк, вставить картинку типа это на полтора часа, а на самом деле нет
Супер, пойдем замерять свой сайт...
Давайте, покажете потом что получилось.
Алексей, а почему нет в подборке gtmetrix? По сути ваш сервис немного улучшенный gtmetrix, что конечно хорошо, можно отчеты на русском для клиентов давать и сервера в Москве.
Спасибо за статью - проверим свой и клиентские сайты, интересно, что покажет по живым данным.
Богдан, тут вот какая штука. GTmetrix сканирует ПК версию, что бесполезно само по себе, потому что проблемы со скоростью в 90% на мобилке, потому что в мобилке нет таких процессоров, чтобы быстро загрузить всё что дают. Это и есть узкое место в скорости загрузки. А джитиметрикс в бесплатной версии дает только ПК и еще с зарубежных серверов замеряет. Не советую ориентироваться на них. Хотя мне нравится их waterfall по загрузке, очень юзабельно.
Комментарий недоступен
Тут выше уже писали, к этому относится "FID (First Input Delay) - это метрика, которая измеряет время, прошедшее от момента, когда пользователь взаимодействует с элементом страницы (например, нажимает на ссылку или кнопку), до момента, когда браузер реагирует на это взаимодействие."
И на смену ему идет параметр INP (Input Delay) - это метрика, которая измеряет задержку взаимодействия с элементами страницы после того, как пользователь начал взаимодействовать с ними. Она отражает, насколько плавно реагирует страница на ввод пользователя.
Простыми словами, отобразилась страница, вы тыкаете пальцем на поисковик на сайте, а оно не реагирует, потому что задержка ввода не адекватная.
Комментарий удален модератором
Эти инструменты не создают нагрузки (DDoS) на сайт. Можно не волноваться.
Я хоть не верстальщик сайтов, но тема создания интересует. Буду знать на будущее, спасибо за статью😊
Если создавать, то обязательно в ТЗ прописать, чтобы по loading.express была оценка 10 из 10, а по пейджспид больше 90.
Статья о проблемах скорости загрузки страниц - это как песня про дождь: все знают, но ничего не меняется.
Это смешно))
Меняется, но ооооочень медленно...
В общем скорости и остальные метрики CWV это больше о качестве сервиса. Если твой сайт нужен, имеет ценность, то пользователь готов мириться с неудобствами (это не значит, что оптимизироваться не нужно, но факт). Поэтому старички нифига и не делают для своей оптимизации, пользователи и так сидят. Плюются и сидят. Это поле для новичков, чтобы подвинуть такие сервисы с пьедестала народной любви. Хотя вот сам написал, а у самого сайт с говенным CLS, но там просто кушать очень хочется и РСЯ в первом окне экрана делает сдвиг макета при загрузке. Но пользователи терпят. Хотя у конкурентов ещё хуже :)
Да это правда, что юзеры мирятся. Но не согласен, что старички нифига не делают. Корп сектор активно движется в сторону ускорения сайтов. Многие сами, некоторые обращаются за консультациями или ТЗ для отделов разработки.
А CLS от РСЯ если оно не автоматом ставится, то можно же задать размеры заранее и убрать CLS..
не удивлен даже
https://loading.express/?test_id=646b68485d4a8a02a9ac33e6&server=main
Уже выше про это комментили, что у них синтетические замеры - по ним все плохо, а живые замеры - там все хорошо. Так что паника отменяется.)
У меня кроме PageSpeed Insights и Core Web Vitals ничего не открывается даже через VPN (((
Странно, а что отображается? У нас блокировки нет никакой.
Если ваш сайт тормозит на ПК — у вас большие неприятности
Да уж действительно хуже неприятностей и быть не может😅
Конверсия страдает, а если и на ПК тупит, то беда. Многие даже не подозревают, сколько они теряют клиентов из-за медленного сайта. Но еще больше тех, кто даже не знает что их сайт медленно загружается...
Ты просто не умеешь их готовить
Да, возможно, но зачем?!