Кэширование статического контента

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

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

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

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

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

Например, в приложении используется стили, скрипты и изображения. При первом обращении к ресурсу сервер отправит все необходимые файлы вместе с заголовком OK 200:

Как правило, браузеры сохраняют все загруженные статические файлы и при повторном запросе проверяют, изменился ли файл на сервере. Если сервер отдает заголовок 304 Not Modified, что знаичт, что файлы не изменялись, браузер использует ранее сохраненные файлы на локальном компьютере. Если файлы на сервере были изменены, то они повторно загружаются на локальный компьютер:

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

В файле конфигурации в пределах узла <configuration> добавим новый элемент:

<system.webServer>
    <staticContent>
      <clientCache httpExpires="Fri, 08 May 2015 00:00:00 GMT" cacheControlMode="UseExpires" />
    </staticContent>
</system.webServer>

Элемент staticContent определяет секцию, относящуюся к статическим файлам. В частности, с помощью элемента <clientCache> можно задать параметры кэширования на клиенте. Атрибут httpExpires задает максимальную дату, до которой контент в браузере будет кэшироваться. В данном случае это пятница 8 мая 2015 года. При определении даты мы должны следовать определенному формату.

Атрибут cacheControlMode принимает одно из значений, которые указывают на режим кэширования:

• NoControl: используется по умолчанию, не добавляет в ответ клиенту никаких загловоков кэширования

• DisableCache: добавляет в ответ клиенту заголовок Cache-Control: no-cache - запрет кэширования

• UseMaxAge: добавляет в ответ клиенту заголовок Cache-Control: max-age="временной отрезок" - в качестве временного отрезка используется значение атрибута CacheControlMaxAge

• UseExpires: добавляет в ответ клиенту заголовок Expires: дата, где в качестве даты применяется значение атрибута httpExpires

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

Однако параметр httpExpires не всегда удобен, особенно когда мы хотим задать определенное время кэширования, например, на месяц или на день, вне зависимости от текущей даты. Для этого изменим элемент clientCache следующим образом:

<clientCache cacheControlCustom="public;max-age" 
                   cacheControlMaxAge="10.00:00:00" 
    cacheControlMode="UseMaxAge" />

Атрибут cacheControlMaxAge задает период кэширования в виде объекта TimeSpan. А параметр cacheControlCustom указывает на дополнительную директиву, которая будет использоваться в ответе клиенту.

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

Http-компрессия

Применение сжатия позволит дополнительно оптимизировать нагрузку на сайт. Для этого в изменим вышеопределенный элемент system.webServer:

<system.webServer>
    <urlCompression doDynamicCompression="true" 
                    doStaticCompression="true" 
                    dynamicCompressionBeforeCache="true" />
               
    <staticContent>
      <clientCache cacheControlCustom="public;max-age" 
                   cacheControlMaxAge="10.00:00:00" 
    cacheControlMode="UseMaxAge" />
    </staticContent>
    
</system.webServer>

Элемент <urlCompression> позволяет настроить сжатие с помощью следующих атрибутов:

• doDynamicCompression: если имеет значение true, то применяется динамическое сжатие. По умолчанию true

• doStaticCompression: если имеет значение true, то применяется статическое сжатие. По умолчанию true

• dynamicCompressionBeforeCache: если имеет значение true, то динамическое сжатие производится до помещения ответа в выходной кэш. По умолчанию false

В результате сжатия браузер получит такой заголовок Content-Encoding: gzip. Соответственно если мы хотим отключить компрессию, то всем атрибутам надо поставить значение false.