Untuk menyenangkan pembaca blog juga sekaligus penulis, kita menginginkan blog yang bekerja secara cepat alias loading cepat. Beberapa situs yang dapat kita gunakan untuk mengetes kecepatan loading blog kita yaitu dengan membuka laman berikut ini :
Speed and Perfomance Optimizen by GTMetrix
Cek kecepatan loading kamu di mari.
Situs ini gunanya untuk mengecek kecepatan blog kita sampai termuat sempurna atau 100%. GTMetrix menilai kecepatan blog kita dari segi Page Speed Score atau dinilai berdasarkan skore google dan juga dari segi YSlow Score atau dinilai berdasarkan skore yang diberikan oleh Yahoo! Selain kecepatan loading disertakan juga ukuran halaman blog kita (dalam MB), serta total request ketika blog kita diakses. GTMetrix juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau kita tidak mendaftar menjadi pro member maka akan diberi batasan hanya boleh 20 kali test dalam sehari.
Pingdom Tools by Pingdom
Cek kecepatan loadingmu di sini.
Mirip dengan GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dari keterangan setiap request masing-masing bagian akan dipaparkan beserta kecepatan loadingnya. Seringnya kecepatan loading paling besar adalah ketika kita menggunakan gambar (termasuk yang menggunakan gambar sebagai header blog). Gunakan situs-situs online untuk mengkompress gambar kita tanpa mengurangi kualitas gambar.
Baca Juga : Optimasi Gambar pada Postingan Blogspot
Page Speed Insight by Google
Cek kecepatan loading kamu di sini
Bukan google namanya kalau apa-apa tidak punya, segala macam kebutuhan internet dia punya. Termasuk alat untuk mengetes kecepatan loading blog kita. Tinggal masukkan link blog kamu akan keluar kecepatan loading kita kalau diakses dari desktop ataupun dari mobile.
Juga akan keluar pemecahan permasalahannya dan bagian mana-mana yang harus diperbaiki.
Seperti pada punya saya berikut ini.
Sebagai catatan saya menggunakan template klasik kepunyaan blogspot di mana hostingannya juga milik blogspot. Mungkin kita memiliki permasalahan yang sama. Maka kali ini saya akan membahas kesalahan blog saya di bagian yang harus diperbaiki versi PageSpeed Insight.
Leverage browser caching
Show how to fix
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://www.blogger.com/…/v1/widgets/3375562265-css_bundle_v2.css
http://fonts.googleapis.com/…bb53t8j-Mo-vYa23n5hsOEr0Xhq90-5rzohUON8I
https://www.blogger.com/…&zx=a150e689-a53a-414c-aeee-290cda91ab3f
Maka mari kita bahas Cara Mengoptimasi CSS Delivery pada Template Klasik (Bawaan) Blogspot.
Bagi pemakai template BUKAN bawaan dari blogger biasanya ada kode CSS yang tidak terpakai dan menambah berat kinerja blog kita walaupun sebetulnya saya yakin tidak ada kode CSS yang tidak mungkin tidak terpakai dalam suatu template. Kode-kode CSS itu bisa saja dihilangkan dari template dengan tetap melihat perubahan template.
Sedangkan untuk yang memakai template bawaan dari blogger, kode CSS itu sebetulnya tidak masalah sayang tetap terindeks oleh PageSpeed Insight sebagai kode CSS yang harus dioptimasi. Kita bisa mengakali dengan menonaktifkan bundle.css tersebut.
Mari kita lakukan langkah-langkah sebagai berikut.
1. Buka blogger.com
2. Edit Template
3. Edit HTML. Biasakan untuk membackup template terlebih dahulu untuk menjaga resiko dari apapun.
4. Cari kode di bawah ini dengan menggunakan CTRL+F
<b:skin><![CDATA[
5. Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> lalu cut/pindahkan/CTRL+X ke notepad terlebih dahulu
6. Kini kita hanya memiliki <b:skin><![CDATA[ ]]></b:skin>
7. Ganti kedua kode tersebut dengan menggunakan kode
<!<b:skin><![CDATA[]]></b:skin>
8. Kemudian tambahkan di bawahnya
<style type="text/css"> CSS yang ada di Notepad </style>
9. Pratinjau template terlebih dahulu.
10. Jika sudah puas silakan disimpan lalu kita cek kembali menggunakan PageSpeed Insight kembali.
Lalu apakah blog ranirtyas.com ini sudah menerapkan cara di atas? Terus terang saja saya tidak menerapkan cara di atas karena tampilan blog saya tidak menjadi syantik lagi. Memang dengan menonaktifkan bundle.css otomatis tampilan template kita bisa saja berubah atau bahkan rusak ataupun error.
Masih banyak langkah menuju Roma selain cara menonaktifkan bundle.css di atas. Jika bertemu lagi, lain kali akan kita bahas rame-rame di sini.
Lagipula langkah ini sejatinya hanyalah untuk membuat agar tidak terbaca oleh browser hanya untuk menambah score di PageSpeed Insight.
Source :www.segitigabermuda.com
kalau saya cek kecepatan loading blog saya di PageSpeed Score hasilnya 92% Mbak, itu artinya sudah baguskan??
BalasHapuswah itu mah udah bagus banget Mbak Ira.. wuss.. wuss laju blognya
Hapuspunya saya masih berat karena banyak transferan yang lama dengan gambarnya yang berat. Ini blog baru, masih kerja rodi :D. Makasih ya Ran.
BalasHapusgambarnya nggak pengen diperkecil Mbak Lidha?
HapusHuaaaa istilahnya banyak yg baru, nanti tak berguru duluk ah ma dikau mb rani ^_^
BalasHapusjangan nanya yg susyah-susyah ya Nita, aku juga masih belajar nih
Hapusmemang salah satunya cara supaya cepat hanya dari gambar headernya ya? page speed score saya cuma 83% bagus gak? Yslow score itu apa ya mba Rani? mksh infonya
BalasHapus83% mah udah bagus banget Mbak Santi.
HapusBukan cuma dari gambar header aja Mbak Santi, gambar dari komunitas-komunitas juga perlu dikecilkan.
Yslow score itu jika web kita dibuka dari situs pencarian yahoo. CMIIW
Mlongo aja hahahaa nggak ngerti. Kapan2 kalau pengin tanya2 optimasi blogku boleh japri kan?
BalasHapusiya Mbak Lusi kalau bisa aku jawab kalau tidak bisa nanti aku panggil tim sekompi buat bantuin jawab hehehe
HapusUdah lah mending biarin ajah..hahaha. btw tampilan blog sekarang lebih cantik
BalasHapusMakasih.. cantik kayak empunya ya :D *lalu digeplak sandal
Hapusiya daripada membundle CSS yang bikin font-font kita jadi kaku mending biarin aja ya Nay. Seperti katamu, optimasi pada gambarnya saja.
Mak rani.. manfaat banget ini infonya.. trimakasih yaaaa...
BalasHapusalhamdulillah kalau bermanfaat Mbak Prima..^^
HapusKalau saya masih bingung nih mbak milih template blog yang simple dan enak dilihat, dari sekian banyak template yang saya dowload ga ada yang srek di hati, gimana ya tips dari mbak nih. ?
BalasHapusKalau saya lebih demen menggunakan template klasik bawaan blogger tinggal dimodif background dan header serta menambahkan ini itu di widgetnya karena takutnya ya itu tadi jadi memberatkan proses loading blog kita.
Hapuswah punya saya cuma 64% di desktop dan 74% di mobile
BalasHapussepertinya foto banyak yang harus di mampetkan
iya cara itu lebih mudah ya Mbak daripada harus membundle css dan kawan-kawan
Hapuswa wa wa wa....
BalasHapuspunya saya 72% seluler 59% desktop. :'(
sik, sik. ta baca ulang lagi ya mbak Ran. nyari sekeping pemahaman dulu. but thanks anyway sudah membangunkan saya ya!
semangat!!
Semangat kakaaaak..
Hapusthanks mbak infonya, tadi aku test punyaku > pagespeed: 95 , Yslow : 80 :( , masih jelek ya? :(
BalasHapusudah bagus itu Mbak.. yg penting jangan sampe merah
Hapus