Обзор аналитических инструментов 2

Web Inspector для Safari

Аналогично уже рассмотренной Firebug Net Panel, Web Inspector представляет диаграмму загрузки, основываясь на фактических данных. Однако есть и ряд недостатков: в частности, время отображения (выполнения) элемента не отделено от времени его загрузки, что хорошо видно для встроенных изображений.

Рис. 42. Результаты анализа загрузки сайта в Web Inspector

HttpWatch

HttpWatch ( http://www.httpwatch.com/ ) может быть установлен как для IE, так и для Firefox. На данный момент кроме самих HTTP-заголовков он предоставляет достаточно подробную диаграмму загрузки сайта, что является хорошим подспорьем при анализе производительности.

Рис. 43. Результаты анализа загрузки сайта в Http Watch

Полная версия продукта является платной.

Fiddler

Fiddler ( http://www.fiddlertool.com/fiddler/ ) устанавливается как дополнение к IE и позволяет анализировать все загружаемые файлы (заголовки, размер, время загрузки из разных точек земного шара).

Рис. 44. Результаты анализа загрузки сайта в Fiddler

Live HTTP Headers

Live HTTP Headers ( http://livehttpheaders.mozdev.org/ ) позволяет просматривать HTTP-заголовки для Firefox в режиме реального времени. Может выступать достаточно удобным дополнением в Firefox, если нужно отладить общение браузера с сервером в плане кэширования или сжатия (проверить соответствующие заголовки на «живом» соединении).

Рис. 45. Заголовки запроса и ответа в Live HTTP Headers для webo.in

Прокси-эмулятор каналов Sloppy

После рассмотрения всех методов ускорения загрузки стоит заметить, что та или иная техника оптимизации направлена, в первую очередь, на пользователей с медленным каналом: именно они в наибольшей мере почувствуют выигрыш от наших кропотливых манипуляций с проектом. Но как же проверить это еще на этапе разработки - ведь в большинстве случаев тестовый сервер располагается на рабочем компьютере, да и интернет-канал у профессиональных веб-разработчиков тоже не самый плохой. Выход есть: эмулировать такие соединения, подключаясь через специальную программу, которая нарочно «затормозит» (но не интернет, а только доступ к тестовому сайту) соединение, имитируя подключение пользователя, скажем, с ADSL-128 Kbps.

Для этого нам подойдет небольшая и очень простая программа Sloppy - прокси-сервер. Он эмулирует доступ к указанному сайту через канал с задаваемой полосой пропускания: от модемного 9,6 Кб/с до выделенного в 512 Кб/с. В том случае, если скорость подключения к интернету 1 Мб или больше, любой проект будет загружаться достаточно быстро, поэтому тестировать его специально не имеет смысла (только в общем порядке). А влияние издержек на установление множества дополнительных соединений можно установить при тестировании на менее мощных каналах.

Из доступных настроек у нас есть: адрес сайта, который будем тестировать, выбор скорости (из набора 9,6, 14.4, 28.8, 56, 128, 256 и 512 Кб), а также порт, по которому мы будем получать страницу. Благодаря «прокси-природе», его можно использовать для тестирования как локального проекта, так и любого внешнего проекта в сети. Конечно, в этом случае нужен доступ в интернет, тогда как просто для теста локального сервера этого совсем не требуется (после загрузки самого приложения).

Sloppy интересен еще и тем, что распространяется как JNLP-файл, то есть использует Java Web Start для запуска; при этом сам код загружается с сайта проекта, впрочем, можно загрузить исходный код отдельно.

Analyze.WebSiteOptimization.com

Пожалуй, самый старый и наиболее известный онлайн-сервис для проверки клиентской оптимизации выбранного сайта. Выдает набор советов (аналогичных рекомендациям Yahoo). Поскольку анализ основан на собственном алгоритме, то не распознает data:URI и mhtml-изображения. Также не всегда верно трактует скрипты внутри страницы.

Рис. 47. Результаты анализа загрузки сайта в analyze.websiteoptimization.com

Octagate.com/service/SiteTimer/

С помощью данного инструмента можно построить диаграмму загрузки сайта. К плюсам можно отнести то, что дополнительно показан RSS-поток (при соответствующем объявлении). К несчастью, сервис не распознает data:URI и mhtml-изображения; также построение самой диаграммы загрузки оставляет желать лучшего.

Рис. 48. Результаты анализа загрузки сайта в octagate.com/service/sitetimer/

Tools.Pingdom.com

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

Рис. 49. Результаты анализа загрузки сайта в tools.pingdom.com

AlertSite.com

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

Рис. 50. Результаты анализа загрузки сайта в www.alertsite.com/cgi-bin/tsite3.pl

Site-Perf.com

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

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

Рис. 51. Результаты анализа загрузки сайта в site-perf.com

GetRPO.com

На данный момент разрабатываются уже и автоматизированные решения для уменьшения времени загрузки страницы. Одним из таких сервисов является Runtime Page Optimizator, который позволяет (в автоматическом режиме для IIS) уменьшить время загрузки страницы. Также есть возможность запросить проверку требуемого сайта и получить вполне детальный анализ, что и как можно сделать для ускорения его загрузки. Поскольку для анализа используется встроенный браузер (MSIE), то результаты проверки наиболее достоверны:

Рис. 52. Результаты анализа загрузки сайта в get-rpo.com

Webo.in

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

Рис. 53. Результаты анализа загрузки сайта в webo.in

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

Рис. 54. Результаты анализа загрузки сайта в webo.in (диаграмма загрузки)

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

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

К недостаткам Web Optimizator стоит отнести отсутствие распознавания динамической загрузки ресурсных файлов (например, через DOM-методы).

Профилирование JavaScript

JSLint ( http://www.jslint.com/ ) позволяет проанализировать код и убедиться в том, что он корректно отформатирован. Очень часто структурные ошибки или неверное форматирование кода пагубно сказываются на дальнейшем его уменьшении, ибо все минимизаторы обладают собственным синтаксическим аппаратом, они не используют браузеры для проверки корректности JavaScript. Поэтому, не проверив код на соответствие стандартам, есть все шансы получить его после уменьшение или обфускации неработающим.

JsUnit ( http://www.jsunit.net/ ) предоставляет мощный фреймворк для тестирования и отладки ваших JavaScript-приложений. С помощью AjaxView ( http://research.microsoft.com/projects/ajaxview/ ) можно проксировать и анализировать AJAX-запросы. Для профессионального профилирования веб-приложений стоит воспользоваться JsLex ( http://rockstarapps.com/pmwiki/pmwiki.php?n=JsLex.JsLex ), а время выполнения различных операций на странице можно замерить с помощью YUI Profiler ( http://developer.yahoo.com/yui/profiler/ ). Но не стоит забывать, что лучшей проверкой веб-приложений на прочность всегда был и остается пользователь.