cara memperbaiki Eliminate render-blocking JavaScript and CSS in above-the-fold content - Beberapa para blogger pasti pernah mengalami hal seperti berikut. ketika di cek di pagespeed insight developer kepunyaan si google. nah berikut adalah cara untuk mengatasi hal tersebut, kalau sudah diperbaiki skornya tinggi kan otomatis blog kita menjadi banyak pengunjung
 |
| cara memperbaiki Eliminate render-blocking JavaScript and CSS in above-the-fold content |
Tahap 1 - Mengganti Tag Header
Trik ini bertujuan untuk memblokir akses ke CSS dari blogger, sehingga kita bisa mengoptimalkan pengiriman kode CSSnya dengan cara kita pindah kodenya langsung di blog anda.
Ubah tag pembuka head
<head>
rubah menjadi <head>
dan Tag penutup head
</head>
ubah menjadi </head><!--<head/>-->
Sekarang simpan template anda. Kita bisa lihat apa yang terjadi setelah kita rubah kodenya seperti di atas. Kita buka blog melalui browser dan lihat layoutnya berubah tidak karuan. Tetapi jangan khawatir kita akan dapatkan kode CSSnya dan menyalinnya ke blog kita.
Sekarang tekan CTRL + U pada browser anda untuk melihat source codenya. Blog anda harus terdapat kode CSS seperti dibawah ini yang berwarna hijau:
 |
| cara memperbaiki Eliminate render-blocking JavaScript and CSS in above-the-fold content |
Sekarang salin urlnya seperti yang saya cantumkan di bawah ini dan buka melalui web browser, kemudian salin kode CSSnya.
https://www.blogger.com/static/v1/widgets/1247733060-widget_css_2_bundle.css
demikian juga untuk CSS Bundle mobile nya. kita akan dapatkan kode cssnya dengan cara mengetikkan url dibawah:
NAMABLOGANDA.blogspot.com?m=1
Dari url diatas dimaksudkan untuk melihat blog kita dalam tampilan Mobile. hanya dengan menambahkan ?m=1. Kemudian lakukan hal yang sama dengan menekan Ctrl + U dan dapatkan url CSS mobile Bundle, kemudian buka melalui web, dan Salin kode CSSnya. Contoh url mobile bundle:
https://www.blogger.com/static/v1/widgets/1247733060-widget_css_mobile_2_bundle.css
Tahap 2 - Meletakkan Kode CSS di blogger
Hati-hati jangan mencampur dua kode CSS yang kita salin tadi, karena layout akan konflik. Cara untuk meletakkannya di blog adalah dengan memisah akses mobile dan akses desktop. Misalkan jika kita akses dari desktop PC , Blog kita hanya akan mengakses ke CSS_2_Bundle.css saja. sedangkan jika kita membuka blog kita dari Smartphone atau HP, maka blog kita hanya mengakses CSS_Mobile_2_buundle.css. Caranya adalah seperti di bawah ini:<b:if cond="data:blog.isMobile"> <style type="text/css"> ------TempatkanCSS_Mobile_2_Bundle.css Di Sini -------------- </style> <b:else/> <style type="text/css"> ------Tempatkan CSS_2_Bundle.css DI SIni-------------- </style> </b:if>
Letakkan Masing-masing kode CSS seperti yang ditunjukkan pada contoh di atas. Kemudian simpan template. Jika diperlukan, kita bisa menambahkan padding=0 pada kelas CSS .content-inner:
.content-inner{padding:0}
Anda baru saja membaca artikel yang berkategori Teknik SEO
dengan judul cara memperbaiki Eliminate render-blocking JavaScript and CSS in above-the-fold content. Jika anda suka, bagikan keteman-teman anda ya, harap jangan menduplikat konten ini karena telah dilindungi
Jika anda blogger sejati pasti pasti tahu rule tata krama blogging - terimakasih anda tidak copas
Admin Blog: SEO Template
Jika anda blogger sejati pasti pasti tahu rule tata krama blogging - terimakasih anda tidak copas
Admin Blog: SEO Template
Ditulis oleh:
Unknown - Friday, May 2, 2014
Oh, ini yang saya cari tentang cara Eliminate render-blocking JavaScript. Thanks!
ReplyDeletebelum ngerti gan...cara nerapin nya maklum newbi
ReplyDeletesama, masih ga ngarti gan! coba ada cara pake gambar biar lebih jelas
ReplyDeleteGan pas lihat kode css nya ada bejibun,itu di copy semua? :/ kasih penccerahan dong gan
ReplyDeletekalau blognya tetap rapi gimana?
ReplyDeleteurl nya gak bisa di buka gan di browser error mulu knp ya?
ReplyDelete