Terapkan Lazy loading untuk Blogger

Dalam pengeditan konten situs web, gambar adalah salah satu jenis konten yang paling penting. Agar konten artikel menjadi hidup, seringkali kita harus menggunakan banyak gambar. Namun, menggunakan terlalu banyak gambar akan sangat mempengaruhi kecepatan loading website. Statistik yang dibuat oleh Arsip HTTP menunjukkan bahwa gambar memakan waktu sekitar 45% kapasitas per lokasi. Artikel ini akan memandu Anda menerapkan teknik lazy loading untuk Blogger untuk mengoptimalkan pemuatan gambar di web.

Apa itu pemuatan lambat?

Pemuatan malas adalah teknik dalam pemrograman web, digunakan untuk menunda pemuatan sumber daya hingga dibutuhkan. Penerapan teknik ini sangat meningkatkan kinerja situs web besar. Pada dasarnya, dengan situs web dengan banyak konten, sumber daya dibagi menjadi beberapa bagian, pengguna melihat bagian apa, sumber daya baru dimuat. Menerapkan teknik Lazy loading akan membantu mempercepat loading website (karena kita hanya akan memuat sebagian dari konten halaman).

Memperkenalkan lazySizes

lazySizes adalah skrip lazyloader yang dikembangkan oleh Alexander Farkas. Lazysizes sangat cepat, ringan, dan ramah SEO. Skrip ini memiliki dukungan penuh untuk gambar, iframe, skrip/widget… LazySizes akan secara otomatis memprioritaskan pemuatan sumber daya penting yang sangat meningkatkan kinerja situs web.

Selain itu, lazySizes juga memiliki fitur gambar responsif bawaan. Skrip ini akan secara otomatis menghitung dan mendistribusikan ukuran gambar yang paling sesuai kepada pengguna. Ini juga berarti Anda dapat membagi file CSS untuk berbagai jenis konten.

Keuntungan dari lazySizes:

• Performa tinggi: skrip ringan, bekerja dengan lancar dengan sejumlah besar gambar/iframe.
• fleksibel: skrip menyediakan banyak Ekstensi untuk fitur lanjutan. Misalnya LQIP/efek buram.
• ramah SEO: lazysizes tidak menyembunyikan gambar dan sumber daya Anda dari Google. Jadi tidak akan ada bedanya digunakan atau tidak dengan search engine.
• Kompatibilitas tinggi:script bekerja dengan baik dengan sebagian besar browser dan sistem operasi.

Selain itu, lazySizes memiliki banyak fitur dan efek lainnya, Anda dapat melihat selengkapnya contoh contoh.

Terapkan pemuatan malas ke Blogger

Menerapkan teknik pemuatan malas ke blogger akan membantu memuat blog Anda lebih cepat, memberikan pengalaman pengguna yang lancar. Sebelum melanjutkan untuk mengedit antarmuka, harap buat cadangan template jika ada kesalahan. Lihat cara mencadangkan antarmuka Blogger.

Menerapkan pemuatan malas ke gambar akan terdiri dari dua jenis:

• Lazy memuat gambar di kartu <img>
• Gambar latar beban malas

Anda melanjutkan untuk mengunduh file lazysizes.min.js Unduh dan unggah ke host Anda. Jika Anda tidak memiliki hosting sendiri, Anda dapat menggunakan tautan saya di:

https://cdn.jsdelivr.net/gh/Omegakd/omegakd-blog/javascript/lazysizes.min.js

Terapkan gambar Lazy load

Setelah mencadangkan, kami melanjutkan untuk mengedit template: Tema > Menu > Edit HTML.

Pertama, Anda tambahkan kode di bawah ini sebelum .tag </head>. Dengan isi atribut src adalah jalur file skrip yang disiapkan.

<!-- Lazy Sizes - lazy load image-->
<script src="https://cdn.jsdelivr.net/gh/Omegakd/omegakd-blog/javascript/lazysizes.min.js" async="async"></script>

Untuk menerapkan lazy load ke blogger, tag <img> harus dikonfigurasi sesuai dengan sintaks berikut:

<!-- non-responsive: -->
<img data-src="https://www.vietrick.com/lazy-load-cho-blogger/image.jpg" class="lazyload">

<!-- responsive example with automatic sizes calculation -->
<img data- data-src="https://www.vietrick.com/lazy-load-cho-blogger/image2.jpg" data-srcset="https://www.vietrick.com/image1.jpg 300w,
    https://www.vietrick.com/image2.jpg 600w,
    https://www.vietrick.com/image3.jpg 900w" class="lazyload">

<!-- iframe example -->
<iframe class="lazyload" allowfullscreen="" data-src="https://www.youtube.com/watch?v=9GE7d5PaAq0" frameborder="0">
</iframe>

Kami akan mengikuti sintaks di atas. Anda menekan kombinasi tombol Ctrl + Fpencarian tag: <img. Kemudian tambahkan atributnya class="lazyload" di dalam konten tag img dan berubah src dinding data-src.

Misalnya, kami memiliki kode berikut:

<img src="https://link-to-image.jpg" expr:alt="data:post.title" expr:title="data:post.title" width="72px" height="72px">

Akan berubah menjadi di bawah ini:

<img class="lazyload" data-src="https://link-to-image.jpg" expr:alt="data:post.title" expr:title="data:post.title" width="72px" height="72px">

Perlu diketahui, jika template Anda menggunakan javascript untuk membuat konten HTML. Kode HTML harus menggunakan formulir Keluar dari HTML. Misalnya kode di bawah ini:

<script>
document.write('&amp;lt;img class=&amp;quot;vietrick-img&amp;quot; src=&amp;quot;'&amp;lt;data:post.thumbnail/&amp;gt;'&amp;quot; height=108 width=72 /&amp;gt;' );
</script>

Akan berubah menjadi sebagai berikut:

<script>
document.write('&amp;lt;img class=&amp;quot;vietrick-img lazyload &amp;quot; data-src=&amp;quot;'&amp;lt;data:post.thumbnail/&amp;gt;'&amp;quot; height=108 width=72 /&amp;gt;' );
</script>

Terapkan gambar latar beban Malas

Untuk menerapkan lazy loading pada gambar background CSS, kita perlu menggunakan plugin tambahan lazysizes mengungkap pengait.

Anda menyisipkan skrip ls.unveilhooks.min.js setelah skrip lazysizes di atas.

Kemudian dengan konten yang perlu di-lazy loading, edit sesuai dengan sintaks di bawah ini:

<div class="lazyload" data-bg="bg-img.jpg">
	<!-- Div content -->
</div>

Terapkan gambar Lazy load ke artikel

Buatan tangan

Untuk menerapkan lazy loading pada artikel, Anda bisa memasukkan hard-code secara manual pada konten artikel. Di bagian pengeditan artikel, Anda beralih ke mode pengeditan HTML. Kemudian dapat memasukkan secara manual class="lazyload“ke kartu <img> .

Cara ini memang agak sulit saat menulis artikel, namun imbal baliknya konten akan lebih bersahabat dengan mesin pencari.

Secara otomatis menggunakan jQuery

Atau Anda dapat menggunakan jQuery untuk menerapkan lazy loading untuk blogger secara otomatis pada semua gambar di postingan. Di template, Anda menyisipkan kode berikut sebelum tag penutup </body>.

<script type="text/javascript">
	//Add lazyload for IMG and FRAME - Vietrick
	$(".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>

Pada kode di atas, kita akan menggunakan pemilih CSS untuk menunjuk ke tag img di dalam: .post-body.entry-content img. Bergantung pada tema Anda, pemilih CSS mungkin berbeda.

Menyimpulkan

Saat ini, menunda pemuatan sumber daya yang tidak perlu secara bertahap menjadi praktik umum dalam desain web. Bahkan tim pengembangan browser Google Chrome sedang mengerjakan sebuah proyek untuk menghadirkan fitur ini ke browser secara default. Dengan demikian membantu meningkatkan pengalaman saat menjelajahi web. Jadi, menerapkan teknik pemuatan lambat untuk blogger tidak hanya membantu mempercepat situs web tetapi juga meningkatkan pengalaman pengguna.

Jika Anda kesulitan melakukannya, silakan tinggalkan komentar agar saya dapat membantu Anda. Semoga beruntung.