Cara Melayani Aset Statis dengan Kebijakan Cache yang Efisien di WordPress

Salah satu keunggulan website yang user-friendly adalah tidak membuat pengunjung menunggu terlalu lama saat loading. Caching aset statis adalah langkah penting untuk meningkatkan kinerja situs, tetapi tidak banyak membantu jika hanya menyiapkannya dan melanjutkan. Tanpa kebijakan caching WordPress yang efisien, Anda mungkin kesulitan menyediakan waktu pemuatan yang cepat.

Untungnya, mempelajari cara memanfaatkan cache browser di WordPress lebih mudah dari yang Anda kira. Anda dapat mengonfigurasi caching browser secara manual, dan Content Management System (CMS) juga memungkinkan Anda menggunakan alat yang melakukannya untuk Anda.

Pada artikel ini, kami akan menjelaskan cara kerja cache browser dan membahas manfaatnya. Kami juga akan menunjukkan kepada Anda cara memeriksa apakah caching diaktifkan di situs Anda dan melihat berbagai cara untuk mengaktifkannya.

Apa itu cache browser?

Caching browser adalah proses yang menyimpan salinan elemen situs web di komputer Anda. Saat Anda mengunjungi situs web, browser Anda mengunduh berbagai konten, seperti gambar dan teks. Alih-alih mengunduh konten ini setiap kali Anda mengunjungi situs, browser Anda "menyimpan" atau menyimpannya jika Anda membutuhkannya nanti.

Lain kali Anda mengunjungi situs tersebut, browser Anda akan memeriksa elemen apa yang disimpan secara lokal. Ini kemudian akan memuat elemen-elemen ini dari cache alih-alih memintanya dari server situs. Hal ini dapat mempercepat pemuatan halaman secara signifikan, bergantung pada jumlah aset yang disimpan di cache.

Jika Anda harus memeriksa cache browser Anda sekarang, kemungkinan besar Anda akan menemukan beberapa ratus megabyte file di dalamnya. Sebagian besar browser modern memungkinkan Anda melihat ikhtisar file yang di-cache jika Anda masuk ke pengaturan privasi.

Hal tentang caching adalah browser tidak dapat memutuskan untuk melakukannya sendiri. Untuk memanfaatkan caching browser di WordPress, Anda harus mengonfigurasi situs web atau server Anda untuk melakukannya. Artinya, situs Anda mengontrol aset mana yang di-cache browser dan untuk berapa lama.

Apa manfaat dari menyimpan aset statis ke dalam cache?

Manfaat utama caching browser adalah dapat membantu pengunjung memuat halaman lebih cepat saat kembali ke situs Anda. Kami berbicara tentang "aset statis" karena tidak mungkin untuk meng-cache setiap elemen di situs web.

Aset dinamis adalah elemen yang berubah setiap kali Anda memuat halaman. Misalnya, jika Anda masuk ke aplikasi yang menampilkan feed postingan secara real time, seperti Twitter atau Instagram, aset tersebut bersifat dinamis.

Karena aset dinamis dapat sering berubah, menyimpannya dalam cache mungkin tidak memiliki tujuan apa pun. Lagi pula, lain kali Anda masuk ke Twitter atau Instagram, Anda akan melihat posting yang sama sekali baru.

Caching memberikan hasil terbaik jika terbatas pada aset statis. Mempelajari cara melayani aset statis dengan kebijakan cache yang efisien di WordPress dapat memberikan beberapa keuntungan:

• Mengurangi penggunaan bandwidth. Karena aset yang di-cache dimuat dari penyimpanan lokal, data yang ditransfer antara server dan perangkat pengunjung menjadi lebih sedikit. Ini membantu pengunjung dengan paket internet terbatas menghemat penggunaan data.
• Mengurangi beban di server Anda. Saat browser menggunakan aset yang di-cache, server menerima lebih sedikit permintaan untuk file tersebut. Ini mengurangi beban kerja server dan dapat membantu mencegah kelebihan server selama periode lalu lintas tinggi.
• Mengaktifkan penjelajahan luring sebagian. Dalam beberapa kasus, menyimpan aset statis ke dalam cache dapat memungkinkan pengunjung mengakses bagian tertentu dari situs web bahkan saat sedang offline. Jika sebelumnya browser telah meng-cache file yang diperlukan, browser dapat menampilkan konten tanpa memerlukan koneksi internet aktif.

Caching aset statis memungkinkan Anda memanfaatkan sumber daya server dengan lebih baik dan meningkatkan pengalaman bagi pengunjung. Semua ini berfungsi dengan menginstruksikan server Anda tentang aset apa yang harus diberitahukan browser ke cache.

Cara memeriksa apakah caching browser diaktifkan di situs Anda

Cara termudah untuk memeriksa apakah situs web memanfaatkan caching adalah dengan menggunakan alat pengembang peramban, seperti yang Anda temukan di Firefox dan Google Chrome. Pendekatan ini mengharuskan Anda melihat beberapa kode, tetapi Anda tidak perlu menjadi pengembang untuk memahaminya.

Untuk melakukannya di Google Chrome, kunjungi situs web yang ingin Anda periksa, klik kanan di mana saja pada halaman, dan pilih opsi Inspeksi . Ini akan membuka tab alat pengembang di dalam browser, yang akan terlihat seperti ini:

Klik pada tab Jaringan . Jika Anda melihat daftar kosong, Anda harus memuat ulang laman dengan tab alat pengembang terbuka. Tab Jaringan akan menampilkan semua permintaan dan aset yang dimuat browser saat mengakses halaman.

Elemen yang kita minati harus menjadi yang pertama dalam daftar. Dalam kasus kami, ini adalah Jetpack.com, dan berisi header halaman. Pilih file itu, dan itu akan membuka tab baru di sebelah kanan, langsung melompat ke bagian Header .

Beberapa tajuk akan memberi tahu kami apakah situs tersebut menggunakan caching dan bagaimana penerapannya. Ini adalah:

• Kontrol-Cache. Header ini menentukan arahan caching, seperti max-age (waktu maksimum sumber daya dianggap baru) atau tanpa cache (memaksa cache untuk mengirimkan permintaan ke server asal untuk validasi sebelum merilis salinan cache).
• Berakhir. Header ini memberikan tanggal dan waktu kedaluwarsa untuk sumber daya. Setelah itu, sumber daya dianggap basi, dan browser akan memvalidasi ulang.
• ETag. Header ini adalah pengidentifikasi untuk versi sumber daya tertentu. Saat sumber daya berubah, ETag juga berubah, memungkinkan browser untuk menentukan apakah sumber daya yang di-cache masih valid.
• Terakhir diubah. Header ini menunjukkan tanggal modifikasi terakhir sumber daya. Peramban dapat menggunakan informasi ini untuk memvalidasi jika versi cache-nya masih mutakhir.

Jika Anda dapat menemukan tajuk ini di file, maka situs web menggunakan caching. Perlu diingat bahwa konfigurasi caching tertentu dapat bervariasi dari satu situs ke situs lainnya. Beberapa situs mungkin memberi tahu browser untuk menyimpan file statis selama sehari, sedangkan yang lain akan memberi tahu mereka untuk menyimpan file selama berbulan-bulan atau periode yang lebih lama.

Cara memanfaatkan caching browser dengan plugin

Cara termudah untuk memanfaatkan caching browser di situs WordPress adalah dengan menggunakan plugin. Ada banyak plugin caching yang bisa Anda gunakan. Salah satu opsi hebat adalah WP Super Cache.

Setelah Anda menginstal dan mengaktifkan WP Super Cache di situs Anda, Anda dapat mengimplementasikan caching menggunakan beberapa pendekatan. Cara termudah adalah pergi ke Pengaturan → WP Super Cache dan pilih opsi Caching On di sebelah Caching .

Pengaturan default plugin mengaktifkan caching untuk pengunjung yang keluar dan menetapkan waktu 30 menit untuk aset yang disimpan. Jika Anda ingin mengubah pengaturan ini, Anda harus masuk ke tab Lanjutan .

Di sini, Anda dapat memutuskan pengunjung mana yang mengaktifkan caching, apakah akan mengaktifkan caching dinamis, apakah plugin harus menghapus cache saat Anda memperbarui halaman, dan banyak lagi. Plugin membantu Anda dengan merekomendasikan opsi yang paling efektif.

Jika Anda tidak memiliki pemahaman yang kuat tentang caching, Anda mungkin ingin tetap menggunakan pengaturan default. Mengonfigurasi pengaturan caching tanpa sepenuhnya memahami cara kerjanya dapat menyebabkan masalah dengan situs web Anda.

Cara memanfaatkan cache browser tanpa plugin

Jika Anda tidak ingin menggunakan plugin, Anda dapat mengaktifkan caching browser di situs web Anda secara manual. Proses ini mungkin melibatkan penanganan kode di server atau di tingkat situs, bergantung pada metode implementasi yang Anda pilih.

1. Tambahkan Header “Cache-Control” dan “Expires” di NGINX

Untuk menambahkan header “Cache-Control” dan “Expires” di NGINX, Anda harus memodifikasi file konfigurasi server. File ini biasanya disebut nginx.conf, dan terletak di direktori utama nginx .

Cara termudah untuk terhubung ke server situs Anda adalah dengan menggunakan klien File Transfer Protocol (FTP). Kemudian, Anda harus mencari file nginx.conf , yang seharusnya ada di dalamnya

/etc/nginx/nginx.conf atau /etc/nginx/sites-available/default .  

Buka file menggunakan editor teks dan cari blok kode server di dalam nginx.conf . Di sini, kita akan menambahkan blok kode baru berikut, yang menentukan file apa yang harus diberitahukan server ke browser untuk di-cache dan berapa lama cache harus bertahan sebelum habis masa berlakunya:

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

Kode ini mencakup header "Cache-Control" dan "Expires". Anda dapat mengubah rentang waktu kedaluwarsa dan jenis file yang harus di-cache oleh browser.

Jika Anda tidak dapat memutuskan jenis file apa yang akan di-cache, lihat apa yang ada di folder media WordPress Anda. File statis apa pun yang diakses pengunjung secara teratur harus di-cache. Adapun tajuk kedaluwarsa, 30 hari umumnya merupakan jangka waktu yang baik untuk sebagian besar situs web.

Setelah Anda menambahkan kode, simpan perubahan ke file dan keluar dari editor. Anda harus memulai ulang NGINX untuk menerapkan perubahan.

2. Tambahkan Header "Cache-Control" dan "Expires" di Apache

Menggunakan header "Cache-Control" dan "Expires" di Apache mengharuskan Anda untuk mengaktifkan modul yang sesuai. Anda dapat mengaktifkan modul ini dengan membuka terminal dan menjalankan perintah berikut:

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

Perintah terakhir akan memulai ulang Apache dengan kedua modul aktif. Selanjutnya, Anda harus memodifikasi file konfigurasi Apache, yang biasanya disebut httpd.conf atau apache2.conf .

Anda dapat menemukan file ini di /etc/httpd/conf/httpd.conf , /etc/apache2/apache2.conf , atau

/etc/apache2/sites-available/000-default.conf , tergantung pada konfigurasi server.

Kemudian, cari blok <Directory> di dalam file konfigurasi Apache dan tambahkan kode berikut di dalamnya:

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

Bagian pertama dari kode itu mengatur pengaturan kedaluwarsa untuk file yang di-cache. Bagian kedua menunjukkan jenis file apa yang harus di-cache oleh browser. Seperti halnya NGINX, Anda dapat memodifikasi pengaturan ini tergantung pada file yang ingin disimpan oleh browser.

Setelah selesai, simpan perubahan ke file konfigurasi Apache dan tutup. Anda harus me-restart Apache agar perubahan diterapkan.

3. Gunakan Jaringan Pengiriman Konten (CDN)

Jaringan Pengiriman Konten (CDN) adalah jaringan server yang dapat Anda gunakan untuk menyimpan salinan cache situs web Anda di wilayah utama. CDN cenderung merupakan layanan berbayar, dan mereka membantu dengan menyajikan salinan cache situs Anda dari server yang secara geografis paling dekat dengan pengunjung.

Pendekatan ini mengurangi beban di server Anda sendiri. Selain itu, CDN cenderung dioptimalkan untuk kinerja top-of-the-line dan biasanya didistribusikan ke seluruh dunia, sehingga dapat melayani situs web dari lokasi terbaik untuk setiap pengunjung.

Jetpack CDN adalah opsi yang terintegrasi mulus dengan WordPress, mudah digunakan, dan sangat efektif.

Yang terbaik dari semuanya, ini adalah CDN gratis yang menyimpan gambar dan jenis aset statis lainnya dari situs web Anda. Setelah Anda menginstal dan mengaktifkannya, Anda dapat mengaktifkan CDN dengan masuk ke Jetpack → Pengaturan di dasbor WordPress.

Kemudian, temukan pengaturan Performa & Kecepatan dan alihkan opsi Aktifkan akselerator situs .

4. Host skrip dan aset pihak ketiga secara lokal (bila memungkinkan)

Skrip pihak ketiga adalah elemen seperti kode dari situs eksternal, piksel pelacakan, font, dan aset lain yang memerlukan pemuatan agar berfungsi. Semakin banyak skrip dan aset yang Anda muat dari sumber pihak ketiga, semakin lama prosesnya, yang dapat memperlambat situs Anda.

Idealnya, Anda harus menghapus skrip dan aset pihak ketiga yang tidak Anda gunakan. Alternatifnya, Anda dapat menghosting kode dan aset di server lokal Anda untuk mengurangi waktu pemuatan.

Anda dapat mengidentifikasi skrip pihak ketiga, serta JavaScript yang tidak terpakai, menggunakan Wawasan PageSpeed. Alat ini menyoroti peluang untuk meningkatkan kinerja situs, termasuk daftar kode yang tidak terpakai dan skrip pihak ketiga yang dapat dihapus dari laman Anda.

Anda dapat dengan aman menghapus skrip pihak ketiga yang tidak terpakai di situs web Anda. Untuk skrip penting, Anda mungkin ingin mempertimbangkan opsi menghostingnya secara lokal.

Langkah terakhir: Instal plugin gratis untuk meningkatkan Core Web Vitals

Mempelajari cara memanfaatkan caching browser di WordPress adalah langkah kunci untuk meningkatkan kinerja situs. Untungnya, itu bukan satu-satunya hal yang dapat Anda lakukan untuk meningkatkan pengalaman pengguna.

Google mengukur kualitas pengalaman pengguna situs dengan serangkaian metrik yang disebut Data Web Inti. Metrik kinerja utama meliputi:

• Cat Konten Terbesar (LCP). Metrik ini mengukur berapa lama waktu yang dibutuhkan untuk memuat aset terbesar di sebuah halaman. Biasanya, ini merupakan indikator yang baik untuk keseluruhan waktu pemuatan halaman.
• Penundaan Input Pertama (FID). Ada penundaan antara memuat halaman dan menjadi interaktif. Anda mungkin mengira sebuah halaman selesai dimuat, tetapi jika halaman itu tidak memungkinkan Anda untuk berinteraksi dengan elemen seperti formulir atau tautan, halaman tersebut mungkin memiliki FID yang tinggi.
• Pergeseran Tata Letak Kumulatif (CLS) . Saat halaman dimuat, tata letaknya dapat bergeser, memindahkan elemen di sekitar browser. Semakin banyak elemen yang bergerak, semakin tinggi skor CLS. Idealnya, ini harus nol.

Ada banyak cara untuk meningkatkan Core Web Vitals di WordPress. Pendekatan termudah adalah dengan menggunakan plugin yang mengoptimalkan semua variabel di balik metrik ini.

Jetpack Boost dapat membantu Anda menerapkan beberapa strategi untuk meningkatkan Data Web Inti. Anda dapat mengoptimalkan pengiriman CSS, menunda JavaScript yang tidak penting, dan mengaktifkan pemuatan lambat.

Biasanya, Anda perlu menggunakan beberapa plugin untuk mengimplementasikan konfigurasi ini atau melakukannya secara manual. Setelah Anda menginstal dan mengaktifkan Jetpack Boost, Anda cukup mengaktifkan setiap pengaturan dengan menavigasi ke Jetpack → Boost dan beralih ke opsi yang sesuai.

Pertanyaan yang sering diajukan tentang caching browser WordPress

Meskipun kami telah membahas dasar-dasar caching browser di WordPress, Anda mungkin masih memiliki beberapa pertanyaan tentang prosesnya. Mari kita lihat beberapa yang paling umum.

Apakah cache browser aman?

Caching browser sangat aman. Sebagian besar situs web yang Anda kunjungi mungkin menggunakan beberapa jenis kebijakan caching untuk meningkatkan kinerja pengunjung. Sebagai pengunjung, Anda bahkan tidak akan menyadarinya kecuali Anda menggali header situs web, atau Anda perlu menghapus cache.

Satu-satunya cara di mana caching browser mungkin tidak aman adalah melalui implementasi yang buruk. Jika tidak dikonfigurasi dengan benar, browser tidak akan dapat menyimpan aset dengan cara yang benar, atau halaman mungkin gagal dimuat (walaupun ini sangat jarang terjadi).

Caching browser vs. caching server: Apa bedanya?

Caching browser dan server bekerja sangat mirip. Satu-satunya perbedaan adalah bahwa satu metode menyimpan file secara lokal, sedangkan yang lain melakukannya di sisi server.

Contoh terbaik dari tindakan caching server adalah CDN. Dengan CDN, Anda dapat menyimpan salinan cache dari situs Anda di server pihak ketiga (atau sekelompoknya). Saat pengunjung mencoba mengakses situs web, CDN mencegat koneksi itu dan menyajikan salinan situs yang tersimpan.

Dalam skenario itu, pengunjung masih dapat meng-cache konten statis melalui browser mereka. Pengalaman pengguna akhir tidak boleh berubah sama sekali, kecuali bahwa CDN sering memberikan waktu pemuatan yang jauh lebih baik daripada server tradisional.

Apa lagi yang dapat saya lakukan untuk meningkatkan kinerja situs saya?

Ada banyak hal yang dapat Anda lakukan untuk meningkatkan performa situs Anda (selain memanfaatkan caching browser). Beberapa perubahan lain yang dapat Anda lakukan termasuk menghilangkan sumber daya pemblokiran render, memperkecil CSS, menggunakan CDN, membuat lebih sedikit permintaan HTTP, dan mengurangi TTFB dan waktu respons server.

Dalam hal kinerja situs, beberapa perubahan lebih efektif daripada yang lain. Peningkatan waktu pemuatan dapat berdampak signifikan pada pengalaman pengguna, yang dapat menghasilkan tingkat konversi yang lebih tinggi untuk bisnis Anda.

Mulai sajikan aset statis di situs WordPress Anda

Memanfaatkan caching browser di WordPress adalah salah satu cara paling efektif untuk meningkatkan waktu pemuatan. Strategi yang efisien akan berfokus pada file statis dan mengonfigurasinya untuk dimuat ulang secara berkala. Dengan cara ini, pengunjung tidak terjebak dengan elemen usang.

Cara termudah untuk mengimplementasikan caching browser di WordPress adalah dengan menggunakan plugin seperti WP Super Cache. Plugin ini memungkinkan Anda memanfaatkan caching browser menggunakan serangkaian konfigurasi default atau mengontrol setiap pengaturan secara manual. Selain itu, gratis untuk digunakan.

Selain itu, saat Anda menginstal Jetpack Boost, Anda dapat lebih meningkatkan kinerja situs Anda. Lihat plugin untuk mempelajari lebih lanjut!