Tambahkan Lazy-Loading Script Untuk Mempercepat Loading Website/Blog
Harap di perhatikan! sebelum melakukan apa pun, buat cadangan HTML blog Kalian beserta isinya biar aman guys.Langkah pertama untuk mengimplementasikan skrip dan mekanisme lazy loading di situs web apa saja, termasuk WordPress atau blogger:
1. Backup template Kalian terlebih dahulu.
2. Buka dasbor blogger Kalian. Pilih opsi 'Tema' dari menu sebelah kiri dan klik 'Edit HTML'
3. Cari kode seperti ini
</body>. dan letakan kode dibawah ini persis di atasnya, jangan lupa di SAVE atau di Simpan
<!-- Lazy load offscreen images with lazysizes script start -->
<script async='async' data-cfasync='false' defer='defer' type='text/javascript'>
//<![CDATA[
const hasSupport = 'loading' in HTMLImageElement.prototype;document.documentElement.className = hasSupport ? 'pass' : 'fail';document.querySelector('span').textContent = hasSupport;
//]]>
</script>
<!-- Lazy load offscreen images with lazysizes script end -->
4. Nah sekarang tinggal lanjut ke postingan kalian di halaman blog, tentunya kalian harus menyertakan tag lazy-loader dengan masing-masing
img tag seperti di bawah ini::
Ganti kode dibawah ini:
<figure> <img src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/> <figcaption>your-image-cation</figcaption> </figure>
Dengan kode sebagai berikut:
<figure> <img loading="lazy" src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/> <figcaption>your-image-cation</figcaption> </figure>
5. Lalu Save template