Pak Pid's Blog

CSS dan Cache

leave a comment »

Suatu saat saya sedang membangun sebuah website, dan kebetulan sedang berkutat pada CSS-nya.

Saya melakukan edit file via FTP, dan kebetulan koneksi saya lambat sekali, dan traffic web servernya pun juga cukup tinggi.

Setelah saya mengedit sana sini, dan mencoba me-refresh web browser untuk melihat hasil perubahaannya, apa yang saya dapat? Tidak terjadi perubahaan sama sekali pada tampilan web saya.

Saya coba untuk mengulang proses, tapi sama saja tidak terjadi perubahan, bahkan sampai saya bersihkan history, cookies, dll pada web browser, namun hal yang sama terjadi. Tidak ada perubahan.

Saya kemudian mencoba bertanya pada mbah Google, dan akhirnya saya menemukan jawabannya.

Ternyata ketika kita merequest suatu halaman web pada web server, web server akan mengecek, apakah file CSS yang akan digunakan nanti telah digunakan sebelumnya atau tidak. Dalam kondisi internet jelek, apabila CSS telah digunakan sebelumnya, maka file CSS yang baru tidak akan dikirim ke client, yang terjadi adalah file CSS yang lama yang akan dikirim, sehingga client tidak akan melihat perubahaan pada halaman web, walaupun telah dilakukan editing pada file CSS.

Solusinya…

Anda dapat menggunakan versioning pada CSS. Nah apa itu?

Biasanya anda memasukan file CSS dengan cara seperti ini :

Anda dapat menambahkan versi dibelakan file css, sehingga akan menjadi seperti ini.

<link rel=stylesheet type="text/css" href="basics.css?v=1">

Dapat dilihat bahwa saya menambahkan ?v=1 dibagian belakan file basics.css

Cara ini terbukti ampuh untuk menipu sistem cache web server, sehingga ketika kita merequest satu halaman dengan css yang sama, web server akan membaca bahwa file css yang diminta berbeda. Itu yang menyebabkan file css akan tetap di load ulang. 🙂

Setiap kali anda melakukan perubahaan pada file CSS, anda perlu mengubah nilai version tadi.

Advertisements

Written by das_84id

January 5, 2010 at 12:17 am

Posted in CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: