YSlow — средство анализа скорости загрузки страницы

YSlow

Данная статья является первой в цикле публикаций посвящённым плагину FireBug для FireFox, а так же его дополнений. Начну с расширения позволяющего проанализировать факторы влияющие на скорость загрузки страницы.

YSlow — описание инструмента.

YSlow — это расширение Firebug, которое оценивает страницу по различным характеристикам, а так же предлагает различные методы для улучшения. Расширение базируется на 22 правилах, которые влияют на производительность веб страницы в браузере. Правила отобраны из 34 предложенных, командой разработчиков компании Yahoo.

Приведу 22 правила на которых базируется YSlow в порядке уменьшения важности и эффективности:

  1. Минимизировать HTTP запросы (Minimize HTTP Requests)
  2. Использование CDN — не используется в России (Use a Content Delivery Network)
  3. Использование Expires или Cache-Control в заголовке (Add an Expires or a Cache-Control Header)
  4. Компоненты Gzip (Gzip Components)
  5. Размещение таблицы стилей в начале документа (Put StyleSheets at the Top)
  6. Размещение скриптов в конце документа (Put Scripts at the Bottom)
  7. Отсутствие CSS Expressions (Avoid CSS Expressions)
  8. Использование скриптов и таблиц стилей во внешних файлах (Make JavaScript and CSS External)
  9. Сокращение DNS-запросов (Reduce DNS Lookups)
  10. Уменьшенный JavaScript и CSS (Minify JavaScript and CSS)
  11. Отсутствие редиректов (Avoid Redirects)
  12. Удалены дублирующие скрипты (Remove Duplicate Scripts)
  13. Сконфигурированы ETags (Configure ETags)
  14. Ajax кэшируется (Make AJAX Cacheable)
  15. Использование метода Get для AJAX запросов(Use GET for AJAX Requests)
  16. Уменьшение количества DOM элементов (Reduce the Number of DOM Elements)
  17. Отсутствие 404 ошибки(No 404s)
  18. Уменьшение размера Cookie (Reduce Cookie Size)
  19. Использование компонентов не использующих Cookie (Use Cookie-Free Domains for Components)
  20. Отсутствие фильтров (Avoid Filters)
  21. Не использовать масштабирование изображения средствами HYML (Do Not Scale Images in HTML)
  22. Использовать небольшой favicon.ico с возможностью кэширования (Make favicon.ico Small and Cacheable)

Инструмент даёт нам оценку по одному из трёх предопределённых наборов правил. Начиная с версии YSlow 2.0 пользователи могут создавать собственные наборы или использовать один из трёх имеющихся.

  • YSlow (V2) — этот набор содержит 22 правила, которые я расписала выше.
  • Classic (V1) — содержит первые 13 правил
  • Small Site or Blog — этот набор содержит 14 правил применимых к небольшому сайту или блогу

YSlow создание наборов правил

YSlow анализирует характеристики веб страницы, проверяя все компоненты страницы, включая динамически созданные, например, средствами JavaScript.

После анализа базовых характеристик по выбранному набору правил YSlow отображает отчёт, разделённый по четырём категориям:

Grade — эта вкладка содержит общую оценку (от A до F) по каждому правилу, чем ближе к началу алфавита- тем более оптимизирован ваш сайт. В результате даются краткие рекомендации по устранению найденных проблем.

YSlow отчёт grade

Components — Эта вкладка показывает различные компоненты из которых состоит ваша страница и информацию по ним.

Components

Statistics — эта вкладка отображает графическое представление числа запросов генерируемых к серверу для отображения страницы. Рассмотрено два случая: при отключённом кэше страниц и включённом.

Statistics
Tools — эта вкладка показывает предлагаемые разработчикам инструменты.

Начало работы с расширением YSlow.

Внимание! Для работы инструмента требуется установленный Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

После запуска Firebug можно скачивать и устанавливать  https://addons.mozilla.org/en-US/firefox/addon/5369/

Для начала работы необходимо выбрать требуемый набор правил и нажать кнопку «Run test»

Личный опыт использования.

Мой блог получает категорию «C» при сокращённом (Small Site or Blog) тесте, общее количеств очков — 72. Важными показателями, получившими оценку — «F» является: Add Expires headers и Compress components with gzip. Для  увеличения оценки по этим пунктам, необходимо в  файл .htaccess добавить следующие строки:

 ExpiresActive on
 ExpiresDefault "access plus 30 days"
 
Header unset ETag
FileETag None
 
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript

Этот шаг позволит добавить параметр expires header, а так же выключает ETag headers и включает gzip сжатие файлов, посылаемых браузеру. Нужно отметить что указанный код не будет работать, если на сервере отключён mod_expires.