Cara Mempercepat Loading Halaman Blogspot Terbukti Berhasil Dapat Sekor 100

Baca Juga

Assalamualaikum Wr. Wb.

Blogger mana sih yang tidak mendambakan blog nya dapat diakses dengan loading super cepat? kecepatan blog memang bukan salah satu faktor SEO, namun Google mencatat dari penguna browser Chrome bahawa visitor akan lari ke situs yang lain jika halaman blognya terlalu-lama untuk dimuat. Nah dari hal ini saya menyimpulkan bahwa secara tidak langsung kecepatan loading blog juga merupakan faktor SEO, ingat! secara tidak langsung ya.

Kali ini mbah Dukun bakal share cara meningkatkan kecepatan loading blog yang tentunya sudah saya buktikan sendiri. Sebelumnya disini saya akan luruskan terlebih dahulu bahwa fitur Google Page Insight bukan alat untuk mengukur kecepatan blog melainkan alat ukur praktik terbaik dalam optimasi kecepatan blog.

Untuk mengukur kecepatan blog, biasanya saya akan melihatnya melalui Webmaster dibagian aktifitas Rayap Googlebot. Dan berikut beberapa cara yang mudah untuk diikut:

Gunakan Gambar Format WebP, Jangan PNG atau JPG
Percaya atau tidak, format gambar Webp memiliki ukuran per byte nya hingga 95% lebih kecil dibanding format gambar Png untuk ukuran pixel yang sama. Dan memiliki ukuran byte 80% lebih kecil dibandingkan dengan format gambar Jpeg / jpg untuk ukuran pixel yang sama. Lihat perbandingan gambar berikut:

Diatas saya membandingkan format PNG, JPG dan WebP yang sama-sama memiliki ukuran gambar 800x450pixel dan tentu menampilkan foto yang sama ya hhe. Dari tiga gambar diatas, gambar format PNG memiliki ukuran 487KB, JPG memiliki ukuran 381KB dan WebP memiliki ukuran 34KB. Ini artinya format gambar WebP memiliki ukuran 92% lebih kecil dibandingkan dengan format gambar JPG, Waow!.

Tentunya ini akan meningkatkan loading situs anda secara signifikan, dan itu mengapa poin ini saya taruh dibagian pertama dalam meningkatkan waktu loading situs. Sayangnya app Foto Viewer Windows belum suport format Webp :(, jadi gak bisa kasih preview gambar, silahkan coba sendiri deh kalo gak percaya.

Gunakan Script Lazyload Image
Lazyload merupakan javascript dari JQuery, fungsi Lazyload ini adalah menunda pengunduhan konten gambar yang tidak terlihat di layar monitor. Contoh: ketika anda mengunjungi situs dukuntekno ini, ada gambar yang letaknya di header dan ada juga yang di footer. Gambar yang letakanya di header akan langsung diunduh karena memang langsung terlihat dilayar, sedangkan gambar yang terletak di footer, pengunduhannya ditunda hingga monitor bergerak kebawah menampilkan area footer.

Untuk memasang skript Lazyload sangat mudah, copy code berikut dan dan taruh di atas tag </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/> <script type='text/javascript'> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDktnR2PCxkMn7i6WFSOd89YAhOUz1udHaouFM9WDDK2-dP0rQ60BOkVvJoFYauZo1MKxsLZjJwNVvArlxmlZsPtfaqEwR8wtIriEvNARq9AzwF_ELLNo-tPeZRNWq3iQ_vzFDYogC6VY/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>
Pangkas Kode Javascript
Ada beberapa cara untuk memangkas kode JS, Anda bisa menghapus spasi, kode alenia baru (enter), dll. Untuk melakukannya tanpa repot-repot anda bisa menggunakan tool Online JS Compressor dengan mengunjungi situs berikut: https://jscompress.com/, Copy kode javascript blog Anda lalu paste ke kolom yang telah disediakan di situs tersebut, lalu klik kompress. Maka kode javascript yang tadinya memiliki spasi dan enter, sekarang muncul cuman satu baris alias tanpa spasi dan enter.

Ganti javascript yang lama dengan yang baru.

Pangkas Kode CSS
Sama seperti pada poin diatas, disini kita bisa menggunakan tool Online. Tapi kali ini namanya adalah CSS Compressor, anda bisa mengunjungi situs berikut https://csscompressor.com/.

Hapus Kode Template Yang Tidak Terpakai
Kode yang tidak terpakai disini bisa kode-kode komentar yang bisanya diapit dengan kode /* dan */. Terus kode lain misalnya, ketika kamu menghapus fitur komentar facebook, karena komentar facebook loadingnya lama banget, jadi disini ceritanya tu kamu apus komentar facebook karena bikin lemot. Nah biasanya ada skript JS bawaan facebook tuh yang tertinggal, hapus skipt tersebut.

Nah, gimana gaes? untuk melihat sekor optimasinya Anda bisa menggunakan fitur Google Page Insight. Dan untuk melihat kecepatan blog kamu, saya sarankan untuk menggunakan Google Webmaster karena lebih akurat, webmaster mencatat kecepatan situs berdasarkan target visitor blog kamu, bukanya berdasarkan server india, australia, canada, china dll yang gak masuk target visitor hhe. Pis yee klo ada yang salah tolong d kasih tau bagian mana yang salah, salam bloger semoga bermanfaat.

Share on Facebook