10 инструментов скорости страницы, чтобы увидеть, как быстро загружаются ваши целевые страницы

Большинство сайтов теряют половину своих посетителей во время загрузки страницы. Это шокирующая реальность, в которую трудно поверить, но, возможно, нет, если учесть, что средний показатель отказов веб-страниц сегодня составляет 58,18%. Хуже того, средний показатель отказов целевой страницы после клика колеблется от 60 до 90%.

Мобильные страницы в равной степени подвержены влиянию низкой скорости загрузки страниц. Исследование Google и SOASTA, проведенное в 2016 году, показало, что среднее время загрузки мобильного веб-сайта для сеансов с отказом было примерно на 2,5 секунды медленнее, чем для сеансов без возврата.

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

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

Как влияет скорость страницы?

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

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

Вот некоторые из наиболее распространенных факторов, которые замедляют скорость страницы на изображении выше:

• Крупные изображения и текстовая графика
• видео
• Длина страницы
• Скрипты, шрифты и плагины (HTML, JavaScript, CSS)
• Ненужные перенаправления
• География (страна, город, организация, интернет-провайдер, скорость сети)
• Пропускная способность

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

10 самых надежных инструментов ускорения страницы

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

1. GTmetrix

GTmetrix анализирует ваш сайт, используя комбинацию 27 рекомендаций по скорости страницы (тест скорости Google) и 19 рекомендаций YSlow (тест скорости Yahoo). В верхней части отчета представлены оценки производительности от A до F, а также сведения о странице, включая время загрузки, размер страницы и количество запросов.

Время загрузки по умолчанию указывается как «время полной загрузки» (время с момента, когда посетитель впервые перешел на страницу, до 2 секунд после отсутствия сетевой активности). «Время загрузки» является необязательным (когда веб-страница завершила обработку и все ресурсы на странице, включая изображения, текст и скрипты, завершили загрузку). Остальная часть отчета разделена на шесть разных разделов: PageSpeed, YSlow, водопад, тайминги, видео и история.

GTmetrix позволяет тестировать и сравнивать производительность веб-сайта с различными типами подключения, чтобы увидеть, как это влияет на скорость загрузки вашей страницы. Он предлагает функцию регулирования соединения для имитации возможных типов интернет-соединений, которые могут использовать посетители вашего сайта: кабельное, DSL, мобильное 3G, мобильное 2G и коммутируемое соединение 56K. Вы также можете выбрать Chrome или Firefox в качестве возможного браузера.

Этот инструмент имеет 7 тестовых мест, но предоставляет в общей сложности 28 выделенных тестовых серверов: 11 в Ванкувере, Канада; 5 в Далласе, США; 7 в Лондоне, Великобритания; 2 в Сан-Паулу, Бразилия; 1 в Сиднее, Австралия; 1 в Мумбаи, Индия; и 1 в Гонконге, Китай.

GTmetrix поддерживает HTTP/2, который загружает веб-страницы быстрее, чем HTTP/1.1, пытаясь устранить многие недостатки и ограничения HTTP/1.1. Преимущества HTTP/2 включают в себя:

• Мультиплексирование и параллелизм (несколько запросов могут быть отправлены в быстрой последовательности по одному и тому же TCP-соединению)
• Потоковые зависимости
• Сжатие заголовка
• Пуш сервера

Кроме того, GTmetrix — один из немногих инструментов для определения скорости страницы, который также предлагает тестирование производительности мобильных устройств. Он использует два телефона Samsung Galaxy Nexus, поэтому пользователи могут создавать отчеты о производительности на основе фактических загрузок страниц на этих устройствах.

2. Пингдом

Pingdom позволяет проверить скорость вашего сайта из 3 основных мест:

• Даллас, Техас
• Мельбурн, Австралия
• Сан-Хосе, Калифорния

Он обеспечивает оценку производительности на основе рекомендаций Google PageSpeed ​​для бесплатной версии и рекомендаций YSlow для платной версии. Pingdom также отображает время загрузки, размер страницы, количество запросов и то, как ваш сайт тестируется на других сайтах. Дополнительные сведения включают разбивку размера страницы по типу контента, размеру страницы по домену, запросам по типу контента и домену.

Одним из основных преимуществ теста скорости Pingdom является то, что пользователям предоставляется информация о производительности с указанием того, что можно улучшить. Однако, в отличие от GTmetrix, Pingdom предлагает только время загрузки (не время полной загрузки), не предлагает регулирование соединения и не поддерживает HTTP/2.

3. Google PageSpeed ​​Insights

PageSpeed ​​Insights — это тест скорости Google, который дает рекомендации по улучшению и оценивает вашу страницу от 0 до 100 баллов на основе двух параметров:

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

Чем выше ваш балл, тем более оптимизирован ваш сайт, а все, что выше 85, указывает на то, что ваша страница работает хорошо.

PageSpeed ​​Insights предоставляет отчеты как для настольной, так и для мобильной версии вашей страницы. Он извлекает URL-адрес дважды — один раз с мобильным пользовательским агентом и один раз с настольным пользовательским агентом. Мобильный отчет включает в себя дополнительную категорию под названием «Пользовательский опыт», которая включает в себя конфигурацию вашего окна просмотра, размер ваших целей касания (кнопок и ссылок) и размеры шрифта.

Команда PageSpeed ​​Insights также недавно запустила новый инструмент для определения скорости страницы «Think with Google», который находится следующим в списке.

4. Думайте с Google: протестируйте мой сайт

Разница с этим в том, что он проверяет только скорость мобильной страницы.

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

«Время загрузки» — это индекс скорости (не время полной загрузки), измеряющий, сколько времени требуется для отображения видимого содержимого страницы с помощью Chrome на устройстве Moto G4 в сети 3G. (Примечание: для тестирования используется сеть 3G, поскольку 70% подключений к сотовым сетям во всем мире будут осуществляться на 3G или более низких скоростях до 2020 года.)

Средняя часть результатов представляет собой отраслевое сравнение, рассчитанное на основе внутреннего исследования Google более 5 миллионов веб-страниц:

Наконец, инструмент «Проверить мой сайт» показывает, сколько времени можно сэкономить, внеся несколько исправлений на вашу страницу, вместе с подробным отчетом об исправлениях, рекомендованных PageSpeed ​​Insights:

5. Система показателей скорости Google

Speed ​​Scorecard включает в себя тысячи сайтов в 12 разных странах в своей базе данных и позволяет сравнивать до 10 доменов, чтобы увидеть, как выглядит ваш мобильный сайт. Вы также можете сравнить скорость загрузки вашей страницы при подключении 3G и 4G.

Поскольку мы обсудили, как низкая скорость загрузки страниц может повлиять на показатели отказов и коэффициенты конверсии, как насчет дохода? Чтобы дать вам представление, Google также включил калькулятор влияния, чтобы оценить сумму потенциального дохода в долларах, который бренды могут потерять из-за медленной загрузки страниц:

Чтобы увидеть предполагаемые потери, заполните поля калькулятора: домен, текущая скорость, среднемесячное количество посетителей, средняя стоимость заказа и коэффициент конверсии (многие из них можно найти на панели инструментов Google Analytics).

6. KeyCDN

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

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

7. Веб-тест страницы

WebPagetest включает в себя более 40 различных тестовых мест на выбор и более 25 браузеров, включая 14 мобильных устройств. Доступно так много тестовых локаций, потому что любой может разместить тестовую локацию для WebPagetest, если они соответствуют минимальным системным требованиям.

Тесты могут быть запущены с функцией регулирования количества подключений для имитации потенциальных подключений к Интернету, которые посетители сайта могут использовать: кабельное, DSL, 3G Slow, 3G, 3G Fast, 4G, LTE, Mobile Edge, 2G, коммутируемое соединение 56K, FIOS, собственное подключение. и настраиваемые скорости.

Он предлагает уникальный подход к тестированию, запуская «первый просмотр» и «повторный просмотр». Он также предоставляет более продвинутые функции, такие как захват видео, многоэтапные транзакции, блокировка контента, отключение JavaScript, игнорирование SSL-сертификатов и подмена строк пользовательского агента.

Когда WebPagetest предоставляет свои результаты, он присваивает вашему сайту буквенную оценку от A до F на основе времени полной загрузки по умолчанию, с необязательным временем загрузки. Другие параметры оценки включают FTTB, сжатие, кэширование, эффективное использование CDN и многое другое. Отчет разделен на шесть разделов — сводка, подробности, обзор производительности, разбивка содержимого и снимки экрана — предоставляя обширную диагностическую информацию с каскадными диаграммами, проверками оптимизации скорости страницы и предложениями по улучшению.

И последнее замечание: HTTP/2 поддерживается WebPagetest.

8. Дотком-Монитор

Dotcom-Monitor предлагает 20 различных точек тестирования по всему миру и семь браузеров, включая мобильные и облачные. Уникальность этого инструмента заключается в том, что вы можете запускать все географические тесты одновременно, а затем щелкать по каждому отчету, чтобы узнать о них больше.

Отчеты разделены на пять разделов — сводка, производительность, каскадная разбивка, хост и ошибки, в которых вы можете найти:

• Сводка по местоположению
• Тестирование времени загрузки всех элементов страницы в браузере
• Обнаружение медленных/отсутствующих элементов
• 10% самых быстрых элементов
• 10% самых медленных элементов
• Полная диаграмма водопада
• Разбивка по элементам хоста (включая DNS, соединение, SSL, запрос, первый пакет и загрузку)
• Проверка ошибок и диагностика

9. Пейджлокити

Инструмент Pagelocity доступен и работает как на настольных, так и на мобильных устройствах. Он присваивает пользователям общую оценку из 100 на основе таких компонентов, как статус контента, структура страницы и кодирование. Отчет включает в себя:

• Сводка содержания: ценная информация о текстовом содержании вашей страницы (ключевые слова, ссылки заголовков, альтернативный текст для изображений и т. д.).
• Разбивка ресурсов: информация о структуре вашей страницы — сколько на ней изображений, скриптов или файлов стилей, а также контент, блокирующий рендеринг, и как эти факторы могут повлиять на время загрузки вашей страницы.
• Советы и идеи по коду: предложения по обновлению кода, чтобы сделать его более удобным в сопровождении и расширяемым, с полезными данными о вашей разметке (классы/идентификаторы, теги, Google PageSpeed, время до первого байта и т. д.)

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

10. YSlow

YSlow — это проект с открытым исходным кодом, который анализирует веб-страницы на основе 23 из 34 правил Yahoo! для высокопроизводительных веб-сайтов. Для получения результатов теста производительности необходимо выполнить три шага:

• Сканирует DOM, чтобы найти все компоненты (изображение, скрипты и т. д.)
• Получает информацию о размере каждого компонента (gzip, заголовки с истекшим сроком действия и т. д.)
• Использует данные для выставления оценок по каждому правилу, что дает вам общую оценку.

YSlow также предлагает сводку страницы со статистикой, предложениями по улучшению и инструментами для анализа производительности (включая Smush.it и JSLint).

Чтобы запустить инструмент скорости страницы YSlow, вы можете использовать расширение YSlow для Chrome или получить результаты YSlow от GTMetrix.

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

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

Как бренды могут ускорить свои веб-страницы?

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

Оптимизация изображений

Убедитесь, что изображения не больше, чем должны быть, что они имеют правильный формат файла и сжаты для Интернета. 25% страниц могут сэкономить более 250 КБ за счет сжатия изображений и текста, а 10% могут сэкономить более 1 МБ. Что касается видео, либо оставьте его, либо разместите файл на другой платформе (например, YouTube или Vimeo), а не на своих серверах.

Загружать асинхронно

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

Сократите CSS, JavaScript и HTML

Оптимизируйте свой код, убрав пробелы, запятые и другие ненужные символы, удалив комментарии к коду и минимизировав форматирование.

Уменьшить количество редиректов

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

Кэшируйте свои страницы

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

Улучшить время отклика сервера

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

Выберите инструмент ускорения страницы, который соответствует вашим потребностям

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

При разработке быстро загружаемых целевых страниц после клика ничто не может сравниться с AMP. Благодаря уникальной структуре и минимальному HTML-коду целевые страницы AMP после клика могут загружаться мгновенно, что обеспечивает отличный пользовательский интерфейс. Узнайте, как конструктор Instapage AMP позволяет специалистам по цифровому маркетингу быстро и легко создавать и публиковать быстро загружаемые материалы, запросив демонстрацию сегодня.