Как вы измеряете скорость загрузки страницы?

Я пытаюсь количественно оценить «медленность сайта». Раньше вы просто следили за тем, чтобы ваш HTML был легковесным, изображения были оптимизированы, а серверы не были перегружены. На высококлассных сайтах, построенных на основе современных систем управления контентом, есть гораздо больше переменных: сторонняя реклама, трекеры и различные другие выноски, производительность CDN (что интересно, иногда сети доставки контента ухудшают ситуацию), выполнение javascript, перегрузка css. , а также всевозможные проблемы на стороне сервера, такие как длинные запросы.

Очевидный ответ для каждого разработчика — очистить кеш и постоянно просматривать раздел «net» плагина Firebug. Какие еще способы измерения «утягивающей задницы сайта» вы использовали?


performance measurement
person deadprogrammer    schedule 27.10.2008    source источник
comment
этот инструмент может быть полезен: 365andup.com   -  person sudeep cv    schedule 23.10.2017

Ответы (14)


arrow_upward
29
arrow_downward

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

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

person johnstok    schedule 27.10.2008
comment
@kohlerm С момента вашего комментария прошло много времени. Теперь Yslow поддерживается не только Firefox: например, я использую его в Chrome! - person JeanValjean; 10.02.2013

arrow_upward
11
arrow_downward

Firebug, обязательное для веб-разработчиков расширение Firefox, может измерять загрузку время различных элементов на вашей веб-странице. По крайней мере, вы можете исключить CSS, JavaScript и другие элементы, которые загружаются слишком долго.

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

Если вы используете PNG, я недавно наткнулся на оптимизатор PNG, который может уменьшать размеры PNG, который называется OptiPNG.

person Ido Schacham    schedule 28.10.2008
comment
Панель «Сеть» в Firebug отлично подходит для этого. - person Liam; 28.10.2008

arrow_upward
8
arrow_downward

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

Таким образом, вы можете реально измерить истинное время загрузки страницы только с помощью интересующего вас браузера. Конец загрузки страницы также может быть трудно определить, потому что может быть запрос Ajax после того, как все будет видно на странице. Это учитывает загрузку страницы или нет?

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

Маркус

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

Используйте AOL Pagetest для IE и YSlow для Firefox (см. ссылку выше), чтобы почувствовать себя время загрузки.

person kohlerm    schedule 27.10.2008

arrow_upward
5
arrow_downward

Установите правильный прокси-сервер для отладки (я настоятельно рекомендую Charles)

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

(Редактировать: поддержка Charles для отладки SOAP-запросов стоит мизерной платы за условно-бесплатное ПО — только на этой неделе она спасла меня от выпадения волос на полдня!)

person Ian    schedule 27.10.2008

arrow_upward
5
arrow_downward

Я обычно использую webpagetest.org, который вы можете использовать для выполнения тестов производительности из разных мест, в разных браузерах (хотя только msie 7 -9) с различными настройками (количество итераций, скорость соединения, первый запуск и второй визит, исключая определенные запросы, если хотите, учетные данные, если необходимо, ...).

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

это действительно отличный (бесплатный) инструмент!

person futtta    schedule 12.01.2011
comment
ой, это был старый вопрос! странно (неудобно), что rss-каналы SO включают старые вопросы всякий раз, когда кто-то публикует ответ ... - person futtta; 12.01.2011

arrow_upward
4
arrow_downward

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

  • Мы использовали Yslow для анализа отдельных факторов, влияющих на загрузку страницы: https://addons.mozilla.org/en-US/firefox/addon/5369
  • мониторинг производительности с помощью внешнего коммерческого инструмента под названием Gomez — http://www.gomez.com/instant-test-pro/
  • Мы провели стресс-тестирование с использованием сборки с непрерывной интеграцией с использованием Apache JMeter. http://jmeter.apache.org/

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

person Dafydd Rees    schedule 12.11.2009

arrow_upward
3
arrow_downward

Ну, назовите меня старомодным, но...

время curl -L http://www.example.com/path

в Linux :) Кроме того, я большой поклонник YSlow, как упоминалось ранее.

person f4nt    schedule 27.10.2008
comment
Это добавляет время поиска DNS к вашему измерению. - person Hugo; 27.10.2008
comment
но не учитывает время рендеринга и не имитирует параллельные запросы - person kohlerm; 27.10.2008

arrow_upward
3
arrow_downward

PageSpeed – это очень точный и надежный инструмент онлайн-проверки от Google:

https://developers.google.com/pagespeed/

person Simon Steinberger    schedule 11.01.2012
comment
Это возвращает 404 сейчас. - person Con Antonakos; 21.08.2020

arrow_upward
1
arrow_downward

Если это asp.net, вы можете использовать Trace.axd.

Yahoo предоставляет yslow, который отлично подходит для проверки javascript.

person dove    schedule 27.10.2008

arrow_upward
1
arrow_downward

YSlow, как упоминалось выше.

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

person James Gardner    schedule 30.10.2008

arrow_upward
0
arrow_downward

Эталонный анализ Apache. Использовать

ab -c <number of CPUs on server> -n 1000 url

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

person bh213    schedule 27.10.2008
comment
Это не имеет ничего общего с тем, что хотел ОП! - person Miguel Ping; 12.03.2012

arrow_upward
0
arrow_downward

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

person TimB    schedule 27.10.2008

arrow_upward
0
arrow_downward

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

person Jilles    schedule 31.10.2008

arrow_upward
0
arrow_downward

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

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

Что-то вроде этого 1. A = общее время отклика, измеренное автоматизированным инструментом (в нашем случае мы используем QTPro) 2. B = время до последнего байта (серверное + сетевое время, из трассировки скрипача) 3. C = AB ( приблизительное время рендеринга ИЛИ время, проведенное в браузере)

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

person Mouli    schedule 12.01.2011