Pernah lihat kode ini?
<include expiration='7d' path='*.css'></include> <include expiration='7d' path='*.js'></include> <include expiration='3d' path='*.gif'></include> <include expiration='3d' path='*.jpeg'></include> <include expiration='3d' path='*.jpg'></include> <include expiration='3d' path='*.png'></include> <meta content='sat, 10 jul 2031 00:00:00 GMT' http-equiv='expires'/>
Mungkin kamu pernah menemukan kode ini pada tutorial untuk optimasi website kamu. Banyak juga saya pernah melihat tutorial ini pada web ataupun forum diluar sana untuk mengatur lamanya kadaluarsanya cache dengan ekstensi tertentu pada blog kamu. Atau mungkin kamu malah ikut menerapkan kode ini untuk web kamu sekarang?
Yo, mending lu hapus deh, soalnya useless atau tidak ada gunanya. Tidak ada efek untuk web kamu. Eh ada sih, efek sugesti saja wkwkwk.
Lalu memangnya itu kode apa? apa yang bisa menggantikan kode itu? yuk kita bahas,
Fungsi Caching Pada Konten
Sebelumnya kita bahas dulu, kenapa konten harus di caching?
Sebenarnya tidak harus. Namun caching memiliki manfaat yang signifikan dalam meningkatkan kecepatan pemuatan halaman dan pengalaman pengguna pada situs web. Dengan caching, browser dapat menyimpan salinan file yang diambil dari server, mengurangi waktu pemuatan halaman secara keseluruhan. Pengguna tidak perlu mengunduh file yang sama berulang-ulang saat mengakses halaman web, mengurangi penggunaan bandwidth dan membantu menghemat biaya hosting. Selain itu, caching juga membantu mengurangi beban server, karena file yang telah di-cache dapat disajikan secara lokal oleh browser, mengurangi permintaan yang perlu dikirim ulang kepada server.
Meningkatnya kecepatan pemuatan halaman dan responsifnya halaman web dengan caching yang berkontribusi pada peningkatan pengalaman pengguna. Pengguna akan mengalami waktu pemuatan yang lebih cepat, yang meningkatkan kepuasan mereka dan mengurangi tingkat bounce rate. Dengan pengalaman yang lebih baik, pengunjung cenderung berinteraksi lebih lanjut dengan situs web kamu, menjelajahi konten lebih lama, dan meningkatkan peluang konversi atau interaksi yang diinginkan.
Selain manfaat langsung bagi pengguna, penggunaan caching juga memiliki dampak positif dalam optimasi mesin pencari (SEO). Search engine seperti Google memberikan peringkat lebih tinggi pada situs web yang memiliki waktu pemuatan halaman yang cepat. Dengan mengimplementasikan caching dengan baik, kamu dapat meningkatkan kinerja SEO situs web kamu dan mendapatkan posisi yang lebih baik dalam hasil pencarian, meningkatkan visibilitas dan lalu lintas organik ke situs kamu.
Secara keseluruhan, caching adalah strategi yang penting untuk meningkatkan kinerja dan efisiensi situs web. Dengan mengurangi waktu pemuatan, beban server, penggunaan bandwidth, serta meningkatkan pengalaman pengguna dan kinerja SEO, caching berperan kunci dalam menciptakan situs web yang lebih responsif, efisien, dan menarik bagi pengunjung.
Darimana tag include expiration diatas muncul?
Entah darimana hal ini berasal, namun tag tersebut serupa dengan EXPIRES CACHING pada file .htaccess. Misalnya seperti dibawah ini
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule>
Dan sayangnya blogger tidak memerlukan file .htaccess. Alhasil, mungkin ada orang mengakalinya dengan tag khusus yaitu <include> yang menurut saya tidak ada efeknya sama sekali lalu dipublikasikan melalui tutorial di artikel mereka.
Awalnya saya kira ini merupakan implementasi khusus yang digunakan dalam kerangka kerja (framework) atau sistem tertentu yang tidak standar dalam HTML. Yaa kurang lebih seperti tag <py-script> dalam PyScript (framework yang menjalankan bahasa pemrograman python di html). Namun saya tidak menemukan sumber yang menerangkan bahwa tag <include> memang bekerja pada halaman statis html.
Meta tag http-equiv='expires'
Meta tag <meta http-equiv="expires" content="value"> adalah sebuah tag dalam HTML yang digunakan untuk mengatur waktu kedaluwarsa (expiration) dari halaman web atau kontennya. Tag ini memberikan instruksi kepada browser mengenai kapan halaman atau konten tersebut dianggap sudah kadaluarsa dan perlu di-refresh atau dimuat ulang dari server.
Value dari atribut content pada tag ini dapat berupa tanggal dan waktu dalam format yang ditentukan, atau dapat pula berupa string yang memiliki makna khusus, seperti "0" untuk mengindikasikan bahwa halaman tersebut sudah kedaluwarsa dan perlu dimuat ulang setiap kali diakses.
Contoh penggunaan meta tag http-equiv='expires' dengan nilai waktu kedaluwarsa pada tanggal 10 Juli 2031:
<include expiration='7d' path='*.css'></include> <include expiration='7d' path='*.js'></include> <include expiration='3d' path='*.gif'></include> <include expiration='3d' path='*.jpeg'></include> <include expiration='3d' path='*.jpg'></include> <include expiration='3d' path='*.png'></include> <meta content='sat, 10 jul 2031 00:00:00 GMT' http-equiv='expires'/>
Dalam contoh di atas, browser akan menggunakan nilai waktu kedaluwarsa yang diberikan (10 juli 2031) untuk menentukan kapan halaman atau kontennya dianggap sudah kadaluarsa dan perlu dimuat ulang dari server.
Penting untuk dicatat bahwa penggunaan meta tag http-equiv='expires' tidak lagi dianggap sebagai metode caching yang disarankan. Penggunaan header HTTP Cache-Control dan ETag yang lebih fleksibel dan lebih mendukung kontrol caching yang lebih baik. Penggunaan meta tag http-equiv='expires' lebih umum digunakan dalam konteks legacy atau situasi di mana tidak ada pilihan lain untuk mengontrol caching pada tingkat server.
Optimasi Cache dengan Meta Tag
Langsung saja, kamu bisa memasang tag dibawah ini di antara tag <head> dan </head>.
<meta content='max-age=86400, must-revalidate' http-equiv='Cache-Control'/>
Tag diatas memberi instruksi kepada browser dan server cache tentang cara menyimpan dan mengelola halaman web.
Maksud dari max-age=86400 adalah halaman tersebut boleh disimpan di cache dan dianggap masih valid selama 86400 detik atau 24 jam sejak halaman terakhir kali dimuat. Setelah 24 jam, halaman tersebut dianggap kadaluwarsa dan perlu dimuat ulang dari server.
Pengaturan max-age yang lebih lama dapat mengurangi jumlah permintaan ke server, mengurangi waktu pemuatan halaman, dan mengurangi penggunaan bandwidth. Namun, ini juga berarti perubahan pada halaman tidak akan langsung terlihat oleh pengguna sampai setelah jangka waktu yang ditentukan. Oleh karena itu, pengaturan max-age harus dipertimbangkan berdasarkan tingkat perubahan konten pada halaman dan kebutuhan aktual situs web.
must-revalidate berarti ketika halaman dianggap kadaluwarsa, browser atau server cache harus memeriksa ulang keabsahan halaman dengan mengirim permintaan ke server. Jika halaman masih valid, maka halaman dapat diambil dari cache. Namun, jika halaman sudah tidak valid, maka halaman harus dimuat ulang dari server.
Dengan pengaturan ini, halaman akan disimpan di cache selama 24 jam. Tetapi setiap kali halaman diakses setelah itu, server akan diminta memeriksa kembali keabsahan halaman. Hal ini membantu memastikan bahwa pengguna selalu mendapatkan versi halaman terbaru.
Penggunaan tag <meta http-equiv='Cache-Control'> seperti ini berguna untuk mengontrol caching di browser ketika kamu tidak memiliki kontrol langsung terhadap server. Namun, perlu diingat bahwa cara caching diimplementasikan dapat bervariasi tergantung pada pengaturan dan kebijakan cache yang ada di browser dan server.
Penutup
Setelah menerapkan kode diatas kamu mungkin bisa mengetes sendiri perbedaan kecepatan load dan ketika berpindah halaman di website kamu. Sekian,