Cara Melayani Aset Statis Dengan Kebijakan Cache yang Efisien

Situs web seperti GTMetrix , dan Google PageSpeed ​​Insights memberikan saran tentang cara meningkatkan kinerja situs web Anda. Jika Anda membaca ini, Anda setidaknya menyadari bahwa setiap situs web memiliki peluang untuk meningkatkan kinerja, baik melalui pengoptimalan manual atau menggunakan plugin seperti 10Web Booster.

Di kedua alat, Anda mungkin melihat saran untukmenayangkan aset statis dengan kebijakan cache yang efisien .Saran ini untuk menyimpan file secara lokal agar kunjungan berulang ke situs lebih cepat. Langkah-langkah untuk memperbaiki rekomendasi ini tidak meningkatkan kunjungan situs awal (ada perbaikan lain untuk itu). Namun, semua kunjungan berikutnya akan mendapat manfaat dari memanfaatkan cache browser.

Perlu dicatat bahwa saran untuk melayani aset statis dengan kebijakan cache yang efisien juga disebut sebagai leverage browser caching atau browser caching di WordPress.

Artikel ini menjelaskan cara menyajikan aset statis dengan kebijakan cache yang efisien dan bagaimana kebijakan cache yang efisien dapat meningkatkan kinerja situs web Anda.

Saat menggunakan GTMetrix, saran akan terlihat seperti contoh di bawah pada halaman hasil. Ini akan menyoroti potensi penghematan dari implementasi caching browser.

Di Google PageSpeed ​​Insights, saran tersebut terlihat serupa dan memberikan informasi serupa.

Sarannya serupa karena GTMetrix dan PageSpeed ​​Insights menggunakan alat Lighthouse untuk kerangka analisis halaman web mereka. Lighthouse adalah alat sumber terbuka yang ditujukan untuk meningkatkan kinerja situs dan dapat berjalan dalam berbagai format.

Mari luangkan waktu sejenak untuk mengingat kembali bagaimana kinerja situs web diukur dengan kumpulan metrik, yang terpenting adalah Core Web Vitals.

Berikut ringkasannya:

• Largest Contentful Paint ( LCP ) – Pengukuran berapa lama waktu yang dibutuhkan untuk memuat objek terbesar di viewport halaman.
• Penundaan Input Pertama ( FID ) – Ini mengukur respons situs web. Ini mengukur waktu antara pengguna mengklik atau berinteraksi dengan situs dan situs merespons.
• Pergeseran Tata Letak Kumulatif ( CLS ) – Ini mengukur berapa banyak tata letak halaman yang tiba-tiba bergeser.

Salah satu cara untuk memberikan dampak positif bagi LCP dan FID adalah dengan menyajikan aset statis dengan kebijakan cache yang efisien, yang berarti memberi tahu browser bahwa ia dapat menyimpan sumber daya secara lokal selama jangka waktu tertentu.

Kebijakan cache yang efisien berarti waktu muat lebih cepat karena tidak peduli seberapa cepat kecepatan internet Anda, memuat dari cache lokal akan lebih cepat dan menghemat waktu.

Ada beberapa komponen, jadi mari kita bahas lebih detail.

Cara Melayani Aset Statis Dengan Kebijakan Cache yang Efisien

Untuk memahami cara melayani aset statis dengan kebijakan cache yang efisien, pertama-tama kita perlu memahami berbagai aspek, seperti aset statis, caching, dan kebijakan caching. Mari kita hancurkan mereka di sini.

Apa itu Aset Statis?

Aset statis adalah file. Saat kami merujuk ke aset statis dalam artikel ini, kami merujuk ke file individual yang diperkirakan tidak akan berubah baik segera atau sering.

File seperti gambar, javascript, file CSS, dan font adalah file yang dapat dianggap sebagai aset statis. Mengenai WordPress, file CSS, javascript, dan gambar dan font ini biasanya menjadi bagian dari tema, plugin, atau konten pengguna.

File dan halaman yang dibuat secara dinamis tidak dianggap sebagai aset statis. Contohnya dalam WordPress adalah halaman statis yang dihasilkan oleh plugin caching. Hal ini diuraikan pada bagian berikutnya.

Apa itu Caching?

Caching adalah proses menyimpan jawaban dalam cache sehingga pada saat pertanyaan yang sama ditanyakan, jawabannya dapat dikembalikan lebih cepat.

Artikel Terkait

Bagaimana Cara Menghapus Cache WordPress dengan Aman dan Efisien?

Temukan Plugin Caching WordPress Terbaik dengan 5 Pilihan Teratas Kami

Jika Anda pernah bekerja dengan plugin caching WordPress sebelumnya, Anda mungkin sudah familiar dengan caching halaman penuh. Caching halaman berbeda dengan caching aset statis.

Caching halaman vs. caching aset statis

Artikel ini secara khusus membahas caching aset (file) statis. Ini tidak boleh dikacaukan dengan caching halaman penuh, yang menyimpan halaman yang dihasilkan untuk digunakan nanti.

Caching halaman dan caching file membantu meningkatkan kinerja situs. Saat membahas caching aset statis, kami mengacu pada aset tertentu seperti javascript, CSS, dan file gambar.

Caching halaman menyimpan hasil dari halaman yang dibuat secara dinamis WordPress dan melayani ulang versi tersebut untuk jangka waktu tertentu. Cache halaman biasanya disimpan di server atau jaringan edge seperti CDN, dan aset statis disimpan secara lokal di mesin pengguna.

Caching terkait cara kami melayani aset statis dengan kebijakan cache yang efisien berarti memberi tahu browser berapa lama dapat menyimpan sumber daya secara lokal di browser sebelum harus mengunduh ulang.

Apa yang Membuat Aset Statis Dapat Di-cache?

Menurut GTMetrix, aset dapat di-cache jika memenuhi persyaratan berikut:

• Ini adalah font, CSS, javascript, atau file media.
• Ia mengembalikan kode status HTTP 200, 203, atau 206
• Itu tidak memiliki kebijakan tanpa cache yang eksplisit

Apa itu Kebijakan Caching?

Kami telah melihat apa itu aset statis serta apa artinya menyimpan aset ke dalam cache.

Istilah kesegaran dan kedaluwarsa dapat digunakan di sini untuk menggambarkan status file yang di-cache. Jika sebuah file boleh ditarik dari cache, itu bisa disebut fresh . Ketika kedaluwarsa, itu akan disebut basi .

Sebuah kebijakan akan menjawab pertanyaan seperti berapa lama sebuah file dianggap baru dan bagaimana cara memeriksa apakah file tersebut baru. Kebijakan tersebut menyatakan bahwa kami perlu memeriksa dengan server hanya setelah jangka waktu tertentu atau memberi tahu kami untuk memeriksa dengan server pada setiap permintaan, tetapi hanya mengunduh ulang file jika telah berubah.

Beberapa istilah lagi yang sebaiknya dipahami sebelum kita melangkah lebih jauh.

Bagaimana UX dan SEO Dipengaruhi oleh Kebijakan Cache?

Pengalaman pengguna (UX) dan optimisasi mesin pencari (SEO) saling terkait erat. Menurut Google, penelitian menunjukkan bahwa pengguna peduli dengan daya tanggap situs, sehingga Google memberi peringkat lebih tinggi pada halaman daya tanggap.

Jika aset statis di-cache secara efektif, halaman akan dirender lebih cepat karena berkurangnya waktu yang diperlukan untuk memuat aset ini. Pengurangan waktu mengarah pada peningkatan vital web inti seperti LCP dan FID dan, pada akhirnya, peringkat mesin pencari yang lebih tinggi.

Anda dapat membaca selengkapnya tentang bagaimana data vital web inti memengaruhi peringkat halaman di sini.

Cara Memperbaiki Sajikan Aset Statis Dengan Masalah Kebijakan Cache yang Efisien

Perbaiki Secara Manual

Melayani aset statis dengan kebijakan cache yang efisien bukanlah pengaturan khusus WordPress, Anda dapat mengaturnya secara manual dengan memodifikasi file konfigurasi server web Anda atau menggunakan plugin seperti hosting 10Web Booster untuk memastikan situs Anda dikonfigurasi dengan pengaturan caching yang dioptimalkan.

Bagian ini akan mencakup pengeditan file konfigurasi server web secara langsung untuk mengaktifkan kontrol-cache dan mengakhiri header HTTP di server Anda sehingga saat menyajikan aset statis, header HTTP akan diterapkan sebagai respons.

Ketika sumber daya diminta, server web merespons dengan sumber daya dan beberapa informasi tambahan yang disebut header HTTP. Pikirkan tentang header HTTP sebagai metadata tentang koneksi. Dalam kasus caching, header HTTPCache-ControldanExpiresmengontrol bagaimana kita meng-cache suatu aset.

Header kontrol-cache berisi petunjuk jika dan/atau cara menyimpan aset statis ke dalam cache. Ada banyak arahan untuk kontrol cache jadi mari kita pahami beberapa yang paling populer.

Berikut adalah beberapa contoh tampilan header kontrol-cache.

Contoh: cache aset selama tujuh hari
Cache-Control: max-age=604800

Contoh: Dapat disimpan dalam cache bersama hingga tujuh hari
Cache-Control: public, max-age=604800

Contoh: Dapat disimpan, tetapi harus divalidasi ulang pada setiap permintaan
Cache-Control: no-cache

Contoh: Tidak dapat di-cache
Cache-Control: no-store

Header kontrol-cache lebih baru dan memiliki lebih banyak opsi, tetapi jika kontrol-cache tidak didukung, header HTTP kedaluwarsa menyelesaikan tugas header yang sama dan menginstruksikan berapa lama aset valid sebelum memerlukan validasi ulang. (Perhatikan bahwa direktif max-age di header Cache-Control lebih diutamakan daripada Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Memodifikasi konfigurasi server secara langsung

Pertama, mari kita lihat “cara yang sulit” agar kita memahami apa yang terjadi jika kita menggunakan alat dan layanan lain yang memudahkan kita.

Apache

Di server HTTP Apache, cuplikan berikut dapat ditambahkan ke definisi situs atau file .htaccess.

Menjelaskan cuplikan ini, dikatakan bahwa setiap aset yang ekstensinya cocok dengan .ico atau .pdf, dll akan memiliki header Cache-Control yang ditetapkan untuk aset tersebut.

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

Dengan Apache, banyak penyedia hosting akan memberi Anda opsi untuk menambahkan arahan ke file .htaccess. Perhatikan bahwa meskipun ini adalah cara mudah untuk menambahkan ke konfigurasi server, menggunakan file .htaccess diketahui memberikan hit kinerja negatif di tingkat server.

Nginx

Di Nginx, cuplikan ini dapat ditambahkan ke blok server.

Menjelaskan cuplikan ini, dikatakan bahwa aset apa pun yang ekstensinya cocok dengan .ico atau .pdf dll akan memiliki set tajuk kedaluwarsa dan kontrol-cache.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Untuk Apache dan Nginx, kami menunjukkan cara memodifikasi/menambahkan header. Kami menunjukkan header tertentu yang kami gunakan untuk caching, tetapi metode ini dapat digunakan untuk bentuk caching lainnya.

Perbaiki Dengan Plugin WordPress

Jika hal di atas terasa banyak, itu karena memang begitu. Memodifikasi konfigurasi server dan terus memperbarui perubahan manual memakan waktu dan rawan kesalahan.

Paket gratis 10Web Booster dapat mengonfigurasi Apache untuk menambahkan header untuk aset statis, dan juga menambahkan header untuk halaman web yang di-cache. Jika Anda belum menggunakan hosting 10Web dan host Anda menggunakan Apache, ini adalah cara yang bagus untuk mulai menerapkan kebijakan cache yang efisien.

Jika Anda memerlukan lebih banyak opsi atau lebih banyak kontrol atas header HTTP, Anda dapat menggunakan 10Web Booster Pro. 10Web Booster Pro memanfaatkan Cloudflare-nya. Saat Anda menggunakan Cloudflare, Cloudflare menambahkan header kontrol cache ke aset statis dan halaman cache Anda. Ini melewati konfigurasi atau pembatasan server apa pun karena pengunjung Anda langsung dilayani file dari Cloudflare.

Apa yang menjadikan plugin 10Web Booster pilihan terbaik di sini adalah ia melakukan semua ini dan melakukannya secara otomatis. Anda tidak perlu mengelola konfigurasi server atau file .htaccess apa pun.

Alternatifnya, jika Anda menggunakan 10Web Hosting, secara otomatis mengimplementasikan caching dan Anda tidak perlu khawatir menambahkan header untuk aset statis.

Masih Tidak Dapat Memperbaiki Masalah? Coba Dua Tips Ini

Jika Anda telah menerapkan langkah-langkah di atas dan Anda masih melihat bahwa aset statis layanan dengan kebijakan cache yang efisien masih muncul di laporan Anda, berikut adalah beberapa hal lagi yang dapat Anda coba.

Memverifikasi File Di-cache

Jika GTMetrix dan PageSpeed ​​masih melaporkan bahwa Anda seharusnya menayangkan aset statis dengan kebijakan cache, Anda mungkin ingin memverifikasi bahwa penerapan Anda benar-benar membuat perubahan yang diharapkan.

Di sebagian besar browser, ada cara mudah untuk memverifikasi apakah file berasal dari cache atau tidak.

Di Chrome, di bawah tampilan dan Pengembang, pilih Alat Pengembang:

Di bawah tab Jaringan, Anda akan dapat mengidentifikasi file yang berasal dari (cache disk) atau (cache memori). Perbedaan antara disk dan cache memori adalah bahwa memori hilang saat browser ditutup, dan disk tetap ada saat browser ditutup.

Tingkatkan Waktu Cache

Menurut statistik dari Lighthouse, kebijakan cache yang efisien adalah kebijakan yang memiliki rasio hit cache yang tinggi untuk dilewatkan, yang berarti bahwa sebagian besar aset statis memiliki set usia maksimum atau kedaluwarsa. Untuk situs yang sedang dalam produksi atau tidak sering berubah, disarankan usia maksimal tiga bulan hingga satu tahun.

Mereka merekomendasikan untuk memulai kebijakan sekitar tiga bulan (sekitar 7890000 detik), jika Anda telah menetapkan ini, mungkin ada baiknya meningkatkan usia maksimal menjadi satu tahun atau lebih jika situs Anda aktif.

Kesimpulan

Mampu melayani aset statis dengan kebijakan cache yang efisien memberikan peningkatan kecepatan pada kinerja situs web Anda.

Artikel ini membahas apa itu aset statis, apa itu header HTTP, dan melihat cara mengaktifkan dan memverifikasi header caching sudah ada.

Kami melihat inti dan baut dari pengaktifan header secara manual dengan memodifikasi konfigurasi server dan bagaimana kami dapat membuatnya lebih mudah menggunakan plugin WordPress seperti 10Web Booster, dan memanfaatkan integrasi 10Web dengan Cloudflare untuk memiliki akses untuk menyetel header HTTP kontrol-cache.

10Web Booster lebih dari sekadar plugin caching. Anda dapat membaca lebih lanjut tentang banyak fitur caching dan pengoptimalan kecepatan di artikel 10Web Booster ini .

FAQ