Как использовать кеш браузера

Обновлено: 24.11.2024

  • Изображения: логотипы, картинки, фоны и т. д.
  • HTML
  • CSS
  • JavaScript

Короче говоря, браузеры обычно кэшируют так называемые "статические ресурсы" – части веб-сайта, которые не меняются от посещения к посещению.

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

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

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

Преимущества кэширования

Когда вы посещаете веб-сайт в первый раз, ваш браузер взаимодействует с удаленным сервером, на котором размещен сайт. Ваш браузер отправляет запрос, а сервер возвращает один из ресурсов веб-сайта. HTML-код страницы загружается первым и становится образцом, по которому построен сайт. Когда ваш браузер читает HTML-код, он отправляет на сервер дополнительные запросы на отправку дополнительных частей страницы, в основном статических ресурсов, упомянутых выше.

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

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

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

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

На сложных сайтах наряду с большими изображениями используются большие файлы JavaScript, необходимые для таких приложений, как корзины покупок, интерактивные изображения и списки пожеланий. Представьте, как негативно повлияет на коэффициент конверсии, если пользователю придется ждать от пяти до десяти секунд, пока кнопка «Купить сейчас» не появится под продуктом. Быстрый и плавный просмотр необходим для того, чтобы клиенты чувствовали себя комфортно и поощряли конверсию. Кроме того, при следующем посещении кешированного сайта электронной торговли эти объекты по-прежнему будут доступны на вашем устройстве для более быстрой загрузки.

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

Некоторые подводные камни

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

Если вы правильно выполнили обмен изображениями, проблема обычно связана с кэшированием.

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

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

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

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

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

Кэш браузера — это механизм, используемый браузерами для локального хранения ресурсов веб-страницы. Это увеличивает производительность, минимизирует потребление полосы пропускания и в целом обеспечивает более быструю работу. В этой статье мы объясним, как работает кеширование в браузере и как реализовать его на своем веб-сайте.

Что такое кеш браузера?

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

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

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

Термин "проверка" относится к содержимому, которое необходимо сверить с самой последней версией, имеющейся на сервере. Короче говоря, чтобы определить, устарел ли контент или нет. Аннулирование происходит, когда содержимое было удалено из кэша до истечения срока действия. Это может быть принудительно выполнено сервером в тех случаях, когда содержимое изменилось, и в браузере должна быть установлена ​​самая последняя версия, чтобы не создавать никаких проблем.

Кеширование заголовков браузера

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

Управление кешем

  • Без кеша
    Предписывает вашему веб-браузеру не обращаться к кешу сразу, а проверять содержимое на сервере. Если он свежий, то его можно подать из тайника.
  • No-store
    Указывает браузеру не кэшировать содержимое каким-либо образом. В основном он используется при работе с конфиденциальными данными или данными, которые часто меняются.
  • Общедоступно
    Содержимое помечается как общедоступное, что означает, что оно может кэшироваться браузером и любыми посредниками (например, прокси-серверами и т. д.).
  • Частный
    Используется для пометки содержимого как частного, что означает, что его может кэшировать только браузер, а не промежуточные прокси-серверы и тому подобное. Обычно это относится к пользовательским данным.
  • Максимальный возраст
    Максимальный возраст представляет собой максимальное время в секундах, в течение которого контент может оставаться в кеше браузера, прежде чем клиенту потребуется его повторная проверка. В отличие от заголовка Expires, который мы вскоре рассмотрим, max-age определяет относительное значение в секундах с момента кэширования содержимого, а не абсолютную дату истечения срока действия.
  • S-maxage
    Похож на max-age, но используется только для промежуточных кэшей.
  • Обязательная повторная проверка
    Заставляет браузер повторно проверять контент каждый раз, когда он в нем нуждается, а не просто показывать его непосредственно из кеша браузера.
    Это удобно на случай, если происходит прерывание сети.
  • Прокси-повторная проверка
    Аналогичен обязательной повторной проверке, но применяется только к промежуточным кэшам.
  • no-transform
    Предписывает браузеру не преобразовывать содержимое, полученное с сервера, каким-либо образом (обычно сжатие и т. д.).

Этаг

Заголовок ответа Etag используется для идентификации определенного ресурса. Каждый раз, когда изменяется определенный ресурс, создается новый Etag. Таким образом экономится пропускная способность, потому что веб-серверу не нужно давать полный ответ, если Etag не изменился. Следовательно, заголовок Etag включен по умолчанию в Nginx и Apache, а значения Etag генерируются автоматически, поэтому вам не нужно ничего указывать.

Разместите свой веб-сайт с помощью Pressidium

60-ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

Истекает

Прагма

Как реализовать политику кэширования на вашем сайте

Есть два способа реализовать политику кэширования на вашем веб-сайте. Во-первых, определить заголовки ответа кэширования в конфигурации веб-сервера. Во-вторых, сделать это непосредственно в PHP. Ниже приведены примеры двух самых популярных веб-серверов, Apache2 и Nginx:

Апач2

Набор заголовка Cache-Control "max-age=84600, public"

Нгинкс

местоположение ~* \.(jpg|jpeg|png|gif|ico|css|js)$ истекает через 365 дней;
add_header Cache-Control "public" ;
>

Как видите, это довольно просто. В первом примере мы используем директиву apache2 FileMatch для сопоставления с определенным набором типов файлов (.ico, .pdf и т. д.) и делаем их общедоступными с максимальным возрастом 84600 секунд. Во втором мы снова сопоставляем определенные типы файлов, используя директиву местоположения nginx, и включаем максимальный возраст 365 дней. Мы также определяем их как «общедоступные» с помощью предложения добавления заголовка.

PHP

Если вы хотите добавить заголовки ответов непосредственно в свой код, просто используйте команду PHP header.

Как проверить, работает ли это

Вы можете легко проверить правила кэширования браузера, используя, например, веб-консоль Firefox или инструменты разработчика Chrome:

  1. Нажмите на значок гамбургера в правом верхнем углу.
  2. Выберите «Дополнительные инструменты» > «Инструменты разработчика».
  3. Введите URL-адрес в адресную строку и нажмите Enter.

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

В случаях, когда в заголовке Cache-Control указано условие «обязательна повторная проверка», код состояния будет 304 (не изменено). Это означает, что ваш браузер перепроверил ресурс на сервере, и сервер ответил, что содержимое не изменилось, поэтому его можно обслуживать из кеша браузера.

Чтобы отключить кеш, установите флажок "Отключить кеш" и нажмите "Обновить".

В этом случае вы видите, что код состояния равен 200 без каких-либо указаний на использование кеша. Браузер запросил ресурс с веб-сервера, и веб-сервер ответил, предоставив новую копию.

Заключение

Кэширование браузера и политики кэширования могут стать довольно сложными. Но начать экспериментировать с Cache-Control, как мы продемонстрировали, несложно. В большинстве случаев реализации «общей» политики кэширования для статических ресурсов достаточно, чтобы изменить производительность вашего сайта. Тем не менее, это добавляет дополнительный уровень «беспокойства» поверх многих других вещей, и мы считаем, что так не должно быть. Следуйте за нами в нашей следующей публикации, где мы покажем, как мы реализуем кеширование браузера в Pressidium, что избавляет от всех этих забот.

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

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

Что такое кэширование браузера?

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

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

Как работает кэширование в браузере

На следующем изображении показано, как работает кэширование в браузере.

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

Случай 1. Пользователь впервые

На следующем изображении показана ситуация, когда пользователь впервые посещает веб-сайт.

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

Вариант 2. Пользователь использовал веб-сайт раньше

Если пользователь посещает веб-сайт во второй раз, используя одно и то же компьютерное устройство, веб-страница будет загружаться быстрее, чем при первом посещении. Это связано с тем, что веб-браузер будет извлекать статические веб-ресурсы, такие как изображения, CSS и JavaScript, из кеша. Веб-браузер будет использоваться для предоставления HTML-страницы.

На следующем изображении показан этот сценарий.

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

Это аббревиатура термина "тег объекта". Он работает как токен проверки кеша. Он используется, когда срок действия кэшированных файлов истек. Веб-браузер использует ETag в своих запросах, чтобы определить, существует ли устаревшая копия в кэше.

Управление кешем

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

Некоторые директивы этого заголовка включают:

Истекает

Этот заголовок определяет, когда истечет срок хранения ресурсов в кеше. По истечении срока действия браузер будет считать содержимое устаревшим. Например, Срок действия истекает: понедельник, 14 июня 2021 г., 10:30:00 по Гринвичу.

Последнее изменение

В этом заголовке содержится информация о том, когда веб-контент был изменен. Основное содержание этой информации включает дату и время модификации. Например, Последнее изменение: Вт, 11 февраля 2021 г., 10:30:00 по Гринвичу.

Подводные камни кеширования браузера

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

Рекомендации по оптимизации кэширования браузера

Если вы планируете внедрить кэширование в браузере, рассмотрите следующие рекомендации по оптимизации его использования:

  • Используйте заголовки, такие как ETag и Cache-Control, для управления поведением статического содержимого в кеше.
  • Не определяйте поведение кэша с помощью метатегов HTML.
  • Убедитесь, что для контента, который часто меняется, заданы длинные значения максимального возраста. Это улучшит очистку кеша, что заставит браузер получать обновленный контент с сервера.
  • Используйте управление версиями или снятие отпечатков пальцев для очистки кеша. При управлении версиями номер версии присваивается имени файла. Отпечатки пальцев включают в себя добавление отпечатков пальцев к файлу на основе содержимого.
  • Избегайте очистки кеша с помощью строк запроса.

Заключение

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

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

Включение кэширования

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

Также важно помнить, что то, что мы называем кэшированием браузера, на самом деле может иметь место на любой промежуточной остановке между исходным сервером и браузером на стороне клиента, например в кэше прокси-сервера или в кэше сети доставки контента (CDN). .

Кэшировать заголовки

Два основных типа заголовков кэша, cache-control и expires, определяют характеристики кэширования для ваших ресурсов. Как правило, cache-control считается более современным и гибким подходом, чем expires, но оба заголовка можно использовать одновременно.

Заголовки кэша применяются к ресурсам на уровне сервера — например, в файле .htaccess на сервере Apache, используемом почти половиной всех активных веб-сайтов, — для настройки их характеристик кэширования.Кэширование включается путем определения ресурса или типа ресурса, например изображений или файлов CSS, а затем указания заголовков для ресурса(ов) с требуемыми параметрами кэширования.

Управление кешем

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

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

Cache-control имеет ряд параметров, часто называемых директивами, которые можно задать, чтобы конкретно определить, как обрабатываются запросы к кешу. Некоторые общие директивы объясняются ниже; вы можете найти дополнительную информацию в разделе «Оптимизация производительности» и в Mozilla Developer Network.

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

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

max-age: определяет максимальное время, в течение которого контент может храниться в кэше, прежде чем его необходимо будет повторно проверить или загрузить с исходного сервера. Этот параметр обычно заменяет заголовок expires (см. ниже) и принимает значение в секундах с максимальным допустимым возрастом в один год (31536000 секунд).

Срок действия кэширования истекает

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

Вот пример того, как вы можете настроить кэширование в файле .htaccess на сервере Apache.

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

Совет. Не используйте срок действия более одного года; это фактически навсегда в Интернете и, как отмечалось выше, является максимальным значением для max-age при управлении кешем.

Обзор

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

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

Читайте также: