Тема Дня »

Обновил тему WordPress на этом блоге. Старый вариант Arthemii меня устраивал во всем, кроме моральной древности. Функциональность тем значительно увеличилась с 2008 года.
Проблема замены состояла в том, что старая тема на моём блоке постоянно допиливалась в ручную, и перенести все созданное в новую тему было практически невозможно. Но пришлось чем-то жертвовать.
Новая Arthemia была скачена, максимально отстроена и установлена.

Читать полностью »
Партнерский интернет-магазин

Создание, оптимизация и продвижение интернет-магазина.

Создать форум

Как создать “с нуля” и сделать популярным форум. Полезно, интересно и подробно о phpbb3.

WordPress

Рекомендации по настройке и оптимизации WordPress. Плагины, темы, шаблоны.

Дайджест блогосферы

Каждую неделю публикую подборку из пяти наиболее интересных статей.

Конкурсы

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

Главная » WordPress

Разгоняем WordPress с помощью PageSpeed.

Добавлено на 20.01.2013 – 11:02 пп27 Комментарии

разгоняем WordPress

Продолжая тему уменьшения времени загрузки страниц блога (сайта), оптимизирую свой WordPress-блог. Помогает в этом нужном деле сервис PageSpeed, анализирующий сайт, и выдающий общие рекомендации по оптимизации его времени загрузки. Пользоваться PageSpeed можно, как отдельно (среди инструментов Google), так и в виде удобного расширения для браузеров Google Chrome или Firefox (скачать здесь).

Тема оптимизации WordPress по рекомендациям PageSpeed достаточно объёмна, поэтому будет изложена мной в серии статей. Сегодня первая часть.

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

анализируем сайт с PageSpeed

Принцип работы с PageSpeed – разогнать сайт до 100 возможных единиц из 100. На начало работы мой блог показывает:

  • для главной – 80/100;
  • для записи – 87/100;
  • для метки – 85/100;
  • для рубрики – 84/100.

Рекомендации системы по оптимизации, в зависимости от важности, отличаются цветом.

Высокий приоритет – максимальный результат, при минимальных усилиях.

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

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

Рекомендации PageSpeed для оптимизации времени загрузки блога:

  1. Используйте кэш браузера.
  2. Включите сжатие.
  3. Встройте небольшие CSS.
  4. Уменьшите число переадресаций.
  5. Объедините изображения в CSS-спрайты.
  6. Отложите синтаксический анализ JavaScript.
  7. Предоставляйте ресурсы с одного и того же URL.
  8. Используйте Keep-Alive.
  9. Сократите HTML.
  10. Встройте небольшие ресурсы JavaScript.
  11. Не используйте некорректные запросы.
  12. Не используйте правило CSS @import.
  13. Сократите JavaScript.
  14. Оптимизируйте изображения.
  15. Укажите валидатор кэша.
  16. Сократите CSS.
  17. Укажите размеры изображений.
  18. Удалите строки запросов из URL статических ресурсов.
  19. Укажите заголовок Vary: Accept-Encoding.

Давайте разбираться и устранять недостатки по-порядку.

1. Используйте кэш браузера.

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

Другими словами, если пользователь заходит на Ваш сайт повторно (возвращается) то определённые файлы уже не загружаются с сервера, а вставляются в страницу с его (пользователя) компьютера. Важность такой оптимизации выглядит сомнительно, так как (по крайней мере на моём блоге) процент повторных заходов совсем не большой. Но раз требует, удовлетворим.

Вот такой код, добавленный в файл .htaccess позволил использовать кэш браузера практически на 100%.

# кеширование в браузере на стороне пользователя
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>

# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>

2. Включите сжатие.

Gzip-сжатие — это технология сжатия страниц сервера во время запроса, отсылка в сжатом состоянии, а потом распаковка браузером, которая позволяет сжимать страницы приблизительно в 3-4 раза (хотя возможно и больше если на странице много текстовой информации) и вследствие чего экономит трафик и ускоряет загрузку страниц.

Чтобы включит gzip-сжатие для WordPress нужно открыть файл index.php из корневого каталога и между строчками

<?php

и

/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.

вставить:

ob_start("ob_gzhandler");

включить gzip-сжатие для WordPress

Мой файл index.php после внесенных изменений:

<?php
ob_start("ob_gzhandler");
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */


/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */

define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');

Эффективность gzip-сжатия страниц сайта наглядно демонстрирует сервис GIDZipTest.

Размер страницы уменьшился с 30 до 9 Кбайт.

gzip-сжатия уменьшает размер страницы

3. Встройте небольшие CSS.

Обычно в каждой теме WordPress существует один файл style.css. Но после различных изменений, в том числе и установки некоторых плагинов, могут появится еще файл .css добавляющие определённые свойства. Смысл в том, чтобы скопировать содержимое дополнительных файлов .css  в основной, а их “отключить” (не загружать).

Например, в моей теме подключается дополнительный файл стилей widgets.css.

Я копирую содержимое файла в style.css, а в шаблоне “шапки темы” (header.php) удаляю строчку

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/widgets.css" type="text/css" media="screen" />

Сложнее, если файл .css подключен через плагин (придётся редактировать файлы плагина), но сделать это можно всегда.

На этом заканчиваю первую часть серии статей о “разгоне” WordPress с помощью сервиса PageSpeed.

Продолжение следует…

GD Star Rating
loading...
Разгоняем WordPress с помощью PageSpeed., 4.6 out of 5 based on 32 ratings

Буду благодарен, если поделитесь этой статьей в социальных сетях:

Метки: , ,

27 Комментарии »

  • Светлана:

    На первый взгляд всё логично. Начинаю с критики. Если ты произвел все манипуляции на этом сайте, почему тогда на данную минуту показатели для этой страницы 87/100? А? ))

    [Ответить]

    Делитант:

    Я не сделал всего. Только 3 пункта, как в статье. Когда закончу всю серию, тогда и будет результат 🙂

    [Ответить]

    Илья:

    На самом деле 87 это высокий показатель. На днях прочитал на одном блоге, что самый высокий показатель в интернете у Яндекс 96. 100 из 100 не у кого нет. Спасибо за код для кэширования браузером.

    [Ответить]

  • Светлана:

    Ок, я подожду, а када увижу результат, тада последую тебе 😉

    [Ответить]

  • Добрый день! Дмитрий, не нашел обратной связи на сайте, напишу здесь. Хотел предложить обменяться тематическими постовыми) Мой блог в имени. С, уважением!

    [Ответить]

    Делитант:

    Валерий, у тебя очень интересный блог. Так что с моей стороны ссылки будут обязательно. Но договорной обмен, я не очень одобряю. Всё должно быть естественно 🙂

    [Ответить]

    Алексей Ершов:

    Вот это одобряю. Сам придерживаюсь такой позиции. А то всеми правдами и неправдами сейчас готовы раскрутиться.

    [Ответить]

  • Спасибо за статью. Тоже пользовался. Но как то сильно по разному временами показывает один и тот же сайт к примеру. Или запросто может показать неплохую оценку сайту который явно очень долго грузится. Что там за очки у него такие, не очень понятно. Сейчас все чаще пользую http://webwait.com/ Все в секундах, просто и понятно.

    [Ответить]

    Делитант:

    Да, всё это относительно, но здравое зерно в рекомендациях есть, и уж лишними они не будут.

    [Ответить]

  • И кстати, по моему, уж твоему то сайту оптимизация пока не нужна особо. И так летает все 🙂

    [Ответить]

    Делитант:

    А мне, наоборот, жалуются, что тормозит…

    [Ответить]

  • Здравствуйте!
    Подскажите, что делать, если у меня слайдшоу на главной странице со своими css файлами?
    Упоминаются они в functions.php:

    if(is_front_page()) :

    wp_enqueue_script(‘slideshow’,get_bloginfo(‘template_url’).’/scripts/slideshow/jquery.nivo.slider.pack.js’, array(‘jquery’), ‘2.1’, true);

    wp_enqueue_style(‘slideshow’, get_bloginfo(‘template_url’).’/scripts/slideshow/nivo-slider.css’, false, ‘2.1’, ‘all’ );

    wp_enqueue_style(‘slideshow_custom’, get_bloginfo(‘template_url’).’/scripts/slideshow/custom-nivo-slider.css’, false, ‘1.4.8’, ‘all’ );

    endif;

    PageSpeed советует: «Необходимо встроить следующие ресурсы небольшого размера в http://karadumanov.ru/» То есть прямо не главную html. Которой на WP нет.))
    Не подскажите, куда же эти css дописать?
    Это возможно?

    [Ответить]

    Делитант:

    У вас в файле functions.php для главной страницы подключается nivo-слайдер. Нужно смотреть какие ещё скрипты и через какие условия активируются. Из того что я вижу, думаю, можно скопировать содержимое файла custom-nivo-slider.css в основной файл темы style.css, а в файле functions.php удалить его вызов

    [Ответить]

  • Попробовал по вашему методу подключить gzip-сжатие в index.php моментально слетел весь дизайн блога.Начали показываться какие-то квадратики. Убрав код все вернулось на свое место. Наверное мешает установленный плагин WP Super Cache или не ко всем темам подходит этот метод.Все равно спасибо за статью.

    [Ответить]

  • Пытаюсь добиться ускорения, но вот в чем вопрос! Как оптимизировать изображения в формате PNG? Сервис PageSpeed пишет Оптимизируйте картинки, а они в png. Не знаю что и делать( Может есть какие то онлайн ресурсы для сжатия такого формата?

    [Ответить]

  • Я указал код представленный вами в файле index.php но сжатия не произошло. На этом ресурсе пишет что сжатия на моих сайтах не происходит.
    <?php
    ob_start("ob_gzhandler");
    /**
    * Front to the WordPress application. This file doesn't do anything, but loads
    * wp-blog-header.php which does and tells WordPress to load the theme.
    *
    * @package WordPress
    */

    /**
    * Tells WordPress to load the WordPress theme and output it.
    *
    * @var bool
    */
    define('WP_USE_THEMES', true);

    /** Loads the WordPress Environment and Template */
    require( dirname( __FILE__ ) . '/wp-blog-header.php' );

    [Ответить]

  • Добрый день. Пользуюсь сервисом http://developers.google.com/. Как на моём сайте, так и на вашем сервис пишет

    «Исправьте обязательно:
    Используйте кэш браузера»

    Хотя вроде бы как вы, так и я настраивал кэширование. Как думаете на почему так происходит? Получается с этим можно не заморачиваться?

    [Ответить]

    Делитант:

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

    [Ответить]

  • Попробовал ваши варианты, но к сожалению все директивы внесенные в htacces приводят к ошибке 500. Вот глядите webprofit.kz он работает на nginx. Что предложите мне?

    [Ответить]

    Делитант:

    Vladimir, извините, но ничего предлагать вам не буду 🙂

    [Ответить]

  • Для решения этих задач был написан плагин docpad-plugin-frontend. Он добавляет метод assets(prefix), который позволяет доставать отсортированный список ресурсов из текущего документа и всей цепочки шаблонов, применяемых к документу. Если в корневой папке проекта существует файл .build-catalog.json, то плагин считывает его и возвращает список ресурсов с префиксом в виде даты модификации файла.

    [Ответить]

  • Благодарю за статью!
    Выполнив приоритетные рекомендации сайт буквально полетел!
    Для компа сейчас выдает все 100
    А вот для мобилы лишь 63

    [Ответить]

  • Сжатие не существенно в современных реалиях, тем более что оно влияет на процессорное время

    [Ответить]

  • Вероничка!:

    GoogleBot — это программа-агент, которая сканирует ссылки по всей сети, распределяя страницы и контент по категориям и отправляя все это Google, который обрабатывает полученные данные с помощью собственного алгоритма.

    [Ответить]

  • Спасибо за интересную статью! Для компьютера выдает 90/100 не совсем понял, как исправить данное предупреждение (желтым подсвечено). Не подскажите?
    http://shot.qip.ru/00QnG0-1nhEFBTu6/

    [Ответить]

  • Я для gzip сжатие(на Apache) прописываю в .htaccess вот эти строки

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    по приведенному вами сайту для теста (GIDZipTest) у меня показало сжатие 80%

    [Ответить]

  • К сожалению, манипуляция с ob_start(«ob_gzhandler»); у меня не удалась, содержимое сайта превратилось в иероглифы, с чем это может быть связано?

    [Ответить]

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

Добавить свой комментарий ниже, или Архив с вашего собственного сайта. Вы также можете Comments Feed через RSS.

Будьте вежливы. Держите его в чистоте. Оставайтесь на тему. Не спам.

Вы можете использовать эти теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Это Gravatar поддержкой сайта. Чтобы получить свой собственный глобально признанных-аватара, пожалуйста, зарегистрируйтесь на Gravatar.