Cara Install Lazy Load Image di Blogger - lazysizes
·
2 min read
·
Label
BlogSite
Dalam konten postignan artikel atau lainnya di situs web, gambar adalah salah satu jenis konten gelap. Untuk memposting konten agar menjadi hidup, kita sering harus menggunakan banyak gambar. Namun, penggunaan terlalu banyak gambar akan sangat mempengaruhi kecepatan pemuatan situs web. Sebuah statistik yang dilakukan oleh HTTP Archive mengatakan gambar menyumbang sekitar 45% dari kapasitas setiap situs.
Gambar memainkan peran besar dalam alasan mengapa situs web terus tumbuh dalam ukuran halaman. Meskipun tidak memengaruhi kinerja sebanyak JavaScript, mereka tetap membebani data dan waktu pemuatan.
File media seperti gambar membuat posting blog terlihat menarik dan enak dipandang. Gambar adalah file berat dan menggunakan banyak ruang yang menyebabkan kecepatan pemuatan halaman situs web menjadi lambat. Dan ketika kita periksa kecepatan halaman postingan yang terdapat banyak gambar, hasilnya sering menunjukkan "Defer offscreen images". Singkatnya memberi tahu kita untuk menggunakan skrip Lazy Load. Jika situs web Anda menggunakan terlalu banyak gambar maka Anda harus menggunakan plugin Lazy Loader untuk Blogger.
Dalam posting ini saya ingin menunjukkan kepada Anda cara fitur lazy load untuk memuat gambar agar kinerja Blogger anda lebih optimal meskipun banyak gambar yang ada di tiap halaamn postingan.
A. Apa itu cache?
Ketika pengunjung pertama kali membuka blog Anda, browser akan membuat beberapa permintaan untuk mengunduh semua konten dari blog tersebut. Singkatnya, file tersebut disimpan di cache browser pengunjung. Sehingga ketika pengunjung blog mengunjungi blog Anda lagi, semua file yang diunduh sebelumnya akan dipanggil dari cache browser.
Ini jelas akan meringankan blog Anda karena browser tidak perlu terus-menerus meminta file ke server. Berapa lama cache disimpan di browser, Anda dapat mengaturnya sendiri. File yang perlu diatur cache adalah gambar jpg / png / gif, Favicon / ico, CSS, dan HTML.
Itu idealnya dan itu hanya dilakukan di blog/situs web yang memiliki hosting sendiri.
Karena ini adalah Blogger, Anda TIDAK DAPAT mengatur header dan secara terpisah mengontrol cache browser. Kemudian setiap pengunjung blog mengunjungi blog Anda, kemudian browser akan segera mengunduh ulang semua file data langsung dari server.
Ini tentu akan membutuhkan waktu atau pemuatan yang lama. Salah satu faktor yang tidak bisa mendapatkan skor A (100%) adalah masalah header ini kedaluwarsa.
Jangan sedih karena Anda dapat menggunakan Lazy Load Image Script untuk Blogger. Dengan menginstal ini di blog Anda, kecepatan halaman Anda akan meningkat dan pemuatan situs web Anda akan lebih cepat.
B. Apa itu Lazy Loading Image?
Lazy load adalah teknik dalam pemrograman web, digunakan untuk menunda pemuatan sumber daya hingga dibutuhkan. Penerapan teknik ini secara signifikan meningkatkan kinerja situs besar. Pada dasarnya, dengan situs web, lebih banyak konten, sumber daya dibagi menjadi beberapa bagian, pengguna melihat bagian selanjutnya melakukan sumber daya yang dimuat ditambahkan. Menerapkan teknik Lazy loading akan membantu mempercepat situs unduhan (karena kita hanya akan mengunduh 1 bagian dari isi halaman).
 |
Perbandingan Load Image Dengan Lazysize dan TANPA Lazysize |
Untuk melakukan Lazy load, tiap situs web membutuhkan script lazy load untuk merender tiap permintaan halaman. Jadi secara garis besar lazy load script Adalah skrip yang menunda pemanggilan file sebelum melakukan aktivitas berikutnya. Dan untuk tutorial ini kita akan menggunakan lazysize.
Dengan kata mudah, Lazy loading image berarti memuat gambar di situs web secara asinkron, yaitu setelah konten paruh atas dimuat sepenuhnya, atau bahkan secara kondisional, hanya ketika muncul di viewport browser. Ini berarti bahwa jika pengguna tidak menggulir ke bawah, gambar yang ditempatkan di bagian bawah halaman bahkan tidak akan dimuat.
C. Tentang Script lazySizes
lazySizes adalah skrip lazyloader yang dikembangkan oleh Alexander Farkas. Lazysizes sangat cepat, ringan, dan ramah SEO. Skrip ini mendukung penuh untuk pemuatan gambar, iframe, skrip/widget. LazySizes dibuat sangat dinamis dengan memprioritaskan unduhan sumber daya yang penting membantu untuk meningkatkan kinerja situs web anda secara signifikan.
Lazysizes dibangun berdasarkan standar gambar Responsif dan memperluasnya dengan fungsionalitas tambahan. Untuk dukungan gambar responsif lintas browser penuh, Anda harus menggunakan polyfill penuh seperti picturefill atau menggunakan plugin polyfill respimg parsial yang sangat ringan atau plugin gambar responsif sesuai permintaan. Atau, Anda cukup mendefinisikan src fallback melalui atribut data-src. Jika Anda ingin mempelajari lebih lanjut tentang sintaks gambar responsif, baca "Anatomi gambar responsif".
lazysizes adalah lazyloader yang cepat (bebas jank-free), ramah SEO, dan menginisialisasi sendiri untuk gambar (termasuk gambar responsif picture/srcset), iframe, skrip/widget, dan banyak lagi. Ini juga memprioritaskan sumber daya dengan membedakan antara elemen penting dalam tampilan dan dekat untuk membuat kinerja yang dirasakan lebih cepat.
Ini mungkin juga menjadi alat nomor satu Anda untuk mengintegrasikan gambar responsif. Ini dapat secara otomatis menghitung atribut ukuran untuk gambar responsif Anda, ini memungkinkan Anda untuk berbagi kueri media untuk atribut media Anda dengan CSS Anda, membantu memisahkan tata letak (CSS) dari konten/struktur (HTML) dan itu membuat integrasi gambar responsif ke dalam lingkungan apa pun sangat sederhana. Ini juga mencakup satu set plugin opsional untuk lebih memperluas fungsinya.
Selain itu, lazySizes juga mengintegrasikan fitur responsif gambar baik yang ada didalam kode HTML iframe atau img. Script ini akan secara otomatis menghitung dan mendistribusikan ukuran gambar, yang paling sesuai untuk pengguna. Ini juga berarti Anda dapat membagi file, file CSS untuk berbagai jenis konten.
Keuntungan Menggunakan lazySizes:
- Performa tinggi: skrip ringan, pengoperasian yang mulus dengan sejumlah besar gambar/iframe.
- Fleksibel: skrip menyediakan beberapa ekstensi untuk fitur lanjutan. Misalnya, efek LQIP/blurry.
- Ramah SEO: lazysizes tidak menyembunyikan gambar dan sumber daya dari Google. Jadi tidak akan ada bedanya apakah digunakan atau tidak dengan mesin pencari.
- Kompatibilitas tinggi: skrip bekerja dengan baik dengan sebagian besar browser dan sistem operasi.
Selain itu, lazySizes juga banyak fitur dan efek lainnya, Anda dapat melihat lebih banyak contoh template yang menggunakan lazysize.
D. Penerapan Script lazySizes di Blogger
Menggunakan script lazysize di Blogger akan membuat blog Anda dimuat lebih cepat, memberikan pengalaman yang lancar dan memiliki kesabilan yang tinggi. Sebelum kita menerapkan script lazysize di blogger, ada baiknya anda backup terlebih dahulu script template anda. Tapi, kami sarankan anda menggunakan akun Blogger baru dengan template yang baru. Setelah anda berhasil menerapkan lazysize, anda hanya lakukan copy paste saja ke template yang sedang anda gunakan.
Ada banyak cara meletakkan script lazysize di Blogger, tapi sebaiknya gunakan cara simpel saja dengan menyalin script dari jsdelivr. Pada kode HTML template anda cari kode </head>, setelah ketemu letakkan script lazysize tepat di atas kode </head> tersebut.
Letakkan script lazysize di atas kode </head>
<script src=' https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js'/>1. Cara Menggunakan script Lazysize di halaman postingan Blogger
Setelah anda memasang script "lazysize.min.js", maka semua fitur lazysize sudag bisa anda gunakan. Untuk mempermudah pemahaman penggunaan script lazysize, kami contohkan misalkan anda sedang menulis suatu artikel di blogger dan anda inign menyisipkan sebuah gambar atau banyak gambar pada artikel tersebut. Secara default ketika anda menyisipkan gambar ke halaman postingan blogger, maka secara otomatis Blogger akan membuat script gambar sebagai berikut.
Script default Blogger untuk Gambar
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNxrId_xleFhpX9X4jVo12GUFcxL4_aRcGJ9M1r-kcg3e1rSjfLEWNR3kJZWzuu7sjVHeLvKO-MuPCVhqmKs3EtyUjbH3V-IWfSUniXziuwztWx0eGjtdurwX-tBDI2GrdX5m7CHSGlfJOpJNSnuYWcbGJTV2uqLazyKze-1SfeNS_JovG6z1dSG-PXE/s1160/FreeBSD%20Nextcloud%20OpenSSL%201.jpg" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="650" data-original-width="1160" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNxrId_xleFhpX9X4jVo12GUFcxL4_aRcGJ9M1r-kcg3e1rSjfLEWNR3kJZWzuu7sjVHeLvKO-MuPCVhqmKs3EtyUjbH3V-IWfSUniXziuwztWx0eGjtdurwX-tBDI2GrdX5m7CHSGlfJOpJNSnuYWcbGJTV2uqLazyKze-1SfeNS_JovG6z1dSG-PXE/s320/FreeBSD%20Nextcloud%20OpenSSL%201.jpg" width="320" /></a>
</div>Perhatikan kode di atas, terdapat kode "<img........../>" hanya kode img yang harus anda utak atik, Caranya. Pada kode img anda ubah sedikit saja kodenya, seperti contoh berikut.
Ubah kode img default dari Blogger dengan lazysize
<img border="0" class="lazyload" data-original-height="650" data-original-width="1160" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNxrId_xleFhpX9X4jVo12GUFcxL4_aRcGJ9M1r-kcg3e1rSjfLEWNR3kJZWzuu7sjVHeLvKO-MuPCVhqmKs3EtyUjbH3V-IWfSUniXziuwztWx0eGjtdurwX-tBDI2GrdX5m7CHSGlfJOpJNSnuYWcbGJTV2uqLazyKze-1SfeNS_JovG6z1dSG-PXE/s320/FreeBSD%20Nextcloud%20OpenSSL%201.jpg" height="179" width="320" />2. Script Lazysize Otomatis di seluruh halaman postingan Blogger
Script di atas adalah script manual lazysize yang harus anda atur secara manual pada tiap halaman postingan blogger. Jika anda menginginkan script lazysize agar di load secara otomatis di seluruh halaman postingan blogger, gunakan jQuery untuk secara otomatis menerapkan lazysize untuk blogger pada semua gambar dalam artikel. Caranya, anda harus menambahkan script di bawah ini sebelum tag penutup </body>.
<script type='text/javascript'>
//Add lazyload for IMG and FRAME
$(".post-body.entry-content img").each(function() { $(this).attr("src", $(this).attr("src").replace("http://", "https://")); $(this).addClass("lazyload"); $(this).attr("data-src",$(this).attr("src")); $(this).removeAttr("src"); });
$(".post-body.entry-content source").each(function() { $(this).attr("srcset", $(this).attr("srcset").replace("http://", "https://")); $(this).addClass("lazyload"); $(this).attr("data-srcset",$(this).attr("srcset")); $(this).removeAttr("srcset"); });
$("iframe").each(function() { $(this).addClass("lazyload"); $(this).attr("data-src",$(this).attr("src")); $(this).removeAttr("src"); });
</script>Script di atas dapat digunakan (aktif), jika template Blogger anda mendukung jquery, jika tidak maka lazysize tidak akan berjalan secara otomatis diseluruh halaman blogger.
3. Script Lazysize Otomatis di seluruh Isi Blogger
Script lazysize ini digunakan untuk membuat seluruh gambar mendapatkan efek lazysize. Untuk menerapkan script ini anda harus mengatur seluruh kode "<img ...... >" yang ada di tempate blogger anda. Caranya cari script yang mengandung kode img tersebut, lalu ubah dengan lazysize. Biar lebih jelas akan kami berikan contohnya.
 |
Cari Seluruh kode <img di template Blogger |
Pada gambar di atas, kita telah menemukan kode <img asli yang ada di tempalte blogger.
Kode <img asli template Blogger
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/>Kode <img tersebut kemudian anda ubah dengan menambahkan script lazysize seperti contoh berikut.
Kode <img setelah ditambahkan script lazysize
<img class='lazyload' expr:alt='data:title' expr:data-src='data:sourceUrl' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/>Setelah itu, anda cari lagi kode "<img" seperti cara di atas. Cara mengubahnya sama dengan di atas.
Contoh mengubah kode <img default Blogger dengan lazysize
<img expr:src='data:post.thumbnailUrl'/>
Ubah menjadi
<img class='lazyload' expr:data-src='data:post.thumbnailUrl'/>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
Ubah menjadi
<img class='lazyload' expr:data-src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
Ubah menjadi
<img alt='' border='0' class='lazyload' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'/>Yang perlu anda perhatikan, tiap template struktur penulisannya beda, jadi anda sesuaikan saja dengan template yang anda gunakan. Contoh di atas sebagai panduan dasarnya.
Anda pasti bertanya?.
Jika kode <img telah ada variabel "class" gimana cara ubahnya. Perhatikan contoh berikut.
Kode <img dengan banyak "class"
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
Ubah menjadi
<img alt='' class='icon-action lazyload' height='13' data-src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>Saat ini, menunda pemuatan sumber daya yang tidak perlu secara bertahap menjadi standar umum dalam desain web. Bahkan tim pengembangan browser Google Chrome juga berencana menghadirkan fitur ini ke browser secara default. Ini membantu meningkatkan pengalaman menjelajah web Anda. Jadi menerapkan teknologi Lazy load image pada blogger tidak hanya membantu mempercepat situs web tetapi juga meningkatkan keterlibatan pembaca blog anda.
Silahkan Berkomentar, Kakak...! Bunda...!
Posting Komentar