Cara Mempercepat Loading Halaman Blog Dengan PageSpeed Insights Google
Cara Mempercepat Loading Halaman Blog Dengan Page Speed Insights Google
Setelah belajar cari tahu caranya agar loading page blog bisa nancap akhirnya terbalaskan juga. sudah otak atik sana sini cari tahu caranya agar loading page bisa membalap dan tidak ada java script yang memblokir render blog.Cara mengecek kecepatan loading blog dengan google page speed insight
- Masuk ke alamat ini https://developers.google.com/speed/pagespeed/insights
- Ketikkan alamat / url blog ataupun web site yang ingin dicek kecepatan loadingnya.
- Klik analisis. Tunggu sebentar sampai hasilnya muncul dilayar.
- saksikan dan lihatlah kecepatan loading page speed halaman blog anda?Bagaimana?apakah butuh diperbaiki atau tidak?apakah loading page speed blog anda cepat?bagaimana page speed blog anda di seluler dan desktop?
Jika anda butuh bantuan mungkin sebaiknya anda lanjutkan membaca artikel ini, atau
jika anda tidak tahu dan bingung silahkan komentar dibawah blog,
mudah-mudahan kita bisa bantu. Beberapa kesalahan yang sering terjadi dan harus diperbaiki saat mengecek kecepatan loading page blog.
Masalah yang sering terjadi adalah Java script yang memblokir perenderan di kontent paruh atas, hal ini menyebabkan perenderan/ loading page halaman blog semakin lama.
Biasanya hasil dari analisis pagespeed insight seperti berikut :
Untuk melihat Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas
Laman Anda memiliki 2 sumber daya CSS yang memblokir. Ini menyebabkan penundaan dalam perenderan laman Anda.Tidak ada konten paruh atas di laman Anda yang dapat dirender tanpa menunggu pemuatan sumber daya berikut. Coba tunda atau muat sumber daya yang memblokir secara asinkron, atau jadikan sebaris bagian penting dari sumber daya tersebut secara langsung dalam HTML.
Optimalkan Pengiriman CSS yang berikut:
https://www.blogger.com/…189244943-widget_css_mobile_2_bundle.css
https://www.blogger.com/…&zx=c11a8a65-1a52-405f-b760-4b898e59a46d
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas
Untuk css pada seluler yang sering membuar error dan loading page lama adalah java script yang memblokir perenderan pada paruh atas, java script ini biasanya sama saja pada semua blog.
contoh javascript yang memblokir perenderan pada seluler/ mobile.
https://www.blogger.com/static/v1/widgets/189244943-widget_css_mobile_2_bundle.css
Untuk mengoptimalkan pengiriman css bundle mobile dapat dilakukan dengan cara menyembunyikannya dari google, atau dengan cara mensejajarkannya dengan css yang lain.
Cara mengatasi dan menyembunyikan Widget CSS Mobile 2 bundle Yang Memblokir Perenderan.
Cara mengoptimalkan Pengiriman CSS bundle mobile 2
- Log in ke akun blogger anda.
- Pilih Blog yang akan diperbaiki, pilih template.
- Cadangkan/pulihkan dahulu template blog anda, untuk menjaga terjadinya error pada blog.
- Lihat kata, Langsung di blog dan Seluler, pada bagian seluler klik pengaturan yang ada pada bagian bawah seluler, pilih khusus. Lalu simpan.
Klik edit HTML Pada bagian bawah dekat dengan sesuaikan. akan muncul html template blog. - cari kode berikut : <head>, ganti dengan kode <head> Kemudian cari kode tag penutup </head> ganti kode dengan </head><!--<head/>-->
- Simpan dan silahkan cek kembali kecepatan loading page halaman blog anda.
Jika tidak terjadi perubahan kecepatan loading silahkan komentar apa masalahnya.
Cara mengoptimalkan Pengiriman widget css bundle.css
Setelah selesai pada seluler selanjutnya kita beralih untuk mempercepat loading page halaman blog pada mode desktop.
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas
Optimalkan Pengiriman CSS yang berikut:
https://www.blogger.com/…&zx=4cafba9a-1c1f-4fd1-94b0-44e1f1b39705
https://www.blogger.com/…widgets/1943648796-widget_css_bundle.cssCara menyembunyikan Widget CSS Bundle Yang memblokir perenderan
caranya adalah dengan mengoptimalkan pengiriman css bundle widget, berikut ini langkah langkahnya untuk mengoptimalkan pengiriman css
- Buka Blogger.com > Edit HTML > Backup template terlebih dulu untuk keamanan jika terjadi kesalahan.
- Ctrl + F kemudian cari kode <b:skin><![CDATA[
- Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> kemudian pindahkan (Ctrl + X) ke notepad untuk sementara.
- Sekarang hanya ada kode <b:skin><![CDATA[ dan ]]></b:skin>
- Ganti kedua kode tersebut dengan kode
<!<b:skin><![CDATA[]]></b:skin>
Kemudian tambahkan dibawahnya :
<style type="text/css"> CSS yang ada di Notepad </style>
Dan dibawah kode <style type="text/css"> letakkan kode CSS yang tadi ditaruh di Notepad.
Save Template.
Cek kembali loading halaman blog anda di Pagespeed insight dan mudah mudahan anda bisa mendapatkan loading yang cepat. Seperti loading blog halaman blog saya dibawah ini.
Demikianlah mengenai pembahasan cara mempercepat loading blog dan menghapus javascript yang memblokir perenderan sehingga loading blog lambat.
BACA JUGA :
Artikelnya Menarik Kalau Di Wordpress Bagai mana Gan??
ReplyDeleteMohon Pencerahannya Maklum newbee
Terima Kasih
Saya acungin empat jempol buat ni artikel, pake cara parse head aja langsung berhasil gan. Pdahal dah seminggu ngoprek2 gak nemu2, mayan sekarang 92/100 tinggal nyoba yang bawahnya makasih banyakkkkkkkkk
ReplyDeletecarannya gmna bos
DeleteAjib...ajib..ni artikel. Gw borkmark dlu. Soalnya bacanya lewat hp ni gan. Kudu make laptop untuk setingnya. Tx. Yah. Gw coba
ReplyDeletemas bro kok setelah saya pasang kode pengoptimal css semua tampilannya berada pada bagian kiri ada cara lain kah tuk perbaikinya tanks
ReplyDeletecari kode css untuk widget sidebarnya, ubah kata left menjadi right
Deletetak bisa ni bos
ReplyDelete