Setting Lazyload

Lazyload Image/Gambar

Pertama anda bisa mengupload di media seperti normal yang dilakukan lalu masuk ke tampilan HTML pada pojok kiri atas.

Cara Simple

Perhatikan code anda, pasti anda mendapatkan code yang tidak beraturan seperti ini

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" /></a></div>

lalu tambahan code <noscript> ... </noscript> diantaranya contohnya menjadi seperti ini:

<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" /></a></div>
</noscript>

Cara Manual

Untuk cara manual hal ini dilakukan agar code lebih bersih, pertama ambil code tag image dari gambar yang anda upload di blogger,

<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" />

Lalu anda bisa masukan di code diantara <noscript> ... </noscript> berwarna dibawah ini, pastikan terdapat width atau data-original-width dan sudah di atur. untuk full size anda bisa membuatnya menjadi width="728"

<noscript>
<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbXfUkNIFZQ3AksqDBXdWWGQXhBxfCB8KwgWdwO2D5p9trN0NX9raH4BW8M_d251B8tMQyfDc8iWEAwdWP8K1h3t4NX6eblRyHxw8-5ch4oE4nGmeA8MkvQsTLQEVnltnPwf6LSqvv2M/s320/lamp.jpg" width="320" />
</noscript>

Lazyload Adsense

Kamu cukup masukan kode seperti yang telah diwarnai pada widget Layout/Tata Letak, kode iklan ini bisa kamu dapatkan Pada sebelah kiri menu halaman Adsense, click Ads/iklan pilih Overview/Ikhtisar, setelah masuk halaman Overview, pilih tab ke2 By ad unit, dan pilih iklan seleramu.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890XXXXXX"
     crossorigin="anonymous"></script>
<!-- adsense -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890XXXXXX"
     data-ad-slot="123457XXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Lazyload Iframe, Video, Audio

Untuk Lazyload Selain image seperti Iframe (Youtube, Google map, dll), Video, dan Audio

<iframe class="lazyload" title="Youtube"
  width="400" height="300" allowfullscreen
  allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
  data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
  data-src="https://www.youtube.com/embed/Uz970DggW7E"></iframe>

<picture class="lazyload">
  <source media="(min-width:800px)" data-srcset="https://picsum.photos/800/1200">
  <source media="(min-width:600px)" data-srcset="https://picsum.photos/600/900">
  <img data-src="https://picsum.photos/200/300" alt="Photo" style="width:auto;">
</picture>

<audio class="lazyload" controls>
  <source data-src="sound.ogg" type="audio/ogg">
  <source data-src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<video class="lazyload" width="320" height="240" controls>
  <source data-src="movie.mp4" type="video/mp4">
  <source data-src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

Thanks for https://github.com/shinsenter/defer.js/