Ускорение сайта WordPress в 2021 году

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

  1. Довольно сложно настроить кэширование. Например, Drupal в этом плане дает гораздо больше возможностей, к тому же из коробки.
  2. Отсутствие встроенных методов асинхронной и отложенной загрузки скриптов. Постоянно приходится выдумывать костыли.
  3. Для расширения функционала может потребоваться немалое количество плагинов, которые также замедляют веб-приложение.
  4. Встроенный функционал довольно велик, очень трудно обрезать лишнее, не порушив структуру системы управления содержимым, на Drupal, несмотря на большую универсальность, отключать лишние функции проще.
boost

Оптимизация WordPress начинается с теста скорости. Тут все довольно просто, есть такие инструменты, как PageSpeed Insights от Google, также Pingdom Tools, GTmetrix. Рекомендую использовать все, они покажут, какие слабости есть у сайта.

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

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

Настройка .htaccess

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

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

<code># сжатие 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 # Совместимость с устаревшими браузерами BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule>

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

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

<code># кеш браузера: разрешаем истечение срока <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>

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

Хотя в требования версия указана не ниже 5.6.20, но лучше для WordPress использовать актуальную 7.4. По сети гуляет множество тестов, которые наглядно демонстрируют, насколько сильно выше производительность у последней версии. Вы получите прибавку от 20 до 100% в зависимости от операции. Ну, по сравнению с версией 5.6. Между 7.2 и 7.4 разница будет 2-3%. Тоже неплохо. Мы сейчас бьёмся за каждый процентик.

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

Контент

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

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

  1. Менять размер картинок на оптимальный. Например, 1024X768 пикселей вместо 4K.
  2. Использовать сжатые форматы. Например, JPEG. PNG весит значительно больше. Также повсеместно внедряется поддержка Webp, который гораздо лучше сжат, чем PNG, полноценная поддержка данного формата есть уже у большинства браузеров, к сожалению, пока что у многих устаревшие версии, а подключение Webp с помощью плагинов очень кривое. В общем, лучше пока не рыпаться и остановиться на JPEG.
  3. Дополнительно сжимать, с помощью утилиты FileOptimizer на компьютере. Также есть плагины, позволяющие сделать это. Тот же Smuсsh. Но я предпочитаю сжимать сначала на компе. Но если на сайте куча неоптимизированных изображений, смело ставьте.
  4. Использовать миниатюры и открывать полноразмерную картинку в лайтбоксе.

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

CDN

Сеть доставки контента. Фактически, весь статический контент размещается на сторонних серверах, а посетителю выдается из наиболее близкой к нему точки. Можно отправлять посредством CDN:

  • изображения;
  • скрипты;
  • файлы стилей;
  • видео;
  • предварительно cгенерированные html

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

Теги:

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer