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'>
//<
