Как ускорить сайт на 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. Используйте кеширование в браузере. 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. 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, но по факту с ее применением показатели не изменились.

    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



    Оцените, пожалуйста, статью, я старался :)

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