1. Установка необходимых плагинов Firefox для анализа наших трудов
2. Модификация и оптимизация шаблона
3. SEO оптимизация
4. Оптимизация CSS
5. Оптимизация Графики
6. Настройка серверного кэширования и сжатия (Expires, ETag, Deflate и прочее.. )
7. Настройка кэширования WordPress
8. SEO раскрутка
9. Возможные проблемы

Результаты того, что из этого вышло у меня можно посмотреть здесь: http://www.showslow.com/details/?url=http://creotiv.in.ua/

Перед и после каждого пункта прогоняем все тесты на YSlow и Page Speed, что бы видеть наши успехи)

1. Установка необходимых плагинов Firefox для анализа наших трудов

Для того, что бы понимать что мы делаем и какой результат от этого получаем нам необходима аналитика. Ее нам предоставляют два замечательных плагина для Firefox:

• Firebug
• Page Speed
• YSlow

Именно благодаря им мы будем видеть ошибки в работе своего сайта а так же скорость его загрузки.

2. Модификация и оптимизация шаблона

Красота вещь хороша, но с учетом того, что большинство блогов на WordPress работает на слабых хостингах – красота становиться нашим врагом. А посему если это именно блог, а не портфолио, грузить его графикой и всякой анимацией не стоит, так как это серьезно ударит по его производительности.

По сей причине удаляем все ненужное что есть в шаблоне: лишнюю графику, всю анимацию, все ненужные плагины(их ненужность отлично проверяется через Google Analytics), все лишнее, что тормозит работу. В данном случае наш блог должен быть в минималистическом стиле. Для этого хорошо подойдут простые и спокойные темплейты. Так же стоит помнить что Блог – он для чтения, а не для просмотра всех возможностей аппаратного обеспечения пользователя. Людям в первую очередь нужна информация.

3. SEO оптимизация

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

Так как я использую шаблон от Woo, то SEO плагин у меня встроен в темплейт, остальным же придется установить плагин All in One SEO Pack

Ссылки:

Ссылки лучше использовать двух типов

/имя_поста/ или /имя_категории/имя_поста

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

Название, описание и ключевые слова:

Title страницы должен быть таким: Название статьи – Название сайта

Так как именно статью люди и ищут, а по этому она важнее.

Каждая страница должна иметь уникальное описание(Meta Description) и ключевые слова(Meta Keywords). Я генерю их с цитаты и тагов статьи соответственно. Просто, удобно и работает.

Дублирование контента – это плохо

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

Для этого создаем файл robots.txt в корне сайта и пишем следующее:

User-agent: *
Allow: /
 
Disallow: /wp-content/
Disallow: /wp-admin/
Disallow: /archives/
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: */trackback/
Disallow: /author/
Disallow: /tags/

Подкорректируйте его под свои пути. По сути поисковик должен ходить по главной и по категориям.

Ссылки и картинки

Все картинки должны иметь правильное описание полей alt и title. Ссылки же должны иметь title и rel=”nofallow”(Это говорит роботу не переходить по ней. Должно стоять на все внешние ссылки), так же этого можно добиться прописав в Meta robots параметра nofallow(тогда робот не будет переходить по ссылкам с данной страницы). Это нужно для того что бы не ракламить другие сайты за свой бюджет.

Карта сайта

Карта сайта нужна поисковикам, что бы быстро следить за обновлением информации на сайте. Следовательно меньше нагрузка от пауков и лучше результат.Что бы построить карту сайта нужно установить плагин Google XML Sitemaps

А также добавить в файл robots.txt строчку:

Sitemap: sitemap.xml

Теперь нужно зарегистрировать сайт на поисковиках в тулзах для веб-мастеров:

• Google
• Yandex
• Bing

Это ускорит продвижение вашего сайта, а так же даст вам аналитику для размышлений. Так же рекомендую зарегистрировать себе Google Analytics – очень полезная тулза.

4. Оптимизация CSS

Все CSS файлы должны быть слиты и разбиты на файлы по 50-70кб. После чего их нужно сжать, для этого можно воспользоваться тулзой yuicompressor(сжимает css и javascript) или же воспользоваться веб сервисами которые работают через плагин YSlow->Tools. Это позволит ускорить скорость загрузки за счет уменьшения количества файлов и их размера. Ни что так не убивает сервер как много мелких файлов.

5. Оптимизация графики

Как и с CSS нам нужно уменьшить количество подгружаемых картинок. Этого можно достичь используя спрайты (случайно нашел сервис который сам их делает из загруженных картинок ). Спрайт – это картинка из множества склеенных картинок. Это позволяет грузить один файл для всех картиной вместо загрузки 10-20 разных мелких картинок. Тем самым увеличивая скорость загрузки.

Так же нам необходимо сжать сами картинки, для этого есть утилиты jpegtran и pngcrush, которые сжимают Jpeg и Png соответственно. Если вы имеете доступ к консоли, то неплохо бы поставить эти скрипты в Cron на оптимизацию загружаемых через интерфейс картинок.

Картинки шаблона можно оптимизировать все тем же YSlow->Tools->Smush.It

6. Настройка серверного кэширования и сжатия

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

Для этого открываем файл .htaccess в корне сайта и добавляем в его начало следующий конфиг:

AddDefaultCharset utf-8
 
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  #SetEnvIfNoCase Request_URI \.(?:gif|png)$ no-gzip dont-vary
  Header append Vary User-Agent env=!dont-vary
</IfModule>
 
# используем mod_expires
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault A86400
  ExpiresByType image/x-icon A7257600
  ExpiresByType text/javascript A7257600
  ExpiresByType application/javascript A7257600
  ExpiresByType application/x-javascript A7257600
  ExpiresByType text/css A7257600
  ExpiresByType image/gif A7257600
  ExpiresByType image/png A7257600
  ExpiresByType image/jpeg A7257600
  ExpiresByType text/plain A7257600
  ExpiresByType application/x-shockwave-flash A7257600
  ExpiresByType video/x-flv A7257600
  ExpiresByType application/pdf A7257600
  ExpiresByType text/html A900
</IfModule>
 
# используем mod_header
<IfModule mod_headers.c>
  # 3 Month
  <FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
    Header set Pragma "public"
    Header append Cache-Control "public"
    FileETag MTime
  </FilesMatch>
  # 1 Week
  <FilesMatch "\.(js|css|pdf|txt)$">
    Header set Pragma "public"
    Header append Cache-Control "public"
    FileETag MTime
  </FilesMatch>
  # 10 Minutes
  <FilesMatch "\.(html|htm)$">
    Header set Pragma "public"
    Header append Cache-Control "public"
    FileETag MTime
  </FilesMatch>
  # NONE
  <FilesMatch "\.(pl|php|cgi|spl)$">
    Header unset Cache-Control
    Header unset Expires
    FileETag None
    Header unset Pragma
    Header set imagetoolbar "no"
  </FilesMatch>
</IfModule>

Это позволит нашему серверу передохнуть. Если вы как и я используете какую-то тулзу для сжатия картинок(в моем случае thumb.php), то нам необходимо обернуть его в статику(что бы клиент или прокси думали что это обычный файл, так как динамические файлы обычно не кэшируются). Для этого стоит добавить RewriteRule, выглядеть будет так:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^thumb/([0-9]{1})/([0-9]{1})/([0-9]{2})/([0-9]+)/([0-9]+)/(.*) /wp-content/themes/themorningafter/thumb.php?s=$1&src=$6&w=$4&h=$5&zc=$2&q=$3 [L] # Вот это правило
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Также необходимо изменить отдаваемые хедеры этим скриптом на те которые устанавливаются для картинок: ETag, Cache-control: max-age=700000, public, Expires, Last-Modified.

7. Настройка кэширования WordPress

Что бы не дергать БД на каждый пчих, нужно установить кэширование контента в WordPress. Это зачастую просто, так как блог это набор статей и динамики здесь нет. Для этих целей я использую плагин 1 Blog Cacher, работает он четко и проблем с ним не было, а так же он позволяет исключать части шаблона из кэширования(то есть не кэширует динамический контент). Об установке можно прочитать на их сайте. Этот плагин позволяет снизить нагрузку с БД и сервера соответственно, что очень существенно ускорит время отдачи контента сайта

8. SEO раскрутка

Мы все сделали и если правильно, то сейчас можем красоваться отметкой A в тестах YSlow и более 90 балами в Page Speed. Все отлично, но теперь нам нужно и как то о себе заявить миру. Для этого мы будем юзать социальные сети и другие блоги. Что бы увеличить наше количество в интернет мы должны делать кросспосты на как можно больше сторонних ресурсов. К примеру: Twitter, Livejournal, Facebook, Blogger, MySpace, Digit, Linkedin, Delicious и прочие. Это позволит привлекать пользователей с тех мест, где они тусуются на ваш блог, а так же повысит ваш рейтинг в поисковиках.

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

9. Возможные проблемы

1) Не забывайте делать бекапы! В один не прекрасный день это может сэкономить вам кучу времени, денег и нервов.

2) Ошибка: недостаточно памяти для выполнения действия WordPress

Довольно обычная проблема. Это происходит из-за низкого установленного лимита на оперативную память. Что бы решить это просто добавьте в файл wp-config.php строчку:

define(‘WP_MEMORY_LIMIT’, ’64M’);

и установите столько памяти сколько нужно, что бы ошибка не появлялась. Мне хватает 64 Мб.

3) После изменений в шаблоне или в установках страница не изменилась

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

4) Сервер устанавливает ETag но YSlow и Page Speed говорят, что они установлены не верно

На самом деле они установлены верно, но по дефолту. А следовательно эти плагины считают, что вы не знаете что вы делаете и указывают вам на это как на проблему. Что бы сделать все тип-топ прописываем установку ETag вручную:

FileETag MTime

линк на сайт

Стоит отметить, что как бы мне того не хотелось дизайнер с меня не очень.. Но тем не менее вышло вроде миленько.

Главная страница:

Страница контента:

Так как нам нужна красивая кнопочка, то одним слоем картинки никак не обойтись. Нужно как минимум 4 слоя. Три для картинок и один для текста.
Суть всего этого такова:
1-й слой – это повторяющийся бекграунд.
2-й слой – это прозрачная картинка которая привязывается к верхушке кнопки.
3-й слой – это прозрачная картинка которая привязывается к низу кнопки.
4-й слой – это собственно текст кнопки.
Проблемы:

Проблема первая
Все как всегда упирается в IE. Так уж вышло что псевдокласс :hover (который кстати присутствует с CSS 1.0) работает только на элементе <a> и на другие не распространяется. По этому, что бы оживить кнопку при наведении мышки мы оборачиваем ее в елемент <a>.

Когда наша кнопочка не выбрана она имеет класс “none” иначе “active”.

Проблема вторая
И снова IE. В отличии от Firefox и Chrome, в IE padding не увеличивает размер div’a.  По этому в CSS добавил reference-хак который для Firefox и Chrome сжимает длинну кнопки на 30px, которые мы добавили используя padding, а для IE оставляет все как есть.

Посути все очень просто) Главное не забывать, что где-то там во тьме всегда существует злой IE, который так и наровит выкинуть что-то эдакое.

P.S. Не забываем подгружать картинки для кнопочек до их инициализации.

Код кнопочки:

Пример работы