Статьи

Преодолейте свои проблемы с кэшированием

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

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

Допустим, вы включили таблицу стилей на свою страницу с помощью тега ссылки, такого как этот:

  <link rel = "stylesheet" href = "/ css / styles.css" type = "text / css" /> 

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

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

В интересах повышения производительности (и, возможно, благодаря YSlow , отличному инструменту для оценки производительности вашего сайта), вы должны попросить браузеры кэшировать файлы с вашего сайта в течение гораздо более длительных периодов времени. Вы можете узнать больше о том, как это сделать, в этой статье Уэйна Ши , где он рекомендует настроить сервер для добавления заголовков «Expires» к вашему контенту, указав браузерам хранить эти файлы в кеше в течение нескольких недель или месяцев.

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

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

Другой популярный метод – добавить строку запроса в конец имени файла, например:

  <link rel = "stylesheet" href = "/ css / styles.css? v = 1234" type = "text / css" /> 

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

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

Последний метод – и тот, на котором я хочу сосредоточиться – включает в себя информацию о версии в пути к ресурсу, а не в имени файла или строке запроса. Так, например:

  <link rel = "stylesheet" href = "/ css.1234 / styles.css" type = "text / css" /> 

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

Мы будем использовать правило перезаписи, чтобы URL /css.1234/styles.css (и любые другие числовые варианты этого пути) указывали на /css/styles.css на сервере. Чтобы сделать это с Apache, вам нужно использовать mod_rewrite . Если у вас установлен mod_rewrite и права для файлов .htaccess , настроить правило для этого просто. Вы можете добавить следующие строки в файл .htaccess расположенный в корневой веб-папке вашего сайта:

  RewriteEngine OnRewriteRule css [.] [0-9] + / (. *) $ Css / $ 1 [L] 

Это правило использует регулярное выражение для сопоставления с любым путем, состоящим из css , за которым следует точка ( . ), Затем любое количество числовых символов и, наконец, косая черта. Любой путь, соответствующий этому шаблону, будет переписан как просто /css/<filename> . [L] (что означает «последний») указывает, что к этому запросу не следует применять правила переписывания. Если каталог, содержащий ваши таблицы стилей, имеет имя, отличное от имени css , вам необходимо соответствующим образом изменить правило, заменив оба экземпляра css именем вашего каталога.

А как насчет изображений? Вы можете вручную применить любой из методов, перечисленных выше, к каждому URL изображения на вашем сайте; сюда входят все операторы url() в таблицах стилей и каждый атрибут src для каждого тега img .

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

Этот метод опирается на часто оплакиваемый факт, что свойство CSS url() относится к расположению таблицы стилей , а не к местоположению стилизованного документа.

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

Как это работает? В вашей таблице стилей у вас может быть такое правило:

  #foo {background-image: url (images / foo-background.png);} 

Следуя описанному ранее методу пути, вы включите таблицу стилей в документ с такой разметкой:

  <link rel = "stylesheet" href = "/ css.1234 / styles.css" type = "text / css" /> 

Поскольку изображения в таблице стилей относятся к пути таблицы стилей, путь к используемому вами изображению теперь /css.1234/images/foo-background.png ! Этот URL будет перезаписан RewriteRule , так же, как URL-адрес самого файла CSS.

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