Как включить кэширование сайта на html

Руководство по использованию кэша приложения

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

Использование интерфейса кэша даёт вашему приложению три преимущества:

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

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

Файл манифеста кэша

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

Справка по файлу манифеста

Чтобы разрешить кэш приложения включите атрибут manifest в тег .

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

Атрибут manifest задаёт абсолютный или относительный URL, но абсолютный путь должен быть в рамках того же веб-приложения. Файл манифеста может иметь любое расширение, но требуется указать правильный MIME-тип (см.ниже).

Файл манифеста должен отдаваться с MIME-типом text/cache-manifest . Возможно, вам придётся добавить пользовательский тип файла на веб-сервере или через настройку .htaccess. Например, чтобы настроить этот MIME-тип в Apache, добавьте в конфигурационный файл:

AddType text/cache-manifest .appcache

Или в файл app.yaml на Google App Engine:

- url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)

Структура файла манифеста

Простой манифест может выглядеть примерно так:

CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js

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

Следует отметить несколько вещей:

строка CACHE MANIFEST должна идти первой, и обязательна;
данные кэширования сайтов ограничены 5 Мб. Однако если вы пишете приложение для Chrome Web Store, использование unlimitedStorage снимает это ограничение;
если файл манифеста или ресурс, указанный в нём не может быть скачан, весь процесс обновления кэша провалится, браузер станет использовать старый кэш приложения.

Давайте рассмотрим более сложный пример:

CACHE MANIFEST # 2010-06-18:v2 # Явно кэшируемые основные записи CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Ресурсы, которые потребуются пользователю в онлайне NETWORK: login.php /myapi http://api.twitter.com # static.html будет использоваться, если main.py недоступен # offline.jpg будет использоваться вместо всех изображений в images/large/ # offline.html будет использоваться вместо всех HTML-файлов FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html

Строки, начинающиеся с решётки (#), являются комментариями, но также могут служить и другой цели. Кэш приложения обновляется только при изменении файла манифеста. Так, например, при редактировании изображений или функций JavaScript, эти изменения не будут кэшированы повторно. Вы должны изменить файл манифеста, чтобы сообщить браузеру обновить файлы в кэше. Создание комментария с номером версии, контрольной суммой или датой это один из способов гарантировать пользователям, что они используют последнюю версию. Вы можете также программно обновлять кэш, когда новая версия будет готова, как описано в разделе про обновление кэша.

Манифест может иметь три различных раздела: CACHE, NETWORK и FALLBACK.

CACHE: Это стандартный раздел для записи. Файлы, перечисленные в этом блоке (или сразу после CACHE MANIFEST) будут явно кэшированы после того как они скачаны в первый раз.

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

FALLBACK: Дополнительный раздел указывает резервные страницы, если ресурс недоступен. Первый URL является ресурсом, второй резервом. Оба адреса должны быть относительны и быть в том же месте, что и файл манифеста. Можно использовать * для задания шаблона.

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

Следующий манифест определяет «универсальные» страницы (offline.html), которые будут отображаться, когда пользователь пытается получить доступ к корню сайта в автономном режиме. Он также заявляет, что все другие ресурсы (например, на удаленном сайте) требуют подключения к Интернету.

CACHE MANIFEST # 2010-06-18:v3 # Явно кэшируемые записи index.html css/style.css # offline.html будет показан в автономном режиме FALLBACK: / /offline.html # Все другие ресурсы (включая сайты) требуют подключение к сети NETWORK: * # Дополнительные ресурсы в кэше CACHE: images/logo1.png images/logo2.png images/logo3.png

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

Обновление кэша

Оффлайновое приложение остаётся в кэше, пока не произойдёт одно из следующих событий:

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

Статус кэша

Объект window.applicationCache выступает вашим программным доступом к кэшу браузера. Свойство status используется для проверки текущего состояния кэша.

var appCache = window.applicationCache; switch (appCache.status) < case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 5 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; >;

Для программного обновления кэша вначале вызывается applicationCache.update(). Он будет пытаться обновить кэш пользователя (который требует, чтобы файл манифеста изменился). Наконец, когда applicationCache.status находится в состоянии UPDATEREADY, вызов applicationCache.swapCache() обновит старый кэш на новый.

var appCache = window.applicationCache; appCache.update(); // Попытка обновить кэш пользователя . if (appCache.status == window.applicationCache.UPDATEREADY) < appCache.swapCache(); // Успешно, меняем на новый кэш >

Использование update() и swapCache() не служит обновлением ресурсов пользователю. Этот поток просто говорит браузеру проверить новый манифест, скачать указанное обновленное содержания и повторно заполнить кэш приложения. Таким образом, страница скачивается с сервера дважды, в первый раз заполняется новый кэш приложения, а во второй раз обновляется содержание страницы. Хорошая новость: вы можете избежать этого двойного скачивания. Для обновления у пользователя новой версии вашего сайта установите отслеживание события updateready во время скачивания страницы.

// Проверить, если новый кэш доступен при скачивании страницы window.addEventListener('load', function(e) < window.applicationCache.addEventListener('updateready', function(e) < if (window.applicationCache.status == window.applicationCache.UPDATEREADY) < // Браузер скачивает новый кэш // Заменяет его и обновляет страницу window.applicationCache.swapCache(); if (confirm('Новая версия этого сайта доступна. Загрузить её?')) < window.location.reload(); >> else < // Манифест не поменялся, ничего нового на сервере >>, false); >, false);

События AppCache

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

function handleCacheEvent(e) < //. >function handleCacheError(e) < alert(Ошибка: Не удалось обновить кэш!'); >; // Выполняется после первого кэширования манифеста appCache.addEventListener('cached', handleCacheEvent, false); // Проверка обновления. Всегда идёт первым в последовательности событий appCache.addEventListener('checking', handleCacheEvent, false); // Обновление найдено, браузер забирает ресурсы appCache.addEventListener('downloading', handleCacheEvent, false); // Манифест вернул ошибку 404 или 410, загрузка прервана // или манифест изменился, пока происходил процесс загрузки appCache.addEventListener('error', handleCacheError, false); // Выполняется после первого скачивания манифеста appCache.addEventListener('noupdate', handleCacheEvent, false); // Выполняется, если файл манифеста возвращает 404 или 410. // Эти результаты в кэше приложения будут удалены appCache.addEventListener('obsolete', handleCacheEvent, false); // Выполняется для каждого ресурса перечисленного в манифесте, пока они забираются appCache.addEventListener('progress', handleCacheEvent, false); // Выполняется, когда ресурсы манифеста были недавно скачаны appCache.addEventListener('updateready', handleCacheEvent, false);

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

Как настроить кэширование и сжатие на хостинге

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

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

Чтобы настроить кэширование htaccess, используется модуль mod_expires. В этом модуле можно задавать время хранения данных в кэше с помощью значений: years, months, weeks, days, hours, minutes и seconds.

Чтобы включить кэширование htaccess:

1. Проверьте, что файл .htaccess находится в корневой директории сайта. Если в директории сайта нет файла, создайте его и переходите ко второму шагу.

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

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»

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

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

Если у вас не настроено сжатие или после настройки по-прежнему не работает кэширование htaccess, обратитесь в службу поддержки.

Настройка кэширования и сжатия, если у вас ISPmanager

1. Перейдите в панель управления ISPmanager. Для этого в строке с названием нужной услуги хостинга нажмите на 3 точки и выберите Войти в панель управления.

2. Откройте раздел Сайты или WWW-домены. Дважды кликните по домену, для которого хотите настроить кэширование или сжатие:

Сайты в ISPmanager 6

3. На вкладке «Оптимизация сайта» галочкой отметьте:

пункт «Настроить сжатие» и укажите уровень сжатия (5 — оптимальное значение),
пункт «Настроить кэширование». Затем выберите период и задайте его значение (7 дней — оптимальный период).

Чтобы применить настройки, кликните Ок.

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

Готово, сжатие и кэширование в ISPmanager настроено.

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

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

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

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

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»

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

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

Header unset Cache-Control

Также рекомендуем почитать:

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

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

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

Чтобы настроить кэширование в ispmanager, следуйте инструкции: Как настроить кэширование в ispmanager?

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

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

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

 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"

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

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

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

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

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

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

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

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

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

Помогла ли вам статья?

Спасибо за оценку. Рады помочь ��