Содержание

Настройка сжатия и кэширования через .htaccess

В панелях управления Plesk и cPanel сжатие и кэширование для статических файлов настраивается через .htaccess. Для настройки кэширования используется модуль expires.

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

  • years,
  • months,
  • weeks,
  • days,
  • hours,
  • minutes,
  • seconds.

Настройка кэширования

Настройка expires:

  1. 1. Для настройки кэширования сайта .htaccess файл должен находиться в корневой директории вашего сайта. Если у вас нет этого файла воспользуйтесь справкой: У меня нет файла .htaccess, что делать?.
  2. 2.

    Добавьте в файл .htaccess строки следующего вида:

    Mod_expires

    <ifModule mod_expires.c>

 ExpiresActive On
 #кэшировать флэш и изображения на одну неделю
 ExpiresByType image/x-icon "access plus 7 days"
 ExpiresByType image/jpeg "access plus 7 days"
 ExpiresByType image/png "access plus 7 days"
 ExpiresByType image/gif "access plus 7 days"
 ExpiresByType application/x-shockwave-flash "access plus 7 days"
 #кэшировать css, javascript и текстовые файлы на одну неделю
 ExpiresByType text/css "access plus 7 days"
 ExpiresByType text/javascript "access plus 7 days"
 ExpiresByType application/javascript "access plus 7 days"
 ExpiresByType application/x-javascript "access plus 7 days"
 #кэшировать html и htm файлы на один день
 ExpiresByType text/html "access plus 1 day"
 #кэшировать xml файлы на десять минут
 ExpiresByType application/xhtml+xml "access plus 10 minutes"
</ifModule>

    Совет

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

Настройка сжатия

На серверах виртуального хостинга сжатие .htaccess для статических файлов включено по умолчанию. Статические файлы обрабатываются веб-сервером Nginx, доступа к настройке которого нет.

Проверить наличие сжатия можно при помощи ресурса.

Если вам критична настройка сжатия, рекомендуем приобрести VPS сервер.

Не работает кэширование .htaccess

Если после указанных настроек кэширование .htaccess не работает или у вас возникли сложности, обратитесь в техническую поддержку.

Облачные серверы нового поколения

Виртуализация KVM, почасовая оплата, резервные копии, готовые шаблоны, 10 доступных ОС на выбор!

Подробнее Помогла ли вам статья?

36 раз уже
помогла

Настройка кэширования статических файлов через .htaccess

Для настройки кэширования перейдем в раздел «Файлы → Диспетчер файлов»

Перейдем в папку

«public_html».

По умолчанию файл «.htaccess» скрыт. Поэтому нажмем на кнопку «Настройки» и поставим галочку возле «Показать скрытые файлы (dotfiles)».

Далее выберем наш .htaccess и нажмем кнопку «Редактировать».

В появившемся окне нажмем кнопку «Отключить проверку кодировки» и кнопку «Edit».

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

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

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">  
Header set Cache-Control "max-age=2592000"  
</FilesMatch>

Для файлов с указанными расширениями в конструкции FilesMatch устанавливается отдаваемый сервером заголовок

Cache-Control и переменная max-age, в которой указывается время сохранения файлов в кеше в секундах. Добавьте или удалите расширения файлов, которые для Вас будут уместны в данном случае.

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

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">  
Header unset Cache-Control  
</FilesMatch>

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

Еще один способ управлять кэшированием — это воспользоваться модулем expires. Этот модуль контролирует установку HTTP-заголовков для кэширования данных на стороне браузера. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

Ниже представлен простой пример использования модуля expires в файле .htaccess:

<IfModule mod_expires.c>  
ExpiresActive On  
ExpiresDefault "access plus 1 month"  

ExpiresByType image/gif "access plus 2 months"  
ExpiresByType image/jpeg "access plus 2 months"  
</IfModule>

В этом примере мы включаем модуль, устанавливаем кэширование по умолчанию на 1 месяц, а далее назначаем для файлов с расширением gif и jpg время хранения в кэше plus 2 months. Время можно указать в годах, месяцах, неделях, днях, часах, минутах, секундах. В том числе можно использовать вариант вида:

ExpiresByType text/html "access plus 1 month 15 days 2 hours"  
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

В качестве типов файлов можно указывать различные MIME types, вот некоторые из них в качестве примера:

image/x-icon  
image/jpeg  
image/png  
image/gif  
application/x-shockwave-flash  
text/css  
text/javascript  
application/javascript  
application/x-javascript  
text/html  
application/xhtml+xml

Настройка кэширования через файл .htaccess — Техническая поддержка — NetAngels

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

Ускорить загрузку Вашего сайта можно с помощью кэширования. Для решения этой задачи Вы можете воспользоваться модулем headers веб-сервера Apache. Он позволяет контролировать и изменять заголовки HTTP-запросов и HTTP-ответов. Вся суть в этом случае сводится к тому, что бы заставить браузер загрузить редко-изменяемые данные с сервера в локальный кэш всего один раз, а далее, при заходе на сайт, использовать данные из кэша. Можно установить кэширование для определенных типов файлов на строго определенное время, по истечению которого файлы будут загружены с сервера вновь. Делается это достаточно просто:

<FilesMatch ". (flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

Для файлов с указанными расширениями в конструкции FilesMatch устанавливается отдаваемый сервером заголовок Cache-Control и переменная max-age, в которой указывается время сохранения файлов в кэше в секундах. Добавьте или удалите расширения файлов, которые для Вас будут уместны в данном случае.

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

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
  Header unset Cache-Control
</FilesMatch>

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

Еще одни способ управлять кэшированием — это воспользоваться модулем expires. Этот модуль контролирует установку HTTP-заголовков для кэширования данных на стороне браузера. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

Ниже представлен простой пример использования модуля expires

в файле .htaccess:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"

    ExpiresByType image/gif "access plus 2 months"
    ExpiresByType image/jpeg "access plus 2 months"
</IfModule>

В этом примере мы включаем модуль, устанавливаем кэширование по умолчанию на 1 месяц, а далее назначаем для файлов с расширением gif и jpg врема хранения в кэше plus 2 months. Время можно указать в годах, месяцах, неделях, днях, часах, минутах, секундах. В том числе можно использовать вариант вида:

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

В качестве типов файлов можно указывать различные MIME types, вот некоторые из них в качестве примера:

image/x-icon
image/jpeg
image/png
image/gif
application/x-shockwave-flash
text/css
text/javascript
application/javascript
application/x-javascript
text/html
application/xhtml+xml

Включение кеширования сайта при помощи .htaccess

6354 Посещений

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

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

Чтобы настроить кэширование, необходимо прописать  команду в файле .htaccess.

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType application/javascript  «access plus 10 days»

ExpiresByType text/javascript  «access plus 10 days»

ExpiresByType text/css «access  plus 10 days»

ExpiresByType image/gif  «access plus 10 days»

ExpiresByType image/jpeg  «access plus 10 days»

ExpiresByType image/png  «access plus 10 days»

</IfModule>

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

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

<FilesMatch «.(pl|php|cgi|spl|scgi|fcgi)$»>

Header unset Cache-Control

</FilesMatch>

Полный вариант сжатие + кеширование






<IfModule mod_rewrite. index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

### Сжать ответ сервера для перечисленных MIME типов
<ifModule mod_deflate.c>
  <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE text/plain text/html
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
      AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/rss+xml
      AddOutputFilterByType DEFLATE application/json
      AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon  </ifModule>
      AddOutputFilterByType DEFLATE / x-font-ttf application / x-font-opentype image / svg + xml  
      </ifModule>
</ifModule>



<IfModule mod_expires.c>
    
    ExpiresActive On

    
    ExpiresDefault "access plus 10 month"

    
    ExpiresByType image/gif                 "access plus 1 month"
    ExpiresByType image/png                 "access plus 1 month"
    ExpiresByType image/jpg                 "access plus 1 month"
    ExpiresByType image/jpeg                "access plus 1 month"

    
    ExpiresByType text/css                  "access plus 1 year"
    ExpiresByType application/javascript    "access plus 1 year"
    ExpiresByType text/javascript           "access plus 1 year"




AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg





ExpiresActive on


ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>



### Удалить заголовок ETag (иначе есть проблемы с кешированием при включенном сжатии)
<IfModule mod_headers. Content-Encoding:.*gzip.*
</ifModule>
<IfModule mod_expires.c>
  ExpiresActive on

# Your document html
  ExpiresByType text/html "access plus 600 seconds"

# Media: images, video, audio
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

# CSS and JavaScript
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
</IfModule>

Сжатие gzip и кэш браузера в htaccess

При оптимизация скорости работы сайта инструменты типа Google PageSpeed Tools рекомендуют использовать кэш браузера и включить сжатие. Приведенные ниже примеры показывают как их включить.
Данный код нужно добавить в .htaccess в корне сайта.

1

Сжатие gzip

<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
	AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
	AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
	<FilesMatch "\.(ttf|otf|eot|svg)$" >
		SetOutputFilter DEFLATE
	</FilesMatch>
</IfModule>

На хостинге nic.ru нужно включить модуль mod_deflate:
Хостинг, почта, конструктор сайтов → Управление хостингом → Управление модулями

2

Включение кэширования

Google рекомендует кэшировать статические файлы на срок не менее года, подробнее на developers.google. com.

<ifModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 year"
	ExpiresByType image/x-icon "access plus 1 year"
	ExpiresByType image/jpeg "access plus 1 year"
	ExpiresByType image/png "access plus 1 year"
	ExpiresByType image/gif "access plus 1 year"
	ExpiresByType application/x-shockwave-flash "access plus 1 year"
	ExpiresByType text/css "access plus 1 year"
	ExpiresByType text/javascript "access plus 1 year"
	ExpiresByType application/javascript "access plus 1 year"
	ExpiresByType application/x-javascript "access plus 1 year"
	ExpiresByType text/html "access plus 1 year"
	ExpiresByType application/xhtml+xml "access plus 1 year"
</ifModule>

3

Сброс кэша

Как такового способа очистить сразу весь кэш браузера нет, но можно добавить GET параметр ?ver=1 к ссылкам на часто изменяемые файлы JS и CSS и после правок его менять.

Чтобы каждый раз не редактировать множество шаблонов, значение версии задавать PHP константой:

<link rel="stylesheet" href="/css/style.css?ver=<?php echo VERSION; ?>">
<script src="/js/script.js?ver=<?php echo VERSION; ?>"></script>

Как я могу кэшировать свой сайт с помощью файла .htaccess? — База знаний DreamHost

Создание файла .htaccess на веб-сервере DreamHost

Инструкции по созданию файла .htaccess на веб-сервере см. В следующей статье:

Если файл уже существует, просмотрите следующие статьи, чтобы узнать, как его обновить (в зависимости от того, используете ли вы FTP-клиент или SSH):

GZIP

Из-за определенных уязвимостей безопасности, обнаруженных при сочетании сжатия HTTPS и GZIP, сжатие GZIP отключено для HTTPS во всех планах DreamHost.Однако сжатие GZIP автоматически включено для HTTP. Mozilla / 4 \.0 [678] без gzip BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html Добавление заголовка Варьируется User-Agent

Для получения дополнительных сведений см. Следующую страницу:

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

Используя mod_expires, вы можете указать посещающим браузерам дольше удерживать определенные файлы (любит изображения, которые редко меняются).

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

 # BEGIN Expire заголовки

  # Включите модуль.
  Срок действия истекает
  # Установить время истечения срока действия по умолчанию.
  ExpiresDefault "доступ плюс 2 дня"
  ExpiresByType image / jpg "доступ плюс 1 месяц"
  ExpiresByType image / svg + xml "доступ на 1 месяц"
  ExpiresByType image / gif "доступ плюс 1 месяц"
  ExpiresByType image / jpeg "доступ плюс 1 месяц"
  ExpiresByType image / png "доступ плюс 1 месяц"
  ExpiresByType text / css "доступ плюс 1 месяц"
  ExpiresByType text / javascript "доступ плюс 1 месяц"
  Приложение ExpiresByType / javascript "доступ плюс 1 месяц"
  Приложение ExpiresByType / x-shockwave-flash "доступ плюс 1 месяц"
  ExpiresByType image / ico "доступ плюс 1 месяц"
  ExpiresByType изображение / значок x "доступ плюс 1 месяц"
  ExpiresByType text / html "доступ плюс 600 секунд"

# END Истекшие заголовки

Отключение кеширования

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

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

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

 # Отключает GZIP
SetEnv no-gzip 1
    
# Отключает заголовки с истекшим сроком действия для Apache

  ExpiresActive Off


# Отключить кеширование

    Заголовочный набор Cache-Control "no-cache, no-store, must-revalidate"
    Заголовочный набор Pragma "no-cache"
    Набор заголовков истекает 0

См. Также

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

Обзор

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

  • Сокращает время загрузки страницы для повторных посетителей
  • Особенно эффективен на веб-сайтах, где пользователи регулярно посещают одни и те же области веб-сайта.
  • Соотношение прибыли и затрат: высокое
  • Требуется доступ
Общие рекомендации по установке срока действия:
  • Истинно статический контент (глобальные стили CSS, логотипы и т. Д.) — доступ плюс 1 год
  • Все остальное — доступ плюс 1 неделя
Как ваш сайт оценивается по этой рекомендации?

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

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

Некоторые страницы могут состоять только из нескольких файлов и быть небольшими по размеру — может быть, пара килобайты. Однако для других файлов может быть много, а их может быть несколько. мегабайты большие. Twitter.com, например, составляет 3 МБ +.

Проблема двоякая.

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

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

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

Как это работает?

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

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

Почему это важно?

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

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

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

Как исправить предупреждение о кешировании браузера в WordPress

Google PageSpeed ​​Insights — один из нескольких полезных инструментов для измерения производительности веб-сайта. Однако некоторые из его предложений — например, предупреждение «Используйте кеширование браузера» — могут ввести в заблуждение неопытных владельцев сайтов.

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

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

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

Предпочитаете видеоверсию?

Что такое предупреждение о кешировании браузера?

Чтобы понять предупреждение о кешировании браузера, полезно сначала немного узнать о Google PageSpeed ​​Insights. Если вы новичок в этой платформе, мы рекомендуем прочитать полное руководство Google PageSpeed ​​Insights: оценка 100/100 с помощью WordPress.

Предупреждение о кешировании браузера — это одно из многих диагностических сообщений Google PageSpeed, которые возвращаются в качестве предложения по улучшению вашей оценки, например, следующего:

Предупреждение об использовании кеширования браузера в Google PageSpeed ​​Insights

В версии 5 Google PageSpeed ​​Insights это сообщение было заменено предупреждением «Обслуживать статические ресурсы с эффективной политикой кеширования»:

Обслуживайте статические ресурсы с предупреждением об эффективной политике кеширования в Google PageSpeed ​​Insights

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

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

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

Если вы видите предупреждение «Используйте кеширование браузера» в результатах теста производительности, это, вероятно, означает одно из двух:

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

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

🚨Внимание! Используйте кеширование в браузере🚨 Если чтение этих слов заставляет ваше сердце биться чаще, вам стоит ознакомиться с этим руководством по исправлению этого ужасного сообщения⚡️Нажмите, чтобы твитнуть

Как исправить предупреждение о кешировании браузера в WordPress (3 метода)

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

1. Добавьте заголовки Cache-Control и Expires

Есть два заголовка, связанных с кешированием браузера: Cache-Control и Expires. По крайней мере, один должен присутствовать, чтобы включить кеширование браузера для вашего сайта, поскольку именно так браузеры определяют, как долго они должны сохранять ресурсы перед их обновлением.

Простой способ определить, является ли это причиной появления предупреждения о кешировании браузера, — это просмотреть сведения, приведенные для каждого ресурса.В Google PageSpeed ​​Insights версии 5 вместо TTL кэша вы увидите «Нет»:

.

Кэшировать списки TTL в Google PageSpeed ​​Insights

В качестве удобного справочника предыдущие версии Google PageSpeed ​​Insights показывали сообщение «срок действия не указан» при отсутствии заголовков:

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Ресурсы, перечисленные в предупреждении о кешировании браузера

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

Необязательно добавлять оба , поскольку они могут быть избыточными. Cache-Control новее и обычно является рекомендуемым методом. Однако некоторые инструменты для повышения производительности в Интернете, такие как GTmetrix, по-прежнему проверяют наличие заголовков Expires.

Если вы размещаете хостинг на Kinsta, вам не нужно беспокоиться об установке этих заголовков. Все наши серверы Nginx уже включают их. Те, кто использует сеть доставки контента (CDN), также должны иметь эти заголовки.

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

Как добавить заголовки управления кешем
в Nginx

Чтобы добавить заголовки Cache-Control в Nginx, вы можете добавить следующее в файл конфигурации вашего сервера:

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | svg | ico) $ {
 истекает 30 дней;
 add_header Cache-Control «общедоступный, без преобразования»;
}

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

Как добавить заголовки Cache-Control в Apache

Если вместо этого у вас есть сервер Apache, вы можете добавить следующий код в свой файл . htaccess :

  
        Заголовочный набор Cache-Control "max-age = 84600, общедоступный"

Этот фрагмент следует добавить перед «#BEGIN WordPress» или после «#END WordPress».В этом случае срок действия кеша истекает через 84600 секунд.

Как добавить заголовки Expires в Nginx

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

  расположение ~ * \. (Jpg | jpeg | gif | png | svg) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 2d;
    }
Как добавить заголовки Expires в Apache

Вы можете добавить заголовки Expires в Apache, добавив следующее в свой .htaccess файл:

  ## ИСКЛЮЧАЕТ КЭШЕР ЗАГОЛОВКИ ##

ExpiresActive On
ExpiresByType image / jpg «доступ на 1 год»
ExpiresByType image / jpeg "доступ на 1 год"
ExpiresByType image / gif "доступ на 1 год"
ExpiresByType image / png "доступ на 1 год"
ExpiresByType image / svg "доступ на 1 год"
ExpiresByType text / css "доступ на 1 месяц"
Заявление ExpiresByType / pdf "доступ на 1 месяц"
Приложение ExpiresByType / javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType изображение / значок x "доступ на 1 год"
ExpiresDefault "доступ 2 дня"

## СРОК КЭШИНГА ЗАГОЛОВКИ ##

Затем вы можете проверить свои заголовки, снова запустив свой сайт через Google PageSpeed ​​Insights и проверив, сохраняется ли предупреждение.

2. Используйте кеширование браузера для Google Analytics

По иронии судьбы, Google Analytics иногда является причиной предупреждения о кешировании браузера и неправильной оценки PageSpeed. Это связано с тем, что у него небольшое время истечения срока действия кеша - всего два часа. Раньше это было старое предупреждение:

Предупреждение о кешировании браузера для скрипта Google Analytics

В PageSpeed ​​Insights версии 5 эта проблема больше не приводит к предупреждению, но Google Analytics все еще может быть указан как неоптимизированный ресурс:

Google PageSpeed ​​Insights прошел аудит со списком скриптов Google Analytics

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

Однако имейте в виду, что этот метод не поддерживается Google.

Используйте кеширование браузера для Google Analytics с помощью Complete Analytics Optimization Suite

Если вы хотите решить указанную выше проблему, есть бесплатный плагин под названием Complete Analytics Optimization Suite (CAOS), разработанный Дааном ван ден Бергом, который вы можете использовать:

Плагин CAOS для WordPress

Вы можете загрузить CAOS из каталога плагинов WordPress или выполнив поиск в разделе Плагины > Добавить новый на панели инструментов WordPress.

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

Для начала установите плагин и введите свой идентификатор отслеживания Google Analytics. Плагин добавляет необходимый код отслеживания для Google Analytics на ваш сайт WordPress, загружает и сохраняет аналитику .js на ваш сервер и обновляет его с помощью запланированного сценария в wp_cron () .

Рекомендуем также установить его для загрузки в нижний колонтитул:

Настройки размещения кода отслеживания CAOS

Имейте в виду, что CAOS не будет работать с другими плагинами Google Analytics для WordPress.

Используйте кеширование браузера для Google Analytics с помощью WP-Rocket

В качестве альтернативы вы можете использовать плагин кеширования WordPress WP-Rocket для достижения той же цели:

Плагин WP-Rocket для WordPress

Надстройка Google Tracking этого подключаемого модуля позволяет размещать аналитический скрипт локально одним нажатием кнопки.Просто переключите статус в WP-Rocket> Дополнения .

WP-Rocket и его надстройка совместимы с другими плагинами Google Analytics. Как инструмент премиум-класса, он продается по цене от 49 долларов в год.

3. Сведите к минимуму использование сторонних скриптов

Иногда скрипт Google Analytics может вызвать проблемы с оценкой Google PageSpeed ​​Insights, потому что он размещен на сервере Google, поэтому вы не контролируете кеш.

То же самое и для других сторонних скриптов. Если вы управляете бизнесом через свой веб-сайт WordPress, скорее всего, у вас есть дополнительные сторонние скрипты, работающие для отслеживания конверсий, A / B-тестов и т. Д.

Это могут быть скрипты, такие как пиксели преобразования Facebook, Crazy Egg, Hotjar и другие. К сожалению, если вы не найдете способ разместить эти сценарии локально, вы ничего не сможете сделать, чтобы получить над ними контроль.

Один из вариантов для пользователей Facebook Pixel - использовать еще одно дополнение WP-Rocket.В идеале вам следует свести к минимуму использование сторонних скриптов, если вы хотите улучшить свой показатель Google PageSpeed. Поэтому, возможно, стоит провести аудит вашего сайта и удалить все скрипты, которые не нужны для его работы.

Если вы когда-либо измеряли производительность сайта, есть большая вероятность, что предупреждение о кешировании браузера не ново для вас. Но как это исправить, чтобы ваш сайт стал быстрее? Узнайте, как это сделать, с помощью этого подробного руководства! 🚀🗿Нажмите, чтобы написать твит

Сводка

Хотя Google PageSpeed ​​Insights и не является исчерпывающим показателем эффективности вашего сайта, он все же является хорошим индикатором его работы. Повышение вашей оценки за счет устранения предупреждений, отображаемых в разделе «Обслуживать статические ресурсы с помощью эффективной политики кеширования», может помочь сделать ваш веб-сайт более быстрым и более удобным для посетителей.

Если вы видите это предупреждение в Google PageSpeed ​​Insights, вы можете устранить его следующим образом:

  1. Добавление заголовков Cache-Control или Expires.
  2. Использование кеширования браузера для Google Analytics.
  3. Сведение к минимуму использования сторонних скриптов.

Есть еще какие-нибудь советы по исправлению кеширования в браузере? Дайте нам знать в комментариях ниже!

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Как добавить правила кэширования браузера в файл .htaccess на Apache

Один из инструментов тестирования производительности, таких как GTMetrix и Google PageSpeed ​​Insights, оценивает ваш сайт, использует ли он кеширование браузера или нет.

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

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

Вот как я это сделал.

Как работает кеширование браузера

На вашем сайте есть файлы, которые меняются часто, а некоторые изменяются не так часто. Некоторые файлы практически не меняются, если вообще меняются.

Когда вы размещаете изображение на своем сайте, оно почти никогда не изменится. То же самое и с видеофайлами. Файлы JavaScript, такие как те, которые используются в вашей теме или плагинах, меняются чаще. Файлы PDF также имеют тенденцию меняться чаще.

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

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

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

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

Теперь добавление кеширования браузера не решает полностью проблему, о которой сообщают эти инструменты. Некоторые внешние файлы .js, такие как Google Analytics и Google Fonts, не поддерживают кеширование, но ваш сайт будет лучше работать с включенным кешированием браузера.

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

Как добавить кеширование браузера в настройку вашего сайта

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

Правила, которые сообщают браузеру, какие файлы нужно загружать, установлены в .htaccess в корне вашего сайта.

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

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

Expires для кеширования браузера

До недавнего времени я использовал рекомендуемые настройки, которые GTmetrix прописывает на своем сайте.

Для этих настроек GTmetrix применяет следующий подход:

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

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

  # КЭШЕР БРАУЗЕРА ИСПОЛЬЗУЮЩИЙ ИСКЛЮЧАЕТ ЗАГОЛОВКИ

    ExpiresActive On

    # Изображений
    ExpiresByType image / jpeg "доступ плюс 1 год"
    ExpiresByType image / gif "доступ плюс 1 год"
    ExpiresByType image / png "доступ плюс 1 год"
    ExpiresByType image / webp "доступ плюс 1 год"
    ExpiresByType image / svg + xml "доступ плюс 1 год"
    ExpiresByType изображение / значок x "доступ плюс 1 год"
  
    # Видео
    ExpiresByType video / mp4 "доступ плюс 1 год"
    ExpiresByType video / mpeg "доступ плюс 1 год"

    # CSS, JavaScript
    ExpiresByType text / css "доступ плюс 1 неделя"
    ExpiresByType text / javascript "доступ плюс 1 месяц"
    Приложение ExpiresByType / javascript "доступ плюс 1 месяц"

    # Другое
    Приложение ExpiresByType / pdf "доступ плюс 1 месяц"
    Приложение ExpiresByType / x-shockwave-flash "доступ плюс 1 месяц"

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

При добавлении в файл .htaccess эти правила включают кеширование браузера без каких-либо проблем.

Однако есть другой - и, видимо, лучший способ.

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

Cache-Control для кэширования браузера

Недавно я наткнулся на эту статью об использовании заголовков Cache-Control для кеширования браузера.

Cache-Control заголовков заменяет Expires Заголовки более гибкие (принимают больше директив) и в настоящее время являются предпочтительным методом кэширования браузера.

Поскольку все современные браузеры поддерживают заголовки Cache-Control , вам нужно только добавить эти строки в ваш файл .htaccess :

  # BROWSER CACHING USING CACHE-CONTROL HEADERS

    # Один год для изображений и видеофайлов
    
        Заголовочный набор Cache-Control "max-age = 31536000, общедоступный"
    

    # Один месяц для файлов JavaScript и PDF
    
        Заголовочный набор Cache-Control "max-age = 2592000, общедоступный"
    

    # Одна неделя для файлов CSS
    
        Заголовочный набор Cache-Control "max-age = 604800, общедоступный"

Как видите, я использую те же настройки срока действия файла в этих заголовках Cache-Control , что и в примере заголовков Expires . Все значения максимального возраста указаны в секундах, например один месяц равен:

60 (секунд в минуте) x 60 (минут в часе) x 24 (часов в день) x 30 (среднее количество дней в месяце) = 2592000

по данным Google Сайт разработчиков, Cache-Control - это все, что нам нужно:

Заголовок Cache-Control был определен как часть HTTP / 1.1 и заменяет предыдущие заголовки (например, Expires), используемые для определения политик кэширования ответов. Все современные браузеры поддерживают Cache-Control, так что это все, что вам нужно.

Веб-сайт Google Developers

Отказоустойчивый метод настройки кеширования браузера в файле .htaccess

Однако голландский хостинг-провайдер Byte описывает использование на своих серверах заголовков Expires и Cache-Control для обеспечения надлежащего кеширование браузера на серверах, которые могут его не поддерживать.На данный момент это может быть предпочтительный отказоустойчивый метод, который я использую для своих сайтов и сайтов моих клиентов:

  # BROWSER CACHING USING EXPIRES HEADERS

    ExpiresActive On
  
    # Изображений
    ExpiresByType image / jpeg "доступ плюс 1 год"
    ExpiresByType image / gif "доступ плюс 1 год"
    ExpiresByType image / png "доступ плюс 1 год"
    ExpiresByType image / webp "доступ плюс 1 год"
    ExpiresByType image / svg + xml "доступ плюс 1 год"
    ExpiresByType изображение / значок x "доступ плюс 1 год"
  
    # Видео
    ExpiresByType video / mp4 "доступ плюс 1 год"
    ExpiresByType video / mpeg "доступ плюс 1 год"

    # CSS, JavaScript
    ExpiresByType text / css "доступ плюс 1 неделя"
    ExpiresByType text / javascript "доступ плюс 1 месяц"
    Приложение ExpiresByType / javascript "доступ плюс 1 месяц"

    # Другое
    Приложение ExpiresByType / pdf "доступ плюс 1 месяц"
    Приложение ExpiresByType / x-shockwave-flash "доступ плюс 1 месяц"


# Кэширование браузера с использованием заголовков управления кешем

    # Один год для изображений и видеофайлов
    
        Заголовочный набор Cache-Control "max-age = 31536000, общедоступный"
    

    # Один месяц для файлов JavaScript и PDF
    
        Заголовочный набор Cache-Control "max-age = 2592000, общедоступный"
    

    # Одна неделя для файлов CSS
    
        Заголовочный набор Cache-Control "max-age = 604800, общедоступный"

Отключение ETag: да или нет

В статье Byte также рекомендуется отключить ETag , добавив эти строки к .htaccess файл:

  # УДАЛИТЬ И ОТКЛЮЧИТЬ ETAG
Заголовок не установлен ETag
FileETag Нет
# Удалить последнее изменение
Header unset Last-Modified

Однако, когда я это сделал, GTmetrix сказал мне указать валидатор кеша, заявив:

Все статические ресурсы должны иметь заголовок Last-Modified или ETag. Это позволит браузерам воспользоваться всеми преимуществами кеширования.

GTmetrix

… и наказал меня в их проверке. Для сайта клиента это стоило мне около 4% от их Page Speed ​​Score , поэтому я быстро отказался от этого!

Учит меня не связываться с хорошими вещами, когда я точно не знаю, что делаю 😳

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

Ресурсы

Как повысить производительность веб-сайта

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

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

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

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

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

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

Почему нам нужно использовать кеш браузера?

Если вы использовали инструменты анализатора скорости сайта, такие как GTMetrix и Google PageSpeed ​​Insights, вы увидите, что они рекомендуют пользователям включить кеширование браузера.

Но вопрос в том, помимо сокращения времени загрузки, что делает эту технику обязательной для владельцев сайтов?

Что ж, вот и другие преимущества, которые вы получите, используя кеширование браузера:

  • Уменьшите потребление полосы пропускания - браузеру не придется загружать статический контент заново.
  • Уменьшено количество запросов к серверу. - вместо загрузки с серверов контент будет загружаться из кеша.
  • Лучшее взаимодействие с пользователем - быстрый сайт приводит к счастливым посетителям.
  • Улучшение SEO (поисковая оптимизация) - Google объявил, что скорость страницы является одним из факторов ранжирования для мобильного поиска.

Использование кеша браузера с использованием .htaccess

Во-первых, вы можете использовать кеширование браузера, изменив файл .htaccess. Для этого вы можете использовать FTP-клиент, например FileZilla, или файловый менеджер в панели управления хостингом. Этот метод может вам подойти, если вы опытный пользователь.

В этом руководстве мы собираемся использовать hPanel Hostinger:

.
  1. Откройте файловый менеджер в разделе Файлы и перейдите в каталог public_html .
  2. Дважды щелкните файл и вставьте следующий код:
     ## СРОК КЭШИНГА ##

ExpiresActive On
ExpiresByType image / jpg «доступ плюс 1 год»
ExpiresByType image / jpeg "доступ плюс 1 год"
ExpiresByType image / gif "доступ плюс 1 год"
ExpiresByType image / png "доступ плюс 1 год"
ExpiresByType text / css "доступ плюс 1 месяц"
Приложение ExpiresByType / pdf "доступ плюс 1 месяц"
ExpiresByType text / x-javascript "доступ плюс 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ плюс 1 месяц"
ExpiresByType изображение / значок x "доступ плюс 1 год"
ExpiresDefault "доступ плюс 7 дней"

## СРОК КЭШИНГА ##
  3. Нажмите Сохранить и закрыть .

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

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

Использование процессов с плагинами

Один из самых простых способов использовать кеширование браузера - использовать подключаемые модули .В каталоге плагинов WordPress доступно множество плагинов кэширования, но мы рекомендуем использовать WP Rocket и WP Fastest Cache .

1. WP Rocket

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

Если вы используете платформу электронной коммерции, такую ​​как WooCommerce, Jigoshop или WP-Shop, вы можете избежать хранения данных с высоким уровнем риска, таких как адреса клиентов и платежные реквизиты.По этой причине WP Rocket автоматически запрещает браузерам кэшировать страницы корзины и оформления заказа.

Кроме того, он также обеспечивает другие функции повышения скорости, такие как сжатие GZIP, минификация и удаление строк запроса. Чтобы получить эти функции, вы можете приобрести один из трех платных планов, которые варьируются от $ 49 до $ 249 / год .

Каждая лицензия обеспечивает поддержку и обновления в течение одного года . Если вы продлите лицензию, вы получите скидку 30% .

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

2. Самый быстрый кэш WP

Если вам нужен бесплатный плагин для кэширования с надежными функциями, WP Fastest Cache может удовлетворить ваши потребности. Он предлагает кеширование браузера , сжатие GZIP и минификацию бесплатно.

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

С другой стороны, вы можете получить дополнительные функции, такие как мобильный кеш, кеш виджетов и статистика кеша, купив премиальный план , который стоит 49,99 долларов США . Однако обратите внимание, что каждая лицензия работает только для одного веб-сайта .

Вы можете легко загрузить и установить бесплатную версию из каталога плагинов WordPress. Однако все будет немного иначе, если вы приобрели премиум-версию.

Электронное письмо, содержащее расширение. zip файл премиум-плагина будет отправлен на вашу электронную почту. После этого загрузите файл в WordPress через меню Plugin , и все готово!

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

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

После вставки кода в файл .htaccess мы получили идеальный результат 100:

Заключение

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

У вас есть вопросы по кешированию в браузере? Дайте нам знать в разделе комментариев ниже!

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

Ускорьте свой сайт с помощью кеширования и .htaccess

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

Кеширование с использованием .htaccess

Файл .htaccess - это замечательный набор добра, который большинство разработчиков пропускают.

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

Он также используется для управления кэшированием между браузером и веб-сервером Apache.

Это руководство предназначено только для установок сервера XAMP. Пользователи NGiNX могут использовать переводчик Apache в NGiNX.

Что такое кеширование?

Когда браузер запрашивает у сервера файл, будь то HTML, CSS, PHP, GIF, JPEG и т. Д., Он, по сути, загружает копию этого файла на локальный компьютер или просматривающее устройство, прежде чем отобразить ее в браузере для просмотра. удовольствие.

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

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

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

Вы можете думать об этом как о моменте Синего Питера, когда они вытаскивают законченный, красиво раскрашенный супер реактивный ранец из-под стола, усыпанного нарезанными коробками для яиц, держателями для рулонов туалетной бумаги, липкой пластиковой крышкой (ЭТО НАЗЫВАЕТСЯ ЦЕЛЛОТАПНОЙ ДАММИТ) !) и горсть битых мелков.

Или когда они запирают команду А в сарае с самосвалом, несколькими листами толстого гофрированного железа, дюжиной медных труб и кислородно-ацетиленовой горелкой. Почему???

А когда МакГайвер… Хватит вспоминать 80-е! Вы уловили идею.

Настройка Apache

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

Нам нужны модули mod_expires и mod_headers.

Чтобы узнать, включены ли они, вы можете либо создать страницу .php с вызовом на ней phpinfo () , либо, если у вас есть доступ по SSH, вы можете ввести httpd -l , чтобы перечислить все модули.

См. Документацию Apache о том, как включить эти модули.

Модуль mod_expires

Этот модуль управляет настройкой заголовка Expires HTTP и директивы max-age заголовка Cache-Control HTTP в ответах сервера.

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

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

Пример 1

Строки 1 и 16
Оберните специфические директивы mod_expires в предложение, чтобы проверить, существует ли модуль.

Строка 2
Включает правила истечения срока действия.

Строка 3
Устанавливает срок действия по умолчанию 5 минут для каждого типа файла.

Строки 6-12
Устанавливает срок действия в 1 месяц для файлов разных типов: gif, png, jpg, pdf, javascript и текстовых файлов.

A2592000 - это старый способ UNIX для описания количества прошедших секунд.

секунды = 1 секунда * 60 = 60 (секунды в минуту) * 60 = 3600 (секунды в час) * 24 = 86400 (секунды в день) * 30 = 2592000 (секунды в 30 дней ~ месяц)

Математика - это круто!

Строка 11
Устанавливает срок действия в 1 день для файлов CSS.

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

Модуль mod_headers

В то время как mod_expires позволяет вам контролировать значение max-age для файлов, mod_headers дает вам больше контроля над типом кэширования и когда его применять.

Например, вы можете продублировать предыдущий пример mod_expires , используя mod_headers

Строки 1 и 13
Оберните специфические директивы mod_headers в предложение, чтобы проверить, существует ли модуль.

Строка 2
Включает правила истечения срока действия

Строки 5 и 7
Сопоставление типов файлов с их расширениями.

Строка 6
Устанавливает для переменной max-age срок действия 1 месяц в наборе сопоставленных файлов. Примечание: здесь нет буквы «А».

Строки 10-13
Устанавливает для переменной max_age значение 1 день только для файлов CSS.

Но мы можем сделать более конкретный контроль кеша с mod_headers .

Строки 3-4
Включает истечение срока действия и устанавливает его на 3 дня для всех файлов.

Строки 7-10
Настраивает кеширование на 1 месяц для выбранных медиафайлов, поскольку они, скорее всего, не так сильно изменятся в ближайшее время.

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

Строки 13–16
Устанавливает более жесткий контроль кеширования на 2 часа для файлов, которые часто обновляются, например, файлы CSS или HTML.

Для директивы Cache Control установлено значение «private, must-revalidate».

Private сообщает браузеру не кэшировать файлы в общих папках кэширования. Файлы должны кэшироваться в личном кеш-хранилище пользователей.

Must-revalidate сообщает браузеру, что он должен просмотреть переменную max-age как для локально сохраненного файла, так и для сервера и определить, какой из них является допустимым файлом для выборки.

Строки 19-23
Принудительно не кэшировать динамические файлы, такие как PHP или файлы сценариев, например.pl или .cgi.

Мы явно устанавливаем время истечения срока действия на A0 (ноль) и устанавливаем Cache-Control на «no-store, no-cache, must-revalidate, max-age-0», заставляя браузер никогда не сохранять файл и всегда извлекать серверная копия.

Как видите, использование mod_headers дает вам больший контроль не только над сроком действия, но и над тем, как файлы хранятся в кэше на локальном устройстве.

Дополнительную информацию о mod_headers можно найти на веб-сайте Apache.

Как измерить результаты скорости страницы

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

Для этого мы используем несколько инструментов:

  1. Инструменты Pingdom
  2. WebPageTest

Сообщите нам, насколько Вам удалось ускорить свои веб-страницы!

Связанные

Была ли эта статья полезной?

Да Нет

Google's Need for Speed ​​- Используйте кеш в .htaccess для ускорения вашего сайта - Pilot Digital

Это четвертый в серии из семи сообщений (я продолжаю находить больше информации и могу добавить еще пару сообщений) о том, как ускорить ваши веб-страницы и ваш сайт в целом.Недавно в новостях было упомянуто об ускорении сайтов, потому что Google объявил, что скорость страницы теперь является фактором, определяющим, насколько хорошо эта страница будет ранжироваться по ключевым словам. Несмотря на то, что Google дал понять, что скорость страницы не приведет к перемещению вашей страницы с позиции 38 на позицию 4 в результатах поиска, все же стоит учитывать скорость страницы, поскольку она дает вашим читателям пользу. Это просто ... людям нравятся веб-сайты и веб-страницы, которые загружаются быстрее, чем те, которые загружаются медленно. (Да… люди изучали это!)

В этой серии мы говорили / поговорим на следующие темы:

  1. Обзор скорости сайта
  2. Как узнать, не работают ли ваши веб-страницы слишком медленно
  3. Как оптимизировать фотографии для более быстрой загрузки
  4. Как использовать кеширование и htaccess для ускорения вашего сайта (этот пост)
  5. Как сжать ваш сайт
  6. Как ускорить Google Analytics с помощью асинхронных кодов отслеживания

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

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

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

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

Однако

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

Как вы, наверное, догадались, браузеры используют кеши по двум причинам:

  1. Ускорение веб-страниц
    Браузер получает доступ к файлам намного быстрее.
  2. Уменьшите пропускную способность сети Используйте
    Загрузка одной копии логотипа веб-сайта вместо одной для каждой из 10 страниц, на которые вы переходите, значительно экономит пропускную способность.
Какие файлы следует кэшировать и на какой срок?

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

  • 4 часа : файлы HTML
  • 2 дня: файлов XML и TXT
  • 1 год: Файлы ICO, PDF, FLV, JPG, JPEG, PNG, GIF, JS, CSS и SWF

.htaccess

Что такое htaccess?

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

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

Как перейти к файлу .htaccess

Как я сказал выше, файл htaccess - это невидимый файл. Это означает, что, если вы не знаете, что делаете, вы даже не сможете увидеть этот файл. Большинство людей будут обращаться к файлу через FTP. На большинстве хороших FTP-клиентов где-то есть опция (часто в раскрывающемся меню «Просмотр» или в настройках приложений), которая говорит что-то вроде «Просмотр невидимых файлов» или «Скрыть / показать невидимые». Вам нужно будет найти эту опцию и настроить FTP-клиент так, чтобы вы могли видеть невидимые файлы.Когда вы перейдете в корневой каталог своего веб-сайта, вы, возможно, найдете в верхней части списка файлов файл с именем «.htaccess». Это файл, который вы хотите отредактировать.

Если вы не найдете его, вам нужно будет его изготовить. Используя свой FTP-клиент, создайте новый текстовый файл и назовите его «.htaccess». ПРИМЕЧАНИЕ: Расширение файла отсутствует, а имя начинается с точки. Теперь вы можете редактировать этот файл и творить чудеса, о которых рассказывается в оставшейся части этого поста.

Обратите внимание на пару вещей:

  1. Не все серверы Apache настроены одинаково веб-хостинговыми компаниями.Хостинговые компании по причинам, которые они часто не могут объяснить, не имеют всех функций, необходимых для этого поста. Если ваша хостинговая компания не включила их, я советую вам позвонить и попросить их включить. Вы стоите на твердой почве и просите их включить их, потому что все в этом посте теперь необходимо для правильно функционирующего веб-сайта.
  2. Игра с файлом htaccess может вызвать проблемы. Обычно вы сохраняете изменения, затем обновляете свой сайт и обнаруживаете, что получаете сообщение об ошибке.Все, что вам нужно сделать, это удалить изменения, внесенные вами в файл .htaccess, и повторно сохранить его, и сайт вернется. Дважды проверьте, правильно ли вы ввели код. Если да, это означает, что ваша хостинговая компания, вероятно, не поддерживает функцию Apache, которую вы пытаетесь использовать.

Как использовать кеширование для ускорения работы вашего сайта

1. НЕ используйте метатеги HTML для управления кешированием

Давным-давно в далекой-далекой сети существовала техника, в которой использовался метатег HTML, который выглядел примерно так:

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

2. Используйте HTTP Future Expire Headers и Cache-Control

Существует два варианта управления кешированием вашего сайта: заголовок Expires и заголовок Cache-Control . Какая разница? PeterBe объясняет это здесь довольно прямо, но, по-моему, заголовок Expires работает со старым HTTP 1.0 браузеров; Cache-Control - более современная система, работающая с браузерами, совместимыми с HTTP 1.1.

Итак, следует ли использовать Expires или Cache-Control ? Ответ: используйте их оба. Старые браузеры игнорируют Cache-Control и используют Expires . Современные браузеры переопределят Expires и используют Cache-Control .

Настройка истекающих HTTP-заголовков

Настройка заголовков Expire довольно проста.Вы открываете файл .htaccess в корневом каталоге своего веб-сайта и вставляете текст ниже:

 # Установить заголовки с истекшим сроком действия

Набор заголовков Истекает "Thu, 15 Jan 2015 20:00:00 GMT"

Это указывает браузеру попытаться использовать кэшированные копии всех файлов ico, pdf, flv, jpg, jpeg, png, gif, js, css и swf до 2015 года. Срок действия должен быть фиксированным, поэтому, если вы не ожидайте, что эти файлы изменятся, вы захотите установить его в далеком будущем, или вам нужно будет поместить напоминание в свой календарь, чтобы обновить заголовок Expires до истечения срока его действия.

Настройка заголовков управления кешем

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

 # Установить максимальный возраст управления кешем
# 1 год

Заголовочный набор Cache-Control "max-age = 31449600, общедоступный"

# 2 ДНЯ

Заголовочный набор Cache-Control "max-age = 172800, общедоступный, необходимо перепроверить"

# 4 ЧАСА

Заголовочный набор Cache-Control "max-age = 14400, необходимо перепроверить"
3. Удаление тегов ET и последних изменений

Выше мы сделали все необходимое, чтобы ускорить работу вашего сайта с помощью кеширования. Однако есть несколько других вариантов выполнения кэширования: ETags и Last Modified , которые в основном выполняют то же самое, но не требуют использования. Как сказал AskApache в своих фантастических постах о кешировании:

Если вы удалите Last-Modified и заголовок ETag , вы полностью удалите If-Modified-Since и If-None-Match запросы и их 304 Not Modified Responses, поэтому файл будет оставаться в кеше без проверки обновлений, пока заголовок Expires не укажет на наличие нового содержимого!

Поскольку сейчас мы используем Cache-Control и Expires , эти два не нужны, за исключением документов HTML, где один из них следует оставить включенным.

Еще одна причина использовать Cache-Control и Expires вместо ETags и Last Modified заключается в том, что все больше и больше хостинговых компаний используют кластерные (облачные) серверы. ETags и Last Modified работают только в том случае, если тегируемый файл поступает с одного и того же сервера. Если ваш хост использует кластер серверов, ETags и Last Modified не будут работать, но Cache-Control и Expires будут.

Как удалить ETag и последнее изменение

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

No related posts.