БЕЛАЯ ШЛЯПА » скорость загрузки

Ускорение блога на WordPress, модификация шаблона

eavasi — Mon, 15 Feb 2010 19:01:00 +0000

БЕЛАЯ ШЛЯПА - новый блог, посвященный основам сайтостроения для чайников, реальным способам заработка в Интернете, методам продвижения и раскрутки сайта БЕЛАЯ ШЛЯПА

Я уже рассказывал о том, что долгожданная радость посетила, вернее, поселилась на моем блоге. Он стал “летать”. Летать как быстрокрылая птица. Скорость загрузки блога увеличилась на порядок (с 40 сек. до 4 сек. – в десять раз!) благодаря установке новой персональной темы оформления WhiteHat, использующей всего три изображения и шесть цветов в css. Блог “Белая Шляпа” стал загружаться гораздо быстрее, чем со старой кубинской темой, но, оказалось, это не предел. Онлайн сервисы по анализу скорости загрузки сайтов (например CY-PR.COM) говорили мне, что есть возможность разогнать блог еще на 79%! Это ли ни диво!

Говорили о том, что необходимо применить сжатие gzip и отправляли в настройки WordPress (вкладка “Чтение”) и включить там это сжатие. Но в новом WordPress 2.9.1 я не нашел этой функции. Скорее всего за этим сжатием надо обращаться к хостеру. Они-то точно могут включить эту возможность на своем сервере. Я на время оставлю решение этой проблемы и скоро обращусь в службу поддержки Джино

Кроме сжатия gzip были другие возможности ускорить блог на WordPress. Я использовал часть из них, о которых знал как ими пользоваться точно. Сейчас я расскажу, что я сделал, но сразу оговорюсь, что об этих методах написано очень много и я не открою Америки и, тем более, не изобрету велосипеда, описав их. Однако дойдя до них собственным умом, я оставляю за собой моральное право описать их здесь.

Темы, точнее, шаблоны для WordPress пишутся унифицированно, чтобы их можно было установить на любой блог и они бы там сразу работали. Поэтому в темах пишется много директив, следуя которым, сайт много раз обращается к базам данных, чтобы, например, возвратить название блога, его адрес или расположение favicon. Если точно знаешь, что тема, которую ты выбрал продержится на блоге больше одного месяца, то можно смело прописывать перечисленные и другие параметры жестко, используя относительные адреса. Смотрите, вот что можно изменить, тем самым очень сильно облегчив работу сервера, уменьшив количество обращений к базам данных и увеличив скорость загрузки блога.

Откроем файл темы header.php и начнем с самого верха:

1. найдем строчку:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

прямо над нею вставим еще одну, которая сильно ускорит загрузку блога (это совет Лекактуса, подробности найдите на его блоге):

2. найдите строку:

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

3. далее заменяем строку:

<?php wp_title(''); if (function_exists('is_tag') and is_tag()) { ?><?php _e('Тег '); ?><?php echo $tag; } if (is_archive()) { ?><?php _e(' Архив'); ?><?php } elseif (is_search()) { ?><?php _e(' Результаты поиска '); ?><?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?><?php _e(' сайта '); ?><?php } ?><?php bloginfo('name'); ?>

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

<?php wp_title('«', true, 'right'); ?> Название вашего блога, например Белая Шляпа

4. а строчку

надо удалить вовсе, нечего нам оповещать всех о том, на каком движке и какой версии WordPress работает наш блог.

5. Строку

заменяем на:

6. Далее берем строку:

и переписываем на:

7. Строку о пинговании:

оформляем так:

/>

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

Файл header.php можно закрыть, а открыть надо файл footer.php Каждая тема оформляется по-разному, поэтому посмотрите, нет ли запросов к базе в этом файле. Там тоже может запрашиваться имя блога, чтобы прописать копирайт, переделайте его, как описано в п. 3

Далее все мои страдания были связаны с файлами css, которых разные плагины подгружают целых 6 штук. Я установил плагин ‘CSS Compress’ (страница плагина), который автоматически удаляет комментарии в css, табуляторы и пустые строки, а также сжимает их в формат gzip. Благодаря этим действиям файлы css сжимаются в 6-7 раз. Это тоже экономия нескольких секунд при загрузке.

Сделайте и вы все, что написано здесь и ваши читатели (а может и хостер провайдеры) будут вам очень благодарны и приятно удивлены.

© eavasi for БЕЛАЯ ШЛЯПА, 2010. |
Читать 140 комментов ">комментарии
2010/02/16
Подпишитесь на ленту блога RSS
Post tags: дизайн, дизайн блога, скорость загрузки, хостинг джино

Закладки:дизайн, дизайн блога, скорость загрузки, хостинг джино

Связанные записи:

: Ускорение блога на WordPress, модификация шаблона БЕЛАЯ ШЛЯПА - новый блог, посвященный основам сайтостроения для чайников, реальным способам заработка в Интернете, методам продвижения и раскрутки сайта

Увеличение скорости загрузки блога. Сервис Web Optimizator

eavasi — Wed, 24 Jun 2009 18:01:00 +0000

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

Чтобы узнать насколько оптимизирован ваш блог в плане скорости загрузки и сравнить их с другими, которые считаются очень «быстродействующими» существует замечательный сервис Web Optimizator Расскажу вкратце об этом он-лайн сервисе на примере своего блога, тем более что мне с моим блогом, вернее с его скоростью загрузки, есть к чему стремиться.

Дружелюбность и бескорыстие сервиса Web Optimizator приятно удивляют. Форма ввода адреса испытуемого сайта расположена в шапке на каждой странице сервиса.

Вводим наш адрес http://www.eavasi.ru/ (это мой, вы вводите свой). Через несколько секунд появляется солидный список с пунктами, над которыми надо работать, а в верхнем виджете высвечиваются оценки, определяющие в относительных величинах скорострельность вашего блога, а также, как главный показатель, процент того, насколько можно разогнать исследуемый сайт.

Давайте разберем каждый из пунктов рекомендаций по оптимизации моего блога.

1. Загружается более 1 HTML-файла.
Стоит подумать над реорганизацией структуры страницы, чтобы не выполнять дополнительные запросы к серверу. Здесь же приводится ссылка на переводную статью «Обходим ограничения браузера на число соединений» , в которой даются весьма грамотные советы по оптимизации сайта, которые грамотные веб мастера вполне могут применить в жизнь.

2. Загружается более 1 CSS-файла.
Рекомендуется объединить все файлы в один внешний или даже включить его в итоговый HTML. Это позволит сократить количество запросов к серверу. Это вполне применимо к движку WordPress, но только если всегда пользоваться одним и тем же шаблоном и не искать ничего нового.

3. CSS-файлы загружаются через условные комментарии.
Обнаружено несколько (всего 2) CSS-файлов, которые загружаются с помощью условных комментарии. Рекомендуется объединить все файлы в один внешний, спрятав характерные для Internet Explorer свойства с помощью линейных (inline) хаков, например, * html или даже включить их в итоговый HTML. Это позволит сократить количество запросов к серверу.

4. CSS-файлы можно уменьшить в размере.
Рекомендуется воспользоваться инструментом для сжатия CSS-файлов (основанном на проекте CSS Tidy). После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%). Подробнее о сжатии CSS-файлов. Здесь дается ссылка на сервис сжатия CSS файлов, я еще не пользовался, надо обязательно попробовать. Неужели заработает. Только надо не забыть сделать резервную копию файла перед обработкой.

5. CSS-файлы слишком велики.
Может быть, есть возможность их уменьшить, например, включив только те стили, которые действительно требуются, сократив пути к фоновым изображения, сгруппировав селекторы и пересмотрев логику наименования классов стилей. Эх, читали бы этот пункт производители моей темы, они то бы уж и камня на камне не оставили от таких рекомендаций. Хотя, надо отметить, что тема-то моя буржуйская и рассчитана на огромные скорости интернета, при которой загрузка моего сайта из-за раздутого CSS увеличилась бы на сотые доли секунды.

6. Не включено кеширование для статических файлов.
Рекомендуется отдавать все ресурсы (картинки, CSS- , JS- и мультимедиа файлы) с кеширующими заголовками (Cache-Control, уменьшая тем самым количество запросов с клиента при последующих посещениях или использовании этих файлов для просмотра других страниц сайта). Подробнее о включении кеширования для Apache и форсированном отключения кеширования. Всего файлов не из кеша: 203.На моем блоге установлен и включен плагин Hyper Cash, точнее, та его версия, в которой, ничего не говориться про кеширование статических страниц. Необходимо разобраться с этим вопросом. А может стоит просто увеличить периодичность очистки кеша? Можно поэкспериментировать...

7. На сайте не включены ETag или Last-Modified.
Некоторые файлы на сайте уже имеют ETag / Last-Modified (всего: 198). Рекомендуется отдавать все статические файлы c кеширующим ETag- или Last-Modified-заголовком (уменьшая тем самым количество запросов с клиента при последующих посещениях или использовании этих файлов для просмотра других страниц сайта). Подробнее о включении ETag для Apache. Всего файлов без ETag / Last-Modified: 4. Здесь же ссылка на статью, которая написана в таком стиле, чтобы запутать неискушенного манимейкера и отбить у него охоту что-то делать в плане оптимизации скорости загрузки, самому, а заказать эту самую оптимизацию на сайте рассматриваемого сервиса.

8. Загружается более 1 JS-файла.
Рекомендуется объединить все файлы в один внешний или даже включить его в итоговый HTML. Это позволит сократить количество запросов к серверу. Также для загрузки JS-файлов можно воспользоваться техникой «ненавязчивый» Javascript, которая позволит уменьшить число первоначальных запросов к серверу.

9. JS-файлы можно уменьшить в размере.
Рекомендуется воспользоваться инструментом для сжатия JS-файлов от Dean Edwards или YUI Compressor (подробнее о минимизации JS-кода). После этого можно отдавать JS-файлы в виде архивов с сервера (общий выигрыш до 70%).

10. JS-файлы слишком велики.
Может быть, стоит попробовать разбить их на несколько и подгружать только по необходимости, используя технику «ненавязчивый» Javascript или модульную загрузку.

11.Присутствуют дублирующиеся запросы.
Дублирование CSS- и JS-файлов необходимо устранить. Многократного использования одних и тех же картинок можно избежать, используя стили.

12. При загрузке страницы запрашивается слишком много хостов.
Слишком большое количество различных хостов при обращении к ресурсам страницы способно замедлить ее загрузку (потому что уходит определенное время на установление соединения с каждым). Рекомендуется ограничиться 4 хостами. Зафиксированное число хостов: 10. А куда тут денешься от лишних ссылок – это же блог, а не обычный сайт.

13. При загрузке вебсайта обнаружены редиректы.
Каждое перенаправление (redirect) увеличивает время загрузки конечного ресурса на клиенте, необходимо устранить все таки перенаправления. Всего зафиксировано редиректов: 1. Редирект – это полезная штука, если по-простому, то это – перенаправление. Без него никуда не денешься.

14. Обнаружены 404-ошибки.
При загрузке сайта обнаружены ссылки на несуществующие ресурсы (всего 2), все такие ссылки необходимо убрать или исправить их на действующие. Иногда записи и страницы приходится удалять или переименовывать.

15. Некоторые GIF-изображения можно уменьшить в размере.
На сайте обнаружены GIF-изображения (всего: 57), размер которых можно уменьшить, если преобразовать их в PNG (например, с помощью gif2png или gifsicle). Подробнее о преимуществах формата PNG.

16. Некоторые PNG-изображения можно уменьшить в размере.
На сайте обнаружены PNG-изображения (всего: 9), размер которых можно уменьшить, если убрать из них ненужную информацию (например, с помощью pngcrush). Подробнее о преимуществах формата PNG.

17. Некоторые JPEG-изображения можно уменьшить в размере.
На сайте обнаружены JPEG-изображения (всего: 9), размер которых можно уменьшить, если убрать из них лишние комментарии без потери качества (например, с помощью jpegtran или портированного под Windows пакета jpeg). Я бы, все таки, отдал предпочтение Adobe Photoshop, чем этим никому неизвестным программам, в плане оптимизации изображений для веб ему нет равных.

Короче, выводы такие – все эти рекомендации очень хороши и полезны, но не все применимы для WordPress, можно использовать их, как руководство к размышлению, но не к действию. Пунктов 15-17 это, конечно, не касается.

© eavasi for БЕЛАЯ ШЛЯПА, 2009. |
Читать 20 комментов ">комментарии
2009/06/25
Подпишитесь на ленту блога RSS
Post tags: скорость загрузки

Закладки:скорость загрузки

Связанные записи:

: Увеличение скорости загрузки блога. Сервис Web Optimizator БЕЛАЯ ШЛЯПА - новый блог, посвященный основам сайтостроения для чайников, реальным способам заработка в Интернете, методам продвижения и раскрутки сайта