Скорость загрузки сайта: 6 онлайн-сервисов для анализа и тестирования

СОДЕРЖАНИЕ

Онлайн-сервис https://seolik.ru/speed

Онлайн-сервис https://tools.pingdom.com/

Онлайн-сервис https://www.webpagetest.org/

Онлайн-сервис https://gtmetrix.com/

Онлайн-сервис https://www.dareboost.com/en/

Онлайн-сервис https://tools.keycdn.com/speed

Итоги

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

Онлайн-сервис https://seolik.ru/speed

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

По сути, это полный аналог онлайн-сервиса PageSpeed Insights от Google (https://developers.google.com/speed/pagespeed/insights/). Кстати, именно по этой причине последний в сегодняшнюю подборку и не попал.

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

Во-первых, на смартфонах и планшетах страницы всегда будут грузиться медленнее. Следовательно, если Вы добились хорошей оценки по 100-бальной шкале для мобильных устройств, значит хорошей оценки для десктопных устройств Вы добились еще раньше.

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

После тестирования мы получаем:

• общую оценку скорости загрузки, причем вместе со скриншотом;

• список рекомендаций, которые либо уже выполнены, либо которые еще предстоит выполнить.

91 балл из 100, да еще и для мобильных устройств – это очень хорошая оценка, однако, сервис говорит «чувак, ты можешь лучше, тебе есть куда расти!».

Справедливости ради отметим, что оценка в 91 балл из 100, это не значит, что сайт, имеющий оценку в 60 баллов, будет грузиться медленнее. 91 балл – это оценка не скорости загрузки, а усилий, которые были приложены к тому, чтобы загрузка производилась максимально быстро. Именно поэтому данный сервис имеет смысл использовать только «в паре» (а еще лучше – в группе) с другими.

Онлайн-сервис https://tools.pingdom.com/

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

Онлайн-сервис имеет несколько серверов, расположенных в разных странах. Например, на скриншоте можно выбрать сервер Бразилии, Австралии, США, Великобритании, Германии и Японии. Результаты, кстати, могут отличаться от сервера к серверу, поэтому тестирование лучше проводить 3-4 раза, причем на разных серверах. В данном случае мы для тестирования выбрали лондонский сервер. И вот результаты:

• оценка сервиса – 82 балла;
• время загрузки – чуть больше 1 секунды;
• общий объем передаваемых данных – чуть менее 740 килобайт.

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

Например, объём передаваемого контента.

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

В таблице слева приведена статистика в килобайтах, а также процентное соотношение, высчитанное от общего объема переданных килобайтов.

В таблице справа – всё аналогично, но уже не в килобайтах, а в «штуках».

Например, по таблице слева мы видим, что картинки заняли 215,5 килобайт, а по таблице справа мы видим, что картинок аж 15 штук. Скрипты – загружено 8 штук (см. таблицу справа) общим объемом 379,4 килобайта (см. таблицу слева).

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

А еще ниже располагается подробная таблица с отчетом по каждому элементу.

В данном случае всё плюс-минус нормально, поскольку очень длинных цветных отрезков нет. Поэтому для наглядности протестируем другой сайт (но название не скажем, чтобы не скомпрометировать). И вот тут уже отчетливо наблюдается достаточно продолжительный желтый отрезок. Желтый цвет имеет обозначение «Wait», т.е. «ожидание», т.е. по сути пустой простой.

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

В данном случае это почти 1,5 секунды, что много (нормой простоя считается время до 200 миллисекунд). И в данном случае такое время ответа является прямым свидетельством того, что медленная работа сайта связана прежде всего с хостингом. В противном случае эти 1,5 секунды были бы «перенесены», например, на Receive.

На наш взгляд, у данного сервиса только 2 минуса.

Первый минус – отсутствие русского языка (что может оттолкнуть русскоязычную аудиторию).

Второй минус –

Серьезно, от этого ядовито-желтого цвета шапки, глаза начинают болеть уже секунд через 20, а если отвести взгляд в сторону, то можно понять, что Вы «нахватались зайцев». Однако, данный минус решается использованием солнцезащитных очков с хорошей тонировкой, либо снижением яркости и/или контрастности экрана.

Онлайн-сервис https://www.webpagetest.org/

Сервис англоязычный, но зато позволяет эмулировать огромное количество различных ситуаций. Например, 5-мегабитное интернет-соединение по кабелю, 1,5-мегабитное DSL-соединение, соединение 2G/3G/4G (причем с разным качеством сигнала), огромное количество браузеров, в т.ч. и мобильных, и т.д.

Для примера давайте посмотрим, какое время загрузки покажет наш сайт при нормальном 3G-соединении (скорость передачи данных – 1,6 мбит/сек с пингом в 150 миллисекунд). Тест будет проходить в 2 этапа, причем каждый этап будет сопровождаться как первичной загрузкой страницы, так и последующей перезагрузкой страницы (установлен переключатель «First View and Repeat View»)

Результаты:

Теперь давайте расшифруем данную таблицу:

• First Byte (время ожидания до получения первого байта) – в обоих случаях превышает 1,5 секунды, но тут уж ничего не поделать, т.к. 3G есть 3G;
• Start Render (время начала отрисовки) – 2,3-2,7 секунды;
• First Contentful Paint (время получения первых результатов отрисовки) - 2,3-2,7 секунды;
• Speed Index (время, необходимое для отображения видимых частей страницы) – 2,5-3 секунды;
• Last Painted Hero (время, необходимое для отрисовки главных элементов) - 2,5-3,1 секунды;
• Largest Contentful Paint (время необходимое на отрисовку основного контента страницы) - 2,5-3,1 секунды;
• Cumulative Layout Shift (время «стабилизации» контента, когда загруженные элементы находятся там, где и должны и не перемещаются по экрану) – 0 секунд;
• Total Blocking Time (время, когда загруженный контент не отображается) – 1,2-1,3 секунды;
• Time в графе Document Complete (время, в течение которого с сервера на смартфон передаются все необходимые для загрузки страницы данные) – 9,6-14,1 секунды;
• Time в графе Fully Loaded (время, в течение которого документ будет полностью отрисован) – 13-19 секунд.

Многим из Вас эти цифры покажутся бредом, типа «2020 год на дворе! По всей стране уже давно бесплатный Wi-Fi раздают, а вы тут с доисторическим 3G копаетесь!» И если Вы подумали именно так, то Вы находитесь либо в Москве, либо в Санкт-Петербурге.

Серьезно, зайдите в любой магазин бытовой электроники и посмотрите, сколько смартфонов/планшетов продается БЕЗ поддержки 4G. Да, с Wi-Fi, но это тоже беспроводное соединение, а значит оно тоже будет с немалым пингом! Про то, что почти во всех городах есть районы, куда кабельный интернет не дотягивается, вообще молчим. И «кабельный интернет не дотягивается» в данном случае не является фигурой речи. К слову, в таких районах, как правило, 4G тоже отсутствует. Остается только 3G или, упаси Господи, EDGE.

Отвлеклись, продолжаем.

Далее следует еще одна таблица с краткими результатами по каждому прогону.

А вот теперь самое интересное. В правом столбце присутствуют ссылки на подробный график загрузки элементов + скриншоты времени загрузки. Выглядит всё это вот так:

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

Каких-либо рекомендаций по улучшению скорости загрузки не даёт, но является отличным помощником в поиске «узких мест», из-за которых затрудняется загрузка сайта.

Онлайн-сервис https://gtmetrix.com/

Супердетально рассматривать данный сервис мы не будем, поскольку он является почти полным (пусть даже и упрощённым) аналогом предыдущему, за исключением трех моментов:

1) чуть более дружелюбный интерфейс;

2) возможностью посмотреть, как влияет на скорость загрузки многими любимый AdBlock (кто не в курсе – это блокировщик рекламы).

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

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

Для примера давайте просканируем один и тот же сайт с AdBlock’ом и без.

В обоих случаях результаты плачевные – 10-11 секунд на загрузку. Разница же во времени загрузки составила 0,8 секунды, что достаточно много (даже при таком общем времени).

3) данный онлайн-сервис ведёт историю сканирований, что реально удобно.

Например, Вы протестировали сайт «как есть», затем скомпрессировали картинки и залили их на сайт вместо имеющихся, протестировали еще раз и… и всё, в истории можно будет сравнить результаты «лицом к лицу».

Именно за счет этих фишек данный сервис и попал в данную подборку.

Онлайн-сервис https://www.dareboost.com/en/

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

Кстати, у данного сервиса есть возможность группировать выданные рекомендации.

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

Онлайн-сервис https://tools.keycdn.com/speed

Здесь мы тоже не будем заново переписывать то, что уже было сказано ранее. Добавим лишь, что с помощью данного онлайн-сервиса гораздо проще выискивать ресурсы, которые подгружаются с редиректом, т.е. когда в коде страницы прописан один адрес картинки/скрипта, а по факту картинка/скрипт располагается по другому адресу.

В данном случае у нас переадресация идёт по Яндекс.Картам.

Итоги

Подборка у нас получилась небольшая – всего 6 онлайн-сервисов, с помощью которых можно протестировать сайт на скорость загрузки, выявить слабые места и, соответственно, устранить их. Разумеется, список подобных онлайн-сервисов гораздо шире, однако, часть из них либо не работает, либо работает криво, либо целиком и полностью повторяет функционал тех сервисов, которые здесь уже были рассмотрены. Мы же постарались подобрать сервисы таким образом, что у каждого есть своя уникальная фишка.

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