В этой статье я расскажу про замечательный плагин для firefox, который позволяет тщательно проанализировать весь сайт на предмет неоптимизированного контента, который увеличивает скорость загрузки. Это Google Page Speed. Для его работы нужен плагин FireBug, так что установите сначала его, если вы не сделали это раньше. Если вы по каким-то причинам до сих пор не пользуетесь этим чудо-плагином для вебмастеров, советую прочитать его подробное описание: часть 1 и часть 2.
Чтобы проанализировать быстродействие вашего сайта, нужно открыть плагин firebug (нажать клавишу F12 или просто кликнуть по иконке жука в нижнем правом углу браузера), перейти на вкладку Page Speed и нажать на кнопку Analyze Performance. После анализа сайта вы увидите вот такое окошко:
Overal Performance Summary – общая оценка производительности.
– не оптимизирован, 
– слабо оптимизирован и 
– не нуждается в оптимизации.
Если использовать навороченные плагины в wordpress, то даже среднего уровня оптимизации достигнуть не получится, как в моём случае. Больше всего тормозят блог плагины Sexy Bookmarks, GD Star Rating и Cforms. Почему это происходит вы поймёте по мере объяснения мной всех подсказок по оптимизации, которые даёт Google Page Speed.
Начнём по порядку (у вас эти пункты, конечно же, могут быть в другом порядке и с другим уровнем оптимизации):
- Enable gzip compression – включите gzip компрессию. Как я писал в первой части этой статьи, я использую zlib компрессию. Конечно же, увидев эту рекомендацию, я захотел включить gzip и проверить, какой вид компрессии эффективнее. Включил с помощью htaccess (другого способа без установки плагинов не нашел), но Google Page Speed всё равно ругается, что компрессия не включена. Если кто-нибудь знает, в чём причина – милости прошу в комментарии.
- Combine external JavaScript – объедините внешний JavaScript. Все скрипты, которые я подключал вручную, у меня хранятся в одном файле. А вот те скрипты, которые подключаются плагинами, объединить мне не представляется возможным без использования дополнительных плагинов. Но это дополнительные костыли.
- Combine external CSS – объедините внешние CSS файлы. Всё аналогично предыдущему пункту.
- Optimize the order of styles and scripts – оптимизируйте порядок загрузки стилей и скриптов. Это значит, что для паралельной загрузки, сначала должны подключаться CSS файлы, а затем JavaScript. А проблема в том, что плагины подключают эти самые файлы, когда и где им заблагорассудится.
- Parallelize downloads across hostnames – дословно перевести сложно. Суть в том, что если загружать разные элементы сайта параллельно с разных хостов, то скорость загрузки увеличится. Это относится, например, к картинкам, которые можно хранить на специальных файл-хостингах.
- Minify CSS – уменьшите CSS. Плагин автоматически сжимает файлы CSS и показывает сколько таким образом можно сэкономить килобайт. Тут же можно нажать на ссылку «see minified version» и заменить указанный файл на оптимизированный. Эта функция избавляет от необходимости пользоваться аналогичными онлайн сервисами. Очень удобно.
- Minify JavaScript – уменьшите джаваскрипт. Аналогично предыдущему пункту.
- Remove unused CSS – уберите неиспользуемые стили CSS. Довольно трудно объяснить коротко и ясно. Приведу пример: при загрузке главной страницы моего блога браузеру отдаются все файлы стилей, в том числе и те стили, которые для загрузки этой конкретной страницы не нужны. Конкретный пример: если посетитель моего блога не зайдет на страницу «О блоге», то стили для контактной формы Cforms браузеру не понадобятся, но они то загружаются. То же самое происходит со всеми плагинами, которые используются не на всех страницах.
- Optimize images – оптимизируйте изображения. О том, как это сделать, я уже писал в статье Юзабилити в wordpress. Часть 6 – скорость загрузки.
- Specify image dimensions – указывайте размеры изображений. Если размеры изображения указаны, то при загрузке страницы браузер пропускает необходимое место для картинки и продолжает загрузку, не дожидаясь завершения загрузки изображения. Для wordpress это не так актуально, т.к. при вставке изображений в посты при помощи встоенного загрузчика, wordpress сам устанавливает размеры изображения. Если вы вставляете их вручную, то обязательно указывайте размеры.
Какой напрашивается вывод: Google Page Speed – отличный инструмент для вебмастера, который помогает выявить самые узкие места при загрузке сайта и определиться с тем, что можно и что нужно оптимизировать. Но, к сожалению, большинство разработчиков плагинов совершенно не беспокоятся о том, на сколько их детища оптимизированы, думая лишь о прикрутке новых наворотов. Конечно можно покопаться в коде этих плагинов, минифицировать CSS и JavaScript, объединить эти файлы в один, но после обновления плагина всё это придется делать снова.
Если вы хотите, чтобы ваш блог загружался просто молниеносно, то лучший вариант – написать самому простенькую CMS, как это сделал Never Lex.
Меня зовут Ян Такушевич и я рад приветствовать Вас на моём блоге. Мне 22 года, живу я в городе Минске. Чтобы связаться со мной, посетите страницу 
Подписка по RSS
E-mail подписка
Я в twitter
Комментарии:
Не зря старался – посчелкал странички блога – довольно шустро странички отдает.)
Ответить
Ян, может поучаствуешь в моем конкурсе? Статьи мегаполезнейшие, шансы были бы у тебя большие
Ответить
Я тоже недавно занимался похожим и тоже с подачи Гугла.
Посмотри, может быть, будет интересно
http://it.sander.su/site-speed.php
Привел явные куски кода для включения кэширования и архивирования, кроме того, кусок конфигурации для Apache.
Ответить
По поводу gzip-а, для него в апаче должен быть включён модуль mod_gzip, или если nginx, то gzip on; должно быть.
т.е. css, html, а не картинки.
Главное только сжимать сжимаемое,
Кстати в случае перевода на nginx это тоже даёт прирост скорости.
Ответить
хмм не пришел комментарий на почту об ответе. у меня спам-фильтров нет
nginx я пока еще не изучал, ничего сказать не могу.
но еще один пост по оптимизации тоже обещаю
Ответить
Еще можно было бы добавить – резать крупные изображения, и использовать только CSS-макеты (хотя это, наверное, всем давно понятно).
Слышал, что неплохо работает
Zend Optimizer — единственное приложение, распространяемое бесплатно. Являет собой серверный модуль для запуска закодированных с помощью Zend Encoder и Zend SafeGuard Suite скриптов, а также немного их ускоряющий (заявлено, что до 40%).
Как устанавливается:
http://guruadmin.ru/page/ustanovka-zend-optimizer
Это если серьезно. А вообще – надо ставить свой сервак на хороший канал. Ну и руки выпрямить уже наконец )
Ссылка на книгу по Ускорению
http://hotfile.com/dl/1062939/7762874/uskorenie_raboty_sayta.rar.html
Скачал за 2 минуты, размер – 21 метр.
Вобщем буду следить за темой.
Ответить
Про оптимизацию js и css:
Я занимался подобным на своем сайте. Результат не очень виден, потому что я одновременно реально нагрузил морду новым форматом представления данных. Но я к чему все это. Вообще-то эффект есть.
CSS:
1) Я проанализировал исходный код – посмотрел какие стили добавляются в исходный код – и собственные стили, и плагинами.
2) Залез в исходный код тех плагинов, которые использую и буду и дальше использовать, и вырезал из них все обращения к стилям плагинов или код добавления стилей в head моего шаблона.
3) Все содержимое стилей плагинов перенес в свой единственный файл стилей style.css.
4) Сжал свой файл стилей, удалив пробелы и пустые строки.
5) Ну а потом я поизгалялся с графикой – во всю внедрил спрайты, ужал рисунки, поудалял лишние элементы.
Js:
1) То же, что и с css.
2) Начал экспериментировать, выясняя, работает ли плагин или фишка на сайте с js в подвале. Если нет – возвращал, как было; если да – оставлял в подвале.
3) Перенес весь js код в один файл.
4) Сжал с помощью minifyjs весь код.
Ответить
Ян Такушевич отвечает:
22 декабря 2009 в 23:08
Все рекомендации правильные, но после обновления плагинов, которые были изменены, всё придется делать заново. Я вот один плагин задолбался каждый раз после обновления редактировать – Sexy Bookmarks, думаю от него вообще избавиться, а если этих плагинов будет несколько…
Ответить