Harga Jual / Beli Bitcoin

Cara Mengatasi Eliminate render-blocking JavaScript and CSS Pada Test PageSpeed Insights

09:39:00 Wahab Saputra 45 Comments

Cara Mengatasi Eliminate render-blocking JavaScript and CSS in above-the-fold content Pada PageSpeed Insights - Ok Teman Blogger artikel kali ini saya akan coba membahas dan mempelajari cara menghapus kode widget default CSS (widget_css_bundle.css) yang terdapat pada template Blogger untuk meningkatkan Page Speed blog Blogger Kamu.

Untuk menjadikan blog teman blogger ramai pengunjung atau visitors Kamu tidak cukup dengan menyajikan atau membahas topik atau tema artikel yang unik, original dan berkualitas. Kamu juga harus memastikan para pengunjung merasa nyaman saat mengunjungi atau sedang browsing blog / website Kamu. Meskipun blog Kamu banyak berisi iklan paling tidak kecepatan loading blog Kamu cukup cepat baik saat pengunjung mengakses melalui mobile device, laptop atau PC.

Mengatasi Eliminate render-blocking JavaScript and CSS Test PageSpeed Insights


Jika blog Kamu mengalami masalah loading yang lemot dan Kamu membiarkan hal tersebut lambat laun pengunjung akan bosan lalu meninggalkan blog Kamu, sehingga situs Kamu akan memiliki tingkat bouncing yang relatif tinggi. Situs Kamu akan memiliki reputasi yang buruk bahkan negatif di mata para pengunjung.

Hasil test Blog Wahab Saputra menggunakan tool baru google Test My Site Think With Google

Sebelum Di Optimasi

Sesudah Di Optimasi

Salah satu cara untuk mengatasi masalah tersebut adalah dengan menyembunyikan atau bahkan menghapus widget default CSS (widget_css_bundle.css) dari blog Blogger Kamu.

Secara umum ada beberapa faktor yang mempengaruhi hasil test PageSpeed Insights blog, diantaranya :
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Avoid landing page redirects
  • Leverage browser caching
  • Optimize images

Namun dari ke empat faktor tersebut, point pertama yang paling mempengaruhi hasil test PageSpeed Insights blog karena termasuk Should Fix atau kesalahan yang Harus diPerbaiki (Optimize CSS Delivery) bahkan wajib hukumnya jika Kamu ingin hasil test PageSpeed Insights blog Kamu memenuhi standart.

Berikut 3 default file Widget CSS umum yang terdapat di template blog Blogger :

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=367973271035573867&zx=0aa7d473-9366-475d-b9e5-3d07cdbeb132' />

1. Pertama sebelum Teman Blogger menerapkan tutorial ini, pastikan Kamu sudah meng-back up template blog Kamu.
2. Buka Dashboard Blog pilih > Template.
3. Klik 'Edit HTML'.
4. Dalam editor Template tekan CTRL + F dan cari kode <b: skin> <! [CDATA [/ *
5. Tepat sebelum pada baris yang sama copy paste kode berikut ini.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
6. Maka akan terlihat seperti ini;

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[/* */// The the CSS and and style codes for the Blogger template /]]></b:skin>
7. Klik 'Save Template'

Silahkan test blog Kamu di google PageSpeed Insights apakah score testingnya membaik maka kamu telah berhasil, Tapi jika tidak mengalami peningkatan nilai test PageSpeed Insights. Coba ikuti langkah berikut :

1. Salin semua kode antara kode <b: skin> <! [CDATA [/ * dan]]> </ b: skin> dan paste dalam tag baru <style>. Seperti ini:

<style type="text/css"> // Paste the CSS codes here </style>
2. Klik 'Save Template'

Dampak positif dan negatif dari Melepaskan, Menyembunyikan atau Menghapus default Widget CSS file dari template blog Blogger

Sebelum Kamu menggunakan metode atau cara ini Kamu harus tahu bahwa menghapus : -

  • Jika Kamu menggunakan salah satu template default yang diberikan oleh Blogger, kemudian melakukan hal ini benar-benar akan menghancurkan desain dan struktur blog Kamu sebagian atau mungkin seluruhnya.
  • Kamu akan terlalu banyak bergantung dari built-in template Blogger untuk menyesuaikannya.
  • Kamu akan menghabiskan cukup banyak waktu untuk malakukan perbaikanTemplate.

Meskipun Kamu harus menghapus widget default CSSs karena;

  • Kecepatan halaman akan meningkat secara signifikan; sehingga loading blog Kamu akan menjadi makin cepat dari sebelumnya. Seperti yang kamu ketahui jika loading website / blog cepat diperlukan untuk mengurangi tingkat bouncing.
  • Hindari memuat hal yang tidak perlu dalam blog Kamu. Kode CSS ini tidak begitu penting untuk kinerja suatu blog. Sebenarnya mereka hanya mengurangi kinerja blog dengan memberatkan saat browser mengakses blog.
  • Jika Kamu mengcoding template Blogger sendiri maka Kamu harus menghapus widget default CSS.
  • Jika Kamu menggunakan template blogger hasil custom maka Kamu juga harus menghapus default CSSs dari Blogger.
  • Menghapus default CSSs tidak akan menimbulkan masalah dalam menggunakan gadget default / widget dari Blogger.

Saat ini saya menggunakan teknik ini di blog ini. Saya sarankan Kamu untuk menyingkirkan kedua widget default CSS (widget_css_bundle.css) dan widget default JavaScript (Widgets.js) dari template blog Blogger karena akan meningkatkan kecepatan loading halaman Blogger blog Kamu secara drastis.

Semoga informasi tips dan tricks membantu Kamu. Jika ada yang kurang jelas silahkan ditanyakan. Sekian dan terima kasih.

45 comments:

  1. Wah, patut untuk dibuat eksperimen nih, kebetulan saya lagi utak-atik template...
    Terima kasih Mas...
    Salam,

    ReplyDelete
  2. Boleh di coba nich, biar loading nya cepet ngak lemot

    ReplyDelete
    Replies
    1. Harus coba Mas...
      Biar loadingnya cepet kayak cumi-cumi...

      Delete
  3. bisa di coba nih mas di blog saya. utak atik dikit ah

    ReplyDelete
  4. terus kode ini simpan di bagian apa mas
    <style type="text/css">
    // Paste the CSS codes here
    </style>

    ReplyDelete
    Replies
    1. Itu cara alternatif Kang...
      Kalau cara pertama gak berhasil...

      Delete
    2. saya gagal ternyata mas. hahaha
      ga berhasil.
      harus di bingbing langusng kayanya

      Delete
    3. Sayangnya kita gak sekampung kang Hahahaa...

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Sepertinya gak cocok sama template saya mas. Tadi saya coba pasang dan pada kolom komentarnya jari ancur haha.

    ReplyDelete
    Replies
    1. Problemnya sama kaya saya Mas...
      Tapi klo saya langsung diperbaiki yang berantakannya....

      Delete
  7. Wah..aku juga kecil nih pas nyoba test speed pake link di atas. pengen nyoba juga...tp pas baca bagian keuntungan kekurangan jd ciut juga. Jiah aku ngga ahli dalam.perbaikan template. wuih kalo gatot aku blm tentu bisa balikin lagi. hiks

    ReplyDelete
  8. Rencana nya besok atau lusa mau cek di edit HTML nya. Mau kotak kati sedikit. Mungkin bisa diterapkan juga ya. CUma harus di save dulu template saya HIhi takut jadi kacow bin berantakan whhehehhehehee

    ReplyDelete
    Replies
    1. Itu yang paling penting Kang...
      Harus wajib bin kudu,, di backup dulu templatenya....

      Delete
  9. Boleh coba triknya biar nggak lelet blognya tapi sepertinya harus teliti nih banyak pake kode kode tertentu

    ReplyDelete
    Replies
    1. Bener Mas...
      Trik ini sedikit agak beresiko...

      Delete
  10. sihi keren lho blogmu wahab :D

    ReplyDelete
  11. widget Css default diblogku udah tersembunyi, tapi skornya masih kurang memuaskan :(

    ReplyDelete
    Replies
    1. Jquerynya diuraikan saja Mas, jgn di buat link...

      Delete
  12. Boleh juga untuk di coba nih kang wahab :)

    ReplyDelete
  13. Pertama kali main kesini langsung puyeng saya pak bacanya. Kok bisa jago gitu sih kak hahahaha

    ReplyDelete
    Replies
    1. Kayak ayam aja Jago...
      Hahhaha...
      Ya udah baca artikel yang lainnya aja,,,yg lebih ringan pembahasannya...

      Delete
  14. Caranya gimana mas ? kasih sedikit pencerahannya, hehe.

    ReplyDelete
  15. Replies
    1. Kirim aja file XML blognya ke email ini wahabisland@gmail.com nanti saya coba optimasi...

      Delete
  16. Bisa bantu optimasi juga ndak blog saya Mas? Soalnya error terus. Soalnya cara pertama sudah berhasil tapi nilainya tuk mobilespeed 24/100 (poor), tuk dekstop speed 25/100. Cara kedua ndak pnah berhasil, error mulu

    ReplyDelete
    Replies
    1. Kirim aja file XML blognya ke email ini wahabisland@gmail.com nanti saya coba optimasi...

      Delete
  17. pagespeed insights nya langsung meningkat drastis 90%++ sekaligus membuat template jadi berantakan, heheh. ada saran atau tutorial step by step untuk memperbaiki ini mulai dari mana? makasih min :)

    http://chrezsoft.blogspot.co.id

    ReplyDelete
    Replies
    1. Seperti apa yg saya bilang, resiko dari memakai cara ini akan membuat tampilan blog berantakan sebagian atau bahkan keseluruhan...

      Tadinya saya mau buat tutorial cara untuk memperbaikinya tapi kan gak semua template sama strukturnya...

      Coba ambil CSS dari http://www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css trus masukkan ke dalam template..

      <style>
      KODE CSS DISINI
      </style>

      Delete
  18. thanks banget gan.... speed dari 71 menjadi 90... mantap!!!

    ReplyDelete
  19. mas, kalau untuk wordpress ada ga tutorialnya untuk mengatasi render. karena website saya sangat lambat sekali score nya.

    thanks

    ReplyDelete
    Replies
    1. Kalau untuk WP biasanya pakai Plugin aja...

      Delete

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!