руслан белый

Я вебмастер с ИП. Опыт работы — 10 лет.

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

В свободное время ищу ошибки на сайтах и учу делать контентники

Рассылка
Популярное
Мероприятия

Пока мероприятий нет.

Как ускорить сайт на Вордпресс

скорость загрузки сайта

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

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

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

Кстати о том, что такое кэширование и как его настраивать я уже писал на этом блоге. Например, о том, что касается кэширования в целом, можно узнать из этой статьи, а более практический материал, о настройке плагина Hyper Cache, можно глянуть тут.

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

Оба метода сложные и требует значительно опыта. С одной стороны опыта разработчика, с другой опыта системного администратора.

Кстати, сегодня с утра, для мена стало приятным сюрпризом обновление статистики alexa.com по средней скорости загрузки страниц моего блога:

скорость загрузки страниц блога webreligion по версии alexa.com

Так что можно меня поздравить с переходом на новый уровень задротства в плане оптимизации производительности WordPress. Но вернемся к нашей теме.

Начинать работу по оптимизации производительности я рекомендую с прогона основных страниц своего сайта (главная, пост, страница) через сервис Google Page Speed. Это даст вам картину того, над чем стоит поработать.

Почему именно эти 3 страницы? Потому что в большинстве тем за их представление отвечают 3 разных файла шаблона, в каждом из которых могут быть свои узкие места.

Важное замечание — не нужно стремиться к показателю 100 из 100, отличные результаты — это 80-90 баллов. Вот данные моей главной страницы:

производительность блога webreligion.ru по версии google page speed

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

Оптимизация шаблона WordPress блога

Оптимизацию шаблона можно разделить на 3 части:

  1. Оптимизация картинок и подключаемых скриптов
  2. Оптимизация числа запросов к базе данных
  3. Чистка шаблона от ненужного кода

Картинки и подключаемые скрипты

Самое главное правило — шаблон должен быть простым. Простым как внешне (визуально), так и внутренне (на уровне кода). Это действительно важно.

Логика тут простая

  1. Чем меньше картинок, тем меньше объем страницы, соответственно, меньше запросов к серверу для закачки каждой отдельной части общего дизайна.
  2. Чем меньше всяких визуальных эффектов, тем меньше JavaScript кода, который при загрузке начинает исполнятся и «замораживает» загрузку.

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

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

Так сделано у меня, например, на главную страницу и страницы архивов я не подключаю скрипты от социальной сети vk.com, которые достаточно сильно снижают производительность.

В то же время, на других страницах этот код подключен, так как там у меня есть кнопка «Нравиться», и на некоторых виджет группы «Вконтакте».

Делается такая манипуляция нехитрым кодом:

<?php if (!(is_front_page() || is_archive())): ?>
// тут код, который надо спрятать
<?php endif; ?>

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

Запросы к базе данных

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

Выглядят эти «запросы» примерно так:

функции, выполняющие ненужные запросы к базе данных

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

Каждую из этих функции можно заменить статическим содержимым. К примеру, bloginfo (‘name’) заменить на название сайта, bloginfo (‘template_url’) на полный путь к файлам шаблона и т.д.

Все это позволит значительно ускорить работу WordPress сайта.

Чистка шаблона от ненужного кода

То, о чем я вам сейчас расскажу, я встречаю на каждом 3 сайте, который попадает ко мне в руки. Это один из самых жестких косяков, которые только можно сделать создавая свой сайт. Сравнить его можно, пожалуй, с тем, что каждый второй не добавляет свой сайт в инструменты веб-мастеров Яндекс и Гугла.

Речь идет о кривой вставке кодов инструментов аналитики — Яндекс Метрики и Google Adwords. Как поступают все? Вставляют !!! JavaScript !!! коды сразу после открывающего тега <body>, тем самым блокируя отображение страницы на самом начальном этапе загрузки.

То есть, пока коды метрик не подгрузят все необходимые для своей работы скрипты и не обработаются интерпретатором браузера, страница будет висеть в стадии загрузки.

И хорошо, если в коде стоит только Google Analytics или Яндекс Метрика, но ведь бывает так, что там стоят коды Rambler, Mail.ru, Spylog, Openstat и многое др.

Ребята, запомните раз и навсегда, все скрипты только перед закрывающим тегом </body> в самом низу страницы + не пользуйтесь ничем кроме Гугла и Яндекса. Все остальное давно умерло и не дает никакого эффекта!

Оптимизация хостинга

Условно работу с хостингом можно разбить на 2 части:

  1. Переход на более мощный тип хостинга или тонкая настройка имеющегося
  2. Тонкая настройка серверов приложений (веб-сервер, сервер баз данных и др.)

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

Вообще, о том, что такое хостинг и какой он бывает, я писал в первой главе про основы создания сайтов, поэтому повторятся тут не будут. У меня только одна рекомендация — срочно переходить на VDS!

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

Кстати, я сам некоторое время назад перешел на VDS от компании Digital Ocean. О моих впечатлениях можете почитать тут.

Что касается тонкой настройки имеющегося хостинга, то тут у нас только один инструмент — это файл .htaccess, который влияет на работу веб-сервера apache. Тут для новичков у меня будет одна рекомендация, поработать с модулем expires, который позволяет задать время жизни статических файлов в браузере пользователя.

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

А как вы можете помнить, чем меньше запросов к серверу, тем быстрее работает сайт.
У меня этот модуль настроен так:

<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/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>

То есть все что вам нужно сделать, это добавить указанный код в самый конец файла .htaccess. На этом про оптимизацию производительности все.

Жду вопросы, пожелания и рекомендации.

Спасибо, что остаетесь на связи!