Tools view

Google Page Speed
1. Можно установить с
http://code.google.com/intl/ru-RU/speed/page-speed/download.html
Для этого нужно зайти на этот сайт с помощью Firefox и нажать на кнопку
установки.
Работает под следующими ОС:
Mac OS X (x86 and PPC), Linux (32-bit and 64-bit), Windows (XP and up).
Чтобы ей пользоваться, нужно иметь:
Mozilla Firefox 3.5 и выше: download from Mozilla
Firebug Firefox Add-on 1.4.2 и выше: download from Mozilla
2. Все признаки, по которым идёт анализ распадаются на 5 групп:
1)Оптимизация кэша - не даёт данным и логике страницы обращаться к
сети
2)Минимизация времени на вопрос-ответ сети.
3)Минимизация загружаемых данных
4)Минимизация размера запросов
5)Оптимизация вывода страницы на экран
Кратенько по всем пунктам (правила работы программы, рекомендации,
по улучшению работы сайта):
1) Оптимизация кэша.
Кэш нужно использовать с редко меняющимися ресурсами, такими как CSS,
JS, рисунки, прочие файлы (но не HTTP).
Показывает вещи, для которых лучше не использовать прокси-кэширование.
Показывает места, в которых не указано, что ресурсы кэшируются, но
должны бы.
Показывает файлы, у которых маленький промежуток обновления, советует
ставить промежуток побольше.
2) Минимизация обращений.
Чем меньше количество уникальных хостов, тем меньше количество DNS
запросов. Если таковых слишком много, то он говорит, что по возможности
их нужно сократить. Речь идёт не о сокращении DNS запросов, а о различных
DNS запросах.
Для внешних JS предлагает по возможности группировать их между собой.
Ещё JS, стоящие в head должны загружаться с того же хоста(потому что
загрузка стоит, пока они загружаются).
То же для CSS.
Использовать домен, который не использует cookie для статических данных.
Показывает, для
Минимизация переадресаций. Показывает, где если возможно, её нужно
убрать.
Правильное определение порядка стилей и скриптов – если определено
нормально, то есть некий параллелизм в загрузке. Рекомендации: ставить
внешние JS после внешних CSS.
Ставить скрипты так далеко, как возможно.
Распределять загрузку между несколькими(4-5) хостами. Способствует
параллельной загрузке.
3) Минимизация размера запросов
Минимизация Куки. Предлагает удалять неиспользуемые или
продублированные поля в Куки.
Делать запросы статических данных к домену без Куки.
4) Минимизация размера
Нужно убирать неиспользуемые вещи, такие как CSS – показывает, что
можно убрать и предлагает исправленный вариант.
Также можно минимизировать JS и CSS – также предлагает исправленный
вариант.
Поддерживается ли сжатие.
Откладывать загрузку JS.
Оптимизация картинок. Формат, размер, убрать ненужные цвета и
комментарии.
5) Оптимизация вывода на экран.
CSS – в начало, JS – в конец.
Указывать размеры рисунков. Показывает, рисунки, в которых это
пропущено.
По всем пунктам есть оценка в процентах, на сколько страничка
удовлетворяет этим правилам. Также программа показывает все элементы
странички. Пишет, какие из них кэшированы. Их тип, размер, домен. Также
есть возможность посмотреть активность компонент страницы.
Подробней с правилами программы можно ознакомится здесь:
http://code.google.com/intl/ru-RU/speed/page-speed/docs/rules_intro.html
YSlow
1) Можно установить с
http://developer.yahoo.com/yslow/
Для начала работы необходимо иметь:
Mozilla Firefox 3.5 и выше: download from Mozilla
Firebug Firefox Add-on 1.4.2 и выше: download from Mozilla
2) У YSlow есть список, состоящий из 10 правил, которых он советует
придерживаться(подробней можно ознакомится на
http://javascript.ru/optimize/performance-rules):
1. Уменьшайте число HTTP-запросов
Можно этого добиться за счёт того, что страница будет иметь простой
дизайн.
Советует группировать картинки в одну. Советует собрать все
картинки в 1 внешний файл и использовать CSS спрайты.
Также предлагает объединить все скрипты и CSS таблицы между
собой.
Предлагает использовать сети доставки CDN для статических
компонент.
Предлагает добавление заголовка с информацией об истечении
срока действия (Expires Header) для кэширования некоторых
объектов.
Использование сжатия gzip.
Помещать CSS в начало
Помещать скрипты в конец
Избегать CSS выражений. Использовать постоянные, либо если не избежать,
то использовать обработчик событий.
Делать компоненты JS и CSS внешними(тогда они кэшируются).
Рекомендуется использовать для часто используемых страниц.
Уменьшать число DNS запросов. Уменьшать число уникальных хостов.
Минимизация JS. За счёт удаления ненужных символов.
Избегать переадресации.
Удалять дубликаты JS(лишние запросы и время на выполнение).
Использование тэгов содержимого(сравнивает информацию в браузере и на
сервере).
С полным списком правил можно ознакомится на
http://developer.yahoo.com/performance/rules.html
Также программа показывает размер странички, файлы, содержащиеся на
страничке, их число, размер, сжатие, тип, URL, HEADER, Куки(полученные
и отправленные), срок годности(для кэша), время загрузки, число запросов к
станице.
Можно посмотреть на 2ух круговых диаграмках соотношение размера
компонент страницы с пустым кэшем и с кэшированием.
Так же программа ссылается на утилиты, с помощью которых можно
проводить оптимизацию.
В общем и целом, обе программы похожи между собой.
Fiddler 2
1) Можно установить с http://www.fiddlertool.com/
2) Работает с WININET и видит все обращения к Интернету, документирует их.
Состоит из 3ех полей – Список HTTP сессий, Поля запросов и поля ответов.
Показывает трафик, время отклика, число запросов, их размер, размер
ответов, предполагаемое время отклика, если бы сервер находился в Китае,
Японии, Европе, Америке.
Показывает круговую диаграмму с содержанием страницы.
Можно просматривать headers запроса и ответа, тело ответа, если есть
изображения, то можно просматривать их. Показывает содержимое запрос-
ответа в виде байт. Показывает наличие аутентификации. Наличие –
отсутствие кэширования на странице. Наличие выражений P3P (это
протокол, позволяющий сайтам информировать браузер о предполагаемом
получении личных данных пользователя). Можно просмотреть простой текст
ответа (RAW), можно посмотреть дерево XML, если ответ в соответсвующем
формате. Можно посмотреть размер и содержание ответа без/с
использование сжатия gzip и deflate.
Можно обращаться к уже сгенерированным запросам, а не к серверу.
Можно делать запросы без посредников, непосредственно из Fidler 2.
Есть возможность (в графическом режиме) просматривать время и
последовательность загрузки компонент страницы и нескольких страниц.
Ещё можно блокировать загрузку компонент страницы на выбор.
Более менее, вот.