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

  1. Masuk ke alamat ini https://developers.google.com/speed/pagespeed/insights
  2. Ketikkan alamat / url blog ataupun web site yang ingin dicek kecepatan loadingnya.
  3. Klik analisis. Tunggu sebentar sampai hasilnya muncul dilayar.
  4. 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


Cara mengatasi dan menyembunyikan Widget CSS Mobile 2 bundle Yang Memblokir Perenderan.

Cara mengoptimalkan Pengiriman CSS bundle mobile 2

Untuk mengoptimalkan pengiriman css bundle mobile dapat dilakukan dengan cara menyembunyikannya dari google, atau dengan cara mensejajarkannya dengan css yang lain.
  1. Log in ke akun blogger anda.
  2. Pilih Blog yang akan diperbaiki, pilih template.
  3. Cadangkan/pulihkan dahulu template blog anda, untuk menjaga terjadinya error pada blog.
  4. 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.
  5. cari kode berikut : <head>, ganti dengan kode &lt;head&gt; Kemudian cari kode tag penutup </head> ganti kode dengan &lt;/head&gt;&lt;!--<head/>--&gt;
  6. 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

https://www.blogger.com/…&zx=4cafba9a-1c1f-4fd1-94b0-44e1f1b39705
https://www.blogger.com/…widgets/1943648796-widget_css_bundle.css

Cara menyembunyikan Widget CSS Bundle Yang memblokir perenderan

caranya adalah dengan mengoptimalkan pengiriman css bundle widget, berikut ini langkah langkahnya untuk mengoptimalkan pengiriman css

  1. Buka Blogger.com > Edit HTML > Backup template terlebih dulu untuk keamanan jika terjadi kesalahan.
  2. Ctrl + F kemudian cari kode <b:skin><![CDATA[
  3. Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> kemudian pindahkan (Ctrl + X) ke notepad untuk sementara.
  4. Sekarang hanya ada kode <b:skin><![CDATA[ dan ]]></b:skin>
  5. Ganti kedua kode tersebut dengan kode
         &lt;!<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 :

7 komentar:

  1. Artikelnya Menarik Kalau Di Wordpress Bagai mana Gan??
    Mohon Pencerahannya Maklum newbee
    Terima Kasih

    ReplyDelete
  2. 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

    ReplyDelete
  3. Ajib...ajib..ni artikel. Gw borkmark dlu. Soalnya bacanya lewat hp ni gan. Kudu make laptop untuk setingnya. Tx. Yah. Gw coba

    ReplyDelete
  4. mas bro kok setelah saya pasang kode pengoptimal css semua tampilannya berada pada bagian kiri ada cara lain kah tuk perbaikinya tanks

    ReplyDelete
    Replies
    1. cari kode css untuk widget sidebarnya, ubah kata left menjadi right

      Delete

Silahkan Berkomentar Sesuai Dengan Topik, Jangan Menggunakan Kata-Kata Kasar, Komentar Dengan Link Aktif Tidak Akan Dipublikasikan

ttd

Admin Blog