LarhTech – Pernahkah Anda mengecek skor website di Google PageSpeed Insights dan mendapati peringatan merah bertuliskan “Serve static assets with an efficient cache policy“?
Secara sederhana, peringatan ini muncul karena server Nginx Anda tidak memberikan “instruksi kadaluwarsa” pada file statis seperti gambar, CSS, dan JavaScript. Tanpa instruksi ini, browser pengunjung akan selalu meminta file baru ke server setiap kali halaman diakses, yang berujung pada pemborosan bandwidth dan waktu pemuatan yang lambat.
Solusinya adalah mengatur Browser Cache Expiry. Kita akan menyuruh browser pengunjung untuk menyimpan file statis tersebut di memori lokal mereka selama jangka waktu tertentu (misalnya 1 tahun). Dengan begitu, saat mereka membuka halaman kedua atau ketiga, website akan terasa secepat kilat karena file-file tersebut sudah ada di perangkat mereka.
Langkah 1: Masuk ke Konfigurasi Nginx di aaPanel
Jika Anda menggunakan aaPanel, Anda tidak perlu repot mengetik perintah rumit di terminal.
- Login ke aaPanel Anda.
- Masuk ke menu Websites dan klik pada nama domain Anda (larhtech.com).
- Pada jendela yang muncul, klik tab Config (Konfigurasi).
Langkah 2: Menambahkan Instruksi Cache Expiry
Cari bagian di dalam konfigurasi Nginx Anda yang menangani file statis (biasanya diawali dengan location ~* \.(gif|jpg|jpeg|png…). Jika tidak ada, Anda bisa menambahkannya di bagian bawah sebelum kurung kurawal penutup }.
Tempelkan kode berikut:
# Konfigurasi Browser Cache oleh LarhTech
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
# Berikan instruksi simpan selama 1 tahun (365 hari)
expires 365d;
# Tambahkan header Cache-Control
add_header Cache-Control "public, no-transform";
# Matikan log akses untuk file statis agar server lebih ringan
access_log off;
log_not_found off;
}Penjelasan Kode:
- expires 365d;: Menginstruksi browser untuk menyimpan file selama 365 hari.
- public: Menandakan bahwa file boleh disimpan oleh cache publik (seperti CDN).
- no-transform: Melarang server perantara untuk mengubah ukuran atau format gambar secara otomatis.
Langkah 3: Simpan dan Restart Nginx
Setelah kode ditempel, klik tombol Save. Nginx biasanya akan melakukan reload otomatis di aaPanel. Jika ingin memastikan, Anda bisa masuk ke menu App Store, cari Nginx, lalu klik Restart.
Cara Mengecek Keberhasilan
Untuk memastikan trik ini bekerja, Anda tidak perlu menunggu PageSpeed melakukan pemindaian ulang.
- Buka website Anda di browser Chrome.
- Klik kanan > Inspect > masuk ke tab Network.
- Refresh halaman, lalu klik salah satu file gambar atau CSS.
- Lihat pada bagian Headers. Jika Anda melihat baris Cache-Control: max-age=31536000, selamat! File Anda kini sudah tersimpan dengan aman di browser pengunjung.
Kesimpulan
Mengatur kebijakan cache yang efisien adalah langkah wajib bagi setiap web developer. Selain menaikkan skor Core Web Vitals, langkah ini secara signifikan mengurangi beban CPU server karena tidak perlu melayani permintaan file statis yang sama berulang kali. 1 baris kode, ribuan milidetik terselamatkan!
Baca Juga: Cara Mematikan Avatar di Komentar WordPress
Sekian untuk artikel kali ini semoga bermanfaat!
