Apache Archived

Cara mengoptimalkan website dengan caching browser

Apa itu caching browser?

  • Browser caching menyimpan file sumber halaman web pada komputer lokal saat pengguna mengunjungi halaman web.
  • “Memanfaatkan” caching browser adalah saat seorang webmaster telah menginstruksikan browser bagaimana sumber daya mereka harus ditangani.

Saat peramban web menampilkan laman web Anda, Anda harus memuat beberapa hal seperti logo, file CSS, dan sumber daya lainnya.

Apa yang dilakukan browser caching adalah mengingat kembali content yang telah dimuat browser. Bila pengunjung mengunjungi halaman lain di situs Anda, logo Anda, file CSS, dan lain-lain tidak perlu dimuat lagi, karena browser sudah memilikinya (sudah disimpan dilocal). Inilah alasan mengapa tampilan pertama halaman web memakan waktu lebih lama.

Bila Anda memanfaatkan cache browser, file halaman web Anda akan tersimpan dalam cache browser . Halaman Anda akan memuat lebih cepat untuk halaman yang sama dan juga halaman lain yang berbagi sumber daya yang sama.

Jika Anda telah menguji halaman web Anda untuk kecepatan dan mengetahui bahwa Anda perlu memanfaatkan cache browser, berikut adalah cara melakukannya.


Cara memanfaatkan browser caching

  1. Ubah request headers untuk menggunakan caching.
  2. Optimalkan caching Anda.

Ubah request headers untuk menggunakan caching

Banyak orang, mengaktifkan caching dengan menambahkan beberapa kode ke file .htaccess di host / server web.

File .htaccess mengontrol banyak hal penting untuk situs Anda.

Caching browser untuk .htaccess

Kode di bawah ini memberitahu browser apa yang harus di cache dan berapa lama untuk “mengingatnya”. Ini harus ditambahkan ke bagian atas file .htaccess Anda.

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"

Simpan file .htaccess lalu segarkan kembali halaman web.

Cara mengatur waktu caching yang berbeda untuk jenis file yang berbeda

Anda bisa lihat di kode diatas bahwa ada periode waktu seperti “1 tahun” atau “1 bulan”. Ini terkait dengan jenis file, sebagai contoh kode di atas menyatakan bahwa file .jpg (gambar) harus di-cache selama setahun.

Jika Anda ingin mengubahnya dan katakan bahwa Anda ingin gambar jpg Anda di-cache selama sebulan Anda cukup mengganti “1 tahun” dengan “1 bulan”. Nilai di atas cukup dioptimalkan untuk sebagian besar halaman web dan blog.

Metode caching alternatif untuk .htaccess

Metode di atas disebut “Expires” dan bekerja untuk kebanyakan orang yang menggunakan .htaccess sehingga menangani cache untuk kebanyakan orang yang baru memulai.

Setelah Anda merasa lebih nyaman dengan caching, Anda mungkin ingin mencoba Cache-Control, metode caching lain yang memberi kita lebih banyak pilihan.

Hal ini juga memungkinkan metode kadaluarsa tidak bekerja untuk server Anda, dalam hal ini Anda mungkin ingin mencoba menggunakan Cache-Control.

Cache-Control

Catatan: Saya telah membuat panduan yang lebih lengkap untuk Cache-Control di sini .

Cache-Control memungkinkan kita untuk memiliki sedikit kontrol lebih dari cache browser kita dan banyak orang merasa lebih mudah untuk menggunakan sekali setup.

Contoh penggunaan file .htaccess:

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Kode di atas adalah mengatur header kontrol cache tergantung pada jenis file.

Cara kerja cache-control

Mari kita gunakan kode di atas baris demi baris.

# 1 Bulan untuk sebagian besar aset statis

Baris di atas hanyalah sebuah catatan. Itu tidak melakukan apapun kecuali mencatat apa yang kita lakukan. File .htaccess mengabaikan baris yang dimulai dengan karakter #. Catatan ini direkomendasikan karena Anda mungkin memiliki beberapa rangkaian berbeda karena solusi caching Anda tumbuh.

<filesMatch “. (css | jpg | jpeg | png | gif | js | ico) $”>

Baris di atas mengatakan bahwa “jika file adalah salah satu dari jenis ini, maka kita akan melakukan sesuatu untuk itu …

Bagian penting dari baris ini adalah untuk mengetahui bahwa ada beberapa jenis file yang terdaftar (css, js, jpeg, png, dll.) Dan instruksi caching yang mengikutinya akan berlaku untuk jenis file tersebut.Sebagai contoh, jika Anda tidak ingin file jpg Anda di-cache untuk jumlah waktu yang dapat Anda hapus “jpg” dari baris ini atau jika Anda ingin menambahkan html ke ini, Anda bisa menambahkan “html” ke baris ini.

Header mengatur Cache-Control “max-age = 2592000, public”

Baris di atas adalah tempat header sebenarnya disisipkan dan nilai yang diberikan.

  • Bagian “Header set Cache-Control” mengatur tajuk.
  • Bagian “max-age = 2592000” menyatakan bahwa sudah lama harus di-cache (menggunakan detik). Dalam hal ini kita caching selama satu bulan yaitu “2592000” detik.
  • Bagian “publik” menyatakan bahwa ini adalah publik (yang bagus jika Anda menginginkannya di-cache).
</filesMatch>

Baris di atas adalah menutup pernyataan dan mengakhiri blok kode.

Masalah caching umum

Jika Anda mencantumkan html dan gambar Anda untuk di-cache selama satu tahun atau beberapa periode waktu yang lama, ingatlah bahwa ini bisa berarti jika Anda membuat perubahan pada halaman Anda, mereka mungkin tidak dapat dilihat oleh semua pengguna. Ini karena pengguna akan melihat ke file yang di-cache bukan yang asli. Jika Anda memiliki file yang Anda tweak sesekali (contoh – file CSS), Anda dapat mengatasi masalah cache dengan menggunakan sidik jari URL.

Jejak URL

Mendapatkan sumber daya file yang baru (tidak di-cache) dimungkinkan dengan memiliki nama yang unik. Contohnya adalah jika file css kita diberi nama “main.css”, kita bisa menamainya “main_1.css”. Lain kali kita mengubahnya kita bisa menyebutnya “main_2.css”. Ini berguna untuk file yang sesekali berubah.

Metode caching

Penting untuk menentukan salah satu Maxires Expires atau Cache-Control, dan salah satu Last-Modified atau ETag, untuk semua sumber daya yang dapat disimpan cache. Hal ini berlebihan untuk menentukan Expires dan Cache-Control: max-age, atau untuk menentukan kedua Last-Modified dan ETag.

Andri Kurniawan
What’s up, I’m Andri. I’m a Website Developer based in Dunispulsa with over 12 years of professional experience. I spend my days working on all sorts of interesting web projects.