Как увеличить скорость загрузки сайта на WordPress

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

dc4aab66dfdfad40ccc830c129918382 647c4d4a107a50c464e0cfeb010478ba

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

Сегодня же я поделюсь своим способом ускорения WordPress, которым мне удалось довольно неплохо разогнать скорость нашего сайта DDR5.RU, чтоб упростить вам немного этот трудоемкий процесс. Мой результат ускорения сайта сейчас перед вами и вы наглядно можете его оценить. Уверен, что многие из вас смогут добиться и более высокой скорости, а так же более высокого показателя Google Insight. Я же решил остановился на таком, так как считаю неприемлемым урезать функционал сайта ради более высоких пузомерок от Гугла или какого-либо еще сервиса.

Итак, приступим...

Важно!

Перед тем как приступить к каким либо изменениям на сайте не забудьте сделать бекап сайта целиком (файлов и базы данных), чтоб у вас была возможность откатить внесенные изменения, если что-то пойдет не так!

Убедитесь что ваш сайт расположен не на бесплатном хостинге, так как на них очень часто скорость передачи данных занижают в настройках сервера, чтобы клиенты переходили на платные тарифы!

Нужно учитывать, что показатель скорости на разных страницах  может значительно отличаться. Поэтому для тестов старайтесь выбирать страницу, где у вас много изображений и текста. Чтобы иметь более правдивую картину. Понятно же, что если у вас на странице текст и одна картинка, то она будет просто залетать, но в тоже время другая, где много изображений, различного текста и ссылок - может уже и тупить. И никогда не оценивайте результат по одному замеру в PageSpeed Insights , всегда запускайте его несколько раз, так вы будете иметь более точные показатели!

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

Способ 1 - Сложный и замудренный способ

Если не хотите возиться и усложнять себе жизнь, то я рекомендую использовать 2-ой или 3-ий способы. Но так как этот я как-то использовал для ускорения, я решил и им поделиться.

Оптимизировать скорость загрузки сайта на WordPress мы будем доступными и абсолютно бесплатными, на данный момент, плагинами:

  1. Autoptimize - плагин отвечающий за оптимизацию HTML, CSS, JS кода и кеширование;
  2. EWWW Image Optimizer - плагин для сжатия изображений, а так же создания дубликатов еще более сжатого формата Webp;
  3. WP Performance Score Booster - поможет нам довести, то что у нас получится после первых двух, до еще лучшего результата;
  4. Pre* Party Plugin Settings - зачистка кода мешающего отрисовке контента;
  5. Gzip сжатие - мы настроем непосредственно в файле .htaccess, так как мне такой результат понравился по производительности больше, чем доступный с помощью плагина.

А теперь по порядку, шаг за шагом со скриншотами и пояснениями.

Плагин Autoptimize

Autoptimize качаем с репозитория WordPress. Он проделает за нас о-о-очень большую работу...

screenshot 2021 06 04 at 23 52 58 dobavit plaginy ‹ ddr5 ru — wordpressСразу после установки переходим к настройке.

Оптимизация кода HTML, CSS, JS

На скриншотах видны все мои настройки для оптимизации, некоторые из них так же вычислялись опытным путем. Будьте внимательны с включением различных настроек Autoptimize, потому что иногда может неправильно работать функционал сайта после оптимизации - может не работать выпадающее меню или же не добавляться Adsense на страницы. Обязательно проверяйте функционал сайта после внесения изменений в настройки Autoptimize! В данном случае я приложил настройки при которых весь функционал нашего сайта работает и уже есть хороший прирост по показателям в Гугле.

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

screenshot 2021 06 05 at 00 36 53 autoptimize dopolnitelnye ‹ ddr5 ru — wordpress

 

На этом настройка Autoptimize завершена.

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

Сжатие изображений и создание Webp - плагин EWWW Image Optimizer

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

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

Перебрав различные плагины, я остановился на EWWW Image Optimizer , он мне показался более подходящим. И после конвертации Webp и сжатия, я убедился, что сделал правильный выбор.  Скачать плагин можно репозитория WordPress.

screenshot 2021 06 05 at 01 25 23 dobavit plaginy ‹ ddr5 ru — wordpress

Настройки плагина:

screenshot 2021 06 05 at 01 00 43 ewww image optimizer ‹ ddr5 ru — wordpress

После установки и сохранения настроек, в плагине появляется кнопка Bulk Optimizer (Массовая оптимизация). Жмете ее, в следующем окне жмете "Искать неоптимизированные изображения". И после поиска жмете кнопку "Optimize" на которой указано количество найденных изображений.

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

И в принципе на этом можно завершить рассмотрение EWWW Image Optimizer, но я хочу еще добавить одну деталь.

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

screenshot 2021 06 05 at 01 02 14 ewww image optimizer ‹ ddr5 ru — wordpress

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

WP Performance Score Booster

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

 

screenshot 2021 06 05 at 01 37 21 wp performance score booster settings ‹ ddr5 ru — wordpress

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

screenshot 2021 06 20 at 22 35 23 wp performance score booster settings ‹ ddr5 ru — wordpress

Плагин Pre* Party Plugin Settings

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

screenshot 2021 06 05 at 03 55 54 pre party settings ‹ ddr5 ru — wordpress

Включаем Gzip сжатие в файле .htaccess

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

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

#Gzip сжатие

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Полученный результат:

Это +- максимальный показатель, если для ПК он может еще немного подрасти, но для мобильного это максимум. Чаще всего показатели ниже.

Способ второй - Более простой и с лучшим результатом

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

  1. EWWW Image Optimizer - плагин для сжатия изображений, а так же создания дубликатов еще более сжатого формата Webp;
  2. PageSpeed Ninja - сжатие, ускорение, оптимизация, кеширование;

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

Настройка

Настройки EWWW Image Optimizer остаются такими же, как и в первом способе.

Настройка PageSpeed Ninja так же проста, для начала вам достаточно выбрать требуемый стартовый прессет.

screenshot 2021 08 09 at 10 29 30 pagespeed ninja advanced options ‹ aleksey goduns portfolio — wordpress
Изначально плагин предлагает включение "Safe" самого простого прессета настроек. При этих настройках не происходит никаких агрессивных сжатий и оптимизаций, поэтому он подойдет для любого сайта, но они и самые медленные. Для получения хорошего ускорения нужно выбирать между Compact и Optimal. Лично я , стартовал с Optimal. А потом вносил небольшие коррективы в настройки. Пробовал и Ultra, но в моем случае показатель скорости наоборот ухудшился, так же в этом пресете настроек на моем сайте перестали отображаться блоки Adsense.

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

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

Полученный результат:

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

Будьте внимательны при включении настроек!

Главное что мне хотелось бы вам посоветовать, чтобы вы в погоне за пузомерками гугла не убивали функционал и удобство своих сайтов. Показатель-показателем, но сайты, мы в первую очередь делаем для людей. И как неоднократно замечали сами сотрудники гугл - показатели PageSpeed Insights носят только рекомендательный характер!

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

Удачи!

Вас могут заинтересовать:

Подписаться
Уведомить о
2 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии