Eфективна кеш политика

Eфективна кеш политика

HTTP Header Fields  на крадко (HTTP хедърите) са полета с информация, в заглавната част на HTTP заявката и HTTP отговора, предавани между клиент и сървър. В Повечето случаи клиентът е уеб браузър, а сървъра е уеб сървър. HTTP хедърите съдържат указанията, от които зависи HTTP обмена на информация между клиент и сървър. Основните HTTP хедъри (request, response) са дефинирани в протокола HTTP (Hypertext Transfer Protocol).

Когато клиента (уеб браузър) поиска ресурс, сървърът, предоставящ ресурса, може да каже на браузъра колко време трябва да съхранява или кешира ресурса. За всяка следваща заявка за този ресурс ще се използва локалното му копие в браузъра, вместо да го зарежда от мрежата. За да окажете на браузъра за колко време да съхранява кешираните ресурси, в HTTP отговора на заявката, браузъра трябва да получи HTTP хедър с указания за това. HTTP кеширането ще ускори времето за зареждане на вашата страница при повторни посещения.

Одит на правилата на кеша

Lighthouse маркира всички статични ресурси, които не са кеширани:

cache 

Lighthouse счита за кешируем ресурс:

  • Ресурсът е шрифт, изображение, медиен файл, скрипт или таблица със стилове.
  • Ресурсът има 200203 или 206 HTTP код на състоянието .
  • Ресурсът няма изрична политика без кеш.

Когато дадена страница не успее да премине одита, Lighthouse изброява резултатите в таблица с три колони:

URLМестоположението на кешируемия ресурс
Кеширане TTLТекущата продължителност на кеша на ресурса
РазмерОценка на данните, които потребителите ви биха запазили, ако конкретният ресурс беше кеширан

Как да кеширам статични ресурси, използвайки HTTP кеширане?

Конфигурирайте сървъра си да връща Cache-Control в HTTP отговора:

Cache-Control: max-age=31536000

Max-age директивата казва на браузъра за колко време трябва да кешира ресурса в секунди. В този случай задава продължителността на 31536000, което съответства на 1 година: 60 ​​секунди × 60 минути × 24 часа × 365 дни = 31536000 секунди.

Когато е възможно, кеширайте статичните активи за дълго време, например година или повече.

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

По-голямата продължителност на кеша не винаги е по-добра опция. Но  в крайна сметка зависи от вас да решите каква е оптималната продължителност на кеша за вашите ресурси. Ако смятате че няма да правите чести промени, и искате по-добра производителност на сайта, използвайте кеш с по-дълга продължителност.

Има много директиви за персонализиране на начина, по който браузърът кешира различни ресурси. Научете повече за кеширането на ресурси.

Как да проверите какви ресурси получава браузира в Chrome DevTools?

За да видите кои ресурси браузърът получава от кеша си, отворете раздела Network в Chrome DevTools: В size колона в Chrome Инструментите за програмисти ще ви помогнат да проверите дали даден ресурс е кеширан:

За да проверите дали Cache-Control параметрите са зададени според вашите очакванията, проверете HTTP заглавни данни:

Как да управлявате HTTP хедъри?

Има няколко начина за управление на HTTP хедърите, но за текущата цел може да използвате модула към Apache – mod_expire, чрез задаване на параметри в .htaccess файла. Например:

<filesMatch ".(js|css|jpg|jpeg|png|gif|js|css|ico|swf)$">
              Header set Cache-Control "max-age=31536000, public"
              Header unset Last-Modified
             Header unset ETag
</filesMatch>

Или може да зададете различни параметри на различни типове ресурси!

# BEGIN Expire headers  
<IfModule mod_expires.c>  
  # Turn on the module.
  ExpiresActive on
  # Set the default expiry times.
  ExpiresDefault "access plus 12 month"
  ExpiresByType image/jpg "access plus 12 month"
  ExpiresByType image/svg+xml "access 12 month"
  ExpiresByType image/gif "access plus 12 month"
  ExpiresByType image/jpeg "access plus 12 month"
  ExpiresByType image/png "access plus 12 month"
  ExpiresByType text/css "access plus 12 month"
  ExpiresByType text/javascript "access plus 12 month"
  ExpiresByType application/javascript "access plus 12 month"
  ExpiresByType application/x-shockwave-flash "access plus 12 month"
  ExpiresByType image/ico "access plus 12 month"
  ExpiresByType image/x-icon "access plus 12 month"
  ExpiresByType text/html "access plus 600 seconds"
</IfModule>  
# END Expire headers

Share this post

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *