Способи відключення кешування CSS

13

Від автора: в першу чергу продуктивність браузера підвищується за рахунок кешування CSS. Переконайтеся, що ваш сервер відправляє заголовки, які говорять браузеру зберігати CSS файли певний час. Це найкращий підхід, яким користуються на більшості, якщо не на всіх сайтах.

Кешування дуже тісно пов’язано з браузером, і в підсумку легше його відключити. Поставте в настройках браузера зберігати кеш CSS один рік (що не рідкість). І раптом вам знадобилося змінити стилі. В такому разі вам потрібно подумати, як очистити кеш і змусити браузер перезавантажити CSS. Нижче представлені кілька варіантів розв’язання цієї задачі.

CSS необхідно кешувати, це дуже важливо…

Просто подивимося на те, як виглядають заголовки для кешування CSS файлів:

Способи відключення кешування CSS

Нам потрібні Cache-Control і Expires. Я не експерт в області конфігурації серверів, зазвичай я дивлюся в H5BP конфіги. Але в нашому випадку є класичний спосіб через Apache/HTAccess:

Header set Expires «Thu, 15 Apr 2020 20:00:00 GMT»
ExpiresActive on
ExpiresByType text/css «access plus 1 year»
ExpiresByType application/javascript «access plus 1 year»

Запити

Зараз браузери бачать URL з якими запитами, як окремі файли і просто оновлюють їх на свіжі копії. Більшість CDN підтримують таку функцію і рекомендують її.

Щось не так? Змініть на це:

Можна полегшити цей процес, встановивши змінну на сервері, щоб потім використовувати її скрізь, де необхідно. Тоді б при будь-якій зміні файл кешу розбивався б на безліч окремих файлів.

Швидше за все, ви навіть могли б використовувати семантичне версіонування, а також можна задати константи.

Зміна імені файлу

Запити не завжди спрацьовують. Деякі браузери не розрізняють різні рядки запитів, як різні файли. А ЗА деякий (Squid) взагалі не кешує файли за строковим запитам. Steve Souders у своїй статті розповідає, чому не варто використовувати рядкові запити. Схожа техніка застосовується із зміною імені файлу. Як у HTML нижче:

Необхідно програмно змінити ім’я файлу, а не просто вбити готове. Таким чином, файл насправді не існує взагалі, вам доведеться написати пару рядків коду, щоб потрапити до потрібного файлу. Зовсім недавно Jeremy Keith відкрив цю техніку.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule^(.+).(d+).(js|css)$ $1.$3 [L]

Сервер буде ігнорувати цифри в іменах файлів CSS і JavaScript, однак браузер все ж буде вважати назви файлами і буде намагатися оновити код. Jeremy Keith користується Twig і застосовує наступний шаблон:

{% set cssupdate = ‘20150310’ %}

Впевнений, що ви можете уявити схожий код на будь-якому backend мовою (типу ASP). Можна потренуватися з написанням даного скрипта для оновлення змінної.

Відключення кешування засноване на оновлення дати

Під час пошуку в інтернеті з приводу відключення кешування ви натрапите на купу порад, вам будуть рекомендувати використовувати сервер для перевірки останнього оновлення режим файлу і створити «номер» відключення кешу (номер означає що завгодно, що ви можете змінити для оновлення кешу).

functionautoversion($url){
$path =pathinfo($url);
$ver=’.’.filemtime($_SERVER[‘DOCUMENT_ROOT’].$url).’.’;
return $path[‘dirname’].’/’.str_replace(‘.’, $ver, $path[‘basename’]);
}

Взагалі, я не дуже в цьому хороший. Мені здається, що кожен раз запитувати сервер при перегляді сторінки буде вкрай небезпечно. Раніше я взагалі шукав фото на сервері за його розмірами! Будьте обережні, в загальному.

ETag’і

Можливо ETag’і здадуться гарною ідеєю, так як більшість з них це інформація про те, чи є вже у браузера копії файлів. Але більшість порадників в інтернеті кажуть: «відключайте ETag заголовки». Yahoo каже:

«Вся проблема з ETag’ами в тому, що вони створюються з допомогою атрибутів, які роблять їх унікальними для кожного сервера. ETag’і не співпадуть, якщо браузер отримав компонент від одного сервера, і той намагається перевірити компонент на іншому сервері. Загальна проблема сайтів, побудованих на кластерних серверах.»

Інша проблема в тому, що вони просто не ефективні при кешуванні. Для перевірки ETag’ів усе ще потрібно робити мережні запити. Це не просто завантаження файлів, яка зменшує продуктивність, а також різні затримки на стороні сервера при обробці запитів.

І знову я не експерт у цій тематиці, але рекомендується відключити їх в Apache:

Header unset ETag
FileETagNone

Справа для фреймворків

Rails файлопровод

Я трохи попрацював з Rails файлопроводом і Sprockets. Якщо ви запитаєте мене, що це, я відповім, що це фреймворки мрії. Я вказав посилання в шаблоні:

Яка генерує HTML:

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

WordPress

Якщо ви застосовуєте кешування сторінок в WordPress, типу W3 TotalCache або ще щось, то вам можна не турбуватися, що filemtime навантажить сервер. Gilbert Pellegrom написав статтю про техніку відключення кешу на WordPress, в ній він використав цей код:

wp_register_style(‘screen’, get_template_directory_uri() . ‘/style.css’, array(), filemtime(get_template_directory() . ‘/style.css’));
wp_enqueue_style(‘screen’);
// Приклад вихідного файла: /style.css?ver=1384432580

Плагін Busted! робить те ж саме, тільки автоматично.

CodeKit

У CodeKit немає вбудованого методу зміни імені файлів, але є спосіб написати Shell скрипт.

Способи відключення кешування CSS

У Michael Russell є стаття про те, як вставити тимчасові позначки в самих себе, які, я впевнений, можна модифікувати, щоб змінити ім’я файлу.

Складання

У всіх популярних таск-раннери є плагін для зміни імені файлу. У Sufian Rhazi є стаття про те, як робити це через Node.js.

Grunt

grunt-cache-bust

Gulp

gulp-cache-bust

gulp-buster

Broccoli

broccoli-rev

З допомогою препроцесорів

Під час лінкування різних ресурсів (наприклад, зображення з LESS файлу) можна підключити препроцесор. У Ben Nadel є стаття.

Асинхронне завантаження CSS

Критичний CSS стає все більш популярним. Є причини і крім асинхронної завантаження, це відкласти завантаження CSS (можна вбудувати CSS в тіло сторінки). Якщо ви завантажуєте CSS за допомогою loadCSS (або вставляєте тег посилання), вам потрібно оновити запитувана в JavaScript ім’я файлу. Інакше, змінивши ім’я файлу, ви не оновіть CSS код.