Кэширование браузера WordPress

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

Многие поставщики услуг по оптимизации и тестированию скорости называют это « кэш браузера », « использование кэширования браузера », « заголовки с истекающим сроком действия», « заголовки кэша », « управление кэшем » и « веб-кэш ». Как указывает Google PageSpeed ​​Insights, GTMetrix и MaxCDN следуют этому руководству, чтобы правильно настроить его.

Что такое кэширование браузера?

Кэширование браузера — это метод, с помощью которого ваш веб-сервер сообщает браузеру о необходимости хранить страницу или определенные ресурсы в течение определенного периода времени, чтобы их не приходилось загружать с сервера каждый раз при загрузке страниц. Это может кэшировать всю страницу и/или ресурсы, такие как JavaScript, CSS, изображения (jpeg, png, gif и т. д.) и многое другое.

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

Важность кэширования браузера

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

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

Веб-кэш обеспечивает взаимную скорость сервера и пользователя

Реализация кеша браузера

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

Использование плагина кэширования браузера WordPress Leverage упрощает реализацию.

Чтобы сделать это еще проще, существует несколько доступных плагинов для кэширования браузера WordPress. Мы использовали, протестировали и рекомендуем плагин WordPress Leverage Browser Caching Ninjas. Это плагин для установки и активации, который сделает все остальное за вас.

Кэш браузера Apache

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

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

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

Если вы используете сервер Nginx (Engine-ex), настройка отличается от описанной выше установки Apache. Вы захотите добавить следующий код в файл конфигурации виртуального хоста, который обычно находится в /etc/nginx/sites-enabled/default . Добавьте следующее в свой серверный блок:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

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

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Microsoft IIS использует кэширование браузера

Настроить кэширование браузера для IIS (Internet Information Services) очень просто.

Выберите его в интерфейсе Administration Tools и вызовите его свойства. После выбора вкладки HTTP Headers вы должны увидеть две интересные области; Enable Content Expiration и Custom HTTP headers . Первый должен говорить сам за себя, а второй можно использовать для применения заголовков Cache-Control.

Техническая сторона кэширования браузера

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

Заголовки Cache-Control , Expires и Etag — это те, которые дают инструкции для кеша браузера. Эти заголовки автоматически создаются с помощью упомянутых выше методов для использования кэширования браузера в Apache, Nginx и IIS соответственно, поэтому вам не нужно вдаваться в подробности, если вы не заинтересованы.

Заголовок управления кэшем

Cache-Control дает браузеру определенные инструкции, например, как долго контент считается «свежим», общедоступный/частный статус кэширования, проверка и многое другое.

Cache-Control: max-age=3600, общедоступный

(https://gist.github.com/tribulant/6309926734d3c127064c)

Заголовок с истекающим сроком действия

Заголовок Expires предоставляет HTTP-дату только до того момента, когда ресурс должен и может быть кэширован.

Истекает: суббота, 28 ноября 2015 г., 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Заголовок этэга

Etag был введен в HTTP 1.1 как метод проверки с токеном, отправляемым сервером и используемым браузером для проверки того, изменилось ли представление содержимого. Вплоть до Etag браузеры в основном использовали заголовок Last-Modified , но Etag более актуален. Большинство веб-серверов в любом случае будут генерировать заголовки Last-Modified и Etag .

Etag: «pub1259380237;gz»

(https://gist.github.com/tribulant/2b542d76410bc047be00)

Суть кэширования браузера

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

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

Кэширование веб-браузера настоятельно рекомендуется для веб-сайтов WordPress, и, в конечном счете, рекомендуемый плагин WordPress Leverage Browser Caching Ninjas сделает свое дело. Просто установите, активируйте и все готово!