Bagaimana cara kerja cache html?

Saat pengguna mengunjungi suatu halaman web, konten halaman tersebut dapat disimpan di cache browser sehingga tidak perlu diminta ulang dan diunduh ulang. Menggunakan cache browser secara efisien dapat meningkatkan waktu respons pengguna akhir dan mengurangi penggunaan bandwidth

Kemampuan cache suatu item di browser ditentukan oleh

• Header respons dikembalikan dari server web asal. Jika tajuk menunjukkan bahwa konten tidak boleh di-cache maka itu tidak akan terjadi
• Validator seperti ETag atau header Last-Modified harus ada dalam respons

Jika item dianggap dapat di-cache, browser akan mengambil item dari cache pada kunjungan berulang jika dianggap "segar". "Kesegaran ditentukan oleh

• Waktu kedaluwarsa yang valid yang masih dalam periode baru
• Pengaturan browser seperti yang dijelaskan di bawah ini

Jika representasi basi atau tidak memiliki tanggal kedaluwarsa yang valid, browser akan meminta server web asal untuk memvalidasi konten untuk mengonfirmasi bahwa salinan yang dimilikinya dapat disajikan. Server web kemudian akan mengembalikan 304 untuk memberi tahu browser bahwa salinan cache lokal masih bagus untuk digunakan. Jika konten telah berubah, server web mengembalikan kode respons 200 dan mengirimkan versi baru

Bagaimana cache browser digunakan tergantung pada tiga hal utama

• Pengaturan peramban
• Situs web (kode HTML dan header HTTP)
• Bagaimana pengguna memuat halaman

Pengaturan Peramban

Pengguna dapat mengonfigurasi bagaimana mereka ingin konten yang di-cache disimpan dan dikirim dari cache lokal mereka, atau apakah mereka ingin konten di-cache sama sekali. Internet Explorer dan Firefox mengklasifikasikan ini sedikit berbeda

Setiap kunjungan/melihat ke halaman web

Saat pengguna kembali ke halaman yang sebelumnya dikunjungi, browser memeriksa dengan server web asal untuk menentukan apakah halaman tersebut telah berubah sejak terakhir dilihat

Setiap kali saya memulai browser/Sekali Per Sesi

Jika sebuah halaman dikunjungi kembali dalam sesi browser yang sama, konten akan dikirim dari cache. Saat browser ditutup dan kemudian dibuka kembali, permintaan akan dikirimkan untuk memeriksa apakah konten telah berubah. Jika halaman dikunjungi selama sesi browser yang sama, file yang di-cache akan digunakan alih-alih mengunduh konten dari server web asal

Otomatis/Saat halaman kedaluwarsa

Saat browser ditutup dan kemudian dibuka kembali pada kunjungan berulang, itu akan menggunakan pengaturan seumur hidup dari konten yang di-cache. Jika halaman yang sama dikunjungi selama satu sesi browser, file yang di-cache akan digunakan. Ini adalah pengaturan default untuk Internet Explorer dan Firefox

Jawabannya melibatkan banyak pilihan, bergantung pada sifat situs web Anda dan apa yang ingin Anda capai darinya

Ada beberapa jenis caching, masing-masing berbeda dari yang lain dan berguna dalam keadaan yang berbeda. Jadi, penting untuk memahami jenis data yang mereka simpan dan tingkat kontrol yang mereka berikan kepada Anda

Pada artikel ini, kami akan membahas berbagai jenis cache web secara mendetail, cara kerjanya, dan perbedaannya

Kemudian kita akan melihat berbagai jenis konten yang dapat di-cache dan bagaimana Anda dapat meng-cache situs WordPress Anda dengan cara yang seefisien mungkin.  

Apa Jenis Caching?

Ada dua jenis opsi caching yang bisa Anda gunakan

1. Caching sisi server
2. Caching sisi klien

Meskipun keduanya melakukan cache situs web Anda secara berbeda tetapi memiliki satu tujuan yang sama

Membuat pemuatan situs web Anda sangat cepat tanpa memuat seluruh file situs lagi

Mari kita lihat lebih dekat keduanya.  

Apa itu Caching Sisi Server?

Caching sisi server menyimpan sementara file web dan data di server untuk digunakan nanti, secara efektif mengurangi beban dan latensi server

Begini cara kerjanya

1. Saat pengguna mengunjungi situs web dan meminta halaman web, situs web mengambil data dari server, membuat halaman web tersebut, dan menampilkannya kepada pengguna

2. Setelah respons dikirim kembali ke pengguna, server membuat salinan halaman web dan menyimpannya sebagai cache

Hasil?

Lain kali pengguna mengunjungi kembali situs web, alih-alih melalui seluruh proses lagi, ini menampilkan salinan halaman web yang sudah disimpan (atau di-cache) – sehingga membuat situs web memuat lebih cepat

Apa itu Caching Sisi Klien?

Caching sisi klien, sering disebut caching browser, menyimpan sementara salinan halaman web di memori browser (folder yang dibuat oleh browser).  

Jadi, lain kali pengguna mengunjungi kembali situs web dengan caching sisi klien diaktifkan, itu tidak akan membuat panggilan ke server untuk data. Sebaliknya, itu akan mengambilnya dari folder cache browser yang terletak di perangkat pengguna

Caching Sisi Server vs. Caching Sisi Klien

Jenis caching yang Anda pilih secara signifikan meningkatkan pengalaman pengguna secara keseluruhan dan kegunaan situs WordPress Anda. Jadi selalu lebih baik untuk memahami jenis mana yang cocok dengan situs web Anda sebelumnya

Biarkan kami membantu Anda mengetahuinya dengan sebuah contoh

Misalkan Anda menjalankan situs ritel online

Karena sifat bisnisnya, jenis konten di situs web Anda bersifat dinamis (mis. e. , pengguna melihat produk yang direkomendasikan, email tentang gerobak yang ditinggalkan, atau iklan untuk produk serupa/relevan)

Karena itu, pengguna mengakses situs web Anda dengan lancar setiap kali ada pembaruan baru.  

Jika situs web Anda membutuhkan waktu lebih lama untuk dimuat, itu akan mendorong pengguna untuk pindah ke situs lain bahkan sebelum konten dimuat sepenuhnya. Oleh karena itu, menghasilkan peningkatan rasio pentalan dan, yang terpenting, kesan pertama yang negatif pada pengunjung yang mendarat di situs web Anda

Sekarang, perhatikan contoh di atas

• Jika Anda menggunakan caching sisi server

Ketika pengguna meminta halaman web, situs web mengambil data dari server. Namun sebelum itu, ia memeriksa apakah salinan halaman web tersebut di-cache. Jika di-cache, itu menyajikan salinan halaman web yang di-cache

Ada tiga skenario utama

1. Jika konten situs web Anda statis, itu memerlukan akomodasi apa pun

1. Jika konten bersifat dinamis dalam jangka waktu tertentu (konten berumur pendek), diperlukan pembaharuan cache setelah jangka waktu tertentu atau "ajaxifying" konten dinamis

1. Di sisi lain, jika konten situs web Anda dinamis dengan kerangka waktu yang singkat dan khusus untuk pengguna (pengalaman masuk, misalnya), perlu melewati cache

Secara default, dan jika halaman web di-cache, itu akan disajikan dari cache selama tidak ada instruksi untuk memotongnya (i. e. , menambahkan item ke keranjang dalam beberapa kasus tertentu)

Tapi ada satu masalah

Ini menampilkan versi yang di-cache seolah-olah konten di situs web itu statis

Karena alasan ini

Caching sisi server adalah pilihan terbaik untuk situs web dengan konten statis dan cache berumur pendek, karena secara signifikan mengurangi jumlah operasi di server – tanpa merekonstruksi seluruh konten per permintaan pengguna. Di sisi lain, cache server yang sangat dinamis masih dimungkinkan menggunakan teknologi canggih seperti Edge Side Included (ESI) atau Ajax (Asynchronous JavaScript and XML)

• Mari kita coba dengan caching sisi klien

Saat Anda menggunakan caching sisi klien, salinan situs web disimpan di cache browser. Jadi, ketika pengguna meminta halaman web, ini menampilkan versi cache yang disimpan di browser alih-alih memintanya dari server

Untuk contoh ini, karena situs web Anda memiliki fitur dinamis, metode pilihan Anda akan menggunakan JavaScript (JS). Ini beroperasi di sisi browser, jadi Anda dapat mengandalkannya dengan menjalankan skrip di dalam browser untuk menangani kebutuhan dinamis situs web Anda secara real time

Karena alasan ini

Untuk situs web dinamis, caching sisi klien memecahkan masalah latensi dan cache server dengan mengurangi beban server

Nah kalau kita kategorikan lebih lanjut, beberapa jenis web cache antara lain

• Situs (Halaman) Cache
• Cache Server
• Cache Proksi
• Cache Peramban

Namun, ada juga jenis caching berbeda yang tidak terkait dengan empat jenis lainnya yang disebutkan di atas, yang dikenal sebagai Object Cache

Object Cache adalah proses yang menyimpan hasil kueri basis data sehingga dapat diakses dengan mudah saat pengguna memintanya lagi. Objek yang di-cache akan disajikan langsung dari cache tanpa perlu menanyakan database berulang kali

Jika Anda ingin mempelajari lebih lanjut tentang Cache Objek, lihat Apa itu Caching Objek dan Cara Menggunakannya Dengan WordPress

Apa itu Cache Situs (Halaman)?

Cache situs, juga dikenal sebagai HTTP atau cache halaman, menyimpan sementara konten di situs web Anda saat pertama kali Anda mengunjunginya.  

Jadi, lain kali Anda mengunjungi situs web itu, itu mengambil data yang disimpan dari cache situs untuk menampilkan konten web statis lebih cepat daripada dengan permintaan baru.

Selain itu

Semua data disimpan di hard disk atau memori (RAM) server, dan Anda, sebagai pemilik situs web, dapat menentukan berapa lama sebuah file berada di cache situs.  

Jika elemen situs web Anda statis, Anda dapat menyetel tanggal kedaluwarsa file lebih lama. Namun, elemen dinamis situs web memiliki tanggal kedaluwarsa yang jauh lebih singkat. Tanggal kedaluwarsa singkat ini memberi tahu situs web kapan harus menyegarkan file yang disimpan di cache situs perangkat Anda

Apa itu Cache Peramban?

Cache browser menyimpan versi cache dari halaman web tertentu yang dijelajahi pengguna. Itu dibangun di browser web Anda – memungkinkan situs web memuat lebih cepat untuk memberi Anda pengalaman pengguna yang lebih baik

Cache browser berfungsi dengan menyimpan sementara salinan file situs web, seperti

• halaman HTML
• Konten multimedia dan gambar
• lembar gaya CSS
• skrip JavaScript

Saat pengguna mengunjungi kembali situs web Anda, browser mereka akan mengambil file yang di-cache dan menggunakannya untuk menyusun konten situs web Anda guna menciptakan pengalaman menjelajah yang lancar. Konten yang di-cache memuat lebih cepat karena browser Anda tidak perlu memuat semuanya dari awal untuk menampilkannya

Biasanya, browser menyimpan cache-nya untuk waktu yang terbatas atau sampai penuh. Setelah itu, secara otomatis menghapus cache dan menampilkan konten situs web yang diperbarui pada kunjungan berikutnya

Lapisan peraknya adalah

Anda juga dapat menghapus cache browser dengan menghapus data browsing secara manual jika menghabiskan terlalu banyak ruang – dan itulah salah satu fitur utama dari jenis cache ini

Di Google Chrome, Anda dapat melakukannya dengan mengeklik

Pengaturan > Privasi dan keamanan > Hapus data penjelajahan

Saat Anda mengunjungi situs web setelah menghapus data browser, itu akan memuat semuanya dari awal

Apa itu Cache Server?

Cache server juga merupakan jenis caching web di mana pengguna akhir tidak memiliki kendali apa pun dan dikelola sepenuhnya oleh server

(Catatan. Terutama ada empat jenis server web – Apache, IIS, Nginx, dan LiteSpeed. )

Jenis cache ini terutama digunakan untuk mengurangi beban server

Saat pengguna mengunjungi situs web dan meminta halaman web dari server, server memindai cache dan segera menampilkan konten yang disimpan. Ini membantu mengurangi waktu pemrosesan dan mengembalikan halaman web lebih cepat, yang sangat bermanfaat untuk situs web dengan lalu lintas tinggi

Cache server dapat dianggap sebagai istilah umum untuk banyak jenis cache. Yang paling umum adalah

• Cache objek – menyimpan kueri database dalam cache sisi server untuk pengambilan cepat dan pemuatan halaman pembisik tanpa menanyakan database berulang kali

• Cache opcode – menyimpan kode PHP yang telah dikompilasi untuk eksekusi yang lebih cepat

Apa itu Cache Proksi?

Cache proxy menyimpan konten di server proxy, memungkinkan layanan web berbagi sumber daya tersebut dengan lebih banyak pengguna. Server proxy berkoordinasi dengan server asal untuk meng-cache data situs web seperti file, gambar, dan halaman web

Saat pengguna membuka halaman web, proxy memeriksa apakah ada salinan terbaru dari halaman web tersebut dan asetnya.  

Jika ada salinan, itu segera menampilkan halaman web atau sumber daya itu kepada pengguna. Di sisi lain, jika halaman web sudah tua atau hilang, ia mengambil salinan baru dari sumbernya, menyimpannya ke dalam cache ke proxy, dan mengirimkannya ke pengguna.

Setelah proxy memperbarui halaman web, itu menyetel ulang tanggal kedaluwarsa halaman web untuk mencegahnya dilabeli sebagai kedaluwarsa. Halaman web akan dikirimkan hingga waktu tertentu berlalu, setelah itu server proxy akan memeriksa ulang sumbernya

Selain itu, cache proxy juga memiliki jenis yang disebut

Cache Jaringan Pengiriman Konten (CDN) – sekelompok server yang terletak di lokasi geografis yang berbeda. Server yang paling dekat dengan pengguna akhir akan mengembalikan konten yang di-cache untuk memuat konten lebih cepat

Cache Situs vs. Tembolok Peramban vs. Cache Server vs. Cache Proksi

Sekarang kita tahu tentang setiap jenis cache – mari kita pahami perbedaan di antara mereka

Cache Situs

• Menyimpan konten seperti halaman web, gambar, teks, dll
• Menyajikan konten lebih cepat setelah kunjungan pertama
• Ideal untuk situs web dengan konten statis

Cache Peramban

• Menyimpan tipe data terbatas seperti halaman HTML, lembar gaya CSS, skrip JavaScript, Gambar, dan file multimedia lainnya
• File lebih berat dan membutuhkan waktu untuk memuat – dengan demikian, disimpan di komputer
• Dikontrol oleh browser pengguna
• Melayani halaman web secara langsung tanpa memproses dari server

Cache Server

• Menyimpan konten, kode, kueri, dan data serupa di server
• Jenis caching sisi server
• Dikendalikan oleh server
• Dikelola oleh pemilik situs web tanpa masukan apa pun dari pengguna akhir
• Terbaik untuk situs web dengan lalu lintas tinggi yang perlu mengurangi beban server

Cache Proksi

• Mengizinkan layanan web berbagi sumber daya dengan banyak pengguna
• Menghemat bandwidth dan mengurangi waktu pemuatan
• Ini mungkin membantu dalam skenario yang lebih kompleks, seperti menangani sumber daya yang dinamis atau yang sering diperbarui (namun hanya saat menggunakan konten yang ditargetkan secara geografis di mana konten khusus negara/kawasan disimpan secara terpisah)

Konten Apa Yang Dapat Di-cache?

Ada berbagai jenis konten yang sering di-cache pemilik situs web. Namun, beberapa dapat di-cache, tetapi banyak pemilik situs tidak meng-cache-nya karena tampaknya "berisiko". Dan terakhir, ada beberapa yang tidak boleh di-cache sama sekali

Mari kita lihat semuanya

File yang dapat di-cache tetapi jarang di-cache termasuk

• Halaman dengan konten dinamis
• Permintaan Ajax/REST jika cache mereka dibersihkan
• Kode lain yang perlu diubah lebih jarang

File yang sering di-cache dan harus di-cache termasuk

Halaman dengan konten statis atau jenis konten yang tetap sama untuk semua pengguna dan tidak sering berubah, seperti

• Gambar statis
• Logo dan aset
• lembar gaya CSS
• File yang dapat diunduh atau konten lainnya

File yang tidak boleh di-cache termasuk

• Konten dinamis, atau dalam istilah yang lebih sederhana, data yang dipersonalisasi menggunakan kondisi untuk ditampilkan
• Data sensitif apa pun (seperti informasi kartu kredit)

Caching dengan WP Rocket

WP Rocket adalah plugin paling ramah pemula dan termudah untuk meningkatkan kecepatan dan kinerja situs web WordPress Anda dengan cepat.  

Begini cara kerjanya

Itu menyimpan halaman web Anda dengan membuat file HTML statis dan membuatnya tersedia untuk kunjungan di masa mendatang. Selain itu, ini menerapkan caching browser, meminta browser untuk menyimpan file yang sering digunakan tetapi jarang diperbarui di memori cache lokalnya

Salah satu hal yang menjadikannya plugin caching terbaik untuk WordPress adalah ketika Anda menginstal WP Rocket di situs WordPress Anda dan mengaktifkannya, secara otomatis menerapkan 80% praktik terbaik kinerja web secara langsung.  

Lebih-lebih lagi

WP Rocket dapat diatur untuk mem-bypass atau menyimpan cache dinamis tergantung pada string kueri dan cookie

Juga, ia memiliki sistem untuk membantu menyegarkan cache dalam permintaan jangka waktu apa pun untuk membantu menyajikan versi situs web yang baru

Caching halaman, caching browser, dan kompresi GZIP adalah beberapa fitur default yang diaktifkan WP Rocket untuk Anda. Tetapi jika Anda tidak puas dengan pengaturan standar, WP Rocket juga menyertakan fitur lanjutan seperti

• Perkecil file CSS dan JavaScript – hapus spasi dan komentar untuk mengurangi ukuran file
• Hapus CSS yang Tidak Digunakan – hilangkan CSS pemblokiran render di situs Anda untuk waktu muat yang lebih cepat. Anda dapat memuat CSS secara asinkron atau menghapus file CSS yang tidak terpakai (metode pilihan)
• Muat JavaScript ditangguhkan – menghilangkan JavaScript yang memblokir perenderan untuk meningkatkan waktu muat
• Tunda eksekusi JavaScript – meningkatkan kinerja dengan menunda pemuatan file JavaScript hingga pengguna berinteraksi dengan situs web, mis. e. , melalui gulir atau klik
• Optimalkan Google Fonts – gabungkan, pramuat, dan muat file Google Fonts secara asinkron (mis. e. , tanpa pemblokiran render)

Dengan semua fitur ini, Anda bisa mendapatkan situs web secepat kilat dalam sekejap mata, yang pada akhirnya menghasilkan

Kesan pertama yang bagus, peringkat SEO yang lebih baik, & lebih banyak konversi. 🚀

Yang terpenting, ini membantu meningkatkan Skor dan metrik Performa PageSpeed, termasuk nilai Data Web Inti

P. S. Untuk mengatur caching di WP Rocket, buka

Pengaturan > halaman WP Rocket > dan klik tab ‘Cache’.  

WP Rocket sudah mengaktifkan caching halaman secara default, tetapi Anda dapat men-tweak pengaturan cache tambahan dari halaman ini.  

Membungkus

Peningkatan kinerja situs web Anda setelah menerapkan caching tidak dapat ditolak. Jika dilakukan dengan benar, ini dapat membuka tingkat pengalaman pengguna, peringkat mesin pencari, dan pendapatan yang sama sekali baru dengan mengoptimalkan kinerja situs WordPress Anda.  

Namun, dengan begitu banyak opsi caching yang tersedia, tampaknya menakutkan untuk memahami mana yang cocok dengan situs web Anda

Tapi sekarang, karena Anda sangat menyadari semua jenis caching di luar sana dan cara kerjanya – saatnya untuk melakukan cache. (tidak ada permainan kata-kata yang dimaksudkan)

Pembaruan terakhir pada 27 Desember 2022 Bagikan di

Tentang Emman Zahid

Emman adalah seorang penulis yang berpikiran bisnis dan kreatif yang bekerja bersama tim eksekutif perusahaan unggulan Forbes dan The Times. Mengkhususkan diri dalam pembuatan konten untuk blog, situs web, dan materi pemasaran, Emman membantu menghubungkan dan menginspirasi pembaca – mengubah mereka menjadi pelanggan dan klien yang bahagia dan membayar

Apakah HTML di-cache?

Bagaimana cara melakukan cache dalam HTML?