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-соединению)
• Зависимости потоков
• Сжатие заголовка
• Сервер push

Кроме того, 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 дважды - один раз с помощью мобильного пользовательского агента и один раз с помощью настольного пользовательского агента. Мобильный отчет включает дополнительную категорию под названием «User Experience», которая включает в себя конфигурацию вашего окна просмотра, размер ваших целей касания (кнопки и ссылки) и размеры шрифта.

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

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

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

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

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

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

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

5. Google Speed ​​Scorecard

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

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

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

6. KeyCDN

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

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

7. WebPagetest

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

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

Он предлагает уникальный подход к тестированию, запускающий «первый просмотр» и «повторный просмотр». Он также предоставляет более продвинутые функции, такие как захват видео, многоэтапные транзакции, блокировка контента, отключение 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 позволяет специалистам по цифровому маркетингу быстро и легко создавать и публиковать файлы с быстрой загрузкой, запросив демонстрацию прямо сегодня.