Как ускорить сайт на WordPress

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

  • Pingdom — это самый точный инструмент для измерения времени загрузки.
  • Google PageSpeed ​​Insights подходит только для одной вещи — проверка времени отклика сервера, которое, как рекомендует Google, должно быть <200 мс.
  • GTmetrix предлагает наиболее надежные рекомендации, что конкретно нужно оптимизировать.
  • Исходные данные:

    GTmetrix исходные данные

    Наша цель:

  • PageSpeed Score: 100% (сейчас 30%);
  • YSlow Score: 100% (сейчас 40%);
  • Fully Loaded Time: менее 1s (сейчас 13,5 s).
  • итак делаем полный бэкап сайта и поехали.

    1. Используйте быстрый хостинг с накопителями SSD.
    Я использую и рекомендую Бегет.

    2. Обновите PHP до 7+. Ваш хостинг не будет автоматически обновлять вас до последней версии PHP, так как ваша тема/плагины могут быть несовместимы.

    Основной прирост скорости даст переход с PHP 5+ до PHP 7+. А вот переход с PHP 7.2 до PHP 7.3 привел у меня к тому что тема WordPress стала «глючить» — внимательно проверяем функционирование.

    3. Установите и настройте плагин кэша. У меня установлен WP Super Cache (подробнее здесь).

    4. Используйте кеширование в браузере. На хостинге Бегет этот режим включен по умолчанию. Но если вы используете хостинг на Apache (или попросили поддержку перенаправить обработку “статики” на Apache), то GTmetrix во второй строчке своего отчета подсказывает, что режим кеширование в браузере желательно включить. Для этого добавьте следующие строчки в файл .htaccess:

    # Использование кеширования в браузере
    <IfModule mod_expires.c>
      ExpiresActive On
     
      # Images
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType image/webp "access plus 1 year"
      ExpiresByType image/svg+xml "access plus 1 year"
      ExpiresByType image/x-icon "access plus 1 year"
     
      # Video
      ExpiresByType video/mp4 "access plus 1 year"
      ExpiresByType video/mpeg "access plus 1 year"
     
      # CSS, JavaScript
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType text/javascript "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
     
      # Others
      ExpiresByType application/pdf "access plus 1 month"
      ExpiresByType application/x-shockwave-flash "access plus 1 month"
    </IfModule>

    По результатам немного подросли показатели и уменьшилось время загрузки:

    GTmetrix использование кеширования в браузере

    Но имейте ввиду как это реализовано в Beget:

    Обработка статического контента у нас осуществляется на уровне front-end сервера NGINX, поэтому директивы .htaccess на него не подействуют.

    Мы можем перенаправить обработку “статики” на Apache, что позволит Вам задавать настройки её кэширования в .htaccess, однако, это может привести к росту нагрузки на аккаунт.

    5. Включите сжатие gzip (yа хостинге Beget этот режим включен по умолчанию). GTmetrix любезно подсказывает что для этого необходимо добавить в файл .htaccess следующие строчки:

    # Включение сжатия 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>

    По результатам показатели подросли более значительно, YSlow Score аж до рейтинга E:

    GTmetrix включение сжатия gzip

    6. Установите плагин отложенной загрузки. Кроме картинок в постах плагин BJ Lazy Load добавит ленивую загрузку изображений из миниатюр, аватарок, iframes (YouTube/Vimeo).

    Поддерживается контент в виджетах. Пользователи без Javascript будут видеть обычную неоптимизированную страницу. Установка и настройка плагина проста и понятна, все необходимые опции BJ Lazy Load включены по умолчанию.

    GTmetrix отложенная загрузка

    Считаю этот плагин одним из важнейших при оптимизации, впрочем результаты тестов это подтверждают. Аналогичная функция «Lazy Load» есть в плагине EWWW Image Optimizer, но по факту с ее применением показатели не изменились.

      Какие есть альтернативы:

    • Если вы предварительно не оптимизируете изображения перед загрузкой на веб-сайт WordPress, то вам подойдёт a3 Lazy Load, где вы сможете по достоинству оценить встроенный оптимизатор изображений.
      Активных установок 200 тыс., последнее обновление 4 недели назад.
    • Если вы оптимизируете изображения перед загрузкой и хотите максимально высокой скорости загрузки с наименьшими усилиями, то выбирайте BJ Lazy Load.
      Активных установок 90 тыс., последнее обновление 3 года назад.
    • Если вы оптимизируете изображения перед загрузкой и хотите иметь дополнительные параметры конфигурации, то вашим идеальным выбором будет Lazy Load XT.
      Активных установок 2 тыс., последнее обновление 2 года назад.

    В крайних сайтах я обычно использую a3 Lazy Load, так как он просто более часто обновляется.

    7. Оптимизируйте базу данных WordPress. Плагин WP-Optimize удалит мусор, спам, пост-ревизии и транзиенты, хранящиеся в вашей базе данных и замедляющие работу вашего сайта.

    Но перед этим почистите эти самые плагины. Забудьте чему вас учили 5-10 лет назад на марафонах — сейчас другие факторы ранжирования (ну почти другие):

  • поведенческие;
  • скорость;
  • ссылки.
  • Ну вот зачем у меня на сайте до сих пор висит подписка, по которой уже давно никто не подписывается? — всё давно уже «засрано» пушами, которые на корню убили идею подписки … А социальные группы с сайдбаре? — они же давно уже мертвые …

    Запускаем WP-Optimize, убрав галочки с пунктов помеченных восклицательным знаком, черновиков и неодобренных комментариев.

    GTmetrix очистка базы данных

    Размер базы данных уменьшился с 71,3 Mb до 3,59 Mb, но как видим, кардинально показатели не сильно улучшились. Перфекционистам могу посоветовать поискать остатки от удаленных плагинов Plugins Garbage Collector, но у меня он ничего не нашел.

    8. Оптимизируйте изображения плагином EWWW Image Optimizer. Многие считают, что вполне достаточно сжать загружаемое изображение один раз перед размещением на сайте, но я вас удивлю — это не так.

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

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

    9. Оптимизируйте скрипты и стили. Используйте для этого плагин который объединит все .css стили на странице в один файл и поместит его вверх документа. Также, объединит все .js файлы и встроенные скрипты и поместит их в конец документа. Сожмёт саму HTML страницу, удаляя лишние пробелы и переносы.

    Обычно для этого я использовал плагин Autoptimize, который подробно рассматривали в отдельной статье. Но последнее время использую Fast Velocity Minify, который не требует настройки и работает не хуже. Единственный нюанс — на некоторых темах WordPress (например Jarida) требуется перевести Google Fonts в положение Async and exclude Google Fonts CSS from PSI.

    GTmetrix Autoptimize

    10. Подключите локально Google Font. Подробно рассматривали в отдельной статье. Но, как правило, хорошо оптимизированные темы WordPress имеют достаточно красивых, локальных шрифтов.

    Выводы.
    А что если взять хорошо оптимизированную тему:

    GTmetrix-optimizirovannaya-tema

    Google PageSpeed ​​Insights оптимизированная тема

    Да, это тема с плагином Clearfy Pro и 1 записью, но выводы делайте сами …

    P.S. Та же запись после установки Yoast SEO и WP Super Cache
    (показатели не увеличились, скорость немного подросла):

    GTmetrix после плагина кэширования
     

    P.S.S. После установки плагина минификации Fast Velocity Minify, подросли и показатели и уменьшилось количество запросов к базе данных (Requests):

    GTmetrix Fast Velocity Minify

    Подключение локально Google Font ни увеличило показатели, ни уменьшило числа обращении к базе данных, хотя увеличило немного скорость загрузки:

    GTmetrix CAOS for Webfonts

    По мотивам: https://onlinemediamasters.com/why-is-wordpress-so-slow/, https://onlinemediamasters.com/wordpress-speed-optimization-plugins/, https://blogforest.ru/autoptimize-testirovanie-plagina-zamer-proizvoditelnosti.html, https://blogforest.ru/nastroyka-autoptimize-plagina-sokrashhaem-i-obedinjaem-html-js-css.html



    Комментарии
    1. В телеге дали наводку на хорошо оптимизированную тему GeneratePress. Пузомерки можно посмотреть здесь и они впечатляют. Кстати там же даются рекомендации по настройке плагина Autoptimize.

    Задайте вопрос в комментариях