Bagaimana cara menetapkan header kedaluwarsa untuk CSS, JS, dan Gambar?

38

Baru-baru ini saya menganalisis situs web saya dengan addon kecepatan halaman di pembakar. Itu menyarankan saya untuk mengatur kedaluwarsa pada file CSS, JS dan gambar.

Saya bertanya-tanya bagaimana saya melakukan ini?

css javascript cache page-speed Koolabin
sumber

Jawaban:

37

Perbarui konfigurasi Apache Anda untuk memasukkan arahan di bawah ini sebagai bagian dari konfigurasi inti Anda :

# 
# associate .js with "text/javascript" type (if not present in mime.conf)
# 
AddType text/javascript .js

# 
# configure mod_expires
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# 
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 2692000 seconds"
    ExpiresByType image/jpeg "access plus 2692000 seconds"
    ExpiresByType image/png "access plus 2692000 seconds"
    ExpiresByType image/gif "access plus 2692000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
    ExpiresByType text/css "access plus 2692000 seconds"
    ExpiresByType text/javascript "access plus 2692000 seconds"
    ExpiresByType application/x-javascript "access plus 2692000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# 
# configure mod_headers
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
# 
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
        Header set Cache-Control "max-age=2692000, public"
    </FilesMatch>
    <FilesMatch "\\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>
    Header unset ETag
    Header unset Last-Modified
</IfModule>
John Conde
sumber
Saya mendapatkan 500 kesalahan Server Internal ketika saya meletakkannya di file .htaccess saya
KoolKabin
Pengaturan Apache Anda mungkin tidak mendukung semua opsi yang tercantum di atas. Saya akan segera memperbarui jawaban ini untuk membantu menyelesaikan masalah ini.
John Conde
Drupal saya berisi referensi javascript / css seperti: www.example.com/misc/jquery.js?v=1.4.4 atau www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293, itu tampaknya tidak berfungsi untuk file seperti itu. Apakah sudah diperbarui hari ini?
AgA
2
@JohnConde Mengapa kedaluwarsa dan header? Juga, ketika memperbarui gambar atau css misalnya, apakah file perlu diganti namanya? Atau untuk file css versi kerjanya: test.css? 123?
riseagainst
14

Anda dapat meletakkan ini di htaccess Anda:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

Ini akan menargetkan file dengan ekstensi tersebut (ico, flv, jpg, dan sebagainya) dan mengatur header Kedaluwarsa menjadi waktu akses (A) ditambah 30 hari (2592000 detik). Anda juga dapat menambahkan ini di tingkat server jika Anda memiliki akses ke sana.

DisgruntledGoat
sumber
2

Itu tergantung dari tuan rumah dan cara Anda server hal-hal ini. Opsi 1) jika Anda mengontrol server, buat apache untuk menambahkan header kedaluwarsa dalam Opsi jawaban 2) jika Anda tidak mengontrol server web, atau Anda server gambar / js / css / etc Anda dapat mengatur header ini dari script yang server mereka

Ingatlah bahwa petunjuk ini direkomendasikan tetapi bukan kebenaran absolut. Mereka lebih menghemat bandwidth daripada mempercepat situs web Anda. Jadi jika Anda memiliki traffic rendah ke situs Anda jangan terlalu khawatir tentang hal ini.

Ilian Iliev
sumber
Saya dengan opsi 2. Bagaimana cara mengatur header ini dari skrip. Script artinya php atau yang mana?
KoolKabin
Anda dapat memeriksa stackoverflow.com/questions/2185449/... ini adalah contoh python tetapi jika Anda terbiasa dengan pemrograman saya pikir Anda akan mendapatkan ide. Di php Anda harus menggunakan header (). Tetapi perlu diingat bahwa dalam hal ini semua file "statis" harus dilayani melalui skrip yang akan meningkatkan kuota CPU Anda. Sekarang saya sadar bahwa ada opsi ke-3. Gunakan CDN untuk file-file ini.
Ilian Iliev
2

Menyiapkan kedaluwarsa di Lightspeed Web Server

Masuk ke Konsol Admin lalu> Server-> Umum-> Pengaturan Kedaluwarsa-> Kedaluwarsa Menurut Jenis

Tambahkan yang berikut ini:

text/css=A604800, text/javascript=A604800, application/javascript=A604800, application/x-javascript=A604800, application/x-shockwave-flash=A604800, image/gif=A604800, image/jpg=A604800, image/jpeg=A604800, image/png=A604800, image/ico=A604800, image/icon=A604800

604800 adalah detik kedaluwarsa, yang harus sesuai dengan kebutuhan Anda sejak 168 jam yaitu 7 hari. Selain itu, Light Speed ​​Server tidak menggunakan htaccess yang perlu Anda tambahkan baris berikut:

ExpiresActive On

Atau jika Anda tidak memiliki akses konsol admin coba ikuti file .htaccess berikut:

  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
Simon Hayter
sumber