Рекламные ссылки:

Главная » WordPress » оптимизация » В погоне за Page Speed. Ускоряем сайт

В погоне за Page Speed. Ускоряем сайт

1 июня



Уже ни для кого не является секретом, что поисковые системы при ранжировании выдачи стали учитывать качество сайтов. А одним из важнейших параметров качества является скорость загрузки сайта.

“Сети должны быть быстрыми” – Google.

Но чем же нам измерить скорость? Не будем изобретать велосипед, все уже за нас придумано. Общепринятыми критериями для измерения скорости загрузки сайта приняты Google Page Speed и Yahoo! YSlow. Давайте на них и остановимся.
Ранее я уже писал про оптимизацию блога на WordPress. Если вы ее не читали, то рекомендую прочесть. Вроде бы сделал настройки по оптимизации и успокоился на этом. Но не тут то было. Вновь вернуться к данной теме меня подтолкнул комментарий Mari:

“…очень долго грузиться страница с контентом. Я пипец, как долго ждала загрузки. А другим не интересно смотреть на пустое место и уходят…”

  Но это все лирика и давайте вернемся к нашей теме.
Для определения параметров скорости можно воспользоваться дополнением Page Speed для Firefox (необходим предварительно установленный Firebug) или такой же плагин есть для браузера Google Chrome. Оба дополнения рекомендуются Гуглом и скачать их можно в инструментах для веб-мастеров на закладке эффективность сайта. Выбирайте сами кому что больше нравится.
Я же предлагаю взять на вооружение очень известный сервис GTmetrix. Он предпочтительнее тем, что в своих алгоритмах использует как Page Speed, так и YSlow. По статистике большинство посетителей уходит со страницы, если время ее загрузки составляет более 4 секунд. Давайте сделаем для сравнения несколько замеров некоторых известных блогов. Чтобы вам было понятнее вот ссылки на них: Сидаш.ру, Inetmari, Pinzes.ru, Shakin.ru и Сосновский.ру. Для более правильного результата, чтобы исключить фактор задержки в каналах, я сделал по несколько измерений для каждого блога и рассматривать будем лучший из них.

рейтинг загрузки сайтов

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

первое измерение скорости загрузки

Но сервис потому и замечательный, что кроме замера скорости он предоставляет рекомендации по улучшению вашего сайта.
Итак, что же мы можем сделать? Для начала внимательно посмотрим на результаты тестов. Моих скринов, к сожалению, не сохранилось, поэтому рассмотрим на примере Сидаш.ру. Главное нам понять общее представление картины.

На закладке Page Speed мы видим рекомендации, их уровень выполнения по сто бальной шкале, тип и приоритет. Все достаточно доступно показано. При клике по рекомендации разворачивается список файлов, над которыми необходимо работать. Можно почитать статьи про конкретные параметры (на англ.). Так же для некоторых типов (css, скрипты, изображения) сервис предлагает сразу посмотреть и скачать оптимизированные версии. Закладка YSlow имеет такую же структуру, но немного с другими параметрами. Её мы касаться не будем, при желании разберетесь сами, там все аналогично.

закладка Page Speed

На закладке Timeline можно посмотреть на временном графике какие файлы в каком порядке и как долго загружаются.

закладка timeline

Вкладку истории можете посмотреть на моих скринах. Там достаточно подробно можно увидеть процесс проделанной работы. Кликабельно.

вкладка история оптимизации

А вот и результат самой оптимизации. Сравнивайте.

До

первое измерение скорости загрузки

и после

финальный тест

Заинтересовало? Думаю, что да. Вот теперь я вкратце расскажу, что конкретно было сделано. Для каждой позиции я сделаю небольшое описание, а вот по ключевым моментам обязательно будут выходить отдельные посты в ближайшее время. Так что, если не хотите пропустить важную информацию, подписывайтесь на мою RSS ленту. Начнем.

ПЕРЕД НАЧАЛОМ КАКИХ ЛИБО ИЗМЕНЕНИЙ ДЕЛАЙТЕ БЭКАПЫ ФАЙЛОВ И БАЗЫ ДАННЫХ!

1.Кэширование WordPress

Ранее я уже писал, что остановился на плагине SJ Object Cache. Пришло время пересмотреть этот момент. Были протестированы плагины: Hyper Cache, WP Super Cache, W3 Total Cache. Последний плагин, кстати, рекомендован сервисом GTmetrix, но там просто огромное количество функций и настроить правильно мне его так и не удалось. Возможно, позже вернусь к этому плагину. В результате по скорости загрузки и по нагрузке на хостинг победителем стал  Hyper Cache. Если вы обратили внимание на огромные скачки графика загрузки страницы на скрине с историей, то знайте – это было тестирование данных плагинов. Не правильно настроенный кэш только вам все испортит.
2.Кэширование в браузере

Еще один очень важный момент в оптимизации сайта. Суть его в том, что ваш сервер будет отдавать команду браузерам пользователей о сохранении статических файлов в кэше браузера, т.е. на компьютере пользователя. В результате, если пользователь заходит к вам на сайт не первый раз, то скорость загрузки страницы увеличивается очень значительно. Сделать это можно с помощью файла .htaccess. Он находится в корневой директории вашего сайта. Если такого файла у вас нет, то можете в редакторе (например, Notepad++) его создать. Делаете обычный текстовый файл, прописываете в нем код и сохраняете с любым именем. Потом переименуйте его из имя_файла.txt в .htaccess и загрузите к себе на хостинг. Примеры кода для .htaccess:
вариант 1

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
</IfModule>

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

у меня прописан второй вариант.

3.Отключение плагинов

Проанализируйте ваши плагины. Посмотрите, какие вам нужны, а от каких можно отказаться. Если же плагин вам нужен, а он создает нагрузку на сервер или тормозит загрузку страницы, постарайтесь найти аналог с лучшими характеристиками. Поверьте, вы их найдете. У себя выявил два проблемных плагина, мешающих оптимизации. Это Shutter Reloaded (всплывающие окна для просмотра изображений) и всеми почему то очень любимый SyntaxHighlighter Evolved (публикация и подсветка кода). Оба плагина добавляют по парочке лишних таблиц стилей, лишние скрипты и не оптимизированные изображения. От первого отказался достаточно легко, а вот второму пришлось искать замену. И нашел. WP-SynHighlight. Ни одного замечания к нему нет! Более того, плагин понимает 116 языков программирования. Внешний вид опубликованного кода тоже на высоте. Да что там говорить, ставьте, пробуйте и наслаждайтесь.
4.Оптимизация базы данных

Одним из основных узких мест в оптимизации является база данных, поэтому её ускоряют всеми возможными способами. Для оптимизации таблиц используем плагин Optimize DB. Все в нем просто, останавливаться подробно не будем. Скажу лишь, что он вам поможет уменьшить размер таблиц MySQL и улучшит их структуру. Время запросов к базе сократится на 20-50%. После публикации плагина не забудте нажать на ссылку “оптимизировать”.
5.Включение GZIP кэширования

Сжимает на сервере ваши файлы и отдаёт браузерам пользователей в сжатом виде (в архиве). Все современные браузеры способны разархивировать такие данные. Момент важный, но спорный. С одной стороны сильно увеличивает нагрузку на сервер (до 50%), с другой – очень значительно ускоряет загрузку страницы (в несколько раз). У себя реализовать пока не получилось. Тема достойна отдельного поста и в дальнейшем планирую в этом вопросе разобраться.
6.Оптимизация файлов таблиц стилей (css) и скриптов

Достаточно просто все делается при помощи GTmetrix. Сервис сам вам предлагает оптимизированные варианты файлов. Просто копируйте код и заменяйте в ваших файлах (не забывайте про бэкапы). Можно воспользоваться другими сервисами по сжатию кода, но не вижу смысла. Сервис выдает отличные варианты оптимизации.
7.Технология Minify

Обязательно устанавливаем плагин WP-Minify. Он перехватывает запросы к файлам стилей и скриптов, сжимает их и объединяет. Сократит множество запросов всего до двух. Прекрасно работает с плагинами WP Super Cache и Hyper Cache. Можно использовать “из коробки”, но только отключите в настройках публикацию ссылки на разработчика. Советую перед установкой выполнить предыдущий пункт. Плагин кэширует css стили. Если вы оформляете новый материал, то лучше его на это время отключать.
8.Оптимизация изображений

Можете воспользоваться вариантами, которые предложит  GTmetrix или использовать сервис PunyPNG. Оба справляются с задачей отлично, но второй более популярен.
9.Создание css спрайтов

Эту тему рассмотрим в отдельном посте. Объясню лишь принцип. Все постоянные изображения (фоны, иконки и т.д.) объединяются в один файл и при загрузке страницы происходит всего лишь один запрос к базе и загружается одно изображение. Очень сильно ускоряет сайт!
Это основные пункты, на которые нужно обратить внимание в первую очередь. Уверен, у каждого найдутся и другие. У меня, например, фреймворк шаблона выкидывал такой фокус. В настройках размеров изображения анонсов выставлено разрешение 500 на 20 px. А в реальности размер блока был 490 на 200 px. И серверу приходилось каждый раз при загрузке страницы переделывать каждое изображение. А это лишняя нагрузка и задержка.
Выводы.

В результате проделанной работы был уменьшен размер страницы с 753 kb до 443 kb ( на 41%!), скорость загрузки сайта уменьшилась на 2,4 секунды и почти достигла заветных четырех секунд, количество запросов уменьшилось с 61 до 18 ( на 70,5%). Но и это далеко не предел. До совершенства еще ой как далеко. В ближайших планах замена основного шрифта на блоге (сейчас он у меня внешний и подключается отдельно) и замена плагина формы обратной связи (скорее всего откажусь совсем от плагина и пропишу все в коде). Так же есть мысль перенести все изображения на поддомен, но это пока под вопросом.
И не забывайте подписываться на RSS. Удачи!
Tweet

Не забывайте подписаться на RSS или просто введите свой адрес электронной почты, чтобы получать регулярные обновления на e-mail:

Еще записи из этой рубрики

Ответов 8 на “В погоне за Page Speed. Ускоряем сайт”

  1. aleksandr 02.06.2011 at 00:19 #

    Спасибо за информацию. Я как раз эксперементирую с плагином W3 Total Cache. Пытаюсь разобраться в его настройках

    • Борис 02.06.2011 at 01:30 #

      Пожалуйста. У W3 Total Cache вроде несколько версий есть. Нужно еще выбрать лучшую. Если не трудно, отпишитесь потом по результатам.

  2. Роман 02.06.2011 at 00:58 #

    Надо попробовать у себя на блоге… думаю после ускорения должны показатели отказов уменьшится, глубина просмотра увеличится => денюжка с партнерок побольше – это есть очень хорошо)))

    • Борис 02.06.2011 at 01:33 #

      Логично, не поспоришь. А вообще, оптимизация затягивает, осторожнее :)

  3. Павка 02.06.2011 at 20:29 #

    что-то у меня сайт-тормоз-(

    • Борис 02.06.2011 at 20:38 #

      Плохие результаты тестирования?

  4. Alex 15.08.2011 at 01:43 #

    На днях занялся как раз этой самой оптимизацией.
    Повысил скорость загрузки с 6-7с до 2,5.
    В GTMetrix смущает то, что он находится в Америке, и пинг до России там значительный довольно, и поэтому там все-таки немного завышенный результат.

    Ищу его русские аналоги. Желательно с такими же подробностями

    • Борис 15.08.2011 at 06:59 #

      Alex, попробуйте webo.in

Написать ответ

*