Реактивные веб-сайты

AI‡IEA A‡„OIO‚IO‚, IOIOOIAIUO‚ E OU‡‰EE A‡„?UAIE OU?‡IE??

Firebug (http://getfirebug.com/)

Одним из наиболее популярных среди веб-разработчиков средств

для анализа и разработки веб-страниц является дополнение Firebug для

браузера Firefox.

Панель Net в дополнении Firebug позволяет получить весьма де-

тальную диаграмму загрузки страницы. По диаграмме можно опреде-

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

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

Кроме того, на этой панели можно получить детальную информацию о

размере и заголовках самого документа, а также всех загруженных

внешних объектов.

Рис. 1.2. Внешний вид панели Net дополнения Firebug для Firefox

Firebug также позволяет изменять DOM-дерево и CSS-свойства стра-

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

це, а также предоставляет обширные возможности для отладки и профи-

лирования кода JavaScript. Все эти возможности являются прекрасным

подспорьем во время работ по оптимизации сайта.

Стоит заметить, что аналогичные Firebug инструменты существуют во

всех широко распространенных браузерах. В браузере Safari схожей

———————— Page 16————————

5

Обзор методов клиентской оптимизации 1

Рис. 1.3. Информация о заголовках открытой страницы на панели Net

дополнения Firebug для Firefox

функциональностью обладает надстройка Web Inspector, в Opera —

Dragonfly, в Internet Explorer — Developer Toolbar.

LiveHTTPHeaders (http://livehttpheaders.mozdev.org/)

Дополнение LiveHTTPHeaders для Firefox позволяет в режиме ре-

ального времени получать исчерпывающую информацию о пересылае-

Рис. 1.4. Режим ручной отправки запроса в дополнении LiveHTTPHeaders

———————— Page 17————————

16 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

мых между браузером и сервером заголовках. Кроме того, в этом допол-

нении существует режим Replay, позволяющий отправлять на сервер

произвольные запросы GET или POST, что часто бывает удобно при раз-

работке.

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 можно использовать

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

бором возможностей.

———————— Page 18————————

7

Обзор методов клиентской оптимизации 1

Рис. 1.6. Внешний вид дополнения HTTPWatch для Firefox

Hammerhead (http://stevesouders.com/hammerhead/)

Небольшое дополнение к браузеру Firefox под названием HammerHead

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

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

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

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

после каждой загрузки для имитации обоих случаев: когда пользователь за-

гружает страницу впервые или загружает ее повторно.

1.2.3. aOIOIAIOI?E ‡I‡IEA IIEAIUOIOE O?OEA‚O‰EUAI?IOOUE ‚A·-OU?‡IE?

YSlow, PageSpeed (http://developer.yahoo.com/yslow/,

http://code.google.com/speed/page-speed)

Дополнения YSlow и PageSpeed для Firefox позволяют получить инте-

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

браузером страницы, а также дают некоторые советы, следуя которым,

можно улучшить производительность.

Разумеется, приведенные советы не могут покрыть всех возможных си-

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

на какой-либо из других параметров быстродействия вашего сайта.