Saturday, April 04, 2015

Cara Optimalkan CSS Delivery Blogger

Optimalkan css delivery

Cara Optimalkan CSS Delivery Blogger - Banyak faktor yang mempengaruhi kecepatan loading blog yang utamannya berasal dari struktur modifikasi design blogger itu sendiri. Dalam hal ini saya akan membahas tentang optimasi design blogger terkait pengiriman css di blog agar tampil lebih cepat dan ringan. Semua browser yang kita pakai akan memblokir lebih dulu semua CSS eksternal yang ada untuk kemudian ditampilkan secara penuh. Dan artinya akan membutuhkan waktu lebih lama untuk memuat data dari CSS ektenal tersebut yang membuat loading blog terasa berat. Baca cara Mempercepat blog untuk seo friendly

Langkah langkah mengoptimalkan CSS delivery menurut google insight rules :

1. Metode Inline CSS Ekternal

Dalam metode inline ini hanya diperbolehkan untuk css yang berukuran kecil kemudian kita gabungkan menjadi satu dalam skin template blog. Contoh formatnya seperti dibawah ini :

<!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 kita akan membuat css eksternal tadi menjadi inline CSS dengan copy url diatas kemudian paste ke new tab browser, maka akan muncul sederetan isi dari CSS eksternal tersebut. Sebagai contoh isi CSS nya seperti ini :

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

Untuk inline cssnya 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>

2. Menghindari Inline CSS Attribute Pada HTML Element

Ini sering terjadi pada saat menulis draft mode compose dipostingan sebelum kita publikasikan, mulai dari mengubah warna font, text align dan sebagainya.
Contoh bentuk inline css attributenya akan tampak seperti ini :

<span style="color: #444444;"> TULISAN</span>
<div style="text-align:center"> TULISAN </div>

Tidak menutup kemungkinan inline css attribute ini berada pada HTML template, biasanya pada kode seperti ini:

<div style="clear:both"/>
untuk mengatasinya ganti kode tersebut menjadi :

<div class='clear'/>
Serta menambahkan css

.clear{clear:both;}

3. Optimalkan CSS Ekternal Blogger

Gunakan inspect element untuk edit html untuk melihat kode css ekternal ini, dan biasanya untuk default blogger setidaknya ada 2 css ekternal 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=.....'/>

Cara "optimize css delivery blogger" pada kedua kode css ekternal ini tidak cukup hanya dengan menghapusnya, karena masih akan muncul saat kita check di Page speed insight dan GTMetrix. Untuk mengatasinya silakan :
Ganti kode <head> menjadi &lt;head&gt; dan </head> menjadi &lt;!--<head/>--&gt;

Cara seperti ini hanya berlaku pada template selain bawaan blogger alias template pihak ketiga, dan mungkin akan mengubah tampilan blog anda karena element yang digunakan tidak sama dengan template yang anda gunakan.

Demikian sedikit tutorial blogger terkait optimalkan css delivery agar menjadi blog cantik dan cepat sesuai standar SEO.