Sebenarmya banyak faktor yang mempengaruhi kecepatan loading blog diantaranya modifikasi design Blog, javascript, dan CSS. Dalam pembahasan ini saya akan memberikan tutorial cara mengatasi optimaze CSS Delivery.
CSS Delivery merupakan link eksternal yang di blockir terlebih dahulu ketika akan menampilkan halaman secara penuh, jadi blog kita akan memuat data dari CSS ektenal tersebut lebih lama dan Blog terasa berat. Untuk mengatasi masalah ini diperlukan pengoptimal CSS delivery-nya. Adapun caranya sebagai berikut :
1. Metode Inline CSS Ekternal
Dalam metode inline ini memiliki ukuran yang lebih kecil, dan di gabungkan menjadi satu dalam template Blog. Contoh formatnya seperti 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>
Untuk mengetahui isi dari css eksternal diatas, copy url nya dan pastekan ke new tab browser, maka akan muncul isi dari CSS eksternal tersebut. Contoh isi CSS nya seperti ini :
.element{
float:right;
background:#fff;
font-size: 1.2em;
text-decoration:none;
}
Kemudian kamu buat inline cssnya 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>
Letakkan kode css inline-nya diats kode ]]</b:skin>
2. Menghindari Inline CSS Attribute Pada HTML Element
Kendala yang sering terjadi ketika kita menulis draft mode compose dipostingan sebelum kita publikasikan, kesalahan terjadi ketika kita mengubah warna font, text align dan sebagainya. Contoh dari inline css attributenya seperti ini :
<span style="color: #444444;"> Teks</span>
<div style="text-align:center"> Teks </div>
Biasanya inline css attribute yang ada pada HTML template seperti kode dibawah ini:
<div style="clear:both"/>
Untuk mengatasinya ganti kode diatas menjadi :
<div class='clear'/>
Serta menambahkan css di bawah ini diatas kode ]]</b:skin>
.clear{clear:both;}
3. Optimalkan CSS Ekternal Blogger
Untuk melihat kode css eksternal gunakan alat PageSpeed Insights milik Google, 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=.....'/>
Paada kode css eksternal diatas tidak hanya cukup dihapus, karena akan muncul kembali. Solusinya diperlukan penambahan pada kode HTML di dalam postingan. Berikut solusinya :
Langkah 1
Ganti kode <head> menjadi <head>
Langkah 2
Ganti kode </head> menjadi <!--<head/>-->
Cara diatas berlaku pada template selain bawaan blogger, yakni template yang sudah di modifikasi karena setiap element yang digunakan pada template tidak semuanya sama.
Demikian saya sampaikan tutorial Mengatasi Optimize CSS Delivery Blogger agar blog kita menjadi lebih SEO dan fast loading.
No comments:
Post a Comment