Posted by Pavel Podlipensky on August 06 10:03 PM
<p> Время отклика страницы, доступность и стабильность приложения – очень важные показатели любого веб-приложения. Если вы (или ваш заказчик) обеспокоен временем загрузки страниц, предоставляю вашему внимания несколько <strong>полезных и бесплатных</strong> утилит для создания быстрых веб-приложений. </p> <p> Я постарался подобрать утилиты независимые от платформы и технологий разработки веб-приложений. Поэтому, даже если вы пишете на PHP не спешите закрывать эту страницу ;) </p> <p> <a href="http://www.getfirebug.com/" target="_blank" title="Firebug">FireBug</a> удобен не только для отладки, тестирования страниц и анализа страниц, но и для выявления времени загрузки различных составляющих страницы: графики, JavaScript, CSS и XHR файлов. Большинство из вышеупомянутых фич находится в закладке Net (“network”). </p> <div style="text-align: center"> <img src="/image.axd?picture=12-02_firebug.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://developer.yahoo.com/yslow/" target="_blank" title="YSlow для FireBug">YSlow для FireBug</a><strong> </strong>измеряет скорость загрузки страниц, используя <a href="http://developer.yahoo.com/performance/rules.html" target="_blank">лучшие практики для высокопроизводительных сайтов</a> от Yahoo! Developer Network. Позволяет выявлять причины задержки времени выполнения запроса: большой размер файла, время выполнения JavaScript, и т.д. С ее помощью очень удобно сжимать внешние JavaScript’ы и CSS файлы. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-01_yslow.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://www.fiddler2.com/fiddler2/" target="_blank" title="Fiddler 2">Fiddler 2</a> – прокси, который работает с трафиком между Вашим компьютером и удаленным сервером, и позволяет инспектировать и менять его. Fiddler можно расширять с помощью скриптов на языке JScript.NET (писать их очень просто), кустомизировать меню программы, и вообще - замечательный инструмент. Использовать его можно с любым браузером. На MSDN была замечательная <a href="http://msdn.microsoft.com/en-us/library/bb250442%28VS.85%29.aspx" target="_blank" title="Fiddler статья">статья</a> по этому поводу, где помимо всех интересных вариантов использования этого инструмента рассматривись: способ уменьшения первого времени загрузки страницы (unprimed cache), анализ HTTP заголовка в ответах с сервера, создание специальных флагов для отслеживания потенциально опасных участков (в отношении производительности). </p> <div style="text-align: center"> <img src="/image.axd?picture=12-03_fiddler.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://mon.itor.us/" target="_blank" title="mon.itor.us">mon.itor.us</a> – бесплатное веб-приложение предоставляющее набор инструментов для мониторинга производительности, доступности страницы, а также показывает статистику по трафику. Вы даже можете установить время отклика вашего сайта, и, в случае “падения” вашего сайта, вам будет выслано соответствующее письмо об этом. Другим полезным функционалом (которым я и сам частенько пользуюсь) является возможность сравнивать время загрузки страниц в различные периоды времени. Это удобно, когда страница меняется довольно часто, и необходимо сравнить производительность различных решений. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-05_monitorus.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://stevesouders.com/cuzillion/" target="_blank" title="Cuzillion">Cuzillion</a> поможет вам увидеть, как различные компоненты страницы взаимодействуют друг с другом. Использование этой утилиты полезно во время работы над структурой страницы. Cuzillion был создан <a href="http://stevesouders.com/bio.php" target="_blank" title="Стивом Сандресом">Стивом Сандресом</a>, “директором по производительности” в Yahoo! (автором <a href="http://developer.yahoo.com/performance/rules.html" target="_blank" title="Yahoo’s perfomance best practisies">Yahoo’s perfomance best practisies</a> и YSlow). </p> <div style="text-align: center"> <img src="/image.axd?picture=12-04_cuzillion.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://www.alphaworks.ibm.com/tech/pagedetailer" target="_blank" title="IBM Page Dialer">IBM Page Dialer</a> визуально отображает время и порядок загрузки компонентов страницы. Эта утилита встраивается в <strike>клиентский Windows Socket Stack</strike> Internet Explorer для перехвата времени загрузки, размера и других данных о компонентов страницы. Поэтому достаточно просто нажать на один из элементов на странице, чтобы появилось всплывающее окно с подробной информацией об этой части страницы. В случае возникновения каких-либо событий на странице (скажем выполнение JavaScript функции) этот компонент покажет вам всю информацию о задействованных процессах. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-06_ibm_page_detailer.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://www.hpl.hp.com/research/linux/httperf/" target="_blank" title="Httpref">Httpref</a> – open-source тулзовина для измерения производительности HTTP сервера, использующего Linux платформу. Честно говоря об этой утилите я знаю лишь по-наслышке от одного PHP-разработчика. С его слов, это очень удобный инструмент для проведения нагрузочного тестирования вашего веб-приложения. </p> <p> <a href="http://www.pylot.org/" target="_blank">Pylot</a> – также open-source утилита для проведения нагрузочного тестирования. Небольшим неудобством является то, что на вашем компьютере должен быть установлен Python, но для написания самих тестов вам не нужно знать сам язык – тесты создаются в XML-формате. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-08_pylot.png" alt="" width="550" height="200" /> </div> <br /> <p> Следующая тулзовина под названием <a href="http://www.pushtotest.com/Docs/downloads/features.html" target="_blank">PushToTest TestMaker</a> бесплатна и с открытым кодом. Предназначена для тестирования масштабируемости приложения. С ее помощью можно проводить и нагрузочное тестирование. Из множества других подобных утилит ее выделяет интуитивный интерфейс с хорошими визуальными отчетами и аналитическими инструментами. Resource Monitor один из них и помогает отслеживать нагрузку CPU, расход памяти, нагрузку сети и многое другое.  </p> <div style="text-align: center"> <img src="/image.axd?picture=12-09_pushtotest.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://hping.org/wbox/" target="_blank">Wbox HTTP</a> работает под Linux, Windows, и MacOS X. Посылая последовательно запросы к серверу в короткие промежутки времени, этот инструмент позволяет проводить стресс-тестирование вашего веб-приложения. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-11_wbox.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://www.webload.org/" target="_blank">WebLOAD</a> опять-таки инструмент с открытым кодом для профессионального нагрузочного и стресс-тестирования ваших веб-приложений. Скрипты для нагрузочного тестирования можно писать на JavaScript. Возможности этого инструмента не ограничиваются тестированием, в нем также можно разрабатывать и дебажить javascript код.  </p> <div style="text-align: center"> <img src="/image.axd?picture=12-12_webload.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://dbmonster.kernelpanic.pl/manual/index.html" target="_blank">DBMonster</a> позволяет оптимизировать структуру и индексы базы данных, ровно как и проводить нагрузочное тестирование вашей базы данных. С помощью генератора тестовых данных вы сможете оценить масштабируемость вашей базы данных. Поддерживает он большинство баз данных: MySQL, PostgreSQL, Oracle, MSSQL и видимо все базы данных, которые могут работать с JDBC драйвером. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-13_dbmonster.png" alt="" width="550" height="200" /> </div> <br /> <p> <a href="http://www.octagate.com/service/SiteTimer/" target="_blank">OctaGate SiteTimer</a> простая утилита для анализа процесса загрузки чего-либо на вашу страницу. Она предоставляет визуальную картину следующих событий: начальный запрос, соединение, начало загрузки, окончание загрузки. </p> <div style="text-align: center"> <img src="/image.axd?picture=12-10_octagate_sitetimer.png" alt="" width="550" height="200" /> </div> <br /> <p> <strong>Ссылки по теме</strong> </p> <p> <a href="http://www.ibm.com/developerworks/web/library/wa-aj-perform/" title="Ajax performance analysis">Ajax performance analysis</a> – советы по оптимизации страниц от разработчиков IBM </p> <p> <a href="http://msdn.microsoft.com/en-us/library/bb250442%28VS.85%29.aspx" title="Fiddler PowerToy - Part 2: HTTP Performance">Fiddler PowerToy - Part 2: HTTP Performance</a> </p> <p> <a href="http://www.websiteoptimization.com/services/analyze/" target="_blank">Web Page Analyzer</a> </p> <p> <a href="http://site-perf.com/" target="_blank">Site-Perf.com</a> – веб-утилита для мониторинга нагрузки сайта. </p> <p> <a href="http://jakarta.apache.org/jmeter/" target="_blank">Apache JMeter</a> – Java-инструмент для проведения нагрузочного тестирования Apache серверов </p> <p> <a href="http://grinder.sourceforge.net/index.html" title="The Grinder">The Grinder</a> – фреймоврк с открытым кодом для автоматизированного тестирования </p> <p> <a href="http://webo.in/articles/habrahabr/15-yahoo-best-practices/">Способы ускорения загрузки вашего сайта</a> </p> <p> <a href="http://webo.in/articles/habrahabr/27-yahoo-best-practices-2-presentation/">Yahoo: высокопроизводительные Веб-страницы. Часть 2</a> </p> <p> <a href="http://webo.in/articles/habrahabr/16-optimization-page-load-time/">Анализируем загрузку веб-страницы</a> </p> <p> <a href="http://webo.in/articles/habrahabr/03-presentation-layer-performance-tuning/">Оптимизируем загрузку веб-страницы</a> </p> <p> <a href="http://webo.in/articles/habrahabr/04-speed-up-events-handlers/">Практический JS: ускоряем обработку событий</a>  </p> <p> <a href="http://webo.in/articles/habrahabr/05-delayed-loading/">Практический JS: «отложенная» загрузка</a>  </p> <p> <a href="http://webo.in/articles/habrahabr/21-high-performance-html-pages/">Создаем высокопроизводительные HTML-страницы для IE</a>   </p>

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

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

FireBug удобен не только для отладки, тестирования страниц и анализа страниц, но и для выявления времени загрузки различных составляющих страницы: графики, JavaScript, CSS и XHR файлов. Большинство из вышеупомянутых фич находится в закладке Net (“network”).


YSlow для FireBug измеряет скорость загрузки страниц, используя лучшие практики для высокопроизводительных сайтов от Yahoo! Developer Network. Позволяет выявлять причины задержки времени выполнения запроса: большой размер файла, время выполнения JavaScript, и т.д. С ее помощью очень удобно сжимать внешние JavaScript’ы и CSS файлы.


Fiddler 2 – прокси, который работает с трафиком между Вашим компьютером и удаленным сервером, и позволяет инспектировать и менять его. Fiddler можно расширять с помощью скриптов на языке JScript.NET (писать их очень просто), кустомизировать меню программы, и вообще - замечательный инструмент. Использовать его можно с любым браузером. На MSDN была замечательная статья по этому поводу, где помимо всех интересных вариантов использования этого инструмента рассматривись: способ уменьшения первого времени загрузки страницы (unprimed cache), анализ HTTP заголовка в ответах с сервера, создание специальных флагов для отслеживания потенциально опасных участков (в отношении производительности).


mon.itor.us – бесплатное веб-приложение предоставляющее набор инструментов для мониторинга производительности, доступности страницы, а также показывает статистику по трафику. Вы даже можете установить время отклика вашего сайта, и, в случае “падения” вашего сайта, вам будет выслано соответствующее письмо об этом. Другим полезным функционалом (которым я и сам частенько пользуюсь) является возможность сравнивать время загрузки страниц в различные периоды времени. Это удобно, когда страница меняется довольно часто, и необходимо сравнить производительность различных решений.


Cuzillion поможет вам увидеть, как различные компоненты страницы взаимодействуют друг с другом. Использование этой утилиты полезно во время работы над структурой страницы. Cuzillion был создан Стивом Сандресом, “директором по производительности” в Yahoo! (автором Yahoo’s perfomance best practisies и YSlow).


IBM Page Dialer визуально отображает время и порядок загрузки компонентов страницы. Эта утилита встраивается в клиентский Windows Socket Stack Internet Explorer для перехвата времени загрузки, размера и других данных о компонентов страницы. Поэтому достаточно просто нажать на один из элементов на странице, чтобы появилось всплывающее окно с подробной информацией об этой части страницы. В случае возникновения каких-либо событий на странице (скажем выполнение JavaScript функции) этот компонент покажет вам всю информацию о задействованных процессах.


Httpref – open-source тулзовина для измерения производительности HTTP сервера, использующего Linux платформу. Честно говоря об этой утилите я знаю лишь по-наслышке от одного PHP-разработчика. С его слов, это очень удобный инструмент для проведения нагрузочного тестирования вашего веб-приложения.

Pylot – также open-source утилита для проведения нагрузочного тестирования. Небольшим неудобством является то, что на вашем компьютере должен быть установлен Python, но для написания самих тестов вам не нужно знать сам язык – тесты создаются в XML-формате.


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


Wbox HTTP работает под Linux, Windows, и MacOS X. Посылая последовательно запросы к серверу в короткие промежутки времени, этот инструмент позволяет проводить стресс-тестирование вашего веб-приложения.


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


DBMonster позволяет оптимизировать структуру и индексы базы данных, ровно как и проводить нагрузочное тестирование вашей базы данных. С помощью генератора тестовых данных вы сможете оценить масштабируемость вашей базы данных. Поддерживает он большинство баз данных: MySQL, PostgreSQL, Oracle, MSSQL и видимо все базы данных, которые могут работать с JDBC драйвером.


OctaGate SiteTimer простая утилита для анализа процесса загрузки чего-либо на вашу страницу. Она предоставляет визуальную картину следующих событий: начальный запрос, соединение, начало загрузки, окончание загрузки.


Ссылки по теме

Ajax performance analysis – советы по оптимизации страниц от разработчиков IBM

Fiddler PowerToy - Part 2: HTTP Performance

Web Page Analyzer

Site-Perf.com – веб-утилита для мониторинга нагрузки сайта.

Apache JMeter – Java-инструмент для проведения нагрузочного тестирования Apache серверов

The Grinder – фреймоврк с открытым кодом для автоматизированного тестирования

Способы ускорения загрузки вашего сайта

Yahoo: высокопроизводительные Веб-страницы. Часть 2

Анализируем загрузку веб-страницы

Оптимизируем загрузку веб-страницы

Практический JS: ускоряем обработку событий 

Практический JS: «отложенная» загрузка 

Создаем высокопроизводительные HTML-страницы для IE  

blog comments powered by Disqus