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

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

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

Ускоряем сайт на WordPress: google page speed
Чтобы проверить скорость загрузки сайта и найти причины его медленной работы, можно воспользоваться расширением 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 читайте дальше.

Комментарии

  1. не могу найти http://code.google.com/intl/ru-RU/speed/page-speed/download.html
    дайте пожалуйста адресок

    • Исправила ссылку в статье.

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5077