Ada banyak sekali tips mempercepat loading blogspot yang bisa meningkatkan score Google Page Speed Insight . Di sini admin akan memberikan beberapa cara meningkatkan kecepatan blog kamu dan mendapat score good pada Page Speed Insight.
Blog atau Web yang cepat adalah salah satu cara meningkatkan pengunjung website agar selalu nyaman jika mengunjungi blog Anda. Bayangkan jika Blog Anda memiliki kecepatan loading yang cukup lama misal lebih dari 10 detik maka pengunjung akan segera meninggalkan artikel blog Anda karena terlalu memakan banyak waktu untuk meload suatu halaman.
Untuk mengecek score kecepatan pada blog bisa menggunakan fitur pada situs gtmetrix.com dan situs dari google yaitu google pagespeed insight. Memang kecepatan loading sangat penting dalam sebuah blog website namun yang paling penting sebenarnya adalah kontennya , karena konten adalah raja .
Jika kecepatan blog agak kurang cepat tetapi memiliki konten yang bagus maka pengunjung dengan senang hati mengabaikan kecepatan blog website karena konten yang disajikan lebih berkualitas.
Tapi dengan memiliki konten yang berkualitas sekaligus mempunyai kecepatan blog website yang cepat maka akan memiliki 2 kelebihan dan menyebabkan pengunjung betah berkunjung di website Anda.
Hapus Render Blocking CSS dan JavaScript
Sebelum browser menampilkan halaman blog maka terlebih dahulu script yang ada dalam blog tersebut akan diuraikan terlebih dahulu baru kemudian ditampilkan.
Dalam proses penguraian atau parse tersebut jika ditemukan script yang dipanggil di luar blog atau external source (sumber dari luar) maka proses penguraian atau parse akan dihentikan untuk mendownload script yang berada di external atau diluar web.
Proses inilah yang sangat mempengaruhi kecepatan blog ketika sedang diakses karena harus ada proses mendownload file dari luar terlebih dahulu.
Contoh file dari luar yang biasa digunakan pada template blogger pada umumnya adalah memanggil library javascript yaitu JQuery pada situs resminya.
Bagaimana cara menghapus render blocking element?
Jika website dimuat atau diuraikan bersamaan dengan element / konten maka masalah ini akan terselesaikan . Secara teknis metode ini disebut juga Asynchronus Loading (Async).
untuk menerapkanya Anda cukup menambahkan async pada script javascript.
contoh :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>tambahkan async pada script tersebut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' async/>Atau pakai cara kedua yaitu jangan memanggil external source atau sumber dari luar yaitu dengan menaruh kode external kedalam web atau blog kalian dengan menambahkan kode <script>..</script> dan masukan semua kode pada script .
Contoh :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>buka src http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js lalu copykan semua kode yang berada dalam halaman tersebut.
lalu pastekan semua kode tersebut ke dalam <script>
<script type="text/javascript">
/* Isi File JavaScript di Sini */
</script>
Untuk kode CSS hampir sama seperti javascript. Buka link dari luar external source contoh
lalu copy semua kode pada link tersebut.
cari </style> dan pastekan diatasnya.
<style>
/* Isi File CSS di Sini */
</style>
Menghapus JavaScript , CSS dan Widget Bawaan Blogger
Pada tema bawaan pastinya akan terdapat kode kode bawaan dari blogger yang dapat mengurangi kecepatan loading blog Anda.
Untuk menghilangkannya ikuti cara di bawah ini.
Buka Blogger > Klik Tema > Klik Edit Html > ketik Ctrl + F lalu
1. cari kode berikut.
<head>timpa ganti kode dengan
<head>2. cari kode
<b:skin><![CDATA[timpa ganti kode dengan
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>3. cari kode
]]></b:skin>timpa ganti kode dengan
</style>4. cari kode
</head>timpa ganti kode dengan
</head><!--<head/>-->5. cari kode
</body>timpa ganti kode dengan
<!--</body>--></body>6. cari kode
<html>timpa ganti kode dengan
<HTML expr_dir='data:blog.languageDirection'>7. cari kode
</html>timpa ganti kode dengan
</HTML>check kembali dengan pagespeed insight google.
Menghapus Ikon Edit Post Dari Bawaan Blogger
<b:include name="quickedit">
<b:include data="post" name="postQuickEdit"></b:include></b:include>Lalu hapus kode tersebut.
maka check lagi blog Anda dengan mengunjungi ulang apakah masih ada ikon atau tidak, jika sudah tidak ada maka artinya anda berhasil.
Mengurangi Ukuran File Gambar Di Blog
Gunakan Ukuran Gambar Kurang Dari 100kb
Mengguanakan Lazy Load
<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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>Simpan tema seperti biasa dan lazyload sudah terpasang.
Jangan Menggunakan Custom Font
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto&");
</style>ganti dengan
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto');
</style>Menambah Expires Header
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>
Akhir Kata :
Kira kira seperti itulah beberapa cara meningkatkan kecepatan blog , kecepatan memang bukan hal yang sangat penting namun bisa penting jika dibarengi dengan artikel atau konten yang berkualitas . karena dalam dunia blogging ” Content Is King ” Konten adalah raja.
Terimakasih sudah berkunjung jika ada pertanyaan dan kritik komen di bawah.
Saya adalah seorang penulis yang memiliki lebih dari 5 tahun pengalaman dalam membuat tutorial atau panduan terkait media sosial, gadget, smartphone. komputer dan teknologi lainnya.
Tinggalkan Balasan