Кеш браузера. Last-Modified и Cache-Control: max-age | БЛОГ БАЯСА БАТУЕВА|БЛОГГИНГ,ИНФОБИЗНЕС И ЗАРАБОТОК В ИНТЕРНЕТЕ
75ab7103

9 июля 12:55
Рубрика: Раскрутка и Seo Комментариев нет

Кеш браузера. Last-Modified и Cache-Control: max-age

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

Сейчас же мы рассмотрим в подробностях что такое Кеш браузера. Last-Modified и Cache-Control: max-age, затем применив полученные знания на своем ресурсе, увеличим скорость загрузки еще на несколько пунктов.

 

Cодержание

Использование кеша браузера
Last-Modified
Cache-Control: max-age

 

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

 

Все мы для работы в сети пользуемся тем или иным браузером. Попробую объяснить все на примере. Допустим я набираю в строке поиска адрес своего блога er-krasnogorsk.ru и жму enter. В этом случае браузер обращается к серверу, который находится у моего хостера и отвечает за показ страниц пользователям, с просьбой передать ему содержимое страницы.

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

Но при этом нужно правильно настроить заголовки: обязательно указать один заголовок из пары Expires и Cache-Control max-age и один заголовок из пары Last-Modified и ETag.  Для чего это нужно?

Вот этот заголовок Last-Modified сообщает браузеру время последнего изменения страницы, например, 08 июля 2014 года. Получив такой заголовок, браузер в свою очередь обращается с вопросом If-Modified-Since к серверу, т.е. спрашивает у него, не изменилась ли страница с тех пор. Сервер же, получив такой запрос, сверяется со своей базой данных и если страница не изменялась, отвечает 304 Not Modified.

В этом случае браузер выдает мне страницу из кеша. При таком раскладе мы получаем ряд преимуществ:
— загрузка страниц будет происходить значительно быстрее;
— снижается нагрузка на сервер ( ваш хостинг будет очень доволен );
— будет показываться дата страницы;

— страница будет видна пользователям при сортировке по датам;
— будет положительно влиять на индексацию сайта;

 

Last-Modified

 

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

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

05:36:25 Оператор Александр Щирица включился в разговор
05:36:29 Александр Щирица: Здравствуйте! Чем я могу вам помочь?
05:36:41 (Профи-Промо): Здравствуйте! Уже вторую неделю никак не могу включить кэширование в браузере. Советы, которые даются в сети, не работают. Посоветовали обратиться к вам. Сможете помочь?
05:37:23 Александр Щирица: Кэширование включено на сервере по умолчанию модулями php.
Что у вас не работает?
05:40:08 (Профи-Промо): При проверке в PageSpeed Insights , пишут «используйте кэш браузера».
05:41:01 Александр Щирица: Данная проверка не видит модулей кэширования включенных при помощи php.
05:41:08 Александр Щирица: У вас медленно работает сайт?
05:44:47 (Профи-Промо): Нормально работает, просто хотел все сделать как положено. Тогда подскажите, пожалуйста, как решить вопрос с заголовком last-modified .

В скриптах last-modified выдается иными средствами. Например, если учесть то, что php-скрипт генерирует код динамически, то самым логичным будет в качестве last-modified отдавать текущую дату и время.
Реализуется это следующим образом:
<? header ("Last-Modified: " . gmdate («D, d M Y H:i:s») . « GMT»); ?>

В каком файле нужно прописывать?
05:45:26 Александр Щирица: Как и указано в инструкции — в файле .htaccess это прописывается.
05:46:02  (Профи-Промо): Пробовал, сайт перестает работать.
05:46:49 Александр Щирица: Значит указанная инструкция не работает на наших серверах.
05:47:07 (Профи-Промо): И что делать?
05:47:46 Александр Щирица: Ищите инструкцию для серверов работающих на php-fcgi.

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

Не буду дальше тянуть резину, поэтому скопируйте код, данный ниже, и разместите его в файле header.php в самом вверху, то есть над <!DOCTYPE html>.

<?php
header ('Expires: '.gmdate ('D, d M Y H:i:s', time () + 7200).' GMT');
header ('Cache-Control: no-cache, must-revalidate');
$mt = filemtime ($file_name);
$mt_str = gmdate («D, d M Y H:i:s „).“GMT»;
if (isset ($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
strtotime ($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $mt)
{header ('HTTP/1.1 304 Not Modified');
die;
}
header ('Last-Modified: '.$mt_str);
echo $text;
header («Vary: Accept-Encoding»);
header («Accept-Encoding:gzip,deflate,sdch»);
?>

Проверить, что у нас получилось, можно по этому адресу: . Если вы увидите подобную картину, значит все ОК:

Кликабельно

Если же результат отрицательный, у меня был именно такой случай, то этот же код добавьте в файл index.php, который находится в корневом каталоге ( это где wp-admin, wp-content, .htaccess и т.д. ). И вставляйте так же, в самом вверху.

Тут есть один момент: после обновления WordPress, нужно будет восстановить запись, потому что файл index.php перезапишется в своем стандартном виде. Не забудьте об этом.

 

Cache-Control: max-age

 

Cache-control— это заголовок, который управляет кешированием страниц. Для этого у него есть несколько директив, которые можно указывать через запятую:

max-age— разрешает кешировать страницы в течение определенного времени, указывается в секундах.

private— разрешает кешировать страницы только локальным клиентам (браузерам).

public— разрешает кешировать страницы не только локальным клиентам, но и прокси-серверам.

no-cashe— запрещает кешировать страницы. Это значение может быть использовано сайтами, где страницы очень часто обновляются ( например, новостными ).

no-store— категоричный запрет кешировать ( например, страницу с приватными данными ).

Вы можете изменять данные значения по своему усмотрению. Теперь предлагаю вам скопировать приведенный ниже код и вставить в файл .htaccess прямо перед словосочетанием # END WordPress.

<ifModulemod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 3600 seconds"
    ExpiresByTypeimage/gif "access plus 2592000 seconds"
    ExpiresByTypeimage/jpeg "access plus 2592000 seconds"
    ExpiresByTypeimage/png "access plus 2592000 seconds"
    ExpiresByTypetext/css "access plus 604800 seconds"
    ExpiresByTypetext/javascript "access plus 604800 seconds"
    ExpiresByTypeapplication/x-javascript "access plus 604800 seconds"
</ifModule>

<ifModulemod_headers.c>
    <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
        Header setCache-Control "max-age=2592000, public"
    </filesMatch>
    <filesMatch ".(css|js)$">
        Header setCache-Control "max-age=604800, public"
    </filesMatch>
    <filesMatch ".(html|txt)$">
        Header setCache-Control "max-age=172800, public, must-revalidate"
    </filesMatch>
</ifModule>

<ifModulemod_headers.c>
    <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
        Header unset ETag
        FileETag None
    </filesMatch>
</ifModule>

<IfModulemod_deflate.c>
    <FilesMatch ".(css|js|x?html?|php|xml)$">
        SetOutputFilter DEFLATE
    </FilesMatch>
</IfModule>
<ifModulemod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_includefile .(css|js|x?html?|php|xml)$
    mod_gzip_item_includehandler ^cgi-script$
    mod_gzip_item_includemime ^text/.*
    mod_gzip_item_includemime ^application/x-javascript.*
    mod_gzip_item_excludemime ^image/.*
    mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.*
</ifModule>

Установился ли заголовок Cache-Control можно проверить в Яндекс.Вебмастере. Выберите «Индексирование сайта»- «История»- «HTTP-коды»- «Проверка ответа сервера», введите адрес сайта и нажмите «Проверить».

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

Похоже действительно «данная проверка не видит модулей кэширования включенных при помощи php».

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

С уважением Баяс Батуев

Хочешь получать статьи этого блога на почту?
Комментариев нет

Добавить комментарий