Cara Memasang Lazy Load Untuk Gambar di Blog

Sebagian besar Untuk webmaster dan pengembang web yang ingin agar situs web dan blog mereka dimuat dengan lebih cepat di browser, mengenal nama Lazy Load adalah nama yang cukup terkenal. Ada banyak solusi mudah untuk menerapkan Lazy Load di situs web kalian jika kalian menggunakan WordPress atau sistem lainnya.

Kecuali bagi pengguna Blogger kami, tidak ada plugin atau kode sederhana untuk menggunakan Lazy Load. Namun dengan sedikit di luar kotak berpikir Lazy Load dapat digunakan di Blogger.

Dalam postingan kali ini saya akan menggunakan solusi Lazy Load jQuery yang cepat dan mudah diimplementasikan di blog kalian. Tidak hanya gambar posting, setiap gambar dari setiap widget/gadget atau bagian dari blog kalian dapat dimuat dengan Lazy load dan hal itu akan benar tidak masalah bagi fungsionalitas blog kalian, desain, konten, SEO, atau apa pun yang kalian khawatirkan.

Lazy Load adalah pro-fitur super yang akan membuat blog kalian jadi luar biasa tetapi akan membutuhkan kerja keras yang terfokus juga untuk menerapkan hal ini.

Apa itu Lazy Load?

Lazy Load adalah pola desain yang umum digunakan dalam pemrograman komputer. Tujuannya adalah untuk menunda inisialisasi suatu objek sampai pada titik di mana ia diperlukan. Dengan kata lain memuat hal-hal ketika mereka dibutuhkan tidak memuat mereka semua pada suatu waktu.

Lazy Load di situs web memuat objek seperti (Gambar dan iframe) tetapi ada beberapa browser memiliki sudut pandang tersedia untu penggunanya. Sebagai alih-alih memuat semua elemen sekaligus Load maka di perlukan untuk memuat basis elemen.

Mengapa kalian Harus Menggunakan Lazy Load di logger kalian?

Banyak yang akan bertanya mengapa dengan menggunakan cara ini?, tetapi pertanyaannya memiliki tanggapan mengapa atau tidak? mari kitas simak.

Situs web dan blog kita tidak lagi hanya berupa laman web dengan beberapa teks dan satu atau dua gambar. Blogger sekarang dipenuhi dengan gambar, elemen yang disematkan, tombol social media dan lencana, iklan, slide, dan banyak lainnya yang harus menggunakan item.

Terlepas dari memuat sekaligus, muat hanya ketika objek datang ke sudut pandang para penggunanya.

Lazy Load benar-benar untuk pengguna atau pengunjung agar bermanfaat. Melemparkan semua data situs web sekaligus ke browser untuk dimuat dapat menyebabkan kesan bahwa situs web akan mengambil selamanya untuk di Load. Ini bisa saja mengarah ke performanya.

Tips dalam posting ini adalah untuk siapa saja yang menggunakan platform Blogger Google, khususnya untuk: -

  • Pembuat template Blogger dengan Custom yang brilian. Mereka menghabiskan waktu yang sangat lama untuk mengembangkan template blogger yang tampak cantik dan fungsional. Dan banyak dari mereka merilis template secara gratis. Beberapa dari mereka mencoba menjual template di tempat-tempat seperti idntheme.com , themeindie. Sayangnya banyak template yang dibuat khusus gagal dalam tes kecepatan. Mereka luar biasa dan kadang mereka butuh waktu lama untuk dimemuat. Menambahkan Lazy Load ke template blogger kalian berarti fitur profesional super baru bagi kalian adalah template Blogger yang menarik lebih banyak download atau pembeli dan pengguna gratis.
  • Profesional atau ingin menjadi blog profesional yang di-host di blogger.
  • Blog yang menggunakan banyak gambar di mana-mana (di widget postingan dan bahkan di background).
  • Blogger yang peduli dengan kenyamanan dan bandwidth pengunjung mereka.
  • Jika kalian bosan dengan lambatnya blog kalian.
  • Siapa saja yang menggunakan blogger untuk blogging, belajar, ataupun mendapatkan penghasilan.

Menambahkan Lazy Load di blogger membutuhkan perubahan serius dalam template blogger kalian dan seluruh template. Sebelum melakukan perubahan apa pun, kalian harus men-backup template blogger kalian dahulu.

Saya rasa kata pengantar yang cukup dalam posting kali ini kita akan mencoba untuk menggunakan Lazy Load untuk gambar dan elemen lain di blog Blogger/Blogspot kita.

Menambahkan jQuery di Blogger


Pertama kita perlu menggunakan jQuery di blog kita. Dalam kebanyakan template blogger yang dibuat khusus menggunakan jQuery karena membantu untuk menambahkan banyak elemen pro di blog seperti: related posts, pagination, next and previous post dan masih banyak lagi.

Jika kalian menggunakan template default yang diberikan oleh blogger maka blog kalian mungkin tidak menggunakan jQuery di blog kalian. Coba alat ini untuk memeriksa apakah kalian menggunakan jQuery di blog kalian.

Untuk solusi khusus ini, kalian memerlukan jQuery versi 1.7 atau lebih tinggi. Saya akan menggunakan jQuery v1.11.1 untuk kali ini.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Untuk cara penggunaan jQuery ini:

  1. Buka dasbor Blogger > Template > klik Edit HTML.
  2. Silahkan Temukan kode </body> dan tempel kode jQuery tepat diatasnya.
  3. Lalu Save Template

Warning:
Saya berasumsi bahwa kalian tidak menggunakan jQuery dan elemen lain yang menggunakan jQuery didalamnya. Jadi saya menginpormasikan selambat mungkin tetapi kalian dapat menempatkan ini di bagian mana pun dari blog. Banyak yang menggunakan ini tepat di atas </head>

jQuery ini harus digunakan sebelum elemen lain dan script yang menggunakan jQuery.

Menambahkan Kode Lazy Load di Blogger


Solusi khusus ini diberikan oleh ressio.in yang merupakan salah satu solusi lazy load yang populer. Ini adalah plugin jQuery yang cepat dan berorientasi di seluler untuk pemuatan gambar/video/iframe yang lambat dengan dukungan build-in framework jQueryMobile. Berhasil di IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7, Android 2.3-4.4, Amazon Kindle Fire 2 dan HD 8.9, Opera Mini 7. Saya akan mencoba dan menerapkan ini di blogger: -

  1. Sekali lagi kita pergi ke editor template Blogger seperti tadi.
  2. Temukan kode </body>.
  3. Tempel kode JavaScript berikut tepat sebelum atau diatasnya dan klik Save Template.

<script type='text/javascript'>//<![CDATA[
/*! Lazy Load XT | (C)2014 RESS.io | MIT License
* Kraken techno //www.krakentechno.com/2018/07/memasang-lazy-load-untuk-gambar-di-blogger.html */(function($,window,document,undefined){var lazyLoadXT='lazyLoadXT',dataLazied='lazied',load_error='load error',classLazyHidden='lazy-hidden',docElement=document.documentElement||document.body,forceLoad=(window.onscroll===undefined||!!window.operamini||!docElement.getBoundingClientRect),options={autoInit:true,selector:'img[data-src]',blankImage:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',throttle:99,forceLoad:forceLoad,loadEvent:'pageshow',updateEvent:'load orientationchange resize scroll touchmove focus',forceEvent:'',oninit:{removeClass:'lazy'},onshow:{addClass:classLazyHidden},onload:{removeClass:classLazyHidden,addClass:'lazy-loaded'},onerror:{removeClass:classLazyHidden},checkDuplicates:true},elementOptions={srcAttr:'data-src',edgeX:0,edgeY:0,visibleOnly:true},$window=$(window),$isFunction=$.isFunction,$extend=$.extend,$data=$.data||function(el,name){return $(el).data(name)},$contains=$.contains||function(parent,el){while(el=el.parentNode){if(el===parent){return true}}return false},elements=[],topLazy=0,waitingMode=0;$[lazyLoadXT]=$extend(options,elementOptions,$[lazyLoadXT]);function getOrDef(obj,prop){return obj[prop]===undefined?options[prop]:obj[prop]}function scrollTop(){var scroll=window.pageYOffset;return(scroll===undefined)?docElement.scrollTop:scroll}$.fn[lazyLoadXT]=function(overrides){overrides=overrides||{};var blankImage=getOrDef(overrides,'blankImage'),checkDuplicates=getOrDef(overrides,'checkDuplicates'),scrollContainer=getOrDef(overrides,'scrollContainer'),elementOptionsOverrides={},prop;$(scrollContainer).on('scroll',queueCheckLazyElements);for(prop in elementOptions){elementOptionsOverrides[prop]=getOrDef(overrides,prop)}return this.each(function(index,el){if(el===window){$(options.selector).lazyLoadXT(overrides)}else{if(checkDuplicates&&$data(el,dataLazied)){return}var $el=$(el).data(dataLazied,1);if(blankImage&&el.tagName==='IMG'&&!el.src){el.src=blankImage}$el[lazyLoadXT]=$extend({},elementOptionsOverrides);triggerEvent('init',$el);elements.push($el)}})};function triggerEvent(event,$el){var handler=options['on'+event];if(handler){if($isFunction(handler)){handler.call($el[0])}else{if(handler.addClass){$el.addClass(handler.addClass)}if(handler.removeClass){$el.removeClass(handler.removeClass)}}}$el.trigger('lazy'+event,[$el]);queueCheckLazyElements()}function triggerLoadOrError(e){triggerEvent(e.type,$(this).off(load_error,triggerLoadOrError))}function checkLazyElements(force){if(!elements.length){return}force=force||options.forceLoad;topLazy=Infinity;var viewportTop=scrollTop(),viewportHeight=window.innerHeight||docElement.clientHeight,viewportWidth=window.innerWidth||docElement.clientWidth,i,length;for(i=0,length=elements.length;i<length;i++){var $el=elements[i],el=$el[0],objData=$el[lazyLoadXT],removeNode=false,visible=force,topEdge;if(!$contains(docElement,el)){removeNode=true}else if(force||!objData.visibleOnly||el.offsetWidth||el.offsetHeight){if(!visible){var elPos=el.getBoundingClientRect(),edgeX=objData.edgeX,edgeY=objData.edgeY;topEdge=(elPos.top+viewportTop-edgeY)-viewportHeight;visible=(topEdge<=viewportTop&&elPos.bottom>-edgeY&&elPos.left<=viewportWidth+edgeX&&elPos.right>-edgeX)}if(visible){triggerEvent('show',$el);var srcAttr=objData.srcAttr,src=$isFunction(srcAttr)?srcAttr($el):el.getAttribute(srcAttr);if(src){$el.on(load_error,triggerLoadOrError);el.src=src}removeNode=true}else{if(topEdge<topLazy){topLazy=topEdge}}}if(removeNode){elements.splice(i--,1);length--}}if(!length){triggerEvent('complete',$(docElement))}}function timeoutLazyElements(){if(waitingMode>1){waitingMode=1;checkLazyElements();setTimeout(timeoutLazyElements,options.throttle)}else{waitingMode=0}}function queueCheckLazyElements(e){if(!elements.length){return}if(e&&e.type==='scroll'&&e.currentTarget===window){if(topLazy>=scrollTop()){return}}if(!waitingMode){setTimeout(timeoutLazyElements,0)}waitingMode=2}function initLazyElements(){$window.lazyLoadXT()}function forceLoadAll(){checkLazyElements(true)}$(document).ready(function(){triggerEvent('start',$window);$window.on(options.loadEvent,initLazyElements).on(options.updateEvent,queueCheckLazyElements).on(options.forceEvent,forceLoadAll);$(document).on(options.updateEvent,queueCheckLazyElements);if(options.autoInit){initLazyElements()}})})(window.jQuery||window.Zepto||window.$,window,document);(function($){var options=$.lazyLoadXT;options.selector+=',video,iframe[data-src]';options.videoPoster='data-poster';$(document).on('lazyshow','video',function(e,$el){var srcAttr=$el.lazyLoadXT.srcAttr,isFuncSrcAttr=$.isFunction(srcAttr);$el.attr('poster',$el.attr(options.videoPoster)).children('source,track').each(function(index,el){var $child=$(el);$child.attr('src',isFuncSrcAttr?srcAttr($child):$child.attr(srcAttr))});this.load()})})(window.jQuery||window.Zepto||window.$);
//]]></script>

Harap diingat bahwa jQuery harus berada di atas kode ini selalu. Jangan hapus komentar lisensi di atas kode. Pembuat kode berusaha keras untuk membangun ini dan saya mencoba menjalankan ini di Blogger. Kalian baru saja menambahkan kode-kode dari Lazy Load tetapi masih ada pekerjaan utama yang masih tersisa.

Pengaturan Dasar dari Load Lazy: Perubahan yang diperlukan untuk Image dan tag iframe


Tag gambar di html terlihat seperti dibawah ini:

<img src='urlgambar.png' width='200px' height='200px' title='tittle gambar agar lebih diketahui' alt='untuk kode alt gambar agar lebih seo'/>

Sekarang untuk lazy load kita perlu mengubah hanya pada bagian src='...' menjadi data-src='...' jadi seperti ini:

<img class='lazy' data-src='urlgambar.png' width='200px' height='200px' title='tittle gambar agar lebih diketahui' alt='untuk kode alt gambar agar lebih seo'/>

Sekarang gambar akan dimuat dengan lazy load. Seperti yang kalian lihat di sini: src='...' ke data-src='...' dan tambahkan class='lazy' dan keduanya adalah suatu kode yang harus ada.

Alangkah lebih baiknya tambahkan tag noscript untuk gambar jika pengguna bertanya-tanya di situs web kalian yang menonaktifkan JavaScript: -

<img class='lazy' data-src='urlgambar.png' width='200px' height='200px' title='tittle gambar agar lebih diketahui' alt='untuk kode alt gambar agar lebih seo'/>
<noscript>
<img src='urlgambar.png' width='200px' height='200px' title='tittle gambar agar lebih diketahui' alt='untuk kode alt gambar agar lebih seo'/>
</noscript>

Sekarang gambar akan memuat bahkan jika JavaScript dinonaktifkan. Di dalam tag noscript tidak berubah src="..." ke data-src="..." dan tidak menambahkan class="lazy"

Untuk tag iframe tambahkan kode data-src="...." daripada menggunakan sre="..." di dalam tag hasilnya kurang lebih seperti ini: -

<iframe data-src="url iframe disini" scrolling="no" frameborder="0" rel="nofollow" target="_blank" style="border:none; overflow:hidden; width:280px; height:62px;" allowtransparency="true"></iframe>

Video YouTube juga dapat di-embed dengan menggunakan iframe dan video tersebut dapat loading dengan melakukan hal sederhana yang sama: -

<iframe allowfullscreen="" class="lazy" data-src="//www.youtube.com/embed/url penyambung disini" frameborder="0" height="480" width="640"></iframe>

Nah itulah cara sederhanya, kalian punya ide bagaimana lazy load untuk gambar dan iframes bekerja. Mari coba menerapkannya di bagian-bagian blogger yang berbeda.

Lazy Load Gambar untuk di halaman postingan Blogger


<div class="separator" style="clear: both; text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ALT KATA" border="0" data-original-height="300" data-original-width="500" height="384" src="URL GAMBAR" title="TITTLE" width="640" /></a></div>

Lalu kita ubah menjadi: -

<a herf='URL GAMBAR'>
<img class="lazy" title='TITTLE GAMBAR' height="600" width="800" data-src="URL GAMBAR" alt="KATA ALT GAMBAR">
<noscript>
<img title='TITTLE GAMBAR' height="600" width="800" src="URL GAMBAR" alt="ALT GAMBAR">
</noscript>
</a>

Hapus tag <a> sepenuhnya jika kalian tidak ingin gambar dapat diklik. Seperti yang disebutkan di atas, yang src="..." akan menjadi data-src="...", class="lazy" akan ditambahkan dan untuk tag noscript tidak akan ada perubahan.

Jika kalian telah melakukan semua hal di atas itu berarti gambar yang di posting akan menjadi Lazy Load di halaman posting.

Lazy Load Gambar yang Buruk di widget default, gambar Snippet, dan Bagian Lain di Blogger.


Bagian ini sangat rumit dan membutuhkan perubahan besar dalam template blog kalian. Kalian tidak hanya perlu memasang Lazy Load untuk memuat gambar widget atau gadget: seperti, Populer Post, info dan biografi Penulis, hasil pencarian dari kotak pencarian blogger default dan banyak lagi.

Kita juga perlu menambahkan Lazy Load ke gambar dalam ringkasan posting (seperti Load More, Baca Selengkapnya) dari halaman Home dan indeks. Ini perlu pembaruan dari template dan hal ini sangat rumit.

Namun kita akan menambahkan nilai Lazy Load ke semua dari gambar. Pertama mari kita tahu sedikit hal dasar. Pergi ke template kalian dan hanya mencari (tag gambar) <img di template blog kalian. Hampir dalam satu kali mencari kalian akan menemukan suatu kode seperti ini:

<img expr:src='data:something.something' ..... />

Tag <img akan disambung dengan kode expr:src='' bukan src='' Ini sebenarnya sama, pada dasarnya mengatakan bahwa mendapatkan gambar dari something.something. Sekarang di dalam something.something bagian kalian akan menemukan hal seperti ini:

  • data:sourceUrl Memuat gambar header/logo blog. Saya menyarankan kalian untuk meninggalkan gambar header bersama karena itu yang pertama terpikir blog kalian yang memuat. Jadi tidak perlu Loading memuat ini.
  • data:blog.postImageUrl Memuat gambar pertama blog kalian.
  • data:post.thumbnail Memuatkan thumbnail, gambar terpotong berukuran 72 × 72 dari entri blog kalian.
  • data:post.thumbnailUrl Juga memuat thumbnail.
  • data:post.authorPhoto.url Memuat gambar profil dari blogger kalian atau akun Google plus.
  • Dan lainnya....

Sekarang untuk memasang lazy load untuk gambar itu semua yang perlu kita lakukan adalha seperti ini:

<img class='lazy' expr:data-src='data:something.something' ..... />

Seperti yang kalian lihat, saya hanya mengubah expr:data-src='data:something.something' dan menambahkan atribut data-src='' yang diperlukan untuk pemuatan Lazy Load. Jangan khawatir ini akan bekerja dengan sempurna. Kita juga tambahkan ke class='lazy'. Saya tidak berpikir bahwa tag <img yang akan kalian temui akan memiliki atribut kelas sebelum menambahkannya, kecuali kalian atau perancang template menambahkannya. Kalian juga mungkin ingin menambahkan tag noscript untuk gambar itu juga.

<img expr:data-src='data:something.something' ..... />
<noscript>
<img expr:src='data:something.something' ..... />
</noscript>

Seperti yang kalian lihat itu adalah prinsip yang sama. Sekarang mari kita lihat contoh di bawah ini untuk perubahan dalam gambar widget Populer Post.

  1. Jika kalian menggunakan Populer Post blogger default dan kalian ingin menunjukkan gambarnya kemudian: Di editor template blogger Cari <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> atau gunakan tombol Jump to widget di atasnya untuk menuju ke posting populer.
  2. Carilah kode tag ini <div class='item-thumbnail-only'> di dalamnya
  3. Di dalamnya kalian akan menemukan <img tag seperti ini:
    <img alt='data:post.title' border='0' expr:src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'/>
  4. Cukup ubah expr:src='data:post.thumbnail' ke expr:data-src='data:post.thumbnail' dan tambahkan class='lazy'. Juga ada tag noscript seperti ini:
  5. <img alt='data:post.title' border='0' class='lazy' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'/><noscript><img alt='data:post.title' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></noscript>
  6. Setelah itu simpan template kalian dan kalian akan melihat Lazy Load bekerja dengan baik dan gambar juga muncul ketika pemuatan JavaScript diaktifkan di browser.

Saya pikir contoh ini membantu kalian memahami maksudnya. Cukup temukan expr=src='' di <img dan lakukan perubahan yang diperlukan. Dan perubahan ini tidak akan menyebabkan dan masalah pada template blogger kalian, desain blog dan dalam memuat blog.

Lazy Load untuk Gambar Widget atau Gadget yang Dihasilkan Otomatis melalui JavaScript dari Blogger


Template yang dibuat khusus baru semakin rumit untuk pengguna rata-rata dan kebanyakan dari mereka datang dengan sedikit atau tanpa instruksi untuk mengedit. Itu membuat lebih sulit untuk menerapkan Lazy Load di blogger. Tapi tetap saja kita bisa menggunakan Lazy Load untuk gambar di bagian lain blogger. Itu akan sulit dari sebelumnya, tetapi kita masih bisa melakukannya.

Ini akan menjadi rumit untuk menggunakan Lazy Load di gadget/widget yang dibuat otomatis oleh JavaScript untuk pengguna Blogger rata-rata. Kebanyakan blogger yang dibuat khusus menggunakannya. Widget atau gadget seperti related post, features posts, label wise posts, dan lebih seperti yang dihasilkan oleh JavaScript dan sebagian besar membutuhkan jQuery.

Ini berarti satu bagian dari pekerjaan telah selesai. Menambahkan jQuery ke blog. Gadget ini menghasilkan tautan pos dan detail dengan gambar yang terkadang tidak dapat dihindari untuk memberikan pengalaman pengguna yang lebih baik kepada pengunjung.

Meskipun demikian kalian dapat dengan mudah menerapkan pemuatan Lazy Load untuk gambar yang dihasilkan oleh widget yang dihasilkan secara otomatis ini. Mari kita lihat contoh berikut: -

<!-- label wise recent post -->
<script defer='defer' type='text/javascript'>
hposts=5;imgr = new Array();showRandomImg = true;aBold = true;summaryTitle = 250;
function showhomeposts(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img  = new Array();for (var i = 0; i < 15; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='//3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/w200/picture_not_available.png';}if (i==0) {

var trtd = '<a title="'+posttitle+'" alt="'+posttitle+'" href="'+posturl+'"><div id="plw" class="plw"><div class="entry"><div class="feature-image"><img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'"><h2 class="onetittle" >'+posttitle+'</h2></div></div></div></a>';

document.write(trtd);}
else{var trtd = '<a href="'+posturl+'"><div class="widgeth"><li>'+posttitle+'</li></div></a>';document.write(trtd);}j++;}}
</script>
<!-- Goes in widget content -->
<script type='text/javaScript'>
document.write( & quot; & lt; script src =  & quot;
/feeds/posts /
default / -/LABEL?max-results="+hposts+"&orderby=published&alt=json-in-script&callback=showhomeposts"></script>");
</script>

Pada contoh di atas di baris ke-7 temukan <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">. Ini menunjukkan kelas HTML dari gambar dan sumbernya. Sebenarnya seluruh baris-7 menunjukkan seperti apa tampilan HTML dari gadget yang dihasilkan.

Kalian akan menemukan sesuatu yang mirip dalam widget yang dihasilkan secara otomatis seperti ini. Dalam kebanyakan kasus akan ada garis atau bagian dalam kode JavaScript utama di mana kalian akan menemukan kemungkinan HTML yang menunjukkan struktur widget yang dihasilkan. Ini juga membutuhkan untuk membangun gaya CSS untuknya.

Sekarang datang ke baris-7 lagi di mana kita akan menambahkan pengaturan Lazy Load untuk gambar:

  • Temukan kode <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">.
  • Saya akan mengubah class ke atau menambahkan class="lazy" dan mengubahnya src="+thumburl+" ke data-src="+thumburl+"
  • Setelah diganti akan terlihat seperti ini: - <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">

Selesai Sekarang gambar yang dihasilkan oleh gadget ini akan dimuat secara Lazy Load. Untuk widget yang dibuat secara otomatis seperti postingan terkait, posting terbaru, posting lainnya unggulan atau label, dan lainnya, inilah yang harus kalian lakukan. Temukan pengaturan HTML di JavaScript dan tambahkan hal yang diperlukan untuk Lazy Load. Kecuali hal itu dikodekan: kalian akan dengan mudah menemukannya.

Saat ini saya menggunakan solusi semacam ini di bagian posting terkait dari blog kalian, tetapi sekarang tidak lagi. Tanyakan kepada orang yang telah membuat template blogger atau tanyakan kepada penulis yang telah memberi kalian kode widget dan tutorial. Saya juga akan mencoba membantu.

Dampak SEO pada Lazy Load


Banyak yang mengatakan bahwa menambahkan fitur Lazy Load akan meningkatkan peringkat kalian di Google dan mesin pencari lainnya. Ada orang lain yang mengatakan itu benar-benar kebalikan dari itu karena atribut src kosong di tag <img dari situs web. Kedua asumsi itu agak salah dan juga benar. Sebenarnya itu rumit tapi mari kita sederhanakan untuk dibicarakan.

Cara ini dapat Meningkatkan Peringkat di Mesin Pencari?

Perlu kalian ingan bahwa menambahkan Lazy Load hanya untuk gambar, video, dan iframe di situs web atau blog kalian. Ini menghentikan browser pengunjung untuk memuat semua gambar sekaligus, bukan gambar yang dimuat hanya ketika mereka datang di port tampilan browser pengguna atau pengunjung. Dalam kebanyakan kasus, lazy load akan meningkatkan kecepatan halaman, atau setidaknya mengurangi waktu yang dibutuhkan memuat semua gambar di halaman web.

Kalian mungkin menggunakan Lazy Load tetapi untuk elemen lain di situs web kalian mungkin masih lambat untuk memuat. Meningkatkan kinerja yang dirasakan dari situs kalian untuk pengguna dapat sangat membantu peringkat kalian.

Google khawatir tentang kecepatan halaman itu adalah berita lama. Jika lebih sedikit orang bangkit kembali ke hasil pencarian karena masalah kinerja dengan situs kalian, peringkat kalian akan meningkat. Jadi hanya menambahkan Lazy Load tidak akan meningkatkan kunjungan dan tampilan halaman kalian, situs web yang memuat cepat akan di usalkan situs web kalian mengandung konten asli dan SEO on-halaman dilakukan dengan benar.

Cara ini dapat mengurangi peringkat mesin pencari?

Lazy Load tidak meningkat dan tentu saja tidak bertanggung jawab untuk menurunkan peringkat situs kalian. Saya belum menemukan contoh di mana peringkat situs web turun karena Lazy Load.

Hanya sedikit masalah adalah bahwa Google tidak akan dapat mengindeks gambar kalian untuk pencarian gambar tetapi ada solusi untuk itu juga. Ada beberapa perbaikan teknis yang mudah seperti:

  • Gunakan tag <noscript> yang menunjukkan gambar untuk pengguna yang tidak mengaktifkan JavaScript dan bot mesin telusur. Seperti yang kalian perhatikan saya telah memasukkan ini di seluruh postingan.
  • Ini adalah solusi yang lebih yang baik dengan mentautkan ke gambar kalian.
  • <a href="/urlgambar.png "><img data-src="/urlgambar.png"…..></a>

Tampaknya tidak masalah untuk pencarian gambar apakah gambar ada di <img src atau di a href. Jadi potongan di atas akan mendapatkan gambar yang dimuat dengan lazy load dan gambar ukuran penuh yang ditautkan akan diindeks dalam pencarian gambar.

Untuk blogger semudah mengunggah posting editor menunjukkan gambar dalam bentuk terkait. Juga dengan mengubah ukuran foto Google atau gambar picasa kalian dapat memuat gambar berukuran lebih kecil di blog dan gambar berukuran asli akan diindeks.

Seberapa Cepat Lazy Load akan Memuat Blog


Lazy Load akan membuat blog kalian lebih cepat dari sebelumnya. Tapi itu bukan satu-satunya faktor untuk benar-benar membuat loading blog kalian dengan cepat. Daripada memindahkan semua gambar dari halaman blog dari atas ke bawah sekaligus. Lazy load akan memuat gambar kalian satu per satu sebagai pengunjung dengan menggulir ke bawah atas ke bawah. Tidak hanya ke pemirsa destop juga untuk pemirsa ponsel juga.

Kebanyakan perangkat seluler berjalan pada koneksi internet berkecepatan rendah dan juga mereka memiliki masalah memuat situs web yang berisi tanggal besar, terutama gambar-gambarnya. Lazy Load akan membantu kalian pengguna ponsel untuk memuat blog kalian dengan lancar.

Lazy Load kalian juga dapat menggunakan pemuatan Lazy Load untuk item iframe, seperti Facebook seperti kotak dan tombol, video YouTube. Tidak peduli berapa banyak kode yang kalian miliki di blog atau situs web blogger kalian, gambar adalah salah satu yang mengambil sebagian besar bandwidth dan kalian harus mengoptimalkan pemuatannya dengan Lazy Load.

Saran: Menggunakan kode CSS untuk memperbaiki Untuk Pengguna dengan Mode Horizontal


Saya sangat menyarankan kalian untuk: -

  • Hanya setelah benar-benar menulis pos baru, terapkan perubahan ini untuk gambar Lazy Load.
  • Salin seluruh posting HTML dari editor posting dan simpan di notepad++. Kemudian buat perubahan dalam kode. Perbarui/publikasikan posting kalian dan lihat apakah itu berfungsi.
  • Jika kalian memiliki banyak postingan di blog kalian, maka saya sarankan kalian melakukan ini dari yang baru ke posting yang lebih lama.
  • Jangan terburu-buru membuat perubahan ini.
  • Jika blog kalian memiliki terlalu banyak posting, jangan terburu-buru mengubahnya. Lakukan ini dengan mengubah satu pos pada satu waktu. Periksa apakah berfungsi dengan benar bahkan dalam noscript. Kemudian move ke posting lain.

Gunakan kode-kode CSS ini untuk mempercantik dan menghindari masalah-masalah dalam Lazy Load. Jika kalian menggunakan template yang responsif dan setelah mengunggah gambar jika kalian memperbaiki lebar dan tingginya di editor pos, maka kalian perlu menambahkan kode CSS ini di template kalian: -

@media screen and (max-width: 700px)
.post img {
width: auto !important;
height: auto !important;
max-width: 100% !important;}

Ubah (max-width: 700px) sesuai dengan gaya template kalian dan pengaturan untuk mengubah lebar dan tinggi gambar di layar yang lebih kecil. Tambahkan ke tag <style> template blogger kalian yang ada.

Gunakan kode berikut ini dalam kode CSS kalian untuk efek blur dari gambar yang mengblur atau pecah.

.lazy-hidden{opacity:0;background:#038D1A url('//2.bp.blogspot.com/-bL-eL_VIl2A/UoHFt0i8-wI/AAAAAAAAFI8/vn7h5nIbz6A/s1600/bs+loading+dot.gif') no-repeat center}
.lazy-loaded {-webkit-transition: opacity 0.4s;-moz-transition: opacity 0.3s;-ms-transition: opacity 0.4s;-o-transition: opacity 0.4s;transition: opacity 0.4s;opacity: 1;}

Kalian dapat mencoba kode kalian untuk gaya dan memuat efek dan tambahkan ke setiap ada tag <style> dari template blogger kalian.

Gunakan kode ini di bawah ini sehingga blog dan gambar tidak terlihat berkabel dalam mode noscript:

<noscript>
<style>img.lazy{display:none;}</style>
</noscript>

Buat perubahan pada posting ini sesuai dengan desain template Blogger kalian.

Pada akhirnya, Saya harap postingan ini memberikan gambaran keseluruhan tentang Lazy Load dan menggunakannya di Blogger. Kalian mungkin memiliki pertanyaan tentang tips ini bahkan kalian memiliki pengetahuan yang luar biasa tentang template blogger dan kode seperti HTML, CSS, JavaScript. Jangan dikedepankan di kotak komentar dan saya akan mencoba sebaik mungkin untuk menyelesaikannya. Terima kasih sudah membaca.