Анализ веб-страниц. Анализ заголовков, компонентов и стадий загрузки страницы. Обзор методов клиентской оптимизации
Анализ заголовков, компонентов и стадий загрузки страницы
Комплексный анализ клиентской производительности веб-страниц
Анализ характеристик браузеров
Firebug (http://getfirebug.com/ )
Одним из наиболее популярных среди веб-разработчиков средств для анализа и разработки веб-страниц является дополнение Firebug для браузера Firefox. Панель Net в дополнении Firebug позволяет получить весьма детальную диаграмму загрузки страницы. По диаграмме можно определить стадии загрузки страницы, понять порядок загрузки объектов и выяснить, какие объекты блокируют, замедляют загрузку страницы. Кроме того, на этой панели можно получить детальную информацию о размере и заголовках самого документа, а также всех загруженных внешних объектов.
Рисунок 1.2. Внешний вид панели Net дополнения Firebug для Firefox
Рисунок 1.3. Информация о заголовках открытой страницы на панели Net дополнения
Firebug для Firefox Firebug также позволяет изменять DOM-дерево и CSS-свойства страницы без ее перезагрузки, сразу отражая результат изменений на странице, а также предоставляет обширные возможности для отладки и профилирования кода JavaScript. Все эти возможности являются прекрасным подспорьем во время работ по оптимизации сайта. Стоить заметить, что аналогичные Firebug инструменты существуют во всех широко распространенных браузерах. В браузере Safari схожей функциональностью обладает надстройка Web Inspector, в Opera ? Dragonfly, в Internet Explorer ? Developer Toolbar.
LiveHTTPHeaders (http://livehttpheaders.mozdev.org/ )
Дополнение LiveHTTPHeaders для Firefox позволяет в режиме реального времени получать исчерпывающую информацию о пересылаемых между браузером и сервером заголовках. Кроме того в этом дополнении существует режим Replay, позволяющий отправлять на сервер произвольные запросы GET или POST, что часто бывает удобно при разработке.
Рисунок 1.4. Режим ручной отправки запроса в дополнении LiveHTTPHeaders
YSlow (http://developer.yahoo.com/yslow/ )
Дополнение YSlow для Firefox позволяет легко определить общее количество объектов, из которых состоит веб-страница, а также понять соотношения между объектами различного типа. В списке, содержащем перечень всех загруженных на странице объектов, предоставляется детальная информация по каждому такому объекту: размер, наличие сжатия, размер cookie, заголовки, время отклика и др.
Рисунок 1.5. Панель статистической информации о странице дополнения YSlow для Firefox
HTTPWatch (http://www.httpwatch.com/ )
Другим, более мощным средством для получения информации о составе и ходе загрузки веб-страниц является приложение HTTPWatch. Это приложение устанавливается в виде дополнений к браузерам Firefox и Internet Explorer и предоставляет более полную и более точную информацию, чем Firebug. В HTTPWatch поддерживаются любые виды сжатия, поддерживается протокол HTTPS, учитываются редиректы, есть возможность составления отчетов, фильтрации данных, просмотра любых заголовков, cookie, данных POST запросов и многое другое. HTTPWatch можно использовать бесплатно, но только в базовой редакции, с достаточно ограниченным набором возможностей. 
Рисунок 1.6. Внешний вид дополнения HTTPWatch для Firefox
Hammerhead (http://stevesouders.com/hammerhead/ )
Небольшое дополнение к браузеру Firefox под названием HammerHead позволяет имитировать многократную последовательную загрузку набора заданных страниц. Число попыток может быть установлено пользователем. Как результат работы дополнение отображает среднее время полной загрузки каждой испытуемой страницы. Дополнение позволяет очищать кэш после каждой загрузки для имитации обоих случаев: когда пользователь загружает страницу впервые или загружает ее повторно.