9 Mar 2018

5 Cara Ampuh Mempercepat Loading Blog

Mempercepat Loading Blog

Update tanggal 18 Maret 2018 : 
  • CDN tidak direkomendasikan untuk blog dengan 90% pengunjung dari Indonesia
  • Gunakan script untuk memanfaatkan penyimpanan cache browser (Cek diakhir artikel)

Blog yang mempunyai loading cepat akan meningkatkan skor SEO. Selain itu juga blog dengan loading kurang dari 2 detik mempunyai bounce rate yang rendah dan juga lebih disukai google dan pengunjung.

Setuju dengan 3 poin diatas?

Sebagai seorang blogger, mempunyai blog yang cepat baik dalam versi mobile maupun desktop adalah sebuah keharusan. Apalagi jika blog yang dikelola sudah di monetasi.

Baca ini : Panduan Auto Ads Google Adsense

Sehingga tutorial tentang cara mempercepat loading blog akan banyak sekali kita temukan dalam pencarian google.

Mempercepat loading blog berarti memperingan blog itu sendiri.

Uniknya, blogger yang memasang banyak widget, inline CSS, javascript, dan memasukan gambar yang tidak di kompress terlebih dahulu, masih saja mengharapkan blog mereka fast loading.

Padahal, hal yang mereka lakukan justru malah berbanding terbalik dengan harapan mereka. Dan faktanya, 40% pengunjung meninggalkan blog/website dengan loading lebih dari 3 detik.

Lantas, Apa sih manfaat mempunyai blog yang fast loading?


Selain 3 poin yang saya sebutkan diatas, mempercepat loading blog juga mempunyai manfaat yang amat sangat besar pengaruhnya terhadap blog teman-teman, diantaranya :

1. Menurunkan Bounce Rate


Bounce rate adalah persentase pengunjung yang meninggalkan blog teman-teman setelah hanya membuka satu halaman saja.

Pagespeed adalah faktor utama yang mempengaruhi bounce rate. Semakin tinggi bounce rate, semakin banyak pula pengunjung yang meninggalkan blog teman-teman.

Jika teman-teman belum begitu faham mengenai bounce rate dan apa pengaruhnya terhadap blog, teman-teman bisa membaca artikel berikut ini :

Apa itu Bounce Rate dan Bagaimana Pengaruhnya Terhadap Situs?


2. Meningkatkan Trafik Blog


Ini sudah jelas. Jika blog teman-teman fast loading, ditunjang dengan konten yang berkualitas, maka visitor akan betah berlama-lama di blog tersebut. Selain itu, Google sangat royal dengan blog yang nggak lemot lho!

3. Meningkatkan Posisi di SERP


Blog yang mempunyai loading yang cepat akan ditandai sebagai user friendly dan mobile friendly blog. Kabar gembiranya, awal 2017 lalu Google mengumumkan menggunakan data tersebut untuk me-ranking suatu situs dan halaman.

Semakin cepat semakin baik, semakin tinggi pula posisi di SERP.


4. Mempercepat Index Artikel Blog


Korelasinya adalah semakin cepat loading blog teman-teman, semakin cepat pula googlebot melakukan crawling blog teman-teman.

Baca ini : Cara Agar Artikel Blog Cepat Terindex Google

Karena, sejak Google mengkampanyekan Make the Web Faster dengan meluncurkan PageSpeed Insight, blog-blog yang mempunyai loading cepat mendapatkan prioritas crawling dari Google.

Lantas, pertanyaannya :


Bagaimana cara membuat blog/website menjadi ringan?


Setidaknya, ada 5 cara untuk meringankan loading blog agar lebih cepat. Berikut ke 5 cara tersebut yang akan saya bahas satu-persatu dibawah ini :

1. Kompres gambar sebelum dimasukan kedalam artikel
2. Minify CSS dan Javascript
3. Minimalisir penggunaan widget blog
4. Gunakan Plugin Lazy Load
5. Gunakan Content Delivery Network / CDN

Namun, sebelum saya melanjutkan pembahasan, ada baiknya teman-teman mengetahui terlebih dahulu tentang beberapa miskonsepsi tentang loading blog atau kecepatan blog.

Jangan terlalu menghiraukan Google Pagespeed Insights


Kenapa? Karena Google PageSpeed Insights tidak secara akurat menilai kecepatan loading sebuah blog.

Ah, pasti bakalan banyak yang tidak setuju dengan ini. Pasti. Tapi mari saya tunjukan datanya. Lihatlah perbandingan ketiga website dibawah ini yang saya test menggunakan Google PageSpeed dan Pingdom.
cara membuat blog fast loading
Perhatikan angka yang saya beri kotak merah.

Membacanya dari kiri ke kanan. Diurutkan sesuai nilai Google PageSpeed dari yang tertinggi sampai terendah.

  1. Pureplanetrecycling : PageSpeed 91/100. Pingdom loading time 462ms.
  2. Cheekypunter : PageSpeed 77/100/. Pingdom loading time 495ms.
  3. Anticatrattorialportico : PageSpeed 58/100. Pingdom loading time 596ms.

Kotak merah yang diatas adalah hasil dari Google PageSpeed, dan kotak merah yang dibawah adalah hasil dari Pingdom. Masih terlihat wajar kan? Dimana skor PageSpeed 91/100 mempunyai loading blog yang cepat diangka 462ms (milisecond).

Tapi coba lihat yang berikut ini :
mempercepat loading blog
Hasil pingdom dan pagespeed situs clnet

Clnet-solution mempunyai skor PageSpeed 85/100. Lebih tinggi dari Cheekypunter dan Anticatrattorialportico. Tapi, perhatikan Pingdom loading time-nya : 3.16 detik. Hampir 10 kali lebih lambat dari kedua situs tersebut!

Apa yang bisa kita simpulkan dari sini?

Google PageSpeed Insights tidak secara akurat menilai kecepatan loading sebuah blog.

Yang kedua adalah fakta dimana ternyata situs blogger.com sendiri mempunyai skor PageSpeed yang buruk. Berikut screenshotnya :
pagespeed google
Sekedar informasi : Blogger adalah milik Google!

Pertanyaannya : Jika Google sendiri tidak mengikuti saran dari Google PageSpeed, yang notabene adalah produk dari Google itu sendiri, lah kenapa saya harus mengikutinya?

Setuju?

Namun, intinya bukan itu. Intinya adalah bahwa jangan terpaku pada skor atau grade dari Google PageSpeed.

Mari kita kilas balik sebentar ketika di bangku sekolah dulu. Apakah mereka yang mendapatkan nilai yang sempurna adalah orang yang pintar? No. Mereka hanya tahu bagaimana cara mengerjakan soal yang benar ketika ujian.

Faktanya, banyak orang pintar yang selalu kebingungan ketika mengerjakan soal. Bahkan beberapa dari mereka dikeluarkan.

Jadi, seperti halnya nilai sempurna bukanlah indikator nyata sebuah kepintaran, maka skor Google PageSpeed juga bukanlah indikator nyata sebuah kecepatan.

Oke, setidaknya itu anggapan saya. Sisanya, mari diskusikan di kolom komentar. So, mari kita masuk ke inti pembahasan : Bagaimana cara mempercepat loading blog?

1. Kompres gambar sebelum dimasukan kedalam artikel


Tips ini sebenarnya tips yang receh. Bahkan setiap blogger baik pemula maupun yang pro sudah faham mengenai tips ini.

Namun, pertanyaan saya : bagaimana cara mengecilkan / kompres gambarnya? Apa software terbaik yang digunakan? Berapa kb ukuran gambar yang optimal?

Kita jawab ketiga pertanyaan tersebut.

Saya telah menggunakan banyak tools untuk melakukan research mana software terbaik untuk mmengecilkan gambar. Sejauh ini, saya cukup puas dengan software JPEGmini untuk offline, dan Compressor.io serta ImagesSmaller.com untuk kompresi secara online.

Untuk Compressor.io, online compressor ini mengecilkan gambar tanpa mengurangi kualitas sampai 88% untuk file PNG, dan 70% untuk file JPG! Setidaknya itu batas maksimal yang saya capai selama menggunakan tools tersebut. 
hasil kompres gambar dengan compressor io
Hasil kompres file PNG menggunakan Compressor.io

Dan untuk ImagesSmaller.com, sesuai rekomendasi dari Bang Adi Pradana (adipraa.com), tools ini bahkan bisa mengkompresi file gambar sampai 90%!

imagessmaller
Hasil kompresi file PNG dari ImagesSmaller.com

Awal file 81.3 kb, setelah di kompres memakai ImagesSmaller berkurang lebih dari 71%! Bagaimana dengan JPEGmini? Lumayan bagus. Namun sesuai namanya, hanya untuk file JPG saja. 

Rekomendasi : Saya menggunakan kedua tools tersebut untuk mengkompresi gambar. Pertama saya gunakan Compressor.io, jika ukuran file masih lebih dari 50 kb, maka saya menggunakan ImagesSmaller.com.

Hasilnya, gambar-gambar yang saya upload kurang dari 30 kb saja. Bahkan rata-rata sekitar 4-20 kb saja!

Lantas, apakah itu adalah ukuran optimal untuk blog? Tidak juga. Itu hanya standar yang saya buat agar loading blog tidak terlalu lambat. Juga, tidak ada standar yang pasti untuk ukuran gambar. Yang jelas, kompres lah gambar teman-teman sebelum dimasukan kedalam artikel.

2. Minify CSS dan Javascript


Jika masih asing dengan istilah ini, singkatnya minify adalah proses menghilangkan spasi, tab, ataupun komentar css/javascript sehingga proses pembacaan css/javascript lebih cepat.

Sebelum minify [anggaplah ini css/javascript]

Nugraha Fauzi adalah blogger kece asal Indonesia yang baru bisa move on setelah kurang lebih setahun menjomblo. hehe

Setelah minify [menggunakan cssminifer.com]

NugrahaFauziadalahbloggerkeceasalIndonesiayangbarubisamoveonsetelahkuranglebihsetahunmenjomblo.

Lebih jelasnya berikut ini :
mempercepat loading blog
Hasil minify melalui cssminifier.com

Perhatikan Input CSS diatas. /* Ini adalah komentar CSS */ biasanya merupakan judul dari fungsi CSS. Semisal /* Arlina Featured Post */. 

Nah ketika di minify, komentar tersebut akan dihapus. Perhatikan tanda panah hijau. Itu berarti bahwa kode css tersebut sangat panjang ke samping. Karena ditulis perbaris dan menggunakan enter.

Ketika di minify, kode css 5 baris tersebut akan disatukan menjadi 1 baris saja dengan menghapus spasi dan enter yang sebelumnya digunakan.

Lho kenapa harus di minify?

Karena proses pembacaan css ataupun javascript, dilakukan secara horizontal perbaris. Semakin banyak baris, spasi, enter yang digunakan, semakin lama pula proses pembacaan yang dilakukan.

Terus kenapa komentar css/javascript harus dihapus?

Ya karena memang tidak ada fungsinya untuk css itu sendiri. Komentar tersebut hanya untuk mempermudah kita memahami fungsi dari suatu kode.

Bagaimana cara minify css/javascript?

Penting : backup dulu template yang teman-teman gunakan. Masuk ke menu theme/tema - edit tema. Gunakan Ctrl + F untuk mencari kode dibawah ini :
  • Kode dalam <style> ... </style> adalah kode css
  • Kode dalam <script> ... </script> adalah kode javascript
Kunjungi situs www.cssminifer.com untuk css dan www.javascript-minifier.com untuk javascript. Selanjutnya tinggal coy-paste kode css/javascript yang hendak di minify. 

Penting : Jangan sekaligus me-minify semua css ataupun javascript. Sebaiknya setelah selesai me-minify satu css/javascript, klik simpan tema dan lihat apakah ada perubahan yang terjadi - buka halaman satu postingan untuk mengeceknya - semisal tampilan menjadi eror. 

Jika tidak terjadi eror tampilan, berarti minify css/javascript sukses. Silahkan lanjutkan ke css/javascript yang kedua dan seterusnya.

3. Minimalisir penggunaan widget blog


Selalu ada harga yang harus dibayar. Untuk apapun itu. Setuju?

Pun dengan blog. Untuk meringankan sebuah blog, maka minimalisirlah penggunaan aksesoris dari blog tersebut. Salah satunya adalah widget blog.

Gunakanlah widget blog yang penting-penting saja semisal widget popular post, label, dan subscribe widget.

4. Gunakan plugin LazyLoad


Plugin atau script Lazyload adalah sebuah script yang sangat berguna untuk mempercepat loading blog. Ini dikarenakan script ini akan menampilkan gambar sesuai dengan scroll halaman yang dilakukan visitor.

Artinya, gambar di load secara bertahap. Semisal, dalam satu artikel berjudul Cara Mempercepat Loading Blog ada 10 gambar. 

Ketika artikel tersebut di load, maka gambar yang dimuat hanya satu saja. yaitu gambar paling atas. Ketika visitor mulai membaca dan scroll artikel kebawah dan ada gambar kedua, maka saat itulah gambar kedua di load. Begitu seterusnya.

Lumayan berguna kan untuk mempercepat loading blog? Berguna banget!

Cek dulu apakah template teman-teman sudah ada Lazyload atau belum. Caranya Buka Blogger - Template - Edit Html. Ctrl + F lalu ketika Lazyload atau Lazy load. Enter.

Jika belum, berikut script Lazyload yang saya gunakan dari Mbak Arlina. Cara menggunakannya Buka Blogger - Template - Edit Html dan paste kode dibawah ini sebelum </body>.

Script Lazyload Arlinadzgn

5. Gunakan Content Delivery Network / CDN


Ini adalah favorit saya. Sederhananya, CDN adalah layanan mirroring website. Dengan menggunakan CDN, seluruh konten website akan di mirror ke semua server CDN yang berada di hampir semua negara yang ada di dunia ini.

Semisal, sebuah blog mempunyai server di San Fransisco Amerika. Ketika ada pengunjung dari Indonesia, maka blog tersebut akan langsung di load dari San Fransisco Amerika.

Sepertinya simple, ya kan? Tapi kenyataannya, hal tersebut sedikit banyak akan mempengaruhi seberapa cepat blog tersebut di muat. Karena perbedaan batas wilayah, apalagi ini beda benua, akan mempengaruhi tingkat ping dan latency blog tersebut.

Sehingga, tidak jarang terjadi yang namanya : Connection timed out.

Nah ketika menggunakan CDN, blog tersebut tidak akan di load dari Amerika. Tapi dari server CDN yang lebih dekat dari lokasi visitor. Sehingga proses loading akan lebih cepat. Masuk akal?

Intinya seperti itu. Pertanyaannya adalah :

Apakah aman menggunakan layanan mirroring seperti itu?

Berdasarkan pengalaman blogger lain, layanan seperti ini aman. Bahkan lebih aman menggunakan CDN daripada tidak menggunakan CDN.

Apakah layanan tersebut berbayar?

Ada yang berbayar - lebih aman tentunya - dan ada juga yang gratisan. Contoh yang gratisan disini saya merekomendasikan Cloudfare.

Apakah domain gratisan .blogspot dan .wordpress bisa menggunakan CDN?

Sayangnya tidak bisa. Hanya untuk top level domain saja.

Bagaimana cara menggunakan CDN Cloudfare?

Silahkan masuk ke Cloudfare.com lalu klik Sign Up. Setelah itu pilih yang gratisan seperti berikut ini :
meringankan loading blog
Cloudfare. Pilih paket yang FREE.

Klik Confirm Plan. Dan ikuti instruksi selanjutnya.

Oh ya, teman-teman akan diminta untuk mengganti nameserver dari domain teman-teman. Caranya, silahkan masuk ke cpanel dimana teman-teman membeli domain, lalu masuk ke kelola domain - nameserver.
membuat blog menjadi ringan
Ini adalah contoh pergantian nameserver

Jika sudah, silahkan tunggu maksimal 2x24 jam. Karena pergantian nameserver biasanya berhasil dalam kurun waktu maksimal 2x24 jam. Jika sudah cek status blog kita di Cloudfare.
CDN Cloudfare
Masih pending karena baru sekitar 12 jam yang lalu saya daftar CDN

Nah kira-kira seperti itulah cara yang saya lakukan untuk mempercepat loading blog. Karena CDN saya belum aktif jadi saya belum bisa rasakan manfaatnya.

Tapi so far, setelah mempraktikan ke 4 cara diatas - nomor 5 masih proses - loading blog saya jadi lumayan cepat dari biasanya.

Saya juga menghapus featured post karena lumayan menguras waktu dan memang kurang berguna juga selain untuk mempercantik tampilan.

Saya juga mencopot semua iklan yang asalnya bertebaran di berbagai area blog saya dan hanya menggunakan satu script iklan banner di bagian bawah header.

Lho, kenapa nggak masang Auto Ads?

Priotitas saya saat ini adalah loading blog. Bukan earning. Auto ads memang bagus, tapi iklan yang di load lumayan banyak. Sedikit banyak jadi mempengaruhi kecepatan loading blog saya.

Kok nggak di cek pakai Google PageSpeed atau Pingdom?

Belum. Karena hari dimana saya posting artikel ini, adalah hari dimana saya baru beres merombak blog ini. Termasuk bongkar pasang gambar yang mempunyai ukuran lebih dari 85 kb. 

Jadi walaupun saya cek sekarang, hasilnya pasti nggak bakalan jauh beda. Mungkin satu minggu dari sekarang akan saya cek.

Bagaimana cara mengatasi Leverage Browser Caching (Penyimpanan Cache Browser)?

Gunakan script berikut ini, dan tempatkan tepat dibawah tag <head> :

<include path="/assets/**.css" expiration="7d" />
<include path="/assets/**.js" expiration="7d" />
<include path="/assets/**.gif" expiration="3d" />
<include path="/assets/**.jpeg" expiration="3d" />
<include path="/assets/**.jpg" expiration="3d" />
<include path="/assets/**.png" expiration="3d" />

Nah jadi itulah beberapa hal yang saya lakukan untuk mempercepat loading blog ini. Terlepas dari semua itu, yang jelas, kecepatan blog itu yang merasakan adalah visitor. Biarkan visitor menilai sendiri.

Jadi pertanyaannya :

Apakah loading blog ini semakin cepat di load atau semakin lambat setelah saya mempraktikan teknik diatas?

Ini adalah jawaban dari Google PageSpeed Insight :
Nerslicious
Hasil Google PageSpeed Nerslicious.com

Nah, menurut teman-teman bagaimana? Jawab di kolom komentar ya biar bisa sekalian diskusi.

Selesai!

Nah itulah 5 Cara Ampuh Mempercepat Loading Blog versi Nerslicious. Sebenarnya masih banyak sih cara-cara lainnya. Tapi jika saya tulis semuanya disini, mbok ya rasanya serakah ya, hihi

Seperti yang pernah saya sampaikan, semoga teman-teman tidak puas dengan artikel ini. Karena dengan begitu, teman-teman akan terus selalu belajar dan mencari tentang ilmu-ilmu lainnya yang nantinya akan semakin memperluas wawasan teman-teman.

Setuju?

Thanks for reading. Keep writing and stay awesome!

23 comments

Waduh saya apa atuh
G merhatiin speed loading blog saya
Buset dah ketauan banget kan mana blogger professional sama blogger kacangan hahahah

wah ternyata ini toh caranya, terima kasih mas atas tips nya langsung ane pratekin di blog ane biar cepat

Menambahkan sj mas, utk gambar di blog pilihlah format png, jangan jpg. Karena warna gbrny lbh solid dan ukuran filenya lbh kecil. Jd kalo di kompress jd makin irit.utk kompres gbr scr online, saya biasa pakai imagesmaller, up to 90% dan kelebihannya tsk merusak kualitas gambar.

Jadi kepikirin mau cek blog jejak maya, ah semoga sesuai harapan
karena ngepos alakadarnya jujur nggak begitu banyak belajar tentang trik blog
sangat tersanjung loh master
terima kasih banget masih mau hadir di blog jejak maya yang seadanya

mantap penjelasannya super lengkap. bounce rate ku juga tinggi, loading memang perlu perhatian serius

Wah mantap banget tulisan mastah satu ini.. btw saya emang gapernah kak ngcompress picture, dan teenyata itu ngaruh banget k loadingbya ya? Ia nih saya agak bermasalah dengan bounce ratenya. Saya save artikelnya ya.. semoga aja bounce ratenya bisa turun

waw lengkap.
kalao saya teh suka males negjakkannya. padahal pegen jadi cepet tapi banyak ya caranya panjang banget

ada mas cara singkatnya minta bantuan sama mas nya aja ya :D

Kalau bicara soal PageSpeed punya google, kadang menarik dan kadang lucu juga. Ya..abaikan saja biar kepala tidak pening.
Ya seperti itulah jika blog gratisan, jika diotak-atik sedikit saja, beratlah loadingnya. Sepertinya google masih setengah hati memberikan hosting maupun domain gratisnya. Atau google belum siap dengan melonjaknya para blogger baru, sehingga google kewalahan.
Soal kompres, saya tidak menerapkannya. Hasilnya gambarnya turun drastis, saya biarkan apa adanya yang penting mengurangi jumlah upload gambar, ya usahakan kalau bisa satu cukuplah.
Plugin lazy-load, aduh hasilnya kurang bagus, gambar dalam widget tertunda nongolnya.
Minifiti saya setuju. tapi harus dengan kecermatan, karena tidak semua kode bisa di minfiti
CDN? Ribetnya kayak ampun. Tapi bagus juga seh.
Kalau bicara soal ke cepatan loading, kadang bikin males ngeblog. Gairah jadi menurun. lihat saja blog saya yang katanya GMTrix maupun googlespeed nilainya sangat bagus tapi kenyataannya berat sekali.
cukup sekian, saya tidak mau berkomentar panjang takut tidak ada yang baca.

Saya termasuk blogger kacangan, ah jadi malu.

Thanks gan saya coba tipsnya, soalnya punya saya termasuk lola loadnya :)

Minimalisir penggunaan widget blog, ini usaha bngat. Tapi kadang masih bingung widget mana yang harus dan tidak.

blog saya biarkan apa adanya gan, saya agak gak bgitu mudeng cara caranya, bikin pusing :D

Makasi tipsnya, masih ada beberpa yang belum saya terapkan ternyata, biar bikin page speed meningkat.

saya gak ngerti yang begituan mas Fauzi b-(

waduh, jadi merasa gk tau apa-apa tentang blogi habis baca artikel ini. perluditerapkan satu-satu nih biar blog saya makin optimal. terima kasih masukannya mas. bermnafaat :D

saya ngk rajin kompress gambar mas, males dan terkadang lupa. Tapi soal widget saya agak kurangi , saya pasang yg penting2 saja. :)

Wah artikel yang sangat bagus sekali untuk SEO, akan saya coba untuk blog saya ....

trims ya ...

saya cari artikel yang pernah merekomendasikan template, kok nggak nemu yang mana ya lupa judulnya hiks ...

Saya juga kacangan.. kacang rebus malahan.. udah lama ga merhatiin yang kayak ginian...

Medningan makan kacang rebus buat saya mah..:-D

Kalau blogger yang ngakunya kacangan saja bicaranya seperti empu gandring.. saya berarti cuma anak kacang.. ehh.. kacang busuk saja.

Hiksss.. nasib blogger kacang busuk..

Sama mas.. saya cuma blogger kacangan saja

Ooo gitu yah Kang.. baru tahu saya...

Maklum lah.. masih newbie banget..

Komentar Anda adalah tanggapan pribadi, kami berhak menghapus komentar yang mengandung kata-kata pelecehan, intimidasi, dan SARA. Terima kasih.
EmoticonEmoticon