Inilah 15 Cara mempercepat Loading Blog agar lebih SEO
Bagaimana caranya Mempercepat Loading Blog?
Banyak sekali Pertanyaan Semacam ini pada saat saya memulai terjun di dunia blogging, dan sudah sangat banyak juga tutorial atau jawaban untuk cara mempercepat loading blog di Internet.
yah pertanyaan seperti itu memang sering muncul bagi pemula seperti saya pada saat itu dan mungkin anda juga yang sedang membaca artikel ini sedang mencari cara untuk mempercep
Dan pada kesempatan kali ini saya akan berbagi sedikit pengalaman saya tentang bagaimana usaha saya untuk mempercepat loading atau speed blog dari awal sampai berhasil, memang banyak sekali faktor yang bisa mempengaruhi kecepatan suatu website atau blog, dan yang akan kita bahas kali ini adalah cara meningkatkan kecepatan blog agar lebih ringan lagi.
Mengapa Mempercepat loading Blog ini penting ? mengapa harus ? Ya, karena akan mempengaruhi nilai SEO atau pun Ranking juga di mesin pencari dan pengunjung atau visitor Blog anda akan semakin mudah dan cepat untuk mencari hal-hal yang dibutuhkan di dalam Blog/Web anda tentunya.
Selain itu, dengan mengoptimalkan kecepatan loading suatu halaman akan mengurangi size page dan pastinya akan menghemat kouta juga tentunya.
Ok, kita langsung saja pada poinnya, 15 Cara mempercepat Loading Blog/website. sobat bisa ikuti cara-cara di bawah ini.
Catatan :
Untuk mengecek kecepatan load Blog, anda dapat gunakan tool PageSpeed atau GTmetrix. Selain itu anda juga bisa gunakan PingDom atau Web Page Test.
cara Mempercepat Loading Blog
1. Template Blog
Hal Pertama yang harus anda perhatikan dalam masalah kecepatan blog adalah Tempelate blog yang sobat gunakan, Ketika pertama kali anda membuat Blog, gunakanlah template Blog yang Responsive , Fast Loading dan SEO Friendly, agar Tampilan Blog Anda Dapat menyesuaikan tampilan secara berbeda berdasarkan ukuran layar pada perangkat apapun, seperti desktop, tablet, mobile seluler. Karena tempelate yang Responsive dapat menyesuaikan tampilan layar sesuai perangkat.
Untuk saat ini banyak sekali Tempelate yang Responsive di Internet yang bisa anda download secara gratis maupun berbayar, karena tempelate ada yang versi free atau gratis maupun Premium/berbayar.
Dan perlu di perhatikan Ketika anda ingin memilih atau menggunakan Template yang cocok agar kecepatan Blog dapat meningkat, gunakan Template yang ukuran filenya biasanya berextensi .xml tidak lebih dari 100kb, agar sedikit ringan dan cepat saat perenderan.
baca juga:
Tips menulis artikel yang SEO friendly
cara Mempercepat Loading Blog
2. Minify CSS, HTML, dan Javascript (JS)
Salah satu cara supaya kecepatan blog anda loading nya bisa lebih cepat ialah dengan melakukan kompres atau minify CSS, HTML, dan JavaScript dalam tempelate anda.
Namun untuk melakukan kompres semua itu di perlukan keahlian dalam bidang programmer, tapi jika anda tidak memiliki keahlian tersebut, Anda bisa menggunakan tools online pada situs seperti css compressor, html compressor, js compressor dan banyak lagi bertebaran di Internet.
Dan saya Sarankan untuk menggunakan Tools Online Compressor karena lebih lengkap dan mudah digunakan walaupun anda tidak memiliki keahlian Programmer sekali pun, Banyak sekali penyedia tools online compressor yang bisa anda pergunakan.
Dan perlu di ingat, Sebelum Anda melakukan kompres atau minify, kalian harus tahu terlebih dahulu letak-letak kode CSS, HTML, dan JavaScript yang ingin di kompres, saya kasih contoh letak-letak nya sebagai berikut dibawah ini :
Letak kode CSS biasanya terletak diantara tag dibawah ini
<b:skin><![CDATA[......biasanya letak kode css disini.....]]></b:skin>
<style>......biasanya letak kode css disini.....</style>
<style type='text/css'>......biasanya letak kode css disini.....</style> Letak kode HTML biasanya terletak diantara tag
<body>......biasanya letak kode html disini.....</body>Letak kode JavaScript biasanya terletak diantara tag
<head>......letak kode JavaScript disini.....</head>Dan sebelum anda melakukan minify saya sarankan untuk membackup atau download tempelate anda terlebih dahulu, agar jika terjadi hal yang tidak diinginkan, anda tinggal memulihkan saja dengan file back up yang anda download sebelumnya.
Caranya mudah, anda hanya perlu ke Blogger Dashboard ==> Tema ==> Cadangkan/Pulihkan ==> Unduh Template Anda sebelumnya.
Dan cara untuk Kompres/minify kode CSS, HTML, dan JavaScript anda hanya perlu lakukan ini:
Pertama pergi ke situs Online yang menyediakan tools Compressor CSS, HTML, dan JS.
Copy Code HTML, CSS maupun JS yang ingin dicompres dan pastekan pada kotak kosong.
Kompres/Minify Code HTML,CSS, dan JS
lalu klik Minify atau Kompres.
Berikut Hasil kompres/Minify CSS
baca juga:
Cara memasang anti copas dan klik kanan di blog
Langkah Selanjutnya, copy semua kode yang telah di minify dan pastekan code yang telah dikompres tadi di Template Blog anda. Namun perlu anda ingat, tidak semua code dapat bekerja seperti sebelumnya setelah di compres/minify.
Dan itulah sebabnya anda harus Backup Template agar bisa anda pulihkan saat terjadi hal yang tidak diinginkan.
Jika hasil minify atau kompres dari code css,html ataupun js error, maka kembalikan kode tersebut seperti semula. Anda dapat gunakan Beautiful Code untuk mengembalikan ke kode asal.
cara Mempercepat Loading Blog
3. Perhatikan Penggunaan Widget pada Blog anda
Saya Sarankan untuk memasang widget yang seperlunya saja. Karena apa, semakin banyak anda memasang Widget di dalam Blog anda maka semakin berat loading Blog tersebut. Cukup gunakan widget Populer Post, Label, dan Subscribe saya rasa sudah cukup.
4. Gunakan Font Awesome pada Template
Dengan menggunnakan Font Awesome pada tempelate blog/web. Selain ringan, kalian dapat gunakan icon/gambar yang tersedia pada Font Awesome tersebut. Font ini sangat bagus dan sering sekali digunakan pada blog/web orang lain.
Biasanya font awesome terletak diantara tag
<head>..code awesome..</head>
Sobat dapat cek sendiri dengan tekan CTRL + F untuk memudahkan pencarian..
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"></link>
cara Mempercepat Loading Blog
5. Format Gambar/Image dan Kompres File JPG/JPEG/GIF/PNGGunakanlah Gambar yang formatnya jpg, karena walaupun format JPG dan format PNG diperbolehkan, tapi format JPG ukurannya lebih kecil dari pada format PNG, dan nantinya bisa memperringankan pemuatan halaman anda.
Selanjutnya, agar ukuran gambar lebih kecil lagi, setelah kalian upload gambar aturlah dimensi/ukuran gambar menjadi small atau medium, saya sendiri sering memakai medium.
Kompres File JPG/JPEG/GIF/PNG
Agar ukuran gambar semakin kecil dan ringan lagi, sebelum kalian upload file gambar sebaiknya anda harus kompres file gambar yang akan kalian upload seperti PNG/JPG/JPEG/GIF dengan bantuan aplikasi tambahan.
Anda dapat menggunakan aplikasi Microsoft Office Picture Manager, namun aplikasi ini hanya tersedia untuk microsoft office 2003 hingga 2010, anda juga bisa menggunakan aplikasi Adobe Photoshop untuk memperkecil ukuran gambar.
Jika ingin Lebih mudah kalian bisa menggunakan Tools Online yang tersedia di Internet.
6. Tambahkan Asynchronous pada JQuery dan CSS
Cara terbaik untuk mengatasi render blocking javascript jquery dan css pada Blog yaitu dengan menambahkan kode atribute async="async". Cara memasangnya dapat 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'/>baca juga:
3 Tips cara promosikan blog anda
7. Menggabungkan Javascript
Tidak semua javascript dapat digabungkan, namun tidak ada salahnya jika dicoba. Misalkan ada dua javacript seperti 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>
maka javacript yang telah digabung seperti 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})}})}});
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>
Cara menggabungkan kedua javacript yaitu dengan meletakkan tanda ; (titik koma) diantara kedua javascript. Setelah itu simpan template anda dan lihat perbedaannya.
cara Mempercepat Loading Blog
8. Mengatasi Leverage Browser Caching di Blog
Pengertian Leverage Browser Caching (LBC) itu sendiri sudah banyak beredar di internet. Inti dari fungsi LBC yaitu mengatur lamanya waktu penyimpanan file yang sudah didownload berupa css, js, gambar, icon dan lain sebagainya yang sebelumnya anda akses sebelumnya.
Sehingga browser tidak perlu lagi memanggil file css, js itu lagi karena sudah "diingat" atau caching sehingga web anda akan dimuat lebih cepat.
Untuk Mengatasi Leverage Browser Caching di Blog ada beberapa cara yaitu dengan memasukkan code di bawah ini tepat sesudah tag <head>
<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">namun code ini tidak memberikan efek apapun, malah semakin memburuk.
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 hasilnya cukup memuaskan. Leverage Browser Caching saya meningkat pada GTMetrix dan PageSpeed.
Uji Coba Leverage Browser Caching
Sebenarnya untuk mengatur Leverage Browser Caching di Blog hingga sampai hari tidak dapat dilakukan, namun berdasarkan percobaan yang saya lakukan.
Trik yang saya gunakan adalah dapat mengupload gambar dengan ukuran sekecil mungkin agar dapat mengurangi request HTTP.
Jika langkah ini telah anda coba dan belum mendapat hasil, tunggu hingga beberapa hari.
9. Mengatasi Widget Bundle CSS
Bagi anda yang sering melakukan 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 :
Pergi ke Dashboard > Template > Edit HTML > Kemudian Cari Kode <head> ubah menjadi <head> dan ubah juga </head> menjadi <!--<head/>-->
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 kode head seperti semula dan simpan.
10. Menggabungkan 2/Lebih External Javascript
Solusi M?k? F?w?r HTTP Requests di GTMetrix Blog
Solusi yang disarankan oleh GTMetrix pada Yslow untuk permasalahan blog mengenai "Make f?w?r HTTP Requests" yaitu dengan tr? t? combine atau menggabungkan External Javascript.
Bentuk dari External Javacript itu sendiri berupa link dengan extensi .js.
Tutor Cara Menggabungkan External Javascript
Pergi ke Closure Compiler
Cari External Javacript yang kalian temukan di Template Blog anda (Gunakan Ctrl + F untuk memudahkan pencarian)
Kembali pada Closure Compiler, masukkan external javascript yang ingin digabungkan pada kolom "Add ? URL" dan klik Add.
gabungkan External Javascript dengan Closure Compiler Service
Klik "Compile" untuk mendapatkan hasil gabungan dari 2 script pada kolom sebelah kanan. Lalu, Copy semua codenya dan pastekan di NotePad/WordPad. Save ?? dengan nama-file-nya.js
Hasil dari Code Compiler silahkan copy paste
Sekarang anda telah menggabungkan 2 external javascript yang berbeda. Agar dapat diakses oleh orang banyak, anda perlu hosting external javacript di hostingan seperti Github atau YourJavascript kemudian pasang kembali ke Blog anda. Maka Kecepatan Blog anda akan meningkat.
Cara Hosting CSS atau Javascript External di Github
Pergi ke Github - Login Akun Github - Klik tombol "+" - N?w Repository
Isikan Nama Repository dan Deskripsi. Kemudian centang pilihan pada "Public" dan Initialize this...............a README
Create Repository
N?w Repository di Github
Setelah itu, klik Upload Files
Upload Files Javascript, CSS External
Geser file javascript (.js) disana atau klik choose ??ur files. Setelah proses upload file berhasil, klik Commit Ch?ng??
Drag File Javascript yang ingin di upload
Klik kanan pada file javascript atau css yang telah diupload, dan Copy link Address
Copy link address pada file javascript
Paste link address pada kolom besar. Setelah itu, anda dapat gunakan link URL pada bagian "Use th?? URL ?n production" untuk Blog Anda.
Copy Paste URL cdn.rawgit blablabla
cara Mempercepat Loading Blog
11. Menggunakan CSS Sprites
Pengertian CSS Sprites itu sendiri adalah menggabungkan beberapa gambar dalam satu Requests HTTP dengan CSS sebagai perintah dalam posisi penampilannya di Blog.
Untuk CSS Sprites itu sendiri, kalian dapat gunakan tool online dari SpriteMe dan untuk cara penggunaanya sangat mudah.. yaitu :
Buka Alamat Blog anda di Browser, lalu New Tab
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.
Jika YA, pilih "make all" untuk melakukan Sprites Otomatis..
Cara menggunakan CSS SpritesMe di Blog
Perlu diingat bahwa SpriteMe ini hanya untuk anda yang menggunakan banyak gambar/image di background Halaman Blog.
12. 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.
baca juga:
3 Tips menjaga blog anda tetap eksis
13. Menyembunyikan Widget.Js Blogger
https://www.blogger.com/static/v1/widgets/1170169845-widgets.js
Cara mudah 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 sesudah anda mengubah code tersebut adalah buka Blog anda, klik CTRL + U (View Page Source) dan lihat code widget.js akan berwarna hijau artinya Widget tersebut telah disembunyikan...
Ketika saya ubah tag <body> seperti kode diatas, entah mengapa https://apis.google.com/js/plusone.js (30m minutes) nonaktifkan/mati sebagai problem di PageSpeed ataupun GTMetrix, sehingga...
...cara ini menjadi tips alternatif bagi anda yang pusing tujuh keliling untuk mencari solusi apis.google.com 30 minutes
cara Mempercepat Loading Blog
14. Peletakan Kode JavaScript di HTML
Seperti yang anda ketahui, dengan meletakkan kode javacript sebelum tag </head> merupakan tempat terbaik untuk meningkatkan kecepatan Blog anda.
Tentu berbeda dengan meletakkan javascript sebelum tag <head> atau lainnya. Namun, tidak semua javascript dapat diletakkan tepat sebelum tag </head> tersebut.
Oleh karena itu, kita perlu melakukan Defer Javascript yang akan dijelaskan pada tips selanjutnya.
15. Menggunakan Template AMP
Terakhir Bagi anda(blogger) yang memiliki banyak visitor/pengunjung dengan Smartphone sebagai Media untuk Membaca artikel anda, sebaiknya anda Gunakan Template AMP (accelerated Mobile Pages) dari Google ini... Mengapa ??
Karena blog tersebut akan lebih cepat dan mudah untuk diakses v?? Smartphone/Android..