Lengkap ! 21 Cara Mempercepat Dan Meringankan Loading Blog
Pada postingan blog yang pertama ini saya akan menawarkan Tips Trik untuk kalian bagaimana caranya Mempercepat Loading Blog.
Menjelaskan seterang-terangnya Cara Jitu yang saya alami dan kuasai sebelumnya. 😁
Mengapa ? Mengapa Mempercepat loading Blog ini penting ? 👀 Dikarenakan pengunjung atau visitor Blog anda akan semakin gampang dan cepat untuk..
...mencari hal-hal yang diharapkan di Blog/Web anda tentunya.
Kita tahu tidak semua pengunjung/visitor mempunyai perangkat 💻 yang spek tinggi atau tidak.
Selain itu, dengan mengoptimalkan loading halaman akan mengurangi size page dan pastinya akan 💰menghemat kouta anda.
Sebelumnya saya juga mempunyai blog ahmdjazuli.blogspot.com, namun harus berakhir 😭 tragis, terkena Penalti oleh Google karena...
...sering komentar berisi Promosi Link di 5-10 artikel setiap hari..
Kembali pada topik, berikut Tutorial Cara Mempercepat dan Meringankan Loading Blog 😆
Catatan :
Untuk mengecek kecepatan load Blog, anda sanggup gunakan tool PageSpeed atau GTmetrix.
Selain itu anda juga sanggup gunakan PingDom atau Web Page Test
Selain itu anda juga sanggup gunakan PingDom atau Web Page Test
1. Template Blog
Ketika pertama kali anda menciptakan Blog, pilih dan gunakan template Blog yang Responsive agar Tampilan Blog sahabat sanggup merender tampilan secara berbeda (respon) menurut ukuran layar pada perangkat apapun, teladan : desktop, tablet, mobile seluler, dll.Kalian sanggup download Free Template Responsive atau Premium. Selain itu, anda juga sanggup memakai template buatan anda sendiri.
Ketika anda ingin menentukan Template yang cocok semoga kecepatan Blog meningkat, gunakan Template yang ukuran filenya (biasanya berextensi .xml) tidak lebih dari 100kb
2. Kompres/Minify HTML, CSS, dan Javascript (JS)
Kompres atau Minify dari HTML, CSS, dan JS yakni salah satu cara semoga Blog anda semakin cepat.
Kita sanggup gunakan tools online pada situs seperti htmlcompressor, csscompressor, jscompressor dan banyak lagi.
Namun saya rekomendasikan untuk menggunakan Online JavaScript/CSS/HTML Compressor karena lebih lengkap dan gampang digunakan.
Kita sanggup gunakan tools online pada situs seperti htmlcompressor, csscompressor, jscompressor dan banyak lagi.
Namun saya rekomendasikan untuk menggunakan Online JavaScript/CSS/HTML Compressor karena lebih lengkap dan gampang digunakan.
Sebelum kita mencar ilmu mengkompres/minify, kalian perlu tahu letak code HTML, CSS, dan JS yang ingin di kompres sebagai berikut :
- Letak Code CSS
Code CSS biasanya terletak diantara tag <b:skin><![CDATA[......letak arahan css disini.....]]></b:skin> atau <style>......letak arahan css disini.....</style> atau <style type='text/css'>......letak arahan css disini.....</style>
- Letak Code HTML
Code HTML biasanya terletak diantara tag <body>......letak arahan css disini.....</body> - Letak Code JS
Code JS biasanya terletak diantara tag <head>......letak arahan css disini.....</head>
Setelah kalian mengetahui masing-masing letak code. Persiapan pertama yang harus anda lakukan adalah Backup Template agar tidak terjadi hal yang tidak diinginkan.
Caranya yaitu Blogger Dashboard - Template - Cadangkan/Pulihkan - Unduh Template Lengkap. Selanjutnya akan saya suguhkan bagaimana cara mengkompres code CSS, HTML dan JS sebagai berikut ini.. - Cara Kompres/Minify Code HTML,CSS dan JS
1) Pergi ke situs Online JavaScript/CSS/HTML Compressor 2) Copy Code HTML, CSS maupun JS yang ingin dicompres dan pastekan pada form kosong.
Setelah kalian mengetahui masing-masing letak code. Persiapan pertama yang harus anda lakukan adalah Backup Template agar tidak terjadi hal yang tidak diinginkan.
Caranya yaitu Blogger Dashboard - Template - Cadangkan/Pulihkan - Unduh Template Lengkap. Selanjutnya akan saya suguhkan bagaimana cara mengkompres code CSS, HTML dan JS sebagai berikut ini..
- Cara Kompres/Minify Code HTML,CSS dan JS
1) Pergi ke situs Online JavaScript/CSS/HTML Compressor
 |
Pada gambar diatas ini memperlihatkan saya mencoba mengkompres code CSS
 |
| Berikut Hasil kompres/Minify CSS |
Untuk itulah anda harus Backup Template dan selalu mengecek blog anda.
4) Jika hasil minify atau kompres dari code css,html ataupun js error, maka kembalikan arahan tersebut ibarat semula. Anda sanggup gunakan Beautiful Code untuk mengembalikan ke arahan asal.
3. Jangan Pasang Gambar di Header dan Background Blog
Biasakanlah untuk tidak memasang Gambar pada Header atau Background dikarenakan ini salah satu cara meringankan dan mempercepat loading Blog.
Untuk header cukup gunakan teks dan Background gunakan warna. Mengapa perlu saya jelaskan ?? alasannya yakni sering kali bagi blogger pemula atau gres berkenalan dengan Blog tidak memperhatikan hal ini.
Untuk header cukup gunakan teks dan Background gunakan warna. Mengapa perlu saya jelaskan ?? alasannya yakni sering kali bagi blogger pemula atau gres berkenalan dengan Blog tidak memperhatikan hal ini.
Mereka cenderung memasang apa yang mereka SUKA, namun tidak memikirkan AKIBATnya.
4. Jangan Pasang Musik/Lagu AutoPlay di Blog
Selain menganggu, Blog yang memasang Musik/Lagu sanggup menciptakan browser pengunjung berat serta mengharuskan untuk mengunduh lagu/musik tersebut untuk membuka Blog secara keseluruhan.
5. Meminimalisir Penggunaan Widget pada Blog
Usahakan untuk memasang widget yang seperlunya saja. Semakin banyak anda memasang Widget di Blog maka semakin berat Blog tersebut. Cukup gunakan widget Populer Post dan Subscribe seperti yang anda lihat pada Blog saya :D
6. Gunakan Font Awesome pada Template
Font yang elok dan sering sekali dipakai pada blog/web orang lain yaitu Font Awesome. Selain ringan, kalian sanggup gunakan icon/gambar yang tersedia pada Font Awesome tersebut.
Biasanya font awesome terletak diantara tag <head>..code awesome..</head>.. Sobat sanggup cek sendiri dengan CTRL + F untuk memudahkan pencarian..
Biasanya font awesome terletak diantara tag <head>..code awesome..</head>.. Sobat sanggup cek sendiri dengan CTRL + F untuk memudahkan pencarian..
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"></link>7. Pemilihan Format Gambar/Image
Awal pertama saya mencar ilmu Blog, saat menciptakan sesuatu postingan untuk dipublikasikan, saya tidak memperhatikan format maupun ukuran gambar.
Kaprikornus saat semua sudah selesai saya eksklusif publikasikan (format PNG ataupun JPG).
Ternyata setelah diperhatikan, ukuran gambar JPG lebih kecil dibandingkan format PNG yang sering saya upload.
Kaprikornus saat semua sudah selesai saya eksklusif publikasikan (format PNG ataupun JPG).
Ternyata setelah diperhatikan, ukuran gambar JPG lebih kecil dibandingkan format PNG yang sering saya upload.
Maka dari itu, gunakanlah gambar berformat JPG/JPEG. Jika terpaksa, gunakan PNG (jangan sering).
Selanjutnya, semoga ukuran gambar lebih kecil lagi, setelah kalian upload gambar aturlah dimensi/ukuran gambar menjadi small atau medium.
Selanjutnya, semoga ukuran gambar lebih kecil lagi, setelah kalian upload gambar aturlah dimensi/ukuran gambar menjadi small atau medium.
8. Kompres File JPG/JPEG/GIF
Melanjutkan pada tips no.7. Agar ukuran gambar semakin kecil dan ringan, sebelum kalian upload file sebaiknya anda harus kompres file gambar yang akan kalian upload ibarat PNG/JPG/JPEG/GIF dengan pemberian aplikasi tambahan.
Untuk format JPG/JPEG saya biasa menggunakan Advanced JPEG Compressor dan untuk file GIF gunakanlah aplikasi Easy Gift Animator atau File Optimizer.
Selain itu, anda juga sanggup gunakan aplikasi Microsoft Office Picture Manager, namun aplikasi ini hanya tersedia untuk microsoft office 2003 hingga 2010. Untuk cara kompres memakai Ms.Office Picture Manager sebagai berikut :
1) Buka aplikasi Microsoft Office Picture Manager dan pilih gambar yang ingin di kompres
2) Klik Picture - Compress Pictures..
Pilihan lain, anda juga sanggup memakai aplikasi Adobe Photoshop untuk memperkecil ukuran gambar dengan cara sebagai berikut ini :
1) Pada aplikasi Adobe Photoshop, tekan tombol ALT + SHIFT + CTRL + S
2) Save gambar memakai Present JPEG High, pada bab kiri bawah akan terlihat ukuran sebelum dan setelah di Save...
Jika tool Online, saya rekomendasikan Optimizilla. Kalian sanggup lihat sendiri :)
Untuk format JPG/JPEG saya biasa menggunakan Advanced JPEG Compressor dan untuk file GIF gunakanlah aplikasi Easy Gift Animator atau File Optimizer.
Selain itu, anda juga sanggup gunakan aplikasi Microsoft Office Picture Manager, namun aplikasi ini hanya tersedia untuk microsoft office 2003 hingga 2010. Untuk cara kompres memakai Ms.Office Picture Manager sebagai berikut :
1) Buka aplikasi Microsoft Office Picture Manager dan pilih gambar yang ingin di kompres
2) Klik Picture - Compress Pictures..
3) Pada bab kanan, akan tampil size/ukuran sebelum dan setelah di kompes. Untuk menyetujuinya, klik OK. Setelah itu, tekan tombol CTRL + S untuk disimpan...
Pilihan lain, anda juga sanggup memakai aplikasi Adobe Photoshop untuk memperkecil ukuran gambar dengan cara sebagai berikut ini :
1) Pada aplikasi Adobe Photoshop, tekan tombol ALT + SHIFT + CTRL + S
2) Save gambar memakai Present JPEG High, pada bab kiri bawah akan terlihat ukuran sebelum dan setelah di Save...
Jika tool Online, saya rekomendasikan Optimizilla. Kalian sanggup lihat sendiri :)
9. Menambahkan Asynchronous pada JQuery dan CSS
Cara jitu untuk mengatasi render blocking javascript jquery dan css pada Blog yaitu dengan menambahkan arahan atribute async="async". Cara memasangnya sanggup anda lihat di bawah ini...
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>10. Menggabungkan Javascript
Tidak semua javascript sanggup digabungkan, namun tidak ada salahnya jikalau dicoba. Misalkan ada 2 javacript ibarat di bawah ini..
<script type='text/javascript'> //<![CDATA[ // Sticky widget $(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset() .top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#comments") .offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:83} ):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}}) //]]> </script> <script type='text/javascript'> function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document .getElementById("current-year"),el.innerHTML=getCurrentYear(); function show(e){document.getElementById(e).style.display="block"} function hide(e){document.getElementById(e).style.display="none"} $(window).on("hashchange",function(n){history.replaceState(" ",document.title,n.originalEvent.oldURL)});$(".popular-posts .item-snippet").each(function() {$(this).text($(this).text().substr(0, 62) + "...");}) </script><script type='text/javascript'> //<
Sebenarnya untuk mengatur Leverage Browser Caching di Blog hingga hingga hari tidak sanggup dilakukan, namun menurut percobaan yang saya lakukan.
Trik yang saya gunakan yakni dapat mengupload gambar dengan ukuran sekecil mungkin agar sanggup mengurangi request HTTP.
Jika langkah ini telah anda coba dan belum mendapat hasil, tunggu hingga beberapa hari.
Kemudian sebelumnya saya juga telah membaca artikel dari suatu blog yang menyatakan bahwa cara mengatasinya dengan mengupload gambar berukuran original, ada juga yang bilang bahwa dengan mengupload gambar harus berukuran 300 x 300.
Saya uji coba kedua pendapat tersebut, dan jadinya cukup memuaskan. Leverage Browser Caching saya meningkat pada GTMetrix dan PageSpeed.
Trik yang saya gunakan yakni dapat mengupload gambar dengan ukuran sekecil mungkin agar sanggup mengurangi request HTTP.
Jika langkah ini telah anda coba dan belum mendapat hasil, tunggu hingga beberapa hari.
12. Jangan Pasang Animasi GIF di HomePage
Ada beberapa blogger yang suka memasang animasi GIF ibarat Kamera Bergerak, Helikopter, dan lainnya di Beranda.
Alangkah baiknya bila anda hapus/copot animasi GIF tersebut alasannya yakni menggangu dan memperlambat browser meload blog anda.
Namun, jikalau hanya untuk postingan tertentu yang sangat membutuhkan animasi GIF dipersilahkan.
Alangkah baiknya bila anda hapus/copot animasi GIF tersebut alasannya yakni menggangu dan memperlambat browser meload blog anda.
Namun, jikalau hanya untuk postingan tertentu yang sangat membutuhkan animasi GIF dipersilahkan.
13. Mengatasi Widget Bundle CSS
Bagi anda yang sering melaksanakan pengecekan kecepatan Blog melalu GTmetrix ataupun PageSpeed. Tak jarang blogger menemukan permasalahan terhadap 2 widget ini yaitu :https://www.blogger.com/static/v1/widgets/2272499489-widget_css_bundle.css
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3040763926886085284&zx=51c84bae-3297-4d56-89d1-e43d79e537d7
Untuk Mobile ataupun Dekstop, berikut tutorial untuk mengatasi Widget Bundle CSS :
1. Pergi ke Dashboard > Template > Edit HTML > Kemudian Cari Kode <head> ubah menjadi <head> dan ubah juga </head> menjadi <!--<head/>-->
2. Simpan Template dan Cek kembali kecepatan Blog anda, apakah sudah meningkat ? Pastinya dong, tetapi jangan lupa lihat Blog anda apakah ada perubahan atau tidak. Jika terjadi perubahan silahkan ganti arahan head ibarat semula dan simpan.
14. Menggabungkan 2/Lebih External Javascript
Bentuk dari External Javacript itu sendiri berupa link dengan extensi .js.
Tutor Cara Menggabungkan External Javascript
1) Pergi ke Closure Compiler2) Cari External Javacript yang kalian temukan di Template Blog anda (Gunakan Ctrl + F untuk memudahkan pencarian)
3) Kembali pada Closure Compiler, masukkan external javascript yang ingin digabungkan pada kolom "Add a URL" dan klik Add.
Cara Hosting CSS atau Javascript External di Github
1) Pergi ke Github - Login Akun Github - Klik tombol "+" - New Repository2) Isikan Nama Repository dan Deskripsi. Kemudian centang pilihan pada "Public" dan Initialize this...............a README
3) Create Repository
15. Menggunakan CSS Sprites
Pengertian CSS Sprites itu sendiri yakni menggabungkan beberapa gambar dalam satu Requests HTTP dengan CSS sebagai perintah dalam posisi penampilannya di Blog.
Untuk CSS Sprites itu sendiri, kalian sanggup gunakan tool online dari SpriteMe dan untuk cara penggunaanya sangat mudah.. yaitu :
Untuk CSS Sprites itu sendiri, kalian sanggup gunakan tool online dari SpriteMe dan untuk cara penggunaanya sangat mudah.. yaitu :
1) Buka Alamat Blog anda di Browser, kemudian New Tab
2) Buka SpriteMe, kemudian Drag link bertuliskan "SpriteMe" ke tab Blog anda. Maka akan muncul pada sisi kanan yang menampilkan hasil apakah Blog anda perlu untuk di Sprite atau tidak.
3) Jika YA, pilih "make all" untuk melaksanakan Sprites Otomatis..
3) Jika YA, pilih "make all" untuk melaksanakan Sprites Otomatis..
Perlu diingat bahwa SpriteMe ini hanya untuk anda yang memakai banyak gambar/image di background Halaman Blog.
16. Batas Jumlah Postingan di Home Page
Mengatur jumlah postingan di HomePage/Halaman Utama di Blog merupakan salah satu cara yang signifikan dalam mempercepat Load.
Cara untuk mengubah Batas dari Jumlah Postingan di Blog yaitu pergi ke Dashboard > Tata Letak > Gadget Posting Blog, klik Edit > Ubah jumlah postingan dengan angka minimal 4 dan angka maksimal 5.
Cara untuk mengubah Batas dari Jumlah Postingan di Blog yaitu pergi ke Dashboard > Tata Letak > Gadget Posting Blog, klik Edit > Ubah jumlah postingan dengan angka minimal 4 dan angka maksimal 5.
17. Menyembunyikan Widget.Js Blogger
https://www.blogger.com/static/v1/widgets/1170169845-widgets.js Cara gampang untuk menyembunyikan widget javascript bawaan dari Blogger yaitu dengan mengubah code tag </body> dengan <!--</body>--></body> pada Edit Template dan Simpan..
Untuk mengetahui perubahan sebelum dan setelah anda mengubah code tersebut yakni buka Blog anda, klik CTRL + U (View Page Source) dan lihat code widget.js akan berwarna hijau artinya Widget tersebut telah disembunyikan...
...cara ini menjadi tips alternatif bagi anda yang pusing tujuh keliling untuk mencari solusi apis.google.com 30 minutes
18. Peletakan Kode JavaScript di HTML
Seperti yang anda ketahui, dengan meletakkan arahan javacript sebelum tag </head> merupakan kawasan terbaik untuk meningkatkan kecepatan Blog anda.
Tentu berbeda dengan meletakkan javascript sebelum tag <head> atau lainnya. Namun, tidak semua javascript sanggup diletakkan sempurna sebelum tag </head> tersebut.
Oleh alasannya yakni itu, kita perlu melaksanakan Defer Javascript yang akan dijelaskan pada tips selanjutnya.
Tentu berbeda dengan meletakkan javascript sebelum tag <head> atau lainnya. Namun, tidak semua javascript sanggup diletakkan sempurna sebelum tag </head> tersebut.
Oleh alasannya yakni itu, kita perlu melaksanakan Defer Javascript yang akan dijelaskan pada tips selanjutnya.
19. Defer External Javascript
Defer External Javascript yaitu memakai "onload" sehingga external javascript
tersebut akan berjalan saat semua halaman telah dimuat. Dimanapun anda meletakkan, script tersebut hanya akan berjalan saat semua halaman telah selesai dimuat, pada dasarnya ibarat itu.
Scriptnya sendiri anda sanggup lihat sebagai berikut :
<script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d. src="LinkExternalJSDisini.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener ("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent ("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> 20. Defer External CSS
Setelah anda mencar ilmu bagaimana caranya mendefer External Javascript, anda juga sanggup Defer External CSS. Untuk penggunaannya sama saja, arahan sebagai berikut :
<script type='text/javascript'> //<![CDATA[ //CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"); //]]> </script> Catatan :
1. Bacalah dan ikuti tips Mempercepat loading Blog diatas satu persatu semoga sanggup membedakan/mengetahui perubahan masing-masing efeknya.
2. Tidak WAJIB kalian ikuti SEMUA tips yang ada, jikalau skor kecepatan Blog anda sudah tinggi.
3. Anda sanggup baca secara offline dengan Save Page As atau Bookmarks halaman artikel ini.
Kecepatan Blog JuliKoding, PageSpeed Google Developer mencapai 99% hehe... Let's Make Your Blog Load Faster for Blogger. Oh iya saya lupa, selain memakai GTMetrix, PageSpeed Google, Web Page Test dan Pingdom, anda juga sanggup gunakan tool PageSpeed di Varvy
21. Menggunakan Template AMP
Bagi anda(blogger) yang mempunyai bnyk visitor/pengunjung dengan Smartphone sebagai Media untuk Membaca artikel anda, sebaiknya...
Gunakan Template AMP(accelerated Mobile Pages) dari Google ini... Mengapa ??
Maka, blog tersebut lebih cepat dan gampang untuk diakses via Smartphone/Android..
Sekarang juga, kalian cari dan pasang Template AMP.. Saya rekomendasikan untuk Download Gratis Template AMP di KOMPIAJAIB (Blog Terpercaya)
Merasa postingan ini sangat PENTING untuk dibaca, silahkan SHARE dan Berkomentar jikalau ada yang ingin dipertanyakan..
Semoga dengan adanya artikel "21 Cara Mempercepat dan Meringankan Loading Blog" ini sanggup membantu dan bermanfaat bagi sahabat sekalian.. 😉 See you next time