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

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

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

ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|css|swf|js|atom|jpe?g|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf

Тут содержатся все основные файлы, которые считаются статическими, то есть редко изменяющимися. Давайте теперь подумаем сколько времени такие данные будут храниться. Я считаю, что слишком большое время ставить нельзя, ведь мы можем нагрузить браузер клиента не нужной информацией, а так же данные же могут всё же измениться(те же стили, которые иногда требуют небольшой коррекции), поэтому в моих настройках cache хранится 10 дней.

Давайте начнем конфигурацию нашего сервера.

Конфигурация Nginx

Nginx хранит свои файлы конфигурации по пути /etc/nginx/conf.d, поэтому мы туда и пойдем. Выбираем конфиг нашего домена(у меня это пусть будет ur0.conf):

nano /etc/nginx/conf.d/ur0.conf

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

Вот код, подходящий к этой статье:

location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|css|swf|js|atom|jpe?g|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ { 
    add_header Cache-Control private;
    expires 10d;
}

Давайте разберемся, что же мы тут такое написали... И так, мы указываем серверу, что нам необходимы файлы, чьи имена кончаются на такие-то символы. Далее сервер добавляет им заголовокCache-Control со значением private. Ну и на последок говорит браузеру, что хранить данный файл необходимо 10d, то есть 10 дней.

Возможно у вас возник вопрос: "Почему мы использовалиCache-Control private?". Ответ прост: Мы не хотим, чтобы наш сайт кешировался различными прокси, нам необходимо давать кеш определенному пользователю. Если вы хотите хранить кеш еще и на прокси, то воспользуйтесьCache-Control public.

Вот такой небольшой код способен увеличить скорость загрузки за счет браузера клиента...

Конфигурация Apache

Apache так же способен хранить кеш у клиента, однако "из коробки" данные возможности ему не доступны.

Прежде чем приступать дальше убедитесь, что ваш Apache сервер имеет модулиmod_headers и mod_expires.

Для работы с Apache мы будем строить конфигурацию файла в .htaccess нашего сайта. Давайте начнем с Cache-Control:

<ifModule mod_headers.c>
<FilesMatch "\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|css|swf|js|atom|jpe?g|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">
Header set Cache-Control private
</FilesMatch>
</IfModule>

Разберем наш код. Для начала мы подключаем наш модуль mod_headers, ведь именно он будет встраивать нужные нам заголовки. Далее мы снова выбираем файлы, оканчивающиеся на наши "символы". Ну и добавляем им заголовокCache-Control private. В общем-то чем-то похоже на конфигурацию Nginx.

Давайте теперь воспользуемсяexpires:

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

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

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

Кеш и PHP

Иногда и php может выводить статические данные, поэтому и тут нужна возможность кеширования. Начнем с заголовка Cache-Control, это уже почти традиция :)

header("Cache-control: private");

Тут код вообще не требует описания, ведь в нем мы просто присваиваем Cache-Control private. Давайте теперь добавим время жизни, то естьExpires:

header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60*60*24*10) . " GMT");

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

UPD:В заголовке Cache-Control можно так же указывать и время жизни, используяmax-age, но лично мне привычнее это отдаватьExpires`у.

Спасибо за ваше внимание, если у вас есть что дополнить, то пишите в комментариях.