Тестируем производительность сайта: 15 бесплатных инструментов

Я подобрал 15 инструментов для тестирования производительности и быстродействия сайта. На момент написания статьи все эти инструменты были бесплатными и не предполагали установки какого-либо программного обеспечения для тестирования.

Некоторые инструменты, такие как Webpagetest и LoadImpact, очень сложные, в то время как другие, вроде Redbot или Alertra, всего лишь осуществляют простые проверки быстродействия сайта.

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

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

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

Ещё один замечательный инструмент, позволяющий проверить быстродействие сайта. Он предоставляет оценки Google PageSpeed Grade и Yslow Grades. Я рекомендую этот инструмент, если вы хотите улучшить производительность.

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

Предоставляет прекрасные сервисы мониторинга и включает в себя бесплатный инструмент тестирования производительности веб-страниц. Главный отчёт – это водопад-диаграмма времени загрузки сайта.

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

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

Уделите внимание деталям. Здесь наш сайт получил 69 баллов, но время загрузки было только 0,5с. Это быстрее, чем у 97% всех протестированных сайтов.

Этот инструмент существует уже давным-давно, но он очень полезен, если вам нужно провести тестирование из нескольких местоположений. Доступно больше 100 местоположений на выбор.

Новый сервис с множеством инструментов. Результаты их работы похожи на Google PageSpeed, но размещение и удобство использования на высоте. К каждому плохому результату теста добавляется объяснение.

Feedthebot пригодится для объяснения клиентам проблем, связанных с оптимизацией производительности сайта.

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

Тест производительности сайта из 20 местоположений всего в один клик. Мне нравится этот инструмент, потому что он производит полное браузерное тестирование. Отчёт включает в себя водопад-диаграммы из всех 20 местоположений! Иногда проблемы в работе Сети могут снижать производительность сайт. Но их может быть сложно обнаружить без мониторинга из разных местоположений.

Инструмент SpotCheck от Alertra отлично подходит, чтобы быстро определить работает ли сайт при обращении к нему из нескольких местоположений. Я часто использую его, чтобы быстро проверить сайты, когда клиенты сообщают о проблемах. Обычно если тест Alertra не показывает проблем, то это значит, что проблема изолирована в узком регионе или это что-то, связанное с действиями конкретного клиента.

Это интересная маленькая утилита позволяет посмотреть, что загружается быстрее. Вставьте два URL-адреса в форму и нажмите «Go». Это может быть полезным, если требуется проводить быстрые тесты разных сайтов или продемонстрировать клиенту, насколько быстрее сайт может загружаться с другого хостинга.

Данный сервис протестирует сайт из разных местоположений, а затем предоставит отчёт о его производительности. Метрики детализированы и предоставляются из разных местоположений. Это один из лучших бесплатных инструментов для тестирования производительности сайтов из нескольких местоположений.

Круговая диаграмма, показывающая распределение HTTP-запросов по типу контента. Здесь мы видим, что более 40% запросов приходятся на JavaScript, что может быть улучшено слиянием js-файлов.

Небольшая утилита для проверки HTTP заголовков. Вы удивитесь, узнав, как много сайтов имеют плохо сформированные заголовки. Они могут убить кэширование, навредить эффективности CDN-контента и привести к отображению неверных страниц на мобильных устройствах. Я использую этот инструмент, чтобы показать клиентам, какие заголовки отправляет их сайт. Если заголовки отправляет веб-приложение, они могут переслать эти отчёты своим разработчикам, чтобы исправить имеющиеся проблемы.

Осуществляет быструю проверку времени загрузки сайтов из 30 местоположений. Инструмент поможет обнаружить проблемы с Сетью, которые влияют на время загрузки страниц.

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

Быстрые отчёты с водопад-диаграммами – вот чем полезен этот инструмент. Не слишком много деталей, но тест выполняется быстро и бесплатно!

Набор утилит для проверки скорости работы хостинга, DNS и прочего. Его разработчики постоянно обновляет набор инструментов сервиса.

Это не инструмент тестирования. Но если DNS не работает, то сайт может быть недоступен. Проверяйте поддомены, использующиеся для CDN и другого контента, опубликованного на вашем сайте.

Инструмент позволяет управлять несколькими WordPress-сайтами из одного места.

Данная публикация представляет собой перевод статьи «15 Free Website Performance Testing Tools» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Проверка производительности сайта на соответствие заданному бюджету с Lighthouse

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

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

Причиной этого было незнания того, какие именно цифры мне следует использовать для бюджетов, в сочетании с отсутствием различий между установкой бюджета и его проверкой / исполнением. Вот почему я была очень взволнована, когда в этом году на Google I/O команда Lighthouse объявила о поддержке бюджетов производительности, которые можно интегрировать с Lighthouse. Теперь мы можем определить простой бюджет производительности в файле JSON, который будет протестирован в рамках аудита Lighthouse!

Бюджет Lighthouse

Как мы знаем, существует бесчисленное множество показателей производительности. От ориентированных на пользователя, таких как Время до первого взаимодействия, до ориентированных на ресурсы метрик, таких как размер файлов JavaScript.
Бюджет производительности, который мы можем установить для Lighthouse, ориентирован на последнее и основан исключительно на исходных значениях активов и ресурсов вашего сайта. Мы можем создать два типа бюджетов:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Размер данного ресурса — например, бюджет, который задает, что данная страница загружает только 500 КБ JavaScript

Создание budget.json

Lighthouse ожидает, что бюджет производительности будет записан в файле JSON, обычно с именем budget.json.

Файл JSON настроен как массив объектов, каждый из которых представляет собой набор бюджетов для одного пути. Следует отметить, что в настоящее время Lighthouse поддерживает только один набор бюджетов для одного пути, что означает, что массив budgets.json должен иметь только один объект. Однако предполагается, что мы сможем указать бюджеты для разных путей в одном файле, поэтому он настроен таким образом с расчетом на будущее.

Основной объект бюджета организован по типу бюджета (resourceCounts или resourceSizes), каждый из которых содержит массив бюджетов для каждого типа ресурса. Например, давайте создадим budget.json, который задает следующий бюджет:

10 сторонних ресурсов

300 КБ Javascript

100 КБ CSS

Вот как будет выглядеть соответствующий budget.json:

[ { «resourceCounts»: [ {«resourceType»: «third-party»,»budget»: 10} ], «resourceSizes»: [ {«resourceType»: «script»,»budget»: 300}, {«resourceType»: «stylesheet»,»budget»: 100} ] } ]

[   {     «resourceCounts»: [       {«resourceType»: «third-party»,»budget»: 10}     ],     «resourceSizes»: [       {«resourceType»: «script»,»budget»: 300},       {«resourceType»: «stylesheet»,»budget»: 100}     ]   } ]

Доступны следующие типы ресурсов:

document — HTML документы

script — Файлы Javascript

stylesheet — CSS файлы

image — Изображения

media — Другие медиа

font — Веб-шрифты

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

other — Любые ресурсы, которые не соответствуют вышеуказанному, например, передача данных через соединения Websocket

third-party — Все ресурсы со стороннего домена

total — Все ресурсы вместе

Выбор бюджета производительности

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

Например, приведенный ниже бюджет по умолчанию задает время до первого взаимодействия в 4,4с:

[ { «resourceSizes»: [ {«resourceType»:»document»,»budget»:20}, {«resourceType»:»stylesheet»,»budget»:50}, {«resourceType»:»font»,»budget»:50}, {«resourceType»:»image»,»budget»:300}, {«resourceType»:»script»,»budget»:100} ] } ]

[   {     «resourceSizes»: [       {«resourceType»:»document»,»budget»:20},       {«resourceType»:»stylesheet»,»budget»:50},       {«resourceType»:»font»,»budget»:50},       {«resourceType»:»image»,»budget»:300},       {«resourceType»:»script»,»budget»:100}     ]   } ]

Обеспечение выполнения бюджета с помощью Lighthouse

На данный момент бюджет производительности может использоваться только Lighthouse CLI. Это означает, что мы пока не можем использовать его с панелью аудита в браузере или такими онлайн-инструментами, как PageSpeed Insights или Web.dev. Над этими интеграциями ведется работа, но на данный момент есть два основных способа использования бюджета производительности Lighthouse.

Использование с помощью командной строки

Самый простой способ — это установить Lighthouse CLI и запустить команду аудита, передавая файл budget.json в качестве параметра.

lighthouse [url] —budget-path=[path/to/budget.json]

lighthouse [url] —budget-path=[path/to/budget.json]

Например:

lighthouse https://bitsofco.de —budget-path=budget.json

lighthouse https://bitsofco.de —budget-path=budget.json

Эта команда запускает аудит Lighthouse и выводит стандартную страницу результатов Lighthouse с одним дополнением — разделом о том, как ваша страница работает в соответствии с указанным бюджетом.

Постоянная интеграция

Поскольку аудиты доступны с использованием интерфейса командной строки, они могут применятся везде, где может быть установлен CLI. Это означает, что мы можем включить его в процесс непрерывной интеграции. На web.dev есть отличная статья, в которой описано, как настроить бот Lighthouse Bot для выполнения проверок на запросы GitHub Pull.

Изображение с github.com/GoogleChromeLabs/lighthousebot

Это, вероятно, лучший способ настроить все так, чтобы проверки происходили автоматически.

Автор: Ire Aderinokun

Источник: https://bitsofco.de

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Смотреть

webformyself.com

Тестирование сайтов и веб-приложений: полное руководство

В этой статье мы рассмотрим тестирование сайта (веб-приложения) с помощью наборов тестов. Она довольно длинная, поэтому усаживайтесь по удобнее.

1. Тестирование функциональности;
2. Тестирование удобства использования;
3. Тестирование интерфейса;
4. Тестирование совместимости;
5. Тестирование производительности и скорости загрузки сайта;
6. Тестирование безопасности.

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

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

Формы используются для получения информации от пользователей и взаимодействия с ними.

Что нужно проверить в формах:

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

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

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

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

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

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

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

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

При тестировании функциональности сайтов нужно проверить:

1. Внутренние ссылки;
2. Внешние ссылки;
3. Ссылки на электронную почту;
4. Битые ссылки.

1. Валидация полей;
2. Сообщения об ошибке при неверном вводе;
3. Обязательные и необязательные к заполнению поля.

Следует проверить целостность базы данных.

Тестирование юзабилити — это анализ взаимодействия пользователя и сайта, поиск ошибок и их устранение.

При этом проверяется:

• Легкость обучения;
• Навигация;
• Субъективная удовлетворенность пользователей;
• Общий вид.

Под навигацией подразумеваются средства для просмотра страниц пользователем. Это кнопки, блоки. А также то, как посетитель сайта использует ссылки на другие страницы.

Проверка юзабилити:

• Сайт должен быть простым в использовании;
• Инструкции должны быть очень четкими;
• Проверьте, достигают ли предоставленные инструкции поставленной цели;
• Главное меню должно быть доступно на каждой странице;
• Главное меню должно быть построено в логической последовательности.

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

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

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

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

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

Основные интерфейсы:

• Интерфейсы веб-сервера и приложения.
• Интерфейсы сервера базы данных и сервера приложения.

Если база данных или веб-сервер для какого-либо запроса, исходящего от сервера приложения, возвращает сообщение об ошибке, сервер приложения должен фиксировать его и отображать пользователю.

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

Нужно проверить:

• Совместимость с браузерами;
• Совместимость с операционными системами;
• Просмотр на мобильных устройствах;
• Параметры печати.

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

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

Проверьте работу веб-приложения в браузерах Internet Explorer, Firefox, Netscape Navigator, AOL, Safari, Opera разных версий.

Некоторые функции веб-приложения могут быть несовместимы с определенными операционными системами. Не во всех из них поддерживаются новые технологии, используемые в веб-разработке. Поэтому проверьте работу приложения в Windows, Unix, MAC, Linux, Solaris и их различных версиях.

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

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

Тестирование производительности сайта или веб-приложения должно включать в себя:

• Нагрузочное тестирование.
• Стрессовое тестирование.

Проверьте производительность приложения на различной скорости интернета.

Нагрузочное тестирование сайта (веб-приложения) — это тестирование, при котором большое количество пользователей одновременно выполняют запрос к одной и той же странице. Выдерживает ли система пиковые нагрузки?

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

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

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

Сплит тестирование сайта при использовании различных вариантов интернет-соединения: через модем, ISDN и т.д.

1. Количество пользователей, одновременно посещающих сайт;
2. Проверьте работу системы при пиковых нагрузках;
3. Пользователь осуществляет доступ к большому количеству данных.

1. Непрерывная нагрузка;
2. Производительность памяти, процессора, обработки файлов и т. д.

Ниже приведены некоторые наборы для тестирования веб-безопасности:

• Проверка с помощью вставки внутреннего URL в адресную строку браузера без авторизации. Внутренние страницы при этом не должны открываться.
• После авторизации с помощью логина и пароля, а также просмотра внутренних страниц попробуйте изменять URL. Например, вы проверяете какую-то статистику сайта под идентификатором ID= 123. Попробуйте изменить ID URL на другой ID сайта, который не имеет отношения к авторизованному пользователю. В любом случае доступ этого пользователя к просмотру других показателей должен быть запрещен.
• Попробуйте ввести неверные данные в поля формы для авторизации. Выясните, как система реагирует на ввод недопустимых данных.
• Каталоги или файлы не должны быть доступны напрямую, если для них не предусмотрена возможность скачивания.
• Проверьте работу капчи для защиты от автоматического входа с помощью программного кода.
• Проверьте, используется ли в целях безопасности SSL. Если да, то должно отображаться сообщение при переходе пользователя с незащищенных HTTP-страниц к защищенным и наоборот.
• Все операции, сообщения об ошибках, нарушения безопасности должны записываться в файл журнала на веб-сервере.

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

• Сетевое сканирование;
• Сканирование уязвимостей;
• Возможность потенциального взлома паролей;
• Обзор журнала;
• Средства для проверки целостности;
• Обнаружение вирусов.

Следует обратить внимание на взаимодействие HTML-страниц, интернет-подключение, брандмауэры, приложения, запускаемые на веб-страницах (апплеты, JavaScript, модульные приложения), а также приложения, работающие на стороне сервера (скрипты CGI, интерфейсы баз данных, генераторы динамических веб-страниц).

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

Дополнительные факторы, которые следует учесть при тестировании сайта:

• Какова ожидаемая нагрузка на сервер (например, количество запросов за единицу времени)?
• Какая производительность требуется при различных видах нагрузки (время ответа веб-сервера, время отклика базы данных на запрос)?
• Какие инструменты потребуются для тестирования производительности?
• Кто является целевой аудиторией? Какие браузеры будут использовать пользователи? Какова скорость подключения? Предназначен ли сайт для использования внутри организации или будет доступен в интернете для широкого круга пользователей?
• Какую производительность ожидает получить клиент (насколько быстро должны загружаться страницы, как должны себя вести анимации, апплеты, нагрузка и запуск)?
• Будут ли разрешены простои сервера и техническое обслуживание, а также обновление контента? Если да, в каком количестве?
• Какие средства безопасности требуются (файерволы, шифрование, пароли и т.д.), и какую работу они будут выполнять? Как их можно проверять?
• Насколько надежным должно быть интернет-соединение? Как оно будет влиять на резервное копирование системы?
• Как будет выполняться управление обновлением контента сайта?
• Требования для технического обслуживания, отслеживания и контроля содержимого веб-страниц, графических элементов, ссылок и т.д.
• Какая спецификация HTML будет соблюдаться? Насколько точно?
• Как будут проверяться и обновляться внутренние и внешние ссылки? Насколько часто?
• Как будет происходить управление и проверка CGI апплетов, сценариев JavaScript, компонентов ActiveX и т.д.?
• Максимальный размер веб-страницы не должен превышать 3-5 экранов, кроме случаев, когда контент сосредоточен на одной теме. Если размер веб-страницы больше, предоставьте внутренние ссылки для навигации по ней.
• Разметка веб-страницы и элементы дизайна должны быть последовательными и логично связанными.
• Отображение веб-страниц должно быть независимо от типа браузера.
• На каждой странице следует указать ссылку для связи.

Данная публикация представляет собой перевод статьи «Web Testing Complete Guide (Web Application Testing Tips and Scenarios)» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

11 бесплатных инструментов тестирования производительности сайта

Тестируем свой сайт на скорость загрузки. Google и Yandex очень внимательно относятся к быстродействию вашего ресурса и занижают в выдаче медленные сайты.

 

 

11 бесплатных инструментов тестирования производительности сайта

 

1. Google Page Speed Insights — тест быстродействие сайта от Google, как для мобильных, так и для настольных устройств.

 

2. Webpagetest — тесты для обнаружения причин медленной загрузки сайта.

 

3. GTMetrix — позволяет проверить быстродействие сайта.

 

4. Pingdom — сервисы мониторинга и бесплатный инструмент тестирования производительности веб-страниц.

 

5. Gomez — тестирование из нескольких местоположений. Доступно больше 100 местоположений на выбор.

 

6. Alertra — тестирование из нескольких местоположений.

 

7. Load Impact — тестирование из нескольких местоположений и  отчёт о производительности. Это один из лучших бесплатных инструментов для тестирования производительности сайтов из нескольких местоположений.

 

8. FeedTheBot — тесты на оптимизацию и производительность сайта.

 

9. Dotcom Monitor — тесты производительности сайта из 20 местоположений всего в один клик.

 

10. RedBot — небольшая утилита для проверки HTTP заголовков.

 

11. Neustar Ultratools — набор утилит для проверки скорости работы хостинга, DNS и прочего.

levashove.ru

стоит ли гнаться за идеальной оценкой производительности

От автора: все популярные инструменты тестирования скорости обычно предоставляют вместе с объективными результатами проверки оценку скорости страницы. У Google PageSpeed Insights есть «Speed Score». У Pingdom «Performance Grade». WebPageTest имеет пять оценок от A до F. Большинство людей используют их неправильно, что может быть опасно для реальной скорости вашего сайта.

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

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

Погоня за 100 баллами от любого инструмента

Подавляющее большинство клиентов, которые обращаются к нам за помощью в оптимизации скорости страницы, начинают с того же вопроса: «Можете ли вы помочь мне получить более высокие оценки PageSpeed Insights?»

Как правило, это неправильный взгляд на проблему. Кто пользователи вашего сайта — Google или реальные клиенты?
Не поймите меня неправильно, мы хотим, чтобы Google благосклонно воспринимал скорость нашего сайта, потому что это основной компонент поисковой оптимизации, но Google учитывает только фактическую скорость сайта. Многие люди предполагают, что Google учитывает их восприятие, но это просто не соответствует действительности. Сейчас вы поймете, почему гоняться за конкретной оценкой опасно.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Ниже приведен пример оценки оптимизации страницы в Pingdom. Вы можете видеть, что владелец этого сайта проделал большую работу по оптимизации своего сайта — сократил размер в два раза, уменьшил количество запросов с 90 до 44 — и в результате их время загрузки уменьшилось с 1,52 до 0,27 секунды! Но их «performance grade» почему-то снизился. Вот почему опасно гоняться за конкретной оценкой. Информация под оценкой говорит нам, что этот сайт теперь загружается быстрее, чем 99% веб-сайтов, но те, кто гонится за неуловимыми 100 баллами, будут разочарованы без причины.

Напрасные усилия

Еще одним следствием «оптимизации для оценки» является серьезная затрата усилий. Возьмите этот пример улучшения оценки скорости страниц с 78 до 99 и его влияния на реальное время загрузки страницы:

Увеличение PSI более чем на 20 пунктов, и что это дало? TTFB, Индекс скорости, Время до первой интерактивности, Время до загрузки документа и Время до полной загрузки страницы остаются неизменными.

Оценка скорости достигает 99 баллов, но с точки зрения пользователей нашего сайта никаких изменений не произойдет.

Реальность достижения максимальной оценки

Еще одна причина, по которой никто не должен стремиться получить 100 баллов, состоит в том, что часто это редко возможно в реальном мире. Если вы используете стороннее аналитическое программное обеспечение, например, Google Analytics, оно скажется на оценке PageSpeed Insights. Да, Google занижает нам оценку за использование их собственных инструментов аналитики.

Если ваш веб-сайт был создан с использованием WordPress или другой CMS — а это 35% всех веб-сайтов в Интернете — это становится еще более очевидным, поскольку каждый сторонний плагин или виджет, который вы используете, может быть помечен красным флагом из-за своих настроек кэширования. Это не то, что вы можете контролировать, и в подавляющем большинстве случаев это не то, что посетители вашего сайта когда-либо заметят. Иногда может быть хорошей идеей отказаться от этих сторонних инструментов, которые имеют низкую производительность, но вы должны сравнить прирост производительности с выгодой, которую они предоставляют.

Кроме того, Google Insights часто снижеат оценку за изображения или Javascript, которые можно оптимизировать только на незначительные 1 или 2%. Это действительно лучшее применение вашего времени и усилий? Возможно, если вы одно из самых известных лиц в Интернете, но, скорее всего, это не так.

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

Оценка PageSpeed меняются со временем

Джон Мюллер из самого Google официально заявил, что оценка PageSpeed может измениться без каких-либо изменений на вашем сайте.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Иногда изменяется алгоритм, но часто просто возникают общие несоответствия в том, как сайт загружается в каждом конкретном случае. Даже если бы вы достигли «идеального» результата, на следующей неделе он вполне может исчезнуть. Это разочаровывающая и ненужная цель.

Так что же PageSpeed вам дает?

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

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

Будучи лицемерами

Что самое смешное, даже мы здесь, в MachMetrics, предоставляем оценку для вашего URL:

Почему мы делаем это, если показатели скорости — это зло? Я не хочу, чтобы вы упускали смысл — они не зло. Они полезны. Погоня за ними и оптимизация только ради них — это зло. Наша оценка скорости все еще полезна, потому что она:

позволяет увидеть изменения с первого взгляда

дает общую информацию, понятную для нетехнических людей

основывается на реальном времени загрузки и объективно рассчитывается на основе процентилей

Как правильно использовать показатели скорости сайта?

Используйте PageSpeed в сочетании с другими инструментами, такими как Pingdom, WebPageTest и MachMetrics, чтобы получить полную картину эффективности вашего сайта.

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

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

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

Что дальше?

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

Я думаю, что большая часть сообщества веб-пользователей согласилась бы с тем, что: Снижение времени загрузки с 2,0 с до 1,5 с это гораздо более впечатляюще, чем увеличение любого показателя с 91 до > 94.

Сделайте свой сайт на самом деле быстрее. Как сказал Джон Мюллер: «Используйте эти инструменты, чтобы найти способы улучшить свой сайт для пользователей, не рассматривайте их как конечную цель».

Источник: https://www.machmetrics.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Инструменты для оптимизации скорости загрузки сайта

Посмотрите видео по инструментам для оптимизации

Смотреть

webformyself.com

Проверка скорости сайта и как добиться быстродействия ресурса

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

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

Почему важно добиваться максимального быстродействия сайта?

Ежедневно в сети появляются новые ресурсы, готовые удовлетворить любые запросы пользователей. Такая конкуренция ведет к тому, что люди становятся более нетерпимыми в вопросе необходимости ожидания загрузки сайта. Если еще несколько лет назад, согласно статистическим данным, пользователи Интернета готовы были смиренно ждать открытия страницы в течение 10 секунд, то сегодня эта цифра снизилась до 2-4 секунд.

Вам кажется, что это глупости? Давайте представим, что перед вами 5 магазинов с одинаковым продуктовым ассортиментом. Вы решили в обеденный перерыв забежать и купить себе перекус. Логично, что вы выбираете ближайший магазин, и вдруг вам говорят, что нужно подождать, так как продавец пудрит носик. Даю гарантию, что вы отправитесь в следующую торговую точку, которая расположена тут же, но, в отличие от первой, готова вас тут же обслужить. Более того, уверен, что в следующий раз вы принципиально не пойдете в первый магазин, где вами пренебрегли.

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

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

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

Следовательно, такой, казалось бы, не  столь важный показатель, как быстродействие сайта, на самом деле оказывает влияние на:

• результаты выдачи поисковиков;
• отношение пользователей к ресурсу;
• нагрузку на сервер;
• производительность сайта и глубину его просмотра.

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

Как проверить параметр быстродействия площадки?

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

Для оценки и анализа данного показателя существует достаточно большое число программ и сервисов. По моему мнению, наиболее простым и удобным является бесплатный инструмент от крупнейшего поисковика Google – PageSpeed Insights. Это онлайн-версия плагина PageSpeed, который можно установить для браузеров Firefox или Google Chrome.

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

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

Кроме того, PageSpeed Insights не только выявит проблемные места, но и даст конкретные и подробные рекомендации по их оптимизации.

Для онлайн-проверки быстродействия ресурса перейдите на страницу сервиса: http://developers.google.com/speed/pagespeed/insights/, введите URL сайта и нажмите кнопку «Анализировать». После этого вы увидите оценку скорости загрузки в баллах отдельно для мобильных гаджетов и ПК. Одновременно дается эскиз того, как ваша страница выглядит на выбранном устройстве.

Максимально возможное число баллов – 100. Добиться этого результата практически невозможно, так как оптимизировать можно только внутренние параметры сайта, а не внешние факторы. Но стремиться к данному значению нужно. Считается, что если быстродействие ресурса оценено в 90 баллов и выше – это достойный результат. Скорость ниже 70 баллов свидетельствует о серьезных проблемах с сайтом, которые необходимо в срочном порядке решать.

Также инструмент выдает список причин, влияющих на медленную загрузку. Они разделены на группы, выделенные разным цветом:

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

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

Как ускорить показатель быстродействия ресурса?

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

1. Ошибки в коде либо применение устаревших html-компонентов. В результате браузер вынужден затрачивать на открытие ресурса дополнительное время. Для поиска подобных ошибок можно использовать Validator.worg, а вот для их исправления, вероятнее всего, потребуется помощь опытного программиста.
2. Медленная связь с сервером. Причина может быть как в самом сервере, так и в тяжелой CMS или самописных плагинах. Для контроля можно протестировать ресурс без включенных плагинов и со стандартным шаблоном. Вообще, старайтесь не использовать большое число плагинов и заменяйте их, где это возможно, прописанным кодом.
3. Неоптимизированные изображения, занимающие много места. Рекомендуется использовать программы сжатия тяжелых картинок, предназначенных для веб-форматов, например, обычный Photoshop. Оптимальный размер изображения – от 600 до 1500 пикселей с расширением jpg или png.
4. Отключенный плагин кеширования. Его активация позволяет браузеру повторно не загружать все файлы CSS и JS при заходе на каждую станицу ресурса, так как они сохраняются в кеше. Также целесообразно объединить файлы CSS и JS в две группы с целью сокращения обращений к серверу.
5. Неотключенная функция автосохранения черновиков. Это ведет к тому, что любое редактирование или написание записи дублируется в черновик, увеличивая размер базы данных и снижая скорость ее работы. Поэтому нужно не только отключить режим автосохранения, но и «почистить» базу от уже имеющихся копий.
6. Перегруженный JavaScript. Подкорректировать его можно даже без обращения к программисту. Для этого следует открыть скрипт в текстовом редакторе и «подчистить»: удалить табуляцию, комментарии и переносы, что позволит «облегчить» его. Также постарайтесь переместить скрипт в конец страницы, чтобы он грузился после главного контента.

Исправление вышеперечисленных недочетов способно существенно ускорить быстродействие веб-ресурса.

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

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

 

investbro.ru

Обзор 11 сервисов проверки скорости загрузки сайта: какой лучший

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

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

Начальный сервис — Яндекс.Метрика

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

• запускается счетчик от Яндекса;
• открывается с левой стороны раздел «Отчеты»;
• с правой стороны окна осуществляется переход в подраздел «Стандартные отчеты»;
• выбирается пункт «Мониторинг»;
• нажимается строчка «Время загрузки страниц».

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

Google Analytics — базовый инструмент

Гугл также предоставил возможность использовать инструмент, позволяющий проверить время загрузки интернет-портала. Чтобы воспользоваться его возможностями, нужно на ресурсе выполнить установку кода слежения. Сам анализ скорости сайта от Google размещен на вкладке, которую можно увидеть после выполнения следующих действий:

• открывается Гугл Аналитикс;
• с левой стороны окна выбирается раздел «Поведение»;
• с правой стороны нажимается «Скорость загрузки сайта»;
• скорость загрузки страниц.

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

Сервисы для качественного анализа

Стоит знать, что инструменты, использующиеся для качественной проверки скорости загрузки интернет-ресурса, не позволяют узнать абсолютное время, в течение которого происходит загрузка. Данные сервисы позволяют пользователю увидеть условную шкалу. Благодаря ей становится возможным понять, насколько процентов соответствует конкретный сайт параметрам быстрой загрузки. Удовлетворительное значение составляют от 70 до 90%. Если же ресурс находится в красной зоне (менее 70%), тогда интернет-портал плохо оптимизирован и требуется увеличить скорость сайта.

Гугл PegeSpeed

Этот инструмент является одним из ведущих сервисов, позволяющим провести качественную проверку скорости, с которой загружается web-ресурс. Мой любимый сервис из сегодняшнего списка. Я добивался от своего блога показателей около 100% и в мобильной версии и в десктопной — что в свое время помогло мне выиграть в конкурсе на лучший блог и получить в приз Imac. Отличительной чертой Google page speed является простая визуализация анализа. Онлайн-сервис также предоставляет советы. Все рекомендации крутятся вокруг 4 основных правил:

• таблицы стилей каскадного вида обязаны быть в теге Head;
• фотографии для веб-ресурса нужно использовать в максимально сжатом состоянии;
• сценарные языки обязаны располагаться исключительно в конце body;
• CSS/HTML обязаны быть по максимуму валидными.

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

Load Impact

Данный сервис по утверждению его разработчиков является лидером в области тестирования времени загрузки разных ресурсов. Его можно использовать без перезагрузки. Он позволяет определить производительность интернет-портала. Результатом служит карта. На ней показано расстояние между двумя серверами, на одном из которых работает тестируемый сайт, а другой – принадлежит создателям инструмента. Помимо этого, пользователю будут представлены многочисленные другие метрики.

Pr-cy.ru

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

Seogadget.ru

Очередной сервис, позволяющий проверить скорость сайта онлайн. Анализ осуществляется относительно центральной страницы, загрузка которой проводится из дата-центра, размещенного в столице РФ. Данный сервис позволяет узнать точные значения главных параметров:

• время в секундах, через которое отвечает сервер;
• размер полученного ответа в кБ;
• скорость отдачи;
• время в секундах, за которое происходит соединение с сервером.

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

Сервисы тонкой оценки

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

Важно! Результаты данных сервисов показывают пользователям абсолютное время, отраженное в секундах. При этом каждый такой сайт теста скорости анализирует работу определенного интернет-ресурса от своих дата-центров. Чаще всего они находятся в европейских странах и Северной Америке.

Ниже представлены списком инструменты, позволяющие мерить скорость сайтов:

3. Pindom.com— сервис на английском языке. Он выполняет проверку от дата-центров, три из которых расположены в США, один — в Стокгольме и еще 1 — в Австралии. Результат показывается с пояснениями для каждого отдельного файла.
4. Webpagetest.org — инструмент, обладающий большим функционалом. Он доступен на английском языке. Итог анализа появляется в виде четырех таблиц. Отличительной чертой этого инструмента являются 50 точек, использующихся для проверки. В их число Россия не входит.
5. Gtmetrix.com — еще один англоязычный онлайн-сервис, использующий для проведения проверки обозреватель Firefox. Онлайн-инструмент оценивает время загрузки интернет-порталов из центров, находящихся на территории Канады.
6. Webo.in — российский онлайн-сервис, который представляет собой приложение для сайта. С его помощью можно определить время загрузки веб-ресурса, чтобы в дальнейшем осуществить оптимизацию за деньги с привлечением облачных сред. Этот сервис проводит проверку времени по основным российским регионам.
7. Webopulsar.ru — онлайн-инструмент, который показывает ответ сервера. Этот параметр имеет разложенный вид. Оценка поступает как из Европы, так и из России (Москва, Петербург).

Важно! Помните, что время загрузки интернет-портала может зависеть от скорости ответа сервера. Для Гугла отличным значением является 200 мс.

Друзья, а вас радует скорость вашего сайта? Всем пока.

copirayter.ru