Minggu, 21 Agustus 2016

Trik Mudah Atasi Optimize CSS Dilivery Blog

Sebelumnya saya sudah sepat post tentang Cara Mengatasi Reder-Blocking Javascript jequery dan sekarang saya akan membahas langkah selanjutnya dari reder-blocking javascript yaitu Mengatasi Optimize CSS Dilivery Blogger yang saya kira hal ini sangat penting untuk diperbincangkan.

Mengapa pelu di bicarakan, karena hal ini penting untuk blogger kamu. Untuk mengetahui Cepat atau lambatnya loding blog kamu, hal ini juga bisa dipengaruhi dengan cara kamu memodifikasi templat blogger sehingga kamu perlu melihatnya di https://developers.google.com/speed/pagespeed/insights/ 

Langkah-langkah mengoptimalkan CSS Dilivery menurut google Insights :

1. Metode Inline CSS Eksternal
Dalam inline hanya diperbolehkan untuk CSS yang berukuran kecil kemudian kamu gabungkan ke dalam skin template blog. Kamu bisa lihat contohnya sepeti:
 <!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// css eksternal.css'/>
<b:skin> isi css......</b:skin>
</head>
<body>
</body>
</HTML>
Lalu kamu buat CSS eksternal tadi menjadi inline CSS dengan copy url di atas kemudian tenpel pada new tab browser seperti ini
Cara Mudah Mengatasi Optimize CSS Dilivery Blogger
New Tab Browser
Maka akan muncul sederetan CSS eksternal tersebut sebagai contoh seperti ini:
.element{
 float:right;
 background:#fff;
 font-size: 8em;
 text-decoration:none;
 }
Untuk inline CSS nya akan menjadi seperti ini:
<!DOCTYPE html>
<HTML>


<head>

<b:skin>
.element{
 float:right;
 background:#fff;
 font-size: 1.2em;
 text-decoration:none;
 }

</b:skin>

</head>
<body>
</body>
</HTML> 
Kamu perhatikan peletakkan kode CSS nya di bagian mananya sehingga kamu akan dapat memahaminya. 

2. Mengatasi Iline CSS Attribut pada HTML element
Hal ini sering terjadi ketika kamu menulis draf compose di bagian postingan sebelum kamu mempublikasikannya mulai dari merubah warna font texs dll.
Contoh inline attributnya akan tampak seperti ini:
HTML
<span style="color: #444444;"> TULISAN</span>
<div style="text-align:center"> TULISAN </div>
Tidak menutup kemungkinan inline attribut ini berada pada HTML templat blog dan biasanya berada pada kode berikut:
HTML
<div style="clear:both"/>
Langkah untuk mengatasinya dengan cara mengganti kode di atas dengan kode berikut ini.
 <div class='clear'/>
 Kemudian tambahkan juga kode CSS berikut tepat pada bagian atas kode ]]></b:skin>
.clear{clear:both;}
3. Cara Mengoptimalkan CSS Ekternal Blogger
Untuk melihat kode eksternal ini biasanya ada dua CSS ekternal pada defoult blogger  yaitu:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/.....-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=.....'/>
Untuk "optimize css delivery blogger" pada kedua kode css ekternal tidak hanya cukup dengan menghapusnya karena, masih akan muncul saat kamu check di Page speed insight dan GTMetrix. Untuk mengatasinya kamu :
Ganti kode <head> menjadi &lt;head&gt; dan </head> menjadi &lt;!--<head/>--&gt;

Peringatan
Cara ini hanya berlaku pada template bukan bawaan blogger melainkan template pihak ketiga.

Subscribe by Email

Follow Updates Articles from This Blog via Email

No Comments