Настройка предварительного сжатия и браузерного кэширования для блога на хостинге с Nginx и Apache

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

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

[info txt=»Проверить скорость загрузки страниц вы можете с помощью онлайнового сервиса Pingdom Tools.»]

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

Предварительное сжатие

Перед тем, как отдать содержимое страниц в браузер посетителя, можно его сжать. Сжатие уменьшает размер передаваемых файлов (иногда в несколько раз), что приводит к увеличению скорости загрузки страниц и уменьшению исходящего трафика. Сжимать нужно только файлы, содержащие текстовую часть — текст, HTML, PHP, JS, XML, и прочие подобные. Текст хорошо сжимается даже при низком уровне компрессии, объем передаваемых фалов уменьшается на 50-80%. Конечно, файлы небольшие, всего десятки килобайт, но если учесть, что таких фалов тысячи, и загружаются они тысячами посетителей каждый день, то, как говорят, с миру по нитке — нищему на воротник, экономия получается существенная.

Предварительное сжатие / Apache

Для тех, у кого установлен Apache, нужно узнать у хостера, какие специальные модули, реализующие его, установлены — mod_pagespeed или mod_deflate? Обычно в Apache 2x устанавливают mod_deflate. Есть еще mod_gzip, но его устанавливали в предыдущих версиях, так что его встретить маловероятно.

Если установлен модуль mod_pagespeed, то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить:


	ModPagespeed on
	# using commands,filters etc

Если установлен модуль mod_deflate, то то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить:


	AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

В данном случае сжатию подвергаются все текстовые файлы — txt, html, xml, xhtml, css, js.

Предварительное сжатие / Nginx

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

server {
    gzip on;
    gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}

Предварительное сжатие / Скрипт

Бывает так, что сервер, обеспечивающий работу вашего блога, не поддерживает mod_deflate или mod_gzip. В этом случае можно прибегнуть к универсальному скрипту, который работает и на Apache, и на Nginx.

В файл header.php используемой вами темы, в самое его начала, первой строкой нужно вставить:


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

Браузерное кэширование

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

Браузерное кэширование / установки заголовков / Apache

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

Если у вас работает Apache, для установки заголовков Expires добавьте в файл .htaccess:


	ExpiresActive On
	ExpiresDefault "acodeess plus 5 seconds"
	ExpiresByType image/x-icon "acodeess plus 2592000 seconds"
	ExpiresByType image/jpeg "acodeess plus 2592000 seconds"
	ExpiresByType image/png "acodeess plus 2592000 seconds"
	ExpiresByType image/gif "acodeess plus 2592000 seconds"
	ExpiresByType application/x-shockwave-flash "acodeess plus 2592000 seconds"
	ExpiresByType text/css "acodeess plus 604800 seconds"
	ExpiresByType text/javascript "acodeess plus 216000 seconds"
	ExpiresByType application/javascript "acodeess plus 216000 seconds"
	ExpiresByType application/x-javascript "acodeess plus 216000 seconds"
	ExpiresByType text/html "acodeess plus 600 seconds"
	ExpiresByType application/xhtml+xml "acodeess plus 600 seconds"

В данном случае актуальность кэша для разных фалов указана в секундах.

Если у вас работает Apache, для установки заголовка Cache-control добавьте в файл .htaccess:


	
		Header set Cache-Control "public"
	
	
		Header set Cache-Control "public"
	
	
		Header set Cache-Control "private"
	
	
		Header set Cache-Control "private, must-revalidate"
	

В данном случае проверяется актуальность в кэше файлов ico, jpg, jpeg, png, gif, swf, css, js, html, xhtml, php.

Браузерное кэширование / Nginx

Если у вас нет Apache, но есть Nginx, то для того, чтобы указать браузеру брать закэшированные данные, нужно вставить в файл .htaccess:

location ~* .(jpg|png|gif|jpeg|css|js)$ {
    expires 24h;
}

В данном случае актуальность кэша 24 часа, а типы проверяемых файлов указаны перечислением — jpg, png, gif, jpeg, css, js.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. volos_86

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

    Ответить
  2. tiaurus автор

    Да, плагины кэширования WP Super Cache и W3 Total Cache приписывают все эти директивы самостоятельно при настройке параметров кэширования.

    Ответить
  3. Nurlan

    Что это значит и как исправить? «Следующие открытые для кэширования сжимаемые ресурсы должны иметь заголовок Vary: Accept-Encoding.»

    Ответить