Подробное руководство по оптимизации сайта на WordPress

Ускорьте свой сайт! Используйте приведенные ниже методы оптимизации не только для улучшения своего рейтинга в ySlow, но и позиций в Google.

В этом уроке мы рассмотрим все аспекты использования W3 Total cache, Google page speed, CSS-спрайтов и правил htaccess для достижения высоких рейтингов в ySlow.

Перед тем как начать

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

Шаг 1: Установка необходимых компонентов

Установка плагина для кэширования : Во-первых, какой бы плагин для кэширования Вы не использовали, выключите его прямо СЕЙЧАС!

Если конечно это не всемогущий W3 Total cache, с которым мы будем работать (Мы знакомы с немалым количеством плагинов для кэширования, но W3 – наш любимый. Если Вы по какой-то причине используете другой плагин – хорошо, но в этом руководстве мы будем работать с W3). Как поменять пароль вы все знаете, так что сразу переходим  к разделу добавления новых плагинов в WordPress, найдите “W3 Total cache”, загрузите и установите его, но не включайте… по крайней мере пока...

Установка плагина для управления базой данных: Теперь нам нужно установить ещё один плагин под названием “WP-DBManager”. Опять же установите его и убедитесь в том, что Вы не используете каких-либо других плагинов для работы с базой данных.

Прежде чем пойти дальше и начать оптимизацию Вашего сайта, давайте посмотрим на то, с чем мы будем иметь дело. Откройте Google Chrome или установите его. Затем установите плагин ySlow. После этого Вы увидите новую иконку в правом верхнем углу браузера. Нажмите на неё (убедитесь в том, что Вы находитесь на главной странице своего сайта).

ySlow проверит Ваш сайт, сообщит, что хорошо, что плохо. Сначала сосредоточим своё внимание на пунктах, у которых оценка ниже B. Далее пройдемся по каждому из пунктов, необходимых для ускорения работы Вашего сайта.

Шаг 2: Включите W3 Total cache

Когда Вы включите W3 Total cache, то увидите новую вкладку в боковой панели – “Performance”. Нажмите на неё. Сейчас мы пробежимся по всем разделам этого плагина, но в целях экономии времени Вы можете импортировать файл с настройками W3, находящийся в “исходниках” этого руководства и перейти к шагу 2C.

Здесь находятся все настройки плагина. Взгляните на “General Settings” и поставьте галочки в следующих разделах:

• Page Cache (выберите “Disk: Enhanced” в раскрывающемся списке) – Кэширование страниц уменьшит время отклика Вашего сайта и нагрузку на веб-сервер.
• Minify (выберите “Manual”, остальные настройки не трогайте) – С помощью этой опции можно уменьшить размер HTML, CSS и JS файлов в среднем примерно на 10%.
• Не ставьте галочку возле “Database cache” (мы займёмся этим позже с помощью другого метода).
• Object Cache (выберите “Disk” в раскрывающемся меню) – Кэширование объектов существенно повышает производительность на высоко динамических сайтах (которые используют Object Cache API).
• Browser Cache – Включите HTTP-сжатие и добавьте заголовки, чтобы снизить нагрузку на сервер и уменьшить время загрузки файлов.
• А вот CDN, Varnish и cloudflare оставьте нетронутыми.

Шаг 2B: настройка Minify

Нажмите вкладку/ссылку “Minify” вверху страницы/панели W3. Убедитесь в том, что первые три чек-бокса отмечены в секции “HTML и XML”. Затем нажмите на кнопку “Help” вверху.

Когда всплывающее окно загрузится, Вы увидите список javascript-файлов и каскадные таблицы стилей, на которые ссылается Ваш сайт. В общем-то, нам нужно выбрать всё, кроме:

• JQuery-файлы
• Рекламные блоки Google (или любые другие)
• Любые файлы stats.wordpress.js (если у Вас установлен jetpack)

Минимизация – один из важнейших моментов оптимизации. После того как Вы выбрали все свои файлы (и проделали это для всех своих тем, если у Вас их несколько) нажмите “Apply and close”, а потом “Save all settings” (если вдруг Ваш сайт всё ещё будет работать по-старому).

Шаг 2C: настройка Browser Cache

После того как Вы попадёте на вкладку/страницу “Browser Cache”, измените значение “Expires header lifetime” на 691200 секунд. Это сразу же повысит Ваши баллы в ySlow.

Теперь вернитесь в “General Settings” и нажмите “empty all caches”, затем зайдите на главную страницу своего сайта и запустите тест ySlow ещё раз. Вы должны увидеть положительные изменения.

Шаг 3: Давайте вернёмся к оптимизации базы данных

Под вкладкой “Performance ” в боковой панели WordPress должна быть вкладка с названием “Database” (если нет, то вернитесь назад и активируйте её).

Вам понадобятся три вещи из списка: резервное копирование, восстановление и оптимизация.
Для резервного копирования нажмите “Backup DB” и выполните эту операцию (о gzip-сжатии не беспокойтесь).
Далее перейдите к пункту меню “Repair DB” и нажмите кнопку “Repair” внизу.

И в конце оптимизируем базу данных. Нажмите на пункт “Optimize DB”, а далее, как Вы уже догадались, на кнопку “Optimize”.
Чтобы не повторять этот процесс каждый раз снова и снова, зайдите в “DB Options”. Внизу Вы увидите секцию “Automatic Scheduling”. Убедитесь в том, что резервное копирование выполняется КАЖДЫЙ ДЕНЬ (нельзя быть слишком осторожным), оптимизация – каждые несколько дней, а восстановление – раз в неделю. В конце сохраните изменения.

Шаг 4: CSS-спрайты

Теперь в ySlow Вы, вероятно, увидите в секции “Make fewer HTTP requests” строку текста примерно следующего содержания: “Это страница содержит 10 внешних фоновых изображений. Попробуйте объединить их в CSS-спрайты”.

Откройте главную страницу своего сайта в новой вкладке, а этот сайт в другой. Затем перетащите с помощью курсора мышки надпись “SpriteMe” на вкладку с Вашим сайтом. В правом верхнем углу появится окно. Когда приложение закончит своё “волшебство”, сохраните изображение у себя на компьютере и загрузите на Ваш сайт (предпочтительно в то место, где находится тема, которой Вы пользуетесь).

Теперь нажмите кнопку “export CSS” в появившемся окне “SpriteMe”. Скопируйте и вставьте CSS-код, который Вам предложили, прямо в конец файла “style.css” темы WordPress или в любое другое место, где он будет использоваться вместо стандартного кода (так как мы не хотим перезаписывать наш стандартный код). Вам нужно будет убедиться в том, что путь в “background-image: url” указывает на адрес, где хранится Ваш новый спрайт.

После того, как это будет сделано, пожалуйста, нажмите “empty all caches” во вкладке “Performance”.

Шаг 5: Оптимизация изображений (сжатие)

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

Вам нужно будет убедиться в том, что каждое изображение всех Ваших тем оптимизировано. Для этого воспользуйтесь небольшим приложением под названием “ImageOptim”.

После того как все изображения использующиеся темами WordPress будут сжаты до нужного размера, Вы можете взглянуть на плагин “Smush.it”, который будет автоматически оптимизировать изображения, использующиеся в ваших постах.

Шаг 6: GZIP-сжатие

Это один из самых важных моментов оптимизации. Чтобы включить PHP GZIP-сжатие, откройте файл php.ini любым текстовым редактором и найдите следующую директиву:

zlib.output_compression
Значение по умолчанию – Off. Измените его на On:

zlib.output_compression = On
Перезапустите Apache HTTPD-сервер после изменения. Теперь все страницы отправляемые сервером клиентам (браузерам) будут сжаты.

В настройках PHP также есть директива, отвечающая за уровень сжатия. Чтобы установить нужный уровень сжатия, отредактируйте значение соответствующей директивы в php.ini. Допустимые значения – от 1 до 9 (1 – минимум, 9 — максимум). Уровень сжатия по умолчанию – 6, это максимальная компрессия, которая не снижает производительность сервера.

zlib.output_compression_level = 6
Также можно активировать PHP-сжатие, добавив эту строку в начале разметки каждой веб-страницы: <?php ob_start("ob_gzhandler"); ?>. Мы не рекомендуем использовать Вам этот метод, т.к. придётся вносить изменения в каждую страницу. Изменения же в php.ini применяются ко всем страницам без исключения.

Если же Вы не имеете прав для редактирования файла php.ini или не имеете к нему доступа (такое может быть при использовании виртуального хостинга), то PHP GZIP-сжатие может быть настроено через файл .htaccess, который обычно расположен в корне сайта. Чтобы активировать сжатие, добавьте следующую строку в файл .htaccess:

php_flag zlib.output_compression on
Недостаток этого метода оптимизации в том, что только страницы, сгенерированные PHP-процессором, будут сжаты с помощью GZIP-кодирования. Всех подключаемых CSS и JS-файлов это не касается. Для сжатия файлов всех типов используют mod_deflate или mod_gzip на HTTPD-сервере.

Также посмотрите статью проверка на правильный запуск GZIP сжатия (eng).

Шаг 7: Ещё способы

По мере того, как мы подходим к заключительной части руководства, осталось еще несколько не известных вам вещей.

Теперь, когда Вы используете CSS-спрайты вместо изображений, нужно очистить кэш Вашего браузера и ещё раз “empty all caches” во вкладке “Performance”.

Теперь вернёмся назад, выйдите из настроек WordPress, зайдите на главную страницу Вашего сайта и запустите ySlow-тест. Опять же, показатели должны возрасти. В разделе CDN есть опция “Add as CDN”. Это должно повысить скорость загрузки сайта ещё больше.

Если Вы хотите корректно добавить CDN, то мы можем посоветовать вот это руководство (eng).

После этого можете ещё раз взглянуть на высокие результаты Вашего сайта в ySlow. Также можете сравнить результаты своего сайта и главной страницы Google.

Один пункт в оценке ySlow, о котором еще не рассказывали – это “Cookie free domain”. Объясняем: когда браузер делает запрос на статическое изображение и отправляет куки вместе с запросом, серверу нет никакого дела до них (то есть он их не использует). Таким образом, они создают лишний трафик без какой-либо пользы. Вы должны убедиться в том, что статические компоненты могут быть запрошены с сервера без использования куки. Создайте поддомен и разместите на нём все статические компоненты веб-сайта.

Если Ваш домен типа www.example.org, то Вы можете переместить всю статику на onstatic.example.org. Если Вы настроили куки для домена верхнего уровня example.org, а не для www.example.org, то все запросы к static.example.org будут включать эти куки. В этом случае Вы можете приобрести полностью новый домен и разместить все статические компоненты на нём, настроив его так, чтобы он не использовал куки. Yahoo использует yimg.com, YouTube – ytimg.com, Amazon – images-amazon.com и т.д.

Ещё одно преимущество использования cookie-free доменов в том, что некоторые proxy-серверы могут отказать в кэшировании компонентов, которые запрашиваются с куками. Так что если Вы сомневаетесь над тем, какой основной домен использовать для главной страницы своего сайта, то учтите влияние куки. В целях повышения производительности лучший вариант – использовать поддомен с www и записывать куки на него.

Мы не будем вдаваться во все подробности, главное, что Вы знаете об этом. Обсудим этот метод подробнее в другом уроке. Он улучшает производительность, но сделать всё правильно не так-то просто.

Заключение

Мы рассказали Вам о способах оптимизации скорости работы и уменьшения времени отклика веб-сайтов. Если Вам нужна более подробная информация или помощь в каком-то моменте – оставляйте свои комментарии ниже.