Работа с кэшированием в браузере — это балансирование. С одной стороны, вы стремитесь минимизировать время загрузки и использование полосы пропускания, гарантируя, что ваши посетители будут кэшировать изображения, сценарии и таблицы стилей; однако вы все еще хотите убедиться, что они получают доступ к самым последним версиям всех ваших файлов.
В этой статье я покажу вам несколько методов управления тем, как файлы вашего сайта кэшируются браузерами, чтобы вы могли достичь лучшего из обоих миров: поддержание оптимальной производительности при одновременном обеспечении немедленного просмотра любых обновлений без каких-либо затруднений со стороны всех пользователей. ваши пользователи.
Допустим, вы включили таблицу стилей на свою страницу с помощью тега ссылки, такого как этот:
<link rel = "stylesheet" href = "/ css / styles.css" type = "text / css" />
Браузеры /css/styles.css файл /css/styles.css один раз и затем кэшируют этот файл. Обычно это идеальное поведение. Ваш сайт будет загружаться быстрее для посетителей, которые кэшировали вашу таблицу стилей, поэтому ваш сервер будет обрабатывать меньше запросов и потреблять меньше трафика.
По умолчанию кэшированные файлы устаревают относительно быстро. Это означает, что, хотя вы или ваша команда можете столкнуться с проблемой с кэшированной таблицей стилей сразу после внесения изменений, нечастые посетители сайта (скажем, раз в несколько дней), вероятно, будут не замечать каких-либо проблем с кэшированным содержимым. Однако это также означает, что посетители будут часто загружать файлы без необходимости, что приводит к увеличению времени загрузки и потере пропускной способности.
В интересах повышения производительности (и, возможно, благодаря YSlow , отличному инструменту для оценки производительности вашего сайта), вы должны попросить браузеры кэшировать файлы с вашего сайта в течение гораздо более длительных периодов времени. Вы можете узнать больше о том, как это сделать, в этой статье Уэйна Ши , где он рекомендует настроить сервер для добавления заголовков «Expires» к вашему контенту, указав браузерам хранить эти файлы в кеше в течение нескольких недель или месяцев.
Но после этого посетители вашего сайта могут испытывать проблемы при внесении изменений в изображения, таблицы стилей или сценарии. Вы можете подумать, что это будет довольно безопасно — просто представить устаревшую версию сайта некоторым посетителям кажется относительно небольшой проблемой. Однако, если некоторые элементы (например, HTML) обновляются, а другие (например, файлы JavaScript) загружаются из кэша, элементы функциональности могут показаться пользователям недоступными.
Есть несколько способов обойти эту проблему, и я рассмотрю их в порядке сложности. Все они связаны с некоторыми вариациями одной и той же темы: обманывать браузер, заставляя его думать, что он загружает файл, отличный от того, который он кэшировал.
Самый простой обходной путь заключается в том, чтобы переименовывать таблицы стилей, изображения и файлы JavaScript при каждом их обновлении. Так, например, вы можете включить номер версии в имена ваших файлов, например так:
<link rel = "stylesheet" href = "/ css / styles.1234.css" type = "text / css" />
Хотя это будет работать достаточно хорошо, оно может стать очень утомительным, если вы часто меняете файлы или имеете большое количество статических ресурсов. Тем не менее, он имеет двойное преимущество в качестве элементарного управления исходным кодом — у вас будет история всех изменений, которые вы внесли в свой сайт, изложенных в вашей файловой системе.
Другой популярный метод — добавить строку запроса в конец имени файла, например:
<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 в своей таблице стилей — или на изображения, на которые она ссылается, — вы можете просто изменить этот номер версии, и все посетители вашего сайта получат правильные стили и изображения. Помимо того, что вы выполняете намного меньше работы, чем индивидуальное изменение каждой ссылки на изображение, вы также избегаете забывать любые изображения, поскольку все это делается автоматически.
Я еще не упомянул явно файлы JavaScript, но, конечно, любой метод, используемый для CSS, также можно использовать для JavaScript. Итак, для метода path у вас будет такой скрипт-тег:
<script src = "/ js.1234 / scripts.js" type = "text / javascript"> </ script>
и правило перезаписи, такое как:
RewriteRule js [.] [0-9] + / (. *) $ Js / $ 1 [L]
В этих инструкциях предполагается, что ваши файлы .js находятся в каталоге /js/ , поэтому вам может потребоваться настроить их в соответствии со структурой каталогов вашего сайта.
Только самые маленькие сайты могут позволить себе игнорировать кэширование браузера. Когда вы учитываете кэширование и проектируете свой сайт, чтобы использовать его в своих интересах, вы можете значительно повысить производительность для своих пользователей и сэкономить деньги на пропускной способности, пока вы на нем. Но, как и любая технология, ее легко использовать неправильно, быстро вызывая больше головной боли, чем она того стоит. Используя методы, которые я описал, вы сможете получить максимальную отдачу от кэширования в браузере с минимальными усилиями.
Также важно помнить, что кэширование — это только одна часть стратегии оптимизации сайта; загрузите и используйте YSlow на всех своих сайтах, чтобы обеспечить своим посетителям максимально быстрый опыт. Удачи и счастливой оптимизации!