В статье “Оптимизация клиентской части” был рассмотрен ряд практик по улучшению клиентской производительности Web приложений. На практике весьма сложно контролировать выполнение всех рекомендаций, но этого и не требуется, т.к. существуют специальные инструменты, которые сами проведут нужные тесты, покажут статистику и подберут советы.

Page Speed - инструмент от Google для анализа производительности клиентской части Web приложений. Это бесплатная утилита, которая представляет собой плагин к Firefox/Firebug. Помимо обширной аналитической информации, Google Page Speed предоставляет еще и уместные советы по оптимизации узких мест анализируемых страниц.

Как выглядит и что может дать этот инструмент на практике.

Установка и запуск

Установка выполняется, как обычно для плагинов Firefox, одним кликом по кнопке плагина со страницы загрузки. Учтите, что у Вас должен быть установлен плагин Firebug (у кого нет, ставим отсюда).

После установки в панели Firebug появятся две дополнительные вкладки Page Speed и Page Speed Activity. Page Speed позволяет провести большое количество разнообразных анализов страницы с точки зрения оптимальной ее подстройки для быстрой отдачи.

Проанализируем популярный vkontakte.ru:

После тестов в панели FireBug появится отчет по разделам с пометками о возможных недостатках. Всего Google Page Speed может выдать 4 типа сообщения:

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

Как видим, в нашем примере есть ряд замечаний различного уровня важности:

Кроме просмотра детальных комментариев, можно также увидеть список всех ресурсов страницы с деталями выполения запросов на вкладке “Show Resources”, что полезно для сравнительного анализа компонент системы. Ингода проблемы заключаются в присутствии на странице нескольких очень больших по размеру изображений. Эта вкладка поможет выявить подобные проблемы.

Если сравнивать приложение от Google с его конкурентом Yslow от Yahoo, то можно сказать, что Page Speed проводит более детальный анализ и выдает большее количество практических советов (хотя некоторые немного маразматичны, учитывая тенденции современной разработки).

Динамика загрузки страниц

Page Speed также позволяет отследить все действия браузера по загрузке страницы в прямом эфире. Это очень полезно для отслеживания самых медленных компонент страницы (например, можно выяснить, что медленее всего на странице грузится банер, но задерживает за собой всю страницу). Единственный недостаток - это то, что утилита отслеживает все действия браузера, а не вкладки или окна, поэтому всё остальное придется закрывать на время теста. После проведения тестов получите временную диаграму:

Снизу диаграммы даны цветовые пометки о компонентах, что очень полезно в плане анализа сетевых проблем, эффективности кеширования обьектов, скорости JavaScript и т.п.

Другие возможности

Кроме рассмотреных функциональных особенностей, Page Speed имеет еще ряд полезных вещей:

1. Временной анализ вызовов JavaScript функций, что очень полезно для отладки медленных скриптов
2. Профилирование JavaScipt, как встроенного так и отложенного (запускаемого до и после события onload)
3. Установка различных заголовков User-Agent (расширенное меню)
4. Автозапуск при загрузке страницы

Официальный сайт Google Page Speed

А Вы чем пользуетесь для профилирования и анализа загрузки Web страниц?

Статьи по теме

• Оптимизация клиентской части
• Google analytics - отслеживание скорости загрузки страниц
• Оптимизация баннерной рекламы
• Оптимизация картинок для Web
• Оптимизация постраничного вывода в MySQL