Как кэшировать динамический контент в WordPress

Как кэшировать динамический контент в WordPress

Кеширование крайне важно для WordPress. Это один из основных способов максимально быстрой загрузки сайтов WordPress. Кеширование – это то, чем отличается WP Rocket. Однако кэшировать высокодинамичные сайты WordPress, особенно те, которые отображают персонализированные страницы для каждого пользователя, не так просто. Но можно кэшировать динамический контент с помощью правильных методов и технологий.

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

Давайте начнем!

СТАТИЧЕСКИЙ КОНТЕНТ ПРОТИВ ДИНАМИЧЕСКОГО КОНТЕНТА

Статическое содержимое остается неизменным на веб-страницах для всех пользователей. Владелец веб-сайта может обновить его, но после этого новый контент по-прежнему будет статичным для всех пользователей. Статическое содержимое включает такие файлы, как HTML, CSS, JavaScript, изображения и видео.

Пример статического контента – это сообщение в блоге, которое вы читаете. Поскольку статический контент не часто меняется (или не меняется вообще), его кеширование и доставка очень просты.

Статический контент одинаков для всех пользователей
Статический контент одинаков для всех пользователей

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

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

Динамический контент персонализирован для каждого пользователя
Динамический контент персонализирован для каждого пользователя

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

ДИНАМИЧЕСКИЙ КОНТЕНТ И КОНТЕНТ, УПРАВЛЯЕМЫЙ СОБЫТИЯМИ 

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

Вот несколько примеров событийного контента:

  • Цены на акции быстро меняются, пока рынки открыты, а затем остаются неизменными после закрытия рынков.
  • Комментарии к старой новостной статье (она не привлекает особого внимания) по сравнению с новой трендовой статьей (она привлекает множество комментариев).
  • Если новостной веб-сайт предоставляет пользователям персонализированный контент в зависимости от их местоположения, для многих пользователей из одного и того же местоположения контент статичен, но он динамичен, если пользователи из уникальных регионов.

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

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

КАК РАБОТАЕТ КЕШИРОВАНИЕ ДИНАМИЧЕСКОГО КОНТЕНТА В WORDPRESS?

Большинство сайтов WordPress – это простые блоги или сайты для малого бизнеса. Контент на этих сайтах обычно статичен.

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

WordPress динамически генерирует уникальные выходные данные страницы
WordPress динамически генерирует уникальные выходные данные страницы

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

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

График сложности кеширования для разных типов контента
График сложности кеширования для разных типов контента

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

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

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

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

CDN используют пограничные серверы для ускорения динамических сайтов
CDN используют пограничные серверы для ускорения динамических сайтов

Сети CDN также могут использовать язык разметки под названием Edge Side Includes (ESI) для кэширования динамического контента. Вы можете вставить теги элементов ESI в HTML страницы, чтобы показать, какие элементы являются динамическими. Это помогает сторонним процессорам (CDN или исходному серверу) кэшировать только статические части динамической веб-страницы.

Как ESI работает с работниками Cloudflare
Как ESI работает с работниками Cloudflare

Обратные HTTP-прокси, такие как Varnish, NGINX и IIS, – еще один способ кэширования динамического содержимого. Некоторые из них, такие как NGINX и IIS, также выступают в качестве основного веб-сервера.

Как правило, обратный прокси-сервер – это сервер (физический или виртуальный), расположенный между клиентом и веб-сервером. Его основная цель – фильтровать все запросы до того, как они попадут на сайт.

Обратный прокси работает от имени сервера
Обратный прокси работает от имени сервера

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

Кеш Varnish снижает нагрузку на веб-сервер
Кеш Varnish снижает нагрузку на веб-сервер

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

Давайте посмотрим, как можно кэшировать динамический контент разными способами. 

КЭШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО В CDN

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

Например, если вы используете Cloudflare CDN, вы можете использовать Cloudflare Workers для настройки бессерверных функций JavaScript, которые запускаются на PoP CDN, размещенных по всему миру.

Развертывание бессерверного кода с помощью Cloudflare Workers
Развертывание бессерверного кода с помощью Cloudflare Workers

Вы можете использовать эти настраиваемые бессерверные функции для изменения HTTP-запросов и ответов вашего сайта, создания новых ответов и выполнения параллельных запросов. Cloudflare Workers могут помочь вашему сайту выполнять множество задач на основе множества параметров, таких как ввод данных пользователем, тип устройства, местоположение, время дня, сторонние API и т. Д. 

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

Чтобы легко реализовать пограничное кэширование на своем сайте, вы можете использовать бесплатный плагин Cloudflare Page Cache . Дальнейшие детали выходят за рамки цели этой статьи, но вы можете ознакомиться с официальной документацией Cloudflare Workers, чтобы начать работу.

Точно так же KeyCDN предоставляет два варианта кэширования динамического содержимого. Первый способ – использовать API KeyCDN для мгновенной очистки кеша CDN на основе действий пользователя, чтобы ваши пользователи всегда видели последний динамический контент.

KeyCDN Origin Shield добавляет дополнительный уровень кэширования CDN
KeyCDN Origin Shield добавляет дополнительный уровень кэширования CDN

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

API Fastly CDN также предоставляет такие функции, как мгновенная очистка кеша , ведение журнала и доступность в реальном времени, а также такие механизмы, как Origin Shield . Вы можете проверить несколько примеров того, как пользователи Fastly кэшируют динамический контент с помощью CDN: « Как кэшировать с помощью файлов cookie отслеживания » и « Кэширование API ».

Мгновенно очищайте кеш с помощью Fastly для обслуживания динамического контента
Мгновенно очищайте кеш с помощью Fastly для обслуживания динамического контента

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

КЕШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО С ПОМОЩЬЮ NGINX

Существует множество плагинов и методов для кэширования динамического контента, создаваемого сайтами WordPress, работающими на сервере NGINX. Наиболее рекомендуемым решением является использование FastCGI, который представляет собой улучшенный вариант протокола Common Gateway Interface (CGI).

NGINX + FastCGI - мощная комбинация
NGINX + FastCGI – мощная комбинация

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

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

NGINX + FastCGI Cache заставит ваши сайты летать
NGINX + FastCGI Cache заставит ваши сайты летать

FastCGI устраняет необходимость в настройке дополнительных решений для кэширования, таких как плагины WordPress и обратные прокси (например, Varnish) для большинства сайтов. 

Модуль NGINX ngx_http_fastcgi_module позволяет главному веб-серверу передавать входящие запросы на сервер FastCGI. Как и все модули NGINX, FastCGI управляется различными директивами, которые вы указываете в его файле конфигурации. 

Обычно файл виртуального хоста для настройки NGINX находится в каталоге /etc/nginx/sites-available/domain.com , где domain.com – это имя вашего доменного имени (например, salmanravoof.com , wp-rocket.me ) . 

Давайте настроим NGINX, открыв терминал сервера и набрав следующую команду:

sudo nano /etc/nginx/sites-available/domain.com

Это откроет файл конфигурации в текстовом редакторе Nano в вашем терминале Linux. Затем добавьте следующие директивы NGINX перед блоком server {} внутри вашего файла конфигурации.


fastcgi_cache_path /var/run/nginx-fastcgi-cache levels=1:2 keys_zone=WPROCKET:100m inactive=60m;
fastcgi_cache_key "$scheme$request_method$host$request_uri";
fastcgi_cache_use_stale error timeout invalid_header http_500;
fastcgi_ignore_headers Cache-Control Expires Set-Cookie;

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

  • fastcgi_cache_path : определяет расположение кеша, размер, уровни подкаталогов, имя key_zone и продолжительность неактивности. Расположение кеша может быть где угодно на сервере. Поскольку обрабатывать файлы из ОЗУ быстрее, я использовал папку / var / run, поскольку Ubuntu монтирует этот каталог какtmpfs (быстрая энергозависимая память).
  • fastcgi_cache_key : указывает модулю FastCGI, как шифровать файлы кэша, генерируя уникальные имена ключей. 
  • fastcgi_cache_use_stale : указывает NGINX продолжать обслуживать старый (устаревший) кеш страницы, даже если PHP дает сбой (и, как следствие, WordPress). Это одна из многих сильных сторон веб-серверов NGINX.
  • fastcgi_ignore_headers : эта директива сообщает серверу FastCGI не обрабатывать определенные поля заголовка ответа.

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

Теперь вам нужно указать NGINX не кэшировать определенные страницы. Для этого просто добавьте следующие условные директивы перед первым блоком location {} в вашем блоке server {} . 

set $skip_cache 0;

    # POST requests and URLs with query strings won't be cached
    if ($request_method = POST) {
        set $skip_cache 1;
    }   

    if ($query_string != "") {
        set $skip_cache 1;
    }   

    # URIs containing the following segments won't be cached
    if ($request_uri ~*  "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
        set $skip_cache 1;
    }   

    # Don't serve cache for logged-in users or recent commentators
    if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {
        set $skip_cache 1;
    }

Вышеуказанные директивы укажут NGINX пропустить обслуживание кэшированного содержимого для запросов POST, запросов URL с прикрепленными к ним строками запроса, экранов администратора, страниц для авторизованных пользователей и некоторых других страниц. 
Затем добавьте следующие директивы в блок PHP location {} .

fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
fastcgi_cache WPROCKET;
fastcgi_cache_valid 60m;
add_header X-FastCGI-Cache $upstream_cache_status;

В fastcgi_cache_bypass директива определяет , когда кэш сервера будет пропущен, в то время как fastcgi_no_cache директивы определяют условия , при отсутствии ответа сервера не будет сохранен в кэш.

Значение в директиве fastcgi_cache должно соответствовать значению keys_zone, которое вы установили ранее. В моем случае это WPROCKET . 

Вы также можете указать, как долго кеш FastCGI действителен. Значение по умолчанию – 60 минут. Это приличная продолжительность для большинства сайтов. Однако вы можете изменить его на любую продолжительность. 

Если вы измените значение fastcgi_cache_valid и установите для него другую длительность, тогда будет отличной идеей обновить значение неактивного параметра. Вы определили его ранее в директиве fastcgi_cache_path . 

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

Последняя строка добавляет заголовок X-FastCGI-Cache к HTTP-ответам вашего сервера. Вы можете использовать его, чтобы проверить, обслуживаются ли запросы к вашему сайту из кеша FastCGI или нет.

Когда вы будете довольны конфигурацией, сохраните файл, выйдите из редактора и перезапустите NGINX.

sudo service nginx restart 

Последний шаг по настройке NGINX для работы с вашим сайтом WordPress – установка бесплатного плагина Nginx Cache от Тилля Крюсса. После активации плагина перейдите в Инструменты> Панель Nginx на панели инструментов WordPress и установите Путь к зоне кеширования . Он должен быть таким же, как тот, который вы определили ранее в файле хостов NGINX.

Плагин Nginx Cache помогает автоматически очищать кеш FastCGI
Плагин Nginx Cache помогает автоматически очищать кеш FastCGI

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

Плагин Nginx Cache также позволяет очищать кеш вручную через страницу настроек и панель администратора. Nginx Helper – еще один отличный плагин, который вы можете установить для автоматизации многих других функций NGINX. 

Теперь, когда вы узнали, как выборочно кэшировать страницы на своем сайте WordPress, вы можете применить ту же логику, чтобы указать собственные правила кеширования FastCGI для динамических сайтов WordPress, созданных с помощью WooCommerce, BuddyPress или Easy Digital Downloads.

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


if ($request_uri ~* "/(cart|checkout|my-account)/*$") {
    set $skip_cache 1;
}

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

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

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

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

КЭШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО С ПОМОЩЬЮ VARNISH

Varnish – один из самых популярных HTTP-ускорителей и обратных прокси-серверов, используемых сегодня. Он ориентирован исключительно на HTTP и предназначен для ускорения динамических веб-сайтов с большим количеством контента. 

Varnish Cache использует язык конфигурации, зависящий от предметной области, который называется Varnish Configuration Language (VCL) . Если вы знакомы с языком программирования C, вы обнаружите, что VCL похож. Это очень гибкий язык, который дает вам возможность тестировать и внедрять Varnish так, как вы хотите.

Например, если вы хотите, чтобы Varnish Cache игнорировал запросы AJAX, вот как вы это реализуете:


if (req.http.X-Requested-With == "XMLHttpRequest") {
    return(pass);
}

Точно так же, если вы хотите указать Varnish Cache пропускать кэширование экранов администратора WordPress и редактировать страницы, вам необходимо добавить следующий фрагмент кода VCL в свой файл конфигурации.


if (req.url ~ "(wp-admin|post\.php|edit\.php|wp-login)") {
    return(pass);
}
if (req.url ~ "/wp-cron.php" || req.url ~ "preview=true") {
    return (pass);
}

Давайте начнем с лакирования вашего сайта WordPress!

Если ваш веб-сервер работает на Ubuntu, вот краткое руководство по установке и настройке Varnish . Кроме того, вы также можете пройти это пошаговое руководство, чтобы включить Varnish Cache на своем сайте WordPress . 

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

Каждый раз, когда вы изменяете сообщение или страницу на своем веб-сайте, Proxy Cache Purge автоматически отправляет запрос PURGE от имени URL-адреса. Например, когда вы редактируете, публикуете или удаляете сообщение, Proxy Cache Purge автоматически очищает старый кеш. То же самое относится к комментированию сообщения или изменению темы вашего сайта. 

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

WPBase Cache – это специальный плагин, который оптимизирует развертывание WordPress на серверном стеке, состоящем из varnish + nginx + php-fpm + php-apc . Он использует три типа кеша для перезарядки вашего веб-сайта: кеш полной страницы, кеш БД и кеш кода операции. 

Этот плагин также интегрирует код из вспомогательных плагинов nginx-compatibility и db-cache-reloaded-fix . Это исправления для nginx и кеша базы данных соответственно.  

WPBase Cache также поддерживает настройку Varnish Cache с помощью предоставленного файла default.vcl . Вы можете узнать больше о функциях и преимуществах WPBase Cache на его веб-сайте.

  • Дополнение WP Rocket + Varnish

Надстройка WP Rocket Varnish позволяет одновременно очищать кеш Varnish и WP Rocket. Помимо обеспечения взаимодействия без возникновения каких-либо конфликтов, надстройка также гарантирует, что контент, предоставляемый вашим пользователям, всегда актуален.

Дополнение Varnish от WP Rocket
Дополнение Varnish для WP Rocket

Установив надстройку Varnish, вы можете расслабиться, зная, что и Varnish, и WP Rocket совместимы друг с другом и могут работать вместе.

Мы закончили настройку Varnish Cache для кеширования и обслуживания статического контента. Но как насчет кеширования динамического контента? Решение состоит в том, чтобы использовать модули Varnish (VMOD) для расширения возможностей Varnish Cache.

Новые XBody и Edgestash VMOD от Varnish 6.0 позволяют с легкостью кэшировать и ускорять динамический контент. 

Кэшируйте динамический контент с помощью виртуальных машин XBody + Edgestash (Источник: Varnish Software)
Кэшируйте динамический контент с помощью XBody + Edgestash VMOD (Источник: Программное обеспечение Varnish)

XBody VMOD собирает весь динамический контент с веб-страницы и анализирует его в формате обмена данными JSON и веб-шаблоне Mustache. 

Позже Edgestash VMOD собирает данные JSON и шаблон Mustache, а затем повторно объединяет их в новый ответ. Вы можете ознакомиться с документацией Varnish Software по персонализированному кэшированию, чтобы узнать больше о том, как это делается. 

КЕШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО С ПОМОЩЬЮ WP ROCKET

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

WP Rocket также по умолчанию отключает кеширование для динамических страниц, таких как корзина, касса, профили пользователей и т. Д. Он также позволяет вручную отключить кеширование для страниц.

Если у вас есть страницы с большим количеством статического содержимого и несколькими динамическими элементами, вы все равно можете кэшировать эти страницы, обслуживая динамические элементы через JavaScript / AJAX. Поскольку JS работает на стороне клиента (или в браузере), динамические элементы будут обновляться на кэшированной странице, обслуживаемой пользователем.

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

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

ЗАКЛЮЧЕНИЕ

Кэширование больше не только для статических или событийно-ориентированных сайтов. Выше вы видели множество вариантов кеширования высокодинамичных сайтов WordPress. Хотя изначально требуется некоторая настройка и доработка, конечный результат стоит затраченных усилий. Кэширование динамического контента помогает вам улучшить время до первого байта вашего сайта (TTFB), снизить расходы на хостинг, улучшить SEO и повысить коэффициент конверсии.

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

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