 |
| Menggunakan cache browser di Blogger |
GSC: Bagaimana cara menggunakan cache browser di Blogger - Menggunakan cache browser di Blogger adalah cara yang efektif untuk mempercepat waktu muat halaman dan mengoptimalkan kinerja blog Anda. Ketika pengunjung membuka halaman blog Anda, cache browser akan menyimpan beberapa file seperti gambar, CSS, JavaScript, atau HTML ke dalam memori lokal mereka. Kemudian, ketika pengunjung membuka halaman yang sama di kemudian hari, browser akan mengambil file-file tersebut dari cache mereka daripada mengunduhnya dari server lagi. Ini dapat mengurangi jumlah permintaan HTTP dan meningkatkan waktu muat halaman.
Berikut adalah tutorial lengkap tentang cara menggunakan cache browser di Blogger:
Mengaktifkan Cache Browser di Blogger
Langkah pertama yang harus Anda lakukan adalah mengaktifkan cache browser di Blogger. Untuk melakukannya, ikuti langkah-langkah berikut:
1. Buka dashboard Blogger Anda dan masuk ke menu "Pengaturan".
2. Pilih "Preferensi Penelusuran" di sisi kiri layar.
3. Di bawah opsi "Penelusuran dan Indeks", pilih "Yes" pada opsi "Aktifkan kompresi gzip" dan "Gunakan cache browser".
4. Klik tombol "Simpan Pengaturan" untuk menyimpan perubahan.
Tambahkan Header Cache-Control ke file CSS dan JavaScript
Setelah mengaktifkan cache browser di Blogger, langkah selanjutnya adalah menambahkan header Cache-Control ke file CSS dan JavaScript di blog Anda. Cara ini akan membuat browser dapat menyimpan file-file tersebut di cache.
1. Buka template blog Anda di menu "Tata Letak".
2. Klik tombol "Edit HTML" untuk membuka kode HTML template blog Anda.
3. Cari kode `<head>` dan tambahkan baris kode berikut di bagian atas file CSS atau JavaScript:
html
/* CSS File */
header('Cache-Control: max-age=604800');
/* JavaScript File */
ExpiresActive On
ExpiresDefault A604800
Baris `max-age` menentukan waktu dalam detik untuk menyimpan file di cache browser. Dalam contoh di atas, kami menset waktu selama seminggu (604800 detik). Jadi, setelah waktu ini, browser otomatis menghapus file dari cache mereka dan mengunduhnya lagi dari server.
4. Klik tombol "Simpan Template" untuk menyimpan perubahan.
Tambahkan Ukuran Cache ke Gambar
Anda juga dapat menambahkan ukuran cache ke gambar di blog Anda dengan menambahkan atribut `max-age` ke tag gambar HTML. Langkah-langkahnya adalah sebagai berikut:
1. Buka post atau page yang ingin Anda tambahkan gambar di editor Bloggger.
2. Pilih gambar yang ingin Anda tambahkan dan klik pada atribut "Properties" pada bagian bawah editor.
3. Setelah itu, tambahkan atribut `max-age` ke tag gambar HTML seperti di bawah ini:
html
<img src="gambar.jpg" alt="Gambar" max-age="2592000">
Dalam contoh ini, kami akan menambahkan ukuran cache selama satu bulan (2592000 detik).
4. Klik tombol "Publish" atau "Update" untuk menyimpan perubahan.
Dengan menggunakan cache browser di Blogger, Anda dapat mempercepat waktu muat halaman dan meningkatkan pengalaman pengguna bagi para pengunjung blog Anda. Jangan lupa untuk memeriksa hasilnya setelah mengaktifkan cache browser untuk memastikan bahwa tidak ada masalah yang muncul pada blog Anda.
Setelah mengaktifkan cache browser di Blogger, ada beberapa cara untuk memeriksa apakah sudah berhasil atau tidak:
1. Gunakan Browser Developer Tools
Anda dapat menggunakan developer tools pada browser untuk memeriksa apakah file CSS dan JavaScript benar-benar disimpan di cache browser pengunjung Anda. Di Google Chrome, Anda dapat membuka developer tools dengan menekan tombol F12 pada keyboard. Kemudian, pilih tab "Network" di jendela developer tools.
Ketika Anda membuka halaman blog Anda, Anda akan melihat daftar semua file yang dimuat oleh halaman tersebut. Jika file CSS dan JavaScript disimpan di cache browser, status respons harus 200 OK dan tipe konten harus sesuai. Anda juga dapat melihat waktu muat file untuk memastikan bahwa file diambil dari cache browser dan bukan dari server.
2. Menggunakan Layanan Online
Ada banyak situs web online yang dapat membantu Anda memeriksa apakah cache browser berfungsi dengan baik pada blog Anda. Salah satu contoh layanan ini adalah GTmetrix (https://gtmetrix.com/).
Anda cukup memasukkan URL blog Anda ke dalam kotak pencarian di GTmetrix, lalu klik tombol "Analyze". Setelah akun Anda dibuat, Anda dapat melihat laporan kinerja blog Anda, termasuk apakah cache browser sedang digunakan atau tidak.
3. Memeriksa Header Respons
Anda juga dapat memeriksa header respons yang diterima oleh browser ketika file CSS dan JavaScript dimuat. Untuk melakukannya, Anda dapat membuka salah satu file CSS atau JavaScript di browser, kemudian klik kanan pada halaman tersebut dan pilih opsi "Inspect Element".
Di jendela developer tools, pilih tab "Network", kemudian muat ulang halaman. Setelah file CSS dan JavaScript dimuat, cari file tersebut di daftar file yang muncul di tab "Network". Klik pada file tersebut untuk memeriksa header respons yang diterima oleh browser.
Jika header respons termasuk dengan Cache-Control atau Expires, maka artinya cache browser berhasil digunakan.
Dengan memeriksa cara-cara di atas, Anda dapat memastikan bahwa cache browser berfungsi dengan baik pada blog Anda dan membantu meningkatkan waktu muat halaman serta kinerja blog secara keseluruhan.
Posting Komentar untuk "GSC: Bagaimana cara menggunakan cache browser di Blogger "
Artikel update setiap hari senin, selasa, dan rabu jam 07.00 wib.
Silahkan berkomentar dengan sopan, Bila memiliki saran, kritik, dan juga request pembuatan artikel, Silahkan hubungi Admin melalui kontak saya.