Ускоряем сайт на WordPress: Часть 4 — HTTP запросы

Продолжение.
Начало поста Ускоряем сайт на WordPress читайте здесь.

Чем еще мы можем помочь своему сайту?

Чтобы проверить скорость загрузки сайта и найти причины его медленной работы, можно воспользоваться расширением Page Speed плагина FireBug для браузера FireFox.
Несколько запутано получилось.
Вообщем, заходим через FireFox на страницу FireBug - https://addons.mozilla.org/ru/firefox/addon/firebug/?src=dp-dl-dependencies и установливаем этот плагин.
Дальше выполняем то же самое для Page Speed (версия для FireFox) - https://developers.google.com/speed/docs/insights/using_firefox
Версия Page Speed для Хрома - https://developers.google.com/speed/docs/insights/using_chrome.
Собственно, возможностей протестировать сайт существует множество.
Но расширение Page Speed - это универсальный инструмент для диагностики проблем сайта - я рекомендую использовать именно его.

Как пользоваться дополнением Page Speed?

• После установки двух указанных выше дополнений, перезагружаете FireFox;
• Кликаете правой клавишей мыши на любом месте страницы, вызывая т.о. контекстное меню;
• Выбираете в нем пункт «Анализировать элемент»;
• Откроется окно плагина FireBug;
• На панели плагина выбираете пункт Page Speed;
• В открывшейся вкладке кликаете по кнопке «Analyze Performance».

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

• Используйте кэш браузера;
• Уменьшите число переадресаций;
• Объедините изображения в CSS-спрайты;
• Отложите синтаксический анализ JavaScript;
• Включите сжатие;
• Оптимизируйте изображения;
• Используйте Keep-Alive;
• Укажите валидатор кэша;
• Предоставляйте ресурсы с одного и того же URL;
• Уменьшите размер запросов;
• Оптимизируйте порядок загрузки стилей и скриптов;
• Сократите CSS;
• Сократите JavaScript;
• Встройте небольшие ресурсы JavaScript;
• Используйте асинхронные ресурсы;
• Не используйте правило CSS @import;
• Сократите HTML;
• Предоставьте изображения с нужными пропорциями;
• Укажите размеры изображений;
• Укажите набор символов;
• Удалите строки запросов из URL статических ресурсов;
• Укажите заголовок Vary: Accept-Encoding;
• Встройте небольшие CSS;
• Не используйте некорректные запросы;
• Разместите CSS в заголовке документа;
• Сделайте переадресации с целевой страницы кэшируемыми;
• Defer loading of JavaScript;
• Remove unused CSS;
• Use efficient CSS selectors.

Обратите внимание на те пункты списка, которые у вас будут отмечены красными маркерами, в первую очередь нужно заняться исправлением именно их.
Чаще всего Page Speed находит следующие ошибки:

11. Большое количество HTTP запросов:

Запрос – это одно обращение к какому-нибудь файлу – файлу стилей css, файлу js скриптов, рисунку (как прописанному в файле стилей, так и вставленному напрямую в страницу – иконки, баннеры и пр.).
Уменьшая количество файлов, к которым обращается браузер, можно уменьшить и количество HTTP запросов, необходимых для отображения страницы.
Браузер будет обрабатывать меньше информации и быстрее начнет передавать материал пользователю, а значит увеличится скорость загрузки страницы.
Большое количество HTTP запросов вызывают не оптимизированные или слабо оптимизированные шаблон и плагины, используемые на сайте.

Как уменьшить количество HTTP запросов?

• Сократить количество внешних скриптов:
  
  В теории, скрипты можно объединить в один сценарий или, хотя бы, в один файл. На практике же это не всегда возможно, так как часть скриптов работает в самом WordPress, часть в плагинах, а другая часть в шаблоне.
  Но, как минимум, можно попытаться объединить в один файл скрипты шаблона.
• Сократить количество внешних файлов стилей:
  
  Page Speed считает все файлы стилей, существующие на сайте, в том числе стили плагинов, шаблона, а также посторонних скриптов, интегрированных в сайт (вроде кнопок vkontakte и пр.).
  В шаблонах, как правило, существует несколько файлов стилей - это удобно для их редактирования. Когда же вы с редактированием закончите, все стили лучше объединить в один файл.
• Сократить количество внешних фоновых изображений:
  
  Изображения, используемые в шаблоне, можно объединить в спрайте (одном общем изображении). В спрайты объединяют все небольшие фоновые изображения сайта.
  Крупные изображения лучше загружать по отдельности.

Продолжение поста Ускоряем сайт на WordPress читайте дальше.