Оптимизация времени отклика сайта WordPress с подробным сравнением плагинов кеширования

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

Кроме того, Google объявила 9 июля 2018 года, что использование скорости страниц в рейтинге мобильного поиска теперь распространяется на всех пользователей.

Оптимизация запуска скриптов

WordPress использует PHP для скриптов. Таким образом, должны быть сделаны три основных шага:

  • Включите кэш PHP-кода

    Кэширование PHP может увеличить время отклика примерно на 50%. Есть подробные инструкции, как проверить и настроить кэширование PHP скриптов.

  • Переключитесь на последнюю версию PHP

    Повышение производительности и другие оптимизации сделаны в 7.x версиях PHP. Поэтому рекомендуется использовать версию 7.2.10 или более позднюю. Если некоторые скрипты ведут себя неуместно, просто переключитесь на версию 7.1.22 — это наиболее стабильная версия.

  • Убедитесь, что PHP отладчик отключен

    Иногда он включен. И это замедляет производительность. Его можно отключить, отредактировав файл php.ini. В большинстве случаев надо найти раздел [xdebug], а внутри него поставить точку с запятой (комментарий) перед ключом «zend_extension».

ИНТЕРЕСНО!Мы начали разработку своего собственного решения по кешированию WordPress. Будьте в курсе если вам это актуально.Подробнее

Кэширование и оптимизация контента

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

cache-scheme

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

Минимальный объем требуемых функции для ротации:

  • Кеш сервера
    • Время загрузки страницы

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

    • Метод кеширования

      Загрузка уже подготовленных HTML, JS, CSS напрямую, а не генерация их снова.

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

      Снижение запросов для каждого JS, CSS с нашего сайта для увеличения скорости загрузки путем объединения их в один каждого типа.

    • Инлайн

      Рекомендуется встроить CSS в HTML, чтобы уменьшить количество запросов.

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

      Загрузка JS в фоновом режиме, чтобы пользователь мог быстрее просматривать страницы. Одна из важных функций в соответствии с Google Page Speed Test, так как она влияет на количество циклов приёма-передачи, блокирующих визуализацию. Меньше таких циклов приводит к более быстрым загрузкам страниц.

    • Минимизация

      Удаление ненужных пробелов, комментариев и т.д. из HTML, JS и CSS для минимизации размера, чтобы увеличить скорость загрузки.

    • Сжатие

      Уменьшение размера запрашиваемых HTML, JS, CSS, сжимая их по алгоритму Zip (GZip), чтобы они загружались быстрее.

  • Управление
    • Обновление

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

    • Исключения

      Управление реальным динамическим контентом, таким как страницы входа и панели администратора.

Сравнение плагинов

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

ПлагинРольПолнотаКеш сервераКеш на клиентеОптимизацияУправление
LiteSpeed Cache + Hyper Cache Extended + Autoptimize + Speed Up – Browser Caching
(Набор)
Полный96% 98% 71% 100% 100%
Breeze
1.0.10
Полный93% 95% 71% 97% 75%
WordPress Cache and CDN Plugin + Autoptimize
(Набор)
Полный90% 98% 100% 83% 75%
Autoptimize + Cache Enabler + Speed Up – Browser Caching
(Набор)
Полный88% 98% 71% 83% 100%
W3 Total Cache
0.9.7
Полный84% 55% 100% 100% 100%
WordPress Cache and CDN Plugin
1.5.04
Полный82% 98% 100% 67% 75%
LiteSpeed Cache + WP Fastest Cache
(Набор)
Полный79% 50% 71% 100% 100%
WP Rocket
3.2.0.1
Полный76% 50% 71% 95% 100%
WP Speed of Light
2.3.2
Полный70% 50% 71% 83% 100%
Yasakani Cache
2.0.4
Полный64% 98% 0% 53% 75%
Hummingbird Page Speed Optimization
1.9.2

Оптимизация

53% 48% 71% 50% 100%
WP Fastest Cache
0.8.8.6
Полный52% 50% 71% 47% 100%
Cache Enabler
1.3.1
Кеш сервера48% 95% 0% 20% 100%
LiteSpeed Cache
2.6.1
Оптимизация47% 2% 71% 70% 100%
Autoptimize
2.4.1
Оптимизация44% 2% 36% 73% 100%
Powered Cache
1.2.2
Полный44% 50% 71% 30% 100%
Hyper Cache
3.3.7
Кеш сервера43% 95% 0% 10% 100%
Hyper Cache Extended
1.6.3
Кеш сервера43% 95% 0% 10% 100%
Simple Cache
1.6.4
Кеш сервера43% 95% 0% 10% 100%
Super Static Cache
3.3.5
Кеш сервера43% 95% 0% 10% 100%
WP Super Cache
1.6.4
Кеш сервера43% 95% 0% 10% 100%
Fast Velocity Minify
2.3.5
Оптимизация36% 2% 0% 65% 100%
WP Performance Score Booster
1.9.2.1
Кеш на клиенте31% 23% 71% 30% 0%
Speed Booster Pack
3.7.1
Оптимизация27% 0% 0% 52% 50%
Comet Cache
170220
Полный27% 25% 0% 30% 100%
Speed Up – Browser Caching
1.0.2
Кеш на клиенте23% 0% 71% 30% 0%
Gator Cache
2.1.7
Кеш сервера20% 48% 0% 0% 100%
Cachify
2.2.4
Полный16% 25% 0% 10% 50%
Cache-Control
2.2.2
Кеш на клиенте3% 0% 29% 0% 0%

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

Скачать подробную динамическую сравнительную таблицу

Использование одного плагина

Самый простой способ – выбрать плагин «все в одном», чтобы минимизировать усилия по настройке. Таким образом, самыми быстрыми плагинами, которые охватывают практически все требования, являются Breeze, W3 Total Cache и WordPress Cache and CDN Plugin .

И самый эффективный способ – использовать наборы (комбинации нескольких плагинов), так как нет бесплатного плагина, который бы покрывал все требования и имел высокую скорость загрузки страницы. Были протестированы несколько комбинаций, представленных ниже.

Использование набора: LiteSpeed Cache + Hyper Cache Extended + Autoptimize + Speed Up – Browser Caching

Этот набор использует возможности оптимизации LiteSpeed Cache, одну из лучших скоростей кэширования от Hyper Cache Extended, блестящую оптимизацию CSS от Autoptimize и «Speed Up – Browser Caching» для контроля и сжатия кэша клиента. Итак, итоговый балл составляет 94%. Это самая быстрая и оптимизированная комбинация.

Настройки LiteSpeed Cache:

  • General
    • Enable LiteSpeed Cache: Disable
  • Optimize
    • CSS Minify: Off
    • CSS Combine: Off
    • JS Minify: On
    • JS Combine: On
    • HTML Minify: On
    • Inline CSS Minify: On
    • Inline JS Minify: On
    • Load CSS Asynchronously: Off
    • Generate Critical CSS: Off
    • Generate Critical CSS In Background: Off
    • Inline CSS Async Lib: Off
    • Load JS Deferred: On
    • Exclude JQuery: On
    • Remove Comments: On
  • Tuning
    • Combined CSS Priority: Off
    • Combined JS Priority: Off
  • Advanced
    • Browser Cache: Off
    • Check Advanced Cache: Off

litespeed-cache-plugin-combined-settings-general

Настройки Hyper Cache Extended:

  • Compression
    • Enable compression: On
    • Disk space usage: On

hyper-cache-extended-plugin-combined-settings

Настройки Autoptimize:

  • HTML Options
    • Optimize HTML Code: Off
  • JavaScript Options
    • Optimize JavaScript Code: Off
  • CSS Options
    • Optimize CSS Code: On
    • Aggregate CSS-files: On
    • Also aggregate inline CSS: On
    • Generate data – URIs for images: On
    • Inline all CSS: On
  • Misc Options
    • Save aggregated script/css as static files: On

autoptimize-plugin-settings-location

И Speed Up – Browser Caching не имеет настроек – оно делает все по умолчанию.

Использование набора: WordPress Cache and CDN Plugin + Autoptimize

Эта комбинация устраняет недостаток «WordPress Cache and CDN Plugin» при откладывании JS и использует мощные функции кэширования и сжатия на клиенте. Итоговая оценка составляет 90%. Так что это очень быстрый и удобный набор.

Для использования мощности Autoptimize все связанные параметры в WordPress Cache and CDN Plugin отключены:

  • Cache & Database\Caching
    • Compress cache: On
    • Merge scripts: Off
    • Merge css: Off
    • Minify HTML: Off
    • Enable Gzip Compression: On
    • Leverage browser caching: On

wordpress-cache-cdn-plugin-combined-settings

И настройки Autoptimize:

  • HTML Options
    • Optimize HTML Code: On
  • JavaScript Options
    • Optimize JavaScript Code: On
  • CSS Options
    • Optimize CSS Code: On
    • Aggregate CSS-files: On
    • Also aggregate inline CSS: On
    • Generate data – URIs for images: On
    • Inline all CSS: On
  • Misc Options
    • Save aggregated script/css as static files: On

autoptimize-plugin-settings

Использование набора: Autoptimize + Cache Enabler + Speed Up – Browser Caching

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

Настройки Cache Enabler:

  • Cache Behavior
    • Pre-compression of cached pages: On
  • Cache Minification: Disabled

cache-enabler-plugin-combined-settings

Настройки Autoptimize такие же, как и в предыдущем наборе.

И Speed Up – Browser Caching не имеет настроек – оно делает все по умолчанию.

Использование набора: LiteSpeed Cache + WP Fastest Cache

Эта комбинация достигла только 79% из-за не очень хорошего времени загрузки страницы вместо вышеуказанных пакетов. Но все же лучше по времени загрузки страницы, чем W3 Total Cache.

Настройки были выставлены таким образом, чтобы в качестве оптимизатора контента использовался LiteSpeed Cache:

  • General
    • Enable LiteSpeed Cache: Disable
  • Optimize
    • CSS Minify: On
    • CSS Combine: On
    • JS Minify: On
    • JS Combine: On
    • HTML Minify: On
    • Inline CSS Minify: On
    • Inline JS Minify: On
    • Load CSS Asynchronously: Off
    • Generate Critical CSS: Off
    • Generate Critical CSS In Background: Off
    • Inline CSS Async Lib: Off
    • Load JS Deferred: On
    • Exclude JQuery: On
    • Remove Comments: On
  • Tuning
    • Combined CSS Priority: Off
    • Combined JS Priority: Off
  • Advanced
    • Browser Cache: Off
    • Check Advanced Cache: Off

litespeed-cache-plugin-combined-settings-optimize

И параметры WP Fastest Cache устанавливаются только как поставщика кеша:

  • Settings
    • Cache System: On
    • Minify HTML: Off
    • Minify HTML Plus: Off
    • Minify Css: Off
    • Minify Css Plus: Off
    • Combine Css: Off
    • Minify Js: Off
    • Combine Js: Off
    • Combine Js Plus: Off
    • Gzip: On
    • Browser Caching: On
    • Render Blocking Js: Off

wp-fastest-cache-plugin-combined-settings

Использование других потенциальных наборов

Подробная динамическая таблица результатов помогает выбрать и сравнить плагины в соответствии с потребностями. Там же перечислены протестированные комбинации плагинов (наборов).

Примечание. Некоторые плагины могут быть несовместимы друг с другом.

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

Сжатие изображений

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

Опции ниже могут быть использованы в любой комбинации.

  • Использование плагинов оптимизации изображений

    Это самый простой способ. И большинство таких плагинов очень просты в настройке и использовании в отличие от плагинов кэширования. Например, EWWW Image Optimizer, Imagify Image Optimizer, и Smush Image Compression and Optimization.

  • Использование онлайн-сервисов по оптимизации изображений

    Таких сервисов много. Просто введите «оптимизировать изображение» или «сжать изображение» в браузере и выберите любой из верхних. Например, Optimizilla, ShortPixel, OptimizePNG. Они получают на вход любые изображения и возвращают их оптимизированными. Просто замените их на сайте.

  • Получение оптимизированных изображений прямо из Google Page Speed Test

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

Измерение

Результаты оптимизации легко можно проверить через Google Page Speed Test, который показывает любые недостатки в простом виде и предоставляет рекомендации и объяснения.

Кроме того, скорость сайта может быть напрямую измерена браузером Google Chrome. Нажмите F12, перейдите на вкладку “Сеть” и нажмите Ctrl + F5, чтобы обновить страницу и отслеживать информацию. Здесь можно отследить время отклика каждой страницы, организацию контента и медиа-файлы.

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