Ускорение WodPress для PageSpeed Insight
WordPress

Ускорение сайта WordPress

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

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

  1. Довольно сложно настроить кэширование. Например, Drupal в этом плане дает гораздо больше возможностей, к тому же из коробки.

  2. Отсутствие встроенных методов асинхронной и отложенной загрузки скриптов.

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

  4. Встроенный функционал довольно велик, очень трудно обрезать лишнее, не порушив структуру системы управления содержимым, на Drupal, несмотря на большую универсальность, отключать лишние функции проще.

Еще куча всякой мелочёвки, которою рассмотрим в процессе. Итак, пора перейти к делу. В данной статье мы рассмотрим ускорение для ПК, а также оптимизацию WordPress для мобильной версии сайта. Кстати, рекомендую не концентрироваться только на PageSpeed Insights, лучше замерять с помощью GTmetrix или Pingdom Tools.

Начало ускорения

Оптимизация WordPress начинается с теста скорости. Тут все довольно просто, есть такие инструменты, как PageSpeed Insights от Google, также Pingdom Tolls, Gtmetrix. Рекомендую использовать все, они покажут, какие слабости есть у сайта. Ниже скриншоты тестов. Вроде все неплохо, за исключением гугловского инструмента. К сожалению, вы запросто можете оказаться в ситуации, что от вас требуют высоких результатов в данном тесте, не понимая даже, что он собой представляет. Конечно, можно улучшить сильнее, но тогда пострадает дизайн. В целом, в мобильной версии у меня от 60 до 64, в ПК от 87 до 93. Когда как. Но в основном проблема заключается в партнерках, счетчиках и частично с файлами js и css. В общем, многое исправить будет нелегко, да и не нужно.

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

Могу с уверенностью сказать, что в мобильной версии высокие результаты часто идут во вред пользователям. Отложенная загрузка всего и вся и чуть ли не голая HTML-страница — единственный путь к заветной сотне. В общем, PSI немного отстал от жизни, голый HTML давно почил в небытие.

Тест PageSpeed Insight

Ускорение сайта WordPress

GTmetrix тест

Pingdom Tools тест

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

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

Без плагинов

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

Хостинг

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

  1. Нет связки Apache+Nginx. А она дает хорошую скорость.

  2. Малое количество процессорной мощности.

  3. Невозможно настроить исходящие письма без костылей в виде плагинов для WordPress.

В общем, вот пара скриншотов для сравнения.

Хостинг Reg.ru
Ресурсы, которые предоставляет Reg.ru

Честно говоря не впечатляет. Одни и те же сайты у меня шустрее работают на Макхост.

Хостинг Макхост
Предложение от Макхост.

У Рег.ру я беру тариф Host-0. Ежемесячная оплата — 225 рублей. Как видите, не особо производителен. У Макхост за 249 рублей покупаю тариф Мак-10. Это 12,5% мощности ядра, 300 000 файлов, ну и остальное по списку на скриншоте. Как видите, производительность получается заметно лучше, по крайней мере, хостинг не ругается на перегруз. В целом, Макхост мне показался не идеальным, но заметно шустрее. Единственное, по чему скучаю, — ISP Manager, очень нравится данная панель, но здесь она платная — 290 рублей в месяц. Вроде недорого, но жаба душит. Впрочем, вы можете мне помочь, если будете регистрироваться по реферальной ссылке, то хостинг и ISP окупятся сполна. Как видите, я честно говорю, что ссылка реферальная. Но от регистрации по ней вы ничего не потеряете, зато поможете моей жадной натуре обрести счастье.

https://mchost.ru/

Ладно, с хостингом определились, на самом деле выбирайте любой наиболее удобный, где есть поддержка PHP версии 7.3, Apache+Nginx или LSAPI. Не обязательно выбирать то, что предложил я. По крайней мере, наиболее шустрый вариант для первоначальной загрузки — Apache + Nginx. А вот если есть постоянные посетители (причем много), то эффективней окажется LSAPI, ибо он значительно ужимает байты при повторной загрузке и лучше подходит для формирования статического кеша. В любом случае, чистый Apache проигрывает обоим вариантам.

Ускорение сайта на WordPress: тест веб-серверов
Тестирование сделано не мной. Откуда скрин, вспомнить не получается.

Настройка .htaccess

Сначала необходимо активировать сжатие. Это позволит сократить количество передаваемых данных. Причем многократно. Отвечает за это модуль Apache mod_deflate. В корне сайта должен располагаться файл .htaccess. В него и внесем изменения. Возьмите за правило: пользовательский код можно вносить только после # END WordPress, то, что находится в WP-блоке, CMS может затереть при обновлении.

Итак, добавляем следующее содержимое:

# сжатие text, html, javascript, css, xml:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript text/xml text/plain image/x-icon image/svg+xml application/rss+xml application/javascript application/x-javascript application/xml application/xhtml+xml application/x-font application/x-font-truetype application/x-font-ttf  application/x-font-otf application/x-font-opentype application/vnd.ms-fontobject font/ttf font/otf font/opentype
#DeflateCompressionLevel 8 //не указывать, спросите степень у хостера
# Совместимость с устаревшими браузерами
  BrowserMatch ^Mozilla/4 gzip-only-text/html 
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Готово, сжатие активировано. DeflateCompressionLevel отвечает за степень компрессии по шкале от 1 до 9. Чем выше уровень, тем сильнее нагрузка на процессор как сервера, так и клиента. Но сейчас любой компьютер, даже слабенький, справится с задачей, так что можно не переживать. В .htaccess нельзя данную переменную размещать. Только в конфигурации Apache. Так что уточняйте у хостера степень компрессии.

Теперь необходимо включить кеширование на уровне браузера. Для примера выкладываю код с секундами, часами и даже месяцами. Итак, будем редактировать модуль mod_expires.c, внося изменения в тот же файл .htaccess

# кеш браузера: разрешаем истечение срока 
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 120 minutes"
# Включаем кэширование изображений и флэш на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование css, javascript и текстовых файлов на одиннадцать часов
ExpiresByType text/css "access plus 11 hours"
ExpiresByType text/javascript "access plus 11 hours"
ExpiresByType application/javascript "access plus 11 hours"
ExpiresByType application/x-javascript "access plus 11 hours"
# Включаем кэширование html и htm файлов на 2 часа
ExpiresByType text/html "access plus 120 minutes"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
 
# Нестандартные шрифты сайта 
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</ifModule>

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

Версия PHP и обновление WP

Хотя в требования версия указана не ниже 5.6.20, но лучше для WordPress использовать актуальную 7.3. По сети гуляет множество тестов, которые наглядно демонстрируют, насколько сильно выше производительность у последней версии. Вы получите прибавку от 20 до 100% в зависимости от операции.

Потому, лучше обновить WP и плагины. Если есть серьезно устаревшие, которые давно не актуализировались, то заменить на другие. Но учтите, есть плагины, которые не обновлялись по несколько лет, а с кодом у них все в порядке. Смотрите внимательнее. Кстати, актуальная версия WordPress работает стабильнее и шустрее, чем предыдущая ветка, потому рекомендую не откладывать переход. Чем дольше ждете, тем сложнее будет обновиться.

Контент

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

Ускорение сайта WordPress
Картинки, картинки и еще раз медиафайлы

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

  1. Менять размер картинок на оптимальный. Например, 640X480 пикселей.

  2. Использовать сжатые форматы. Например, JPEG. PNG весит значительно больше.

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

  4. Использовать миниатюры и открывать полноразмерную картинку в лайтбоксе.

Так что, позаботьтесь, чтобы на страницах не было ничего «тяжеловесного», особенно изображений. И дополнительно рекомендую воспользоваться функциями ленивой загрузки (Lazy Load), кликайте по ссылке, там все подробно описано.

CDN

Сеть доставки контента. Фактически, весь статический контент:

  • изображения;

  • скрипты;

  • файлы стилей;

  • видео;

  • предварительно cгенерированные html

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

Ускорение сайта WordPress на уровне Back-end

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

Выбор темы

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

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

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

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

Лично я предпочитаю брать темы из официального репозитория. Простые, без излишеств и слишком широкого функционала. Все, что нужно будет добавить, решу с помощью плагинов или собственного кода.

Плагины

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

Плагины WordPress

Если нужна только одна функция и плагина под нее нет, то тогда есть смысл создать нужный код самому. На самом деле, не важно, куда внесете код. В виде плагина или в functions.php он будет требовать одинаковое количество ресурсов. Перебарщивать с плагинами тоже не стоит. Чем их больше, тем больше ресурсов потребуется на работу с ними, что может заметно замедлить сайт.

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

Оптимизация JS и CSS

Скрипты, порой, основная часть нагрузки на сайт. Каждый скрипт генерирует запросы, имеет определенный вес, соответственно, притормаживает сайт. Многие рекомендуют объединить скрипты в один файл и построить зависимости для него. Это очень сложный метод, способный впоследствии принести массу проблем.

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

Отложенная и асинхронная загрузка JS

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

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

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

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

Оптимизация HTML

Все тоже сводится к минификации и удалению некоторых тегов и атрибутов. Задачу также целесообразнее доверить специальным плагинам, ведь прописать все необходимые алгоритмы довольно трудоемко. По ссылке в заголовке о CSS есть информация об этом.

Перенос скриптов в подвал

Да, убрать скрипты из head и перенести в подвал тоже можно. Достаточно добавить в файл functions.php такой код:

if(!is_admin()){ 
remove_action('wp_head', 'wp_print_scripts'); 
remove_action('wp_head', 'wp_print_head_scripts', 9); 
remove_action('wp_head', 'wp_enqueue_scripts', 1); 
add_action('wp_footer', 'wp_print_scripts', 5); 
add_action('wp_footer', 'wp_enqueue_scripts', 5); 
add_action('wp_footer', 'wp_print_head_scripts', 5); 
}

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

Плагины для ускорения WordPress

Этим исчадиям ада решил посвятить отдельную статью. Там много сложных настроек, к которым стоит ответственно относиться, потому, переходите по ссылке в заголовке и вникайте. Функционал попросту огромен, лично я использую PageSpeed Ninja. Мой любимый инструмент.

Полетели!

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

7 комментариев

    • ren334

      Спасибо за ответ, постараюсь в ближайшее время актуализировать информацию.

  • Николай

    Советую w.tools как дополнение к хостингу. Свой CDN, кешируют как статику так и динамику, полный охват РФ\СНГ, сервера в 31 стране. Сайт реально ускорился.

    • ren334

      Не знаю насчет w.tools, может реально хорош, но если сайт коммерческий, то в CDN реально есть смысл, помогает быстрее отображать сайт и снизить количество запросов к основному хостингу.

  • Юлия

    Здравствуйте! Спасибо за подробную информацию! У меня вопрос: код для файла .htaccess нужно использовать отдельно или можно в сочетании с плагином кэширования?

    • ren334

      Здравствуйте, обычно плагины кеширования создают отдельный .htaccess в папке wp-content, свои директивы лучше вносить в тот файл, что находится в корне сайта. В принципе, все то, что не реализуется посредством плагина кеширования (например, если нет сжатия), можно без проблем вносить в .htaccess.

Добавить комментарий

Ваш e-mail не будет опубликован.