Script Lazy Load Blogger Untuk Template JetTheme
Kecepatan situs web adalah salah satu faktor penting untuk peringkat yang lebih baik dan di situs web blogger, Anda tidak akan menemukan plugin caching dan pengoptimalan gambar. Jadi sangat penting untuk memasang skrip lazy load pada template blogger yang Anda gunakan agar mendapatkan nilai terbaik.
Sebuah situs web harus dimuat dalam 3 detik untuk pengalaman pengguna yang lebih baik, tetapi Menurut penelitian Google, waktu pemuatan rata-rata halaman web adalah 22 detik. Untuk meningkatkan kecepatan situs web Anda, Anda perlu mengoptimalkan Gambar Anda dengan lebih baik.
Dalam posting ini kami akan memberikan beberapa teknik untuk mengoptimalkan kecepatan situs web Anda dengan menggunakan format gambar seperti WebP, JPG 2000, AdSense, Iframe, Video, dan Audio. Dan Anda juga dapat menerapkan lazyload di situs web blogger untuk pengalaman dan kecepatan pengguna yang lebih baik.
Apa itu Lazy Loading?
Lazy Loading adalah teknik pengoptimalan untuk Situs Web yang menunda pemuatan sumber daya atau objek hingga benar-benar dibutuhkan dan mengurangi waktu pemuatan awal.
Misalnya, jika halaman web memiliki beberapa gambar di bagian bawah halaman dan pengguna harus menggulir ke bawah untuk melihat gambar, Anda dapat menampilkan placeholder dan lazy load gambar penuh hanya ketika pengguna tiba di lokasi mereka.
Ada beberapa manfaat mengaktifkan lazyload untuk gambar. Ini mengurangi waktu buka awal dengan mengurangi berat halaman dan menghemat sumber daya server dan klien. Lazyload membantu menghemat bandwidth dengan mengirimkan konten ke pengguna hanya saat diminta.
Setting Lazyload Untuk Template JetTheme
Untuk menggunakan Lazy Loading pada blog Blogger, kita hanya perlu menambahkan script lazy load pada template Blogger. Pengaturan ini akan menerapkan pemuatan lambat untuk gambar, AdSense, Iframe, Video, dan Audio secara otomatis.
1. Lazyload Image/Gambar
Bagi pengguna template JeTheme tidak perlu repot-repot lagi karena pada template yang digunakan sudah di pasang kode script lazyload. Pertama Anda bisa mengupload gambar terlebih dahulu di postingan blog seperti biasanya.
Sekarang ubah mode HTML posting blog menggunakan mode edit dan klik tab menu edit (pensil) di sudut kiri atas. Pilih mode Tampilan HTML untuk tujuan konversi ke gambar Blogger menjadi format kode html.
Setelah Anda berada dalam tampilan HTML posting Anda, cukup cari kode gambar. Kode gambar akan terlihat seperti yang ditunjukkan pada kode di bawah ini.
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgO4WagQkDRvicIX3ZG9c6QMeHVgEsV0qevqrtf89YopU20Lb-tfOJ2zGm7PHBGsiPal3f6YljL7ma2Quo-Xjzd9_3hWm3CNRVqDOnURjuZWKph76wfughuo-FLy2SskNPWQ7_9XYnWgz8zByz7RjW5fEOb0cNl8KfJHDvm86i-Wax3bygGOfBUuLFIZw" style="margin-left: 1em; margin-right: 1em;"><img alt="Lazy Load Blogger" data-original-height="400" data-original-width="728" height="352" src="https://blogger.googleusercontent.com/img/a/AVvXsEgO4WagQkDRvicIX3ZG9c6QMeHVgEsV0qevqrtf89YopU20Lb-tfOJ2zGm7PHBGsiPal3f6YljL7ma2Quo-Xjzd9_3hWm3CNRVqDOnURjuZWKph76wfughuo-FLy2SskNPWQ7_9XYnWgz8zByz7RjW5fEOb0cNl8KfJHDvm86i-Wax3bygGOfBUuLFIZw=w640-h352" title="Script Lazy Load Blogger Untuk Template JetTheme" width="640" /></a></div>
Kemudian tambahan kode <noscript> ex: kode-gambar </noscript> pada bagian kode gambar yang diubah menjadi format kode html. Posisi kode tersebut akan menjadi seperti gambar di bawah ini.
Selain itu, Anda juga bisa menggunakan cara manual. Ini bertujuan agar kode lebih bersih, pertama ambil kode tag gambar dari gambar yang Anda unggah di blogger.
<img alt="Lazy Load Blogger" data-original-height="400" data-original-width="728" height="352" src="https://blogger.googleusercontent.com/img/a/AVvXsEgO4WagQkDRvicIX3ZG9c6QMeHVgEsV0qevqrtf89YopU20Lb-tfOJ2zGm7PHBGsiPal3f6YljL7ma2Quo-Xjzd9_3hWm3CNRVqDOnURjuZWKph76wfughuo-FLy2SskNPWQ7_9XYnWgz8zByz7RjW5fEOb0cNl8KfJHDvm86i-Wax3bygGOfBUuLFIZw=w640-h352" title="Script Lazy Load Blogger Untuk Template JetTheme" width="640" />
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 alt="Lazy Load Blogger" data-original-height="400" data-original-width="728" height="352" src="https://blogger.googleusercontent.com/img/a/AVvXsEgO4WagQkDRvicIX3ZG9c6QMeHVgEsV0qevqrtf89YopU20Lb-tfOJ2zGm7PHBGsiPal3f6YljL7ma2Quo-Xjzd9_3hWm3CNRVqDOnURjuZWKph76wfughuo-FLy2SskNPWQ7_9XYnWgz8zByz7RjW5fEOb0cNl8KfJHDvm86i-Wax3bygGOfBUuLFIZw=w640-h352" title="Script Lazy Load Blogger Untuk Template JetTheme" width="640" />
</noscript>
2. Lazyload AdSense
Anda tinggal memasukkan kode seperti yang berwarna di widget Layout/Layout, Anda bisa mendapatkan kode iklan ini. Pada menu halaman Adsense sebelah kiri, klik Ads/ads pilih Overview/Overview, setelah masuk ke halaman Overview, pilih tab 2 By ad unit, dan pilih sesuai selera Anda.
<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>
3. Lazyload Iframe, Video, Audio
Untuk Lazyload Selain gambar dan AdSense Anda juga dapat menginstal lazyloads seperti Iframe (Youtube, Google map, dll), Video, dan Audio. Untuk iframe, video, dan audio lazyload, Anda dapat melihat kode di bawah ini.
<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>
Sumber : https://github.com/shinsenter/defer.js/
Sekarang Anda dapat memeriksa kecepatan situs web Anda di PageSpeed Insight untuk kecepatan halaman di Google dan Ini akan menunjukkan apakah pemuatan malas diterapkan dengan benar di situs Anda atau tidak.
Saya harap artikel ini membantu Anda bagaimana Cara Memasang Script Lazy Load Blogger Untuk Template JetTheme. Jika Anda memiliki keraguan, jangan ragu untuk bertanya di bagian komentar yang disediakan di bawah ini.
Tikseo
https://tikseo.blogspot.com - Tikseo working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for Programming, Blogger, or any other blogging platform. Stay tuned.
