Dikesempatan kali ini saya akan bagikan sebuah script yang dapat membantu untuk mempercepat loading blog Anda. Script yang akan saya bagikan kali ini berfungsi untuk mengaktifkan caching dan mengoptimalkan gambar di halaman blog Anda.
Sepertinya tidak usah panjang kali lebar lagi. Berikut adalah scriptnya.
Script Untuk Mempercepat Loading Blogger
Login ke blogger > Tema > Edit HTML > Salin dan Tempel kode dibawah ini di bawah <head>
<script>
// Fungsi untuk mengaktifkan caching
function enableCaching() {
// Set cache-control header
document.querySelector("head").innerHTML += `
<meta http-equiv="Cache-Control" content="max-age=31536000"/>
`;
// Set expires header
document.querySelector("head").innerHTML += `
<meta http-equiv="Expires" content="Thu, 31 Dec 2023 23:59:59 GMT"/>
`;
}
// Fungsi untuk mengoptimalkan gambar
function optimizeImage() {
// Looping semua gambar di halaman
for (const img of document.querySelectorAll("img")) {
// Mengganti format gambar menjadi webp jika didukung
if (img.src.endsWith(".jpg") || img.src.endsWith(".jpeg")) {
img.src = img.src.replace(".jpg", ".webp");
}
// Mengatur ukuran gambar agar tidak terlalu besar
img.width = img.naturalWidth;
img.height = img.naturalHeight;
}
}
// Fungsi untuk menjalankan script
enableCaching();
optimizeImage();
</script>
Silahkan sesuaikan kode yang saya tandai dengan warna kuning diatas sesuai dengan keinginan Anda.
Script ini akan mengaktifkan caching dan mengoptimalkan gambar di halaman blog Anda. Caching akan menyimpan halaman blog Anda di browser sehingga tidak perlu dimuat dari server setiap kali pengunjung mengunjungi blog Anda. Pengoptimalan gambar akan mengurangi ukuran gambar sehingga halaman blog Anda akan lebih cepat dimuat.
Script tersebut terdiri dari dua fungsi, yaitu enableCaching() dan optimizeImage(). Fungsi enableCaching() akan mengaktifkan caching, sedangkan fungsi optimizeImage() akan mengoptimalkan gambar.
Berikut adalah penjelasan dari masing-masing fungsi:
Fungsi enableCaching()
Fungsi enableCaching() akan mengaktifkan caching dengan menambahkan header Cache-Control dan Expires ke halaman blog. Header Cache-Control akan memberitahu browser untuk menyimpan halaman blog Anda di cache selama 31536000 detik (satu tahun). Header Expires akan memberitahu browser bahwa halaman blog Anda akan kedaluwarsa pada tanggal 31 Desember 2023.
Fungsi optimizeImage()
Fungsi optimizeImage() akan mengoptimalkan gambar di halaman blog dengan mengganti format gambar menjadi webp jika didukung dan mengatur ukuran gambar agar tidak terlalu besar.
Gambar webp adalah format gambar yang lebih efisien daripada format gambar JPEG. Gambar webp dapat mengurangi ukuran gambar hingga 50% tanpa mengurangi kualitas gambar.
Ukuran gambar yang terlalu besar juga dapat memperlambat loading halaman blog. Oleh karena itu, fungsi optimizeImage() akan mengatur ukuran gambar agar tidak terlalu besar.
Dengan menerapkan kedua fungsi tersebut, Anda dapat mempercepat loading Blogger dengan cara:
Meningkatkan waktu loading halaman blog
Caching akan menyimpan halaman blog Anda di cache sehingga tidak perlu dimuat dari server setiap kali pengunjung mengunjungi blog Anda. Hal ini akan meningkatkan waktu loading halaman blog Anda.
Mengurangi ukuran gambar
Pengoptimalan gambar akan mengurangi ukuran gambar sehingga halaman blog Anda akan lebih cepat dimuat.
Secara keseluruhan, script tersebut dapat membantu Anda untuk membuat blog Anda lebih cepat dan responsif.
Demikianlah artikel tentang Script Untuk Mempercepat Loading Blogger kali ini. Semoga bermanfaat untuk kita semua.