Я Алексей из loading.express, сервис который измеряет скорость загрузки сайтов. В прошлой статье я описал 20 похожих сервисов (123 096 просмотров). Обновляю информацию и список инструментов.
2245 просмотров
Медленный сайт — убийца продаж, конверсий и хорошего настроения
Я возьму два сайта и пошагово покажу какие надо делать замеры. Расскажу, на что смотреть в замерах и что с этим со всем делать.
Важное примечание. Сайт может быть медленным только на смартфоне. Если ваш сайт тормозит на ПК — у вас большие неприятности, потому что на мобилке он может вообще не откроется или будет ронять браузер.
ТОП сервисы для измерения скорости загрузки сайта в 2023 году
- PageSpeed Insights — популярный сервис проверки скорости сайта в мире. Проверяет из США или Европы.
- Loading.express — популярный сервис проверки скорости сайта после PageSpeed. Проверки с серверов Москвы, Новосибирска и Германии.
- Lighthouse 10 — движок от PageSpeed. Это как PageSpeed, только без лишних интерфейсов и из Москвы.
- TTFB — замер скорости ответа сервера в реальном времени. Москва, Новосибирск, Германия.
- Core Web Vitals — живые данные, напрямую из базы Гугл CRuX.
- Расширение для Chrome или Yandex Browser для проверки в один клик.
Пошаговый план: как измерять скорость загрузки сайта в 2023 году
SpeedTest — Как Проверить Скорость Интернета / Тест скорости Интернета онлайн
Итак, возьмем для образца сайт dohome.ru. Покажу на его примере, как сделать всесторонний аудит скорости загрузки сайта.
Как это делаю я:
- открываю сайт, который надо замерить. Жму на кнопку расширения из пункта 6 выше. Делаю замер. Получаю результаты замера;
Результат замера скорости загрузки сайта dohome.ru на loading.express
- внизу отчета видим две кнопки. Жмём обе. В новых окнах открываются замеры — раз, два;
Две кнопки, на которые надо нажать. Интерфейсы из отчета loading.express
- анализируем показатели, в первую очередь смотрим на красные и желтые значения;
- далее идем в верхнее меню сайта loading.express. Наводим курсор на «Сервисы». Жмём это.
Меню на ПК версии loading.express, на мобильном это скрыто.
- Закидываем свой сайт на проверку и ожидаем, пока заполнится данными. Тут важное значение «Median», оно не должно быть выше 0,4.
Скорость ответа сервера здорового сайта (dohome.ru)
Теперь надо проверить, что настоящие посетители получают на вашем сайте. Для этого надо получить «живые» данные, которые Гугл заботливо для нас собирает каждый месяц, по каждому сайту, в каждой стране.
Еще важнее. Живые данные относятся ко всем страницам сайта, на которые посетители могут зайти.
Не так давно, 7 февраля 2023, команда Chrome представила CrUX History API, поэтому теперь можно доставать данные Core Web Vitals через API.
Здесь видим такую картину:
Живые данные из CrUX History API
Любые замеры сервисами могут показывать что угодно. Ваша задача понять, что сами посетители получают по скорости загрузки.
Как правильно проверить скорость Интернета? 3 способа теста интернета
Что делать со всеми этими замерами
Если вы разработчик, то вы знаете, что делать. Если не совсем, то пишите, проведем обучение.
Если вы владелец сайта или маркетолог, то для вас простые обозначения. Красное убрать. Зеленое добавить. Все красные показатели говорят о том, что норма превышена, а значит с этим надо работать.
Давайте возьмем сайт из свежего рейтинга по ТОПовым медицинским клиникам России и на его примере я покажу, что именно с ним не так и что делать.
Замер на loading.express показывает 2 из 10 баллов.
2/10 баллов, сайт загружается критично долго.
Что внутри замера.
Основные метрики страницы сайта клиники lahtaclinic.ru
Время полной загрузки 13.2 секунды.
Число http-запросов — 168, надо до 100. Гугл рекомендует до 50. Это можно сделать путем устранения лишних запросов при загрузке страницы. Запросы — это картинки, стили, скрипты, шрифты и любые ajax-запросы.
Общий размер страницы — 24.41 мегабайта. Вес страницы надо снижать. 71 картинка общим весом в 19.77 мегабайт — серьезная проблема, чтобы быстро загрузить это по медленной сети на смартфоне.
Детализированный отчет из loading.express по http-запросам
Скрипты весом в 1.74 мегабайта — чистить, отключать, переверстывать без JS.
Шрифты — 10 подключений весом 2.71 мегабайта. Необходимо заменить шрифты ttf на woff2, так как 630 килобайт по три раза совершенно нет необходимости подключать.
Детализированный список подключаемых шрифтов из loading.express
Изображения в png формате. Без оптимизации. Гигантского размера. PNG давно никто не использует. Все картинки урезать до необходимого размера, сжать без потери качества и выдавать в формате webp.
Детальный список изображений, загружающихся на странице.
Проблемные зоны видны сразу. Здесь собраны все проблемы и с серверной частью и с частью верстки темы сайта. Замерять надо все типы страниц, а не только главную!
Рекомендации из аудита на loading.express — бери и делай.
Аудит из Lighthouse содержит массу подробных инструкций, с чем работать.
Аудит скорости ответа сервера указывает на то, что сервер не справляется с нагрузкой, которую отдает сайт.
Сложный вариант решения — найти проблемы, создающие нагрузку и устранить их.
Простой, но временный — переехать на более мощный сервер.
Данные из сервиса ttfb.loading.express
Что на самом деле получают посетители этого сайта
Теперь смотрим живые данные. Это те замеры, которые происходят, когда каждый посетитель заходит на сайт из браузера Chrome. В момент открытия сайта браузер записывает все параметры и складывает их в обезличенный отчет.
С этими данными не сможет спорить программист или маркетолог, потому что это статистика от ваших посетителей, с их устройств.
LCP — 3 536 мс. Меньшее из бед, в порядке только 50% посетителей.
CLS — 0,51. Очень сильно дергаются элементы сайта, что создает проблемы с просмотром контента и со взаимодействием с интерфейсами у посетителей
FCP — 3 026 мс. Первая отрисовка после 3 секунд, это большая проблема, только 37% получают хороший пользовательский опыт по этому параметру.
TTFB — 1 852 мс. Вишенка. Ответ сервера 1.8 секунд. На одну страницу. Катастрофа.
В порядке только 25% посетителей.
Измерить скорость сайта теперь просто — как ускорить?
Ускорение сайта — это отдельная тема. Здесь нет секретных ингредиентов, но есть свои трюки и наработки.
Если у вас есть технические навыки, то советую заглянуть в канал, где собраны все ответы на вопросы, про то, как именно ускорить сайт.
Канал ведет ведущий разработчик по этой теме, Антон Белогородцев. Ссылка.
После ускорения загрузки сайта, я рекомендую провести аудит юзабилити, то есть насколько сайт удобен для посетителя. Для этого можно обратиться ко мне.
Не так давно проводил вебинар у Михаила Шакина, вот нарезки на 2 минуты из него:
Нарезка из вебинара. Полная версия тут — https://www.youtube.com/live/x4AS4BA_6nU.
Подписывайтесь на канал loading в ТГ.
Показать ещё
61 комментарий
Написать комментарий.
Вот VC, понятно почему этот сайт такой непопулярный и почему сюда вообще никто не ходит.
Я не отрицаю того, что страница должна открываться быстро для пользователя и сам всегда за этим слежу на своих сайтах. Но не надо думать, что это панацея или ключевой, решающий аргумент.
И да, вот на примере VC — всё красит красным, но это один из самых юзер-френдли сайтов, быстрый и удобный для пользователя.
Развернуть ветку
Тут вы правы. Синтетический замер показывает, что Виси сущее зло по скорости загрузки, но если посмотреть на живые данные, то мы с вами не испытываем этой проблемы.
https://perfscan.ru/cwv/?url=https%3A%2F%2Fvc.ru
Посмотрите, все живые данные почти в норме. И это важно смотреть со всех сторон, не просто замерять в пейджспид главную, об этом и есть статья.
И спасибо, что написали.
Развернуть ветку
6 комментариев
Развернуть ветку
У VC doubleclick.net тянет секунд 30-40 загрузку. Это Гугловский, ни то аналитикс, ни то что-то еще оттуда же.
Развернуть ветку
1 комментарий
Можно ничего не делать, просто подождать 10 лет и мощность устройств и скорость интернета станут достаточными, чтобы не обращать внимание на размер. Это произошло с программами для компьютера, всем теперь плевать, какого они размера.
Развернуть ветку
если совсем ничего не делать, то ничего и не поменяется
Развернуть ветку
8 комментариев
Тут тоже есть согласие, потому что есть такая гипотеза. Но как будет на самом деле, не ясно.
Развернуть ветку
Спасибо за упоминание!
Развернуть ветку
На следующий день приходите в офис, и начальник такой: «И так, коллеги… записываем в тетрадь: Работа над ошибками!»
Развернуть ветку
1 комментарий
Развернуть ветку
Когда писал SEO-отчеты использовал также данные по скорости сайтов от вашего сервиса. Он зашел больше.
Потому, что PageSpeed больше ориентирован на поиск ошибок (стили/технических) а не на замер скорости. И бывает, что PageSpeed показывает разные значения с разных ПК/Браузеров, хотя они подключены к одному вайфаю в одном помещении.
Мне же нужно было попроще. Где двумя скринами в отчете для клиента. Из серии Было/Стало.
О расширении не знал, спасибо.
Развернуть ветку
Отличная статья! Видео внизу как будто на полтора часа, а оно на 2 минуты.))
Развернуть ветку
Это был конечно жесткий пранк, вставить картинку типа это на полтора часа, а на самом деле нет
Развернуть ветку
1 комментарий
Супер, пойдем замерять свой сайт.
Развернуть ветку
Давайте, покажете потом что получилось.
Развернуть ветку
1 комментарий
Алексей, а почему нет в подборке gtmetrix? По сути ваш сервис немного улучшенный gtmetrix, что конечно хорошо, можно отчеты на русском для клиентов давать и сервера в Москве.
Спасибо за статью — проверим свой и клиентские сайты, интересно, что покажет по живым данным.
Развернуть ветку
Богдан, тут вот какая штука. GTmetrix сканирует ПК версию, что бесполезно само по себе, потому что проблемы со скоростью в 90% на мобилке, потому что в мобилке нет таких процессоров, чтобы быстро загрузить всё что дают. Это и есть узкое место в скорости загрузки. А джитиметрикс в бесплатной версии дает только ПК и еще с зарубежных серверов замеряет. Не советую ориентироваться на них.
Хотя мне нравится их waterfall по загрузке, очень юзабельно.
Развернуть ветку
2 комментария
Аккаунт удален
Развернуть ветку
Тут выше уже писали, к этому относится «FID (First Input Delay) — это метрика, которая измеряет время, прошедшее от момента, когда пользователь взаимодействует с элементом страницы (например, нажимает на ссылку или кнопку), до момента, когда браузер реагирует на это взаимодействие.»
И на смену ему идет параметр INP (Input Delay) — это метрика, которая измеряет задержку взаимодействия с элементами страницы после того, как пользователь начал взаимодействовать с ними. Она отражает, насколько плавно реагирует страница на ввод пользователя.
Простыми словами, отобразилась страница, вы тыкаете пальцем на поисковик на сайте, а оно не реагирует, потому что задержка ввода не адекватная.
Развернуть ветку
2 комментария
Комментарий удален модератором
Развернуть ветку
Эти инструменты не создают нагрузки (DDoS) на сайт. Можно не волноваться.
Развернуть ветку
Я хоть не верстальщик сайтов, но тема создания интересует. Буду знать на будущее, спасибо за статью
Развернуть ветку
Если создавать, то обязательно в ТЗ прописать, чтобы по loading.express была оценка 10 из 10, а по пейджспид больше 90.
Развернуть ветку
Статья о проблемах скорости загрузки страниц — это как песня про дождь: все знают, но ничего не меняется.
Развернуть ветку
Это смешно))
Меняется, но ооооочень медленно.
Развернуть ветку
В общем скорости и остальные метрики CWV это больше о качестве сервиса. Если твой сайт нужен, имеет ценность, то пользователь готов мириться с неудобствами (это не значит, что оптимизироваться не нужно, но факт). Поэтому старички нифига и не делают для своей оптимизации, пользователи и так сидят. Плюются и сидят.
Это поле для новичков, чтобы подвинуть такие сервисы с пьедестала народной любви. Хотя вот сам написал, а у самого сайт с говенным CLS, но там просто кушать очень хочется и РСЯ в первом окне экрана делает сдвиг макета при загрузке. Но пользователи терпят. Хотя у конкурентов ещё хуже 🙂
Развернуть ветку
Да это правда, что юзеры мирятся. Но не согласен, что старички нифига не делают. Корп сектор активно движется в сторону ускорения сайтов. Многие сами, некоторые обращаются за консультациями или ТЗ для отделов разработки.
А CLS от РСЯ если оно не автоматом ставится, то можно же задать размеры заранее и убрать CLS..
Источник: vc.ru
Как определить скорость загрузки сайта: обзор популярных сервисов-помощников
Есть множество сервисов для проверки скорости загрузки сайта. Среди них можно найти платные и бесплатные, удобные и не очень, с бедным и расширенным функционалом, те, что запустились еще в начале двухтысячных, и сравнительно «свеженькие». А чем же пользоваться? Ответим в статье.
10 лучших инструментов для проверки скорости загрузки страниц сайта
Скорость загрузки страниц сейчас очень весомый сигнал для поисковых систем. Да и для пользователей это значимый фактор, на который сложно не обратить внимание, если с ним проблемы. Улучшая скорость сайта можно не только получать плюсы в ранжировании, но и получать больше доверия и коэффициент конверсий. Ниже приведен список наиболее полезных инструментов, которые помогут провести анализ и выявить самые слабые места сайта в плане скорости.
1. Google PageSpeed Insights
Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
2. Pingdom Tools
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
3. WhichLoadFaster
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
4. Web Page Performance Test
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе ( США ).
5. GTmetrix
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
6. Load Impact
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS ). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
7. Monitis Tools
Анализирует загрузку сайта с разных участков Земли — серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.
8. SiteSpeed.me
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
9. PR-CY
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
10. WebPage Analyzer
Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.
Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.
Источник: devaka.info