Как обновлять кэшированное содержимое в WordPress

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

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

Что такое управление версиями

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

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

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

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

Управление версиями как способ обновления кэшированного содержимого в WordPress

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

Способ №1. Обновление версии дочерней темы

Если вы используете дочернюю тему (а вы должны использовать!), вы можете заставить WordPress загрузить новую версию таблицы стилей style.css с помощью файла functions.php. Для этого используется функция wp_enqueue_style. Кодекс WordPress предлагает использовать следующий формат:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

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

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
  $parent_style = 'parent-style';
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
  );
}

Этот код извлекает номер версии из файла style.css вашей дочерней темы. Обычно файл стилей темы style.css содержит в самом верху примерно такой фрагмент:

/*
 Theme Name:   Theme Name
 Theme URI:    Theme URI
 Description:  Theme Description
 Author:       John Doe
 Author URI:   Author URI
 Template:     twentyfifteen
 Version:      1.0.0
 Text Domain:  twenty-fifteen
*/

Код из файла функций «подтягивает» версию темы из строки Version в файле style.css. Все, что вам нужно сделать, это обновить номер в строке версии и это заставит WordPress загрузить последнюю версию файла стилей.

Способ №2. Переименование статических файлов для принудительного обновления кэша

Предыдущий метод заботится об обновлении вашей дочерней темы. Однако, браузер сохраняет в кеше и многие другие файлы. Например, ранее мы писали о способе настройки кеширования в браузере. Мы использовали фрагмент кода, с помощью которого делали настройки для кэширования картинок, файлов CSS, HTML и JavaScript:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType image/jpg "access 1 month"
 ExpiresByType image/jpeg "access 1 month"
 ExpiresByType image/gif "access 1 month"
 ExpiresByType image/png "access 1 month"
 ExpiresByType text/css "access 1 week"
 ExpiresByType text/html "access 1 month"
 ExpiresByType text/x-javascript "access 1 week"
 ExpiresDefault "access 1 month"
</IfModule>

Мы можем использовать файл .htaccess также и для реализации нового набора правил. Используйте следующий код и добавьте его перед тегом </IfModule> предыдущего фрагмента кода:

<IfModule mod_rewrite.c>
…………..
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|jpeg|gif)$ $1.$3 [L]
………..
</IfModule>

Этот код говорит WordPress, чтобы система проверяла в файлах перечисленных форматов, наличие номеров в их именах, например:

child-theme/style.102.css

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

После добавления этого кода в файл .htaccess вы сможете установить версии для всех типов файлов, которые вы включили. Например, если вы хотите загрузить новую версию логотипа своего сайта, вам просто нужно переименовать файл, например, в logo.102.png.

Заключительные мысли

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

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