Menambahkan Tag "include expiration" Untuk Caching Di Blogger Adalah Tidak Berguna
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 di luar sana untuk mengatur lamanya waktu kadaluarsa cache dengan ekstensi tertentu pada blog kamu. Atau mungkin kamu malah ikut menerapkan kode ini untuk web kamu sekarang?
Yo, mending di hapus deh, soalnya 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
<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.
Sedangkan 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,
Have you ever seen this code?
<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"/>Maybe you have found this code in a tutorial for optimizing your website. I"ve also seen many of these tutorials on websites or forums out there to set the cache expiration time with certain extensions on your blog. Or maybe you even apply this code to your website now?
Yo, it"s better to delete it, because it"s useless. There is no effect on your website. Eh, there is, just a suggestion effect hahaha.
Then what code is that? what can replace that code? let"s discuss,
Content Caching Function
Before we discussed, why should content be cached?
Actually, you don"t have to. However, caching has significant benefits in improving page loading speed and user experience on websites. With caching, the browser can save a copy of files fetched from the server, reducing overall page loading time. Users do not need to download the same files over and over again when accessing web pages, reducing bandwidth usage and helping save on hosting costs. In addition, caching also helps reduce server load, because cached files can be served locally by the browser, reducing requests that need to be resent to the server.
Increased page loading speed and responsiveness of web pages with caching contributes to improved user experience. Users will experience faster loading times, which increases their satisfaction and reduces bounce rates. With a better experience, visitors are likely to interact further with your website, explore content longer, and increase the chances of conversion or desired interaction.
In addition to direct benefits for users, the use of caching also has a positive impact on search engine optimization (SEO). Search engines like Google give higher rankings to websites that have fast page loading times. By implementing caching well, you can improve your website"s SEO performance and get better positions in search results, increasing visibility and organic traffic to your site.
Overall, caching is an important strategy for improving website performance and efficiency. By reducing loading times, server load, bandwidth usage, and improving user experience and SEO performance, caching plays a key role in creating websites that are more responsive, efficient, and engaging for visitors.
Where does the include expiration tag above appear?
I don"t know where this comes from, but this tag is similar to EXPIRES CACHING in the .htaccess file. For example, as below
## 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>And unfortunately blogger doesn"t need the .htaccess file. As a result, maybe someone got around it with a special tag, namely <include> which in my opinion has no effect at all and then published it through a tutorial in their article.
At first I thought this was a special implementation used in a particular framework or system that was not standard in HTML. Yes, it"s more or less like the <py-script> tag in PyScript (a framework that runs the Python programming language in HTML). However, I did not find a source that explains that the <include> tag actually works on static HTML pages.
Meta tag http-equiv="expires"
Meta tag <meta http-equiv="expires" content="value"> is a tag in HTML that is used to set the expiration time (expiration) of a web page or its content. This tag provides instructions to the browser regarding when the page or content is considered out of date and needs to be refreshed or reloaded from the server.
The value of the content attribute in this tag can be a date and time in a specified format, or it can also be a string that has a special meaning, such as "0" to indicate that the page is out of date and needs to be reloaded each time it is accessed.< /p>
Example of using the meta tag http-equiv="expires" with an expiration time value of July 10, 2031
<meta content="sat, 10 jul 2031 00:00:00 GMT" http-equiv="expires"/>In the example above, the browser will use the given expiration time value (July 10, 2031) to determine when the page or content is considered out of date and needs to be reloaded from the server.
It is important to note that the use of the http-equiv="expires" meta tag is no longer considered a recommended caching method. Use of HTTP Cache-Control and ETag headers is more flexible and supports better caching control. The use of the http-equiv="expires" meta tag is more commonly used in legacy contexts or situations where there is no other option to control caching at the server level.
Cache Optimization with Meta Tags
Just go ahead, you can put the tag below between the <head> and </head> tags.
<meta content="max-age=86400, must-revalidate" http-equiv="Cache-Control"/>The tag above gives instructions to the browser and cache server on how to store and manage the web page.
The meaning of max-age=86400 is that the page can be stored in cache and is considered still valid for 86400 seconds or 24 hours since the page was last loaded. After 24 hours, the page is considered expired and needs to be reloaded from the server.
A longer max-age setting can reduce the number of requests to the server, reduce page load times, and reduce bandwidth usage. However, this also means changes to the page will not be immediately visible to users until after a specified time period. Therefore, the max-age setting should be considered based on the rate of change of content on the page and the actual needs of the website.
Meanwhile must-revalidate means that when the page is considered to be expired, the browser or cache server must re-check the validity of the page by sending a request to the server. If the page is still valid, it can be retrieved from the cache. However, if the page is no longer valid, the page must be reloaded from the server.
With this setting, pages will be cached for 24 hours. But every time the page is accessed after that, the server will be asked to check the page"s legitimacy again. This helps ensure that users always get the latest version of the page.
Use of the <meta tag http-equiv="Cache-Control"> like this useful for controlling caching in the browser when you don"t have direct control of the server. However, keep in mind that the way caching is implemented may vary depending on the cache settings and policies in place on the browser and server.
Closing
After applying the code above, you may be able to test for yourself the difference in load speed and when switching pages on your website. That"s all,
Join the conversation