Mengatasi Optimize Css Delivery Blogger

Mengatasi Optimize CSS Delivery Di Blogger - Google PageSpeed Insights alat untuk mengecek kecepaan loading blog yang gres ini saya gunakan untuk mengecek kecepatan loading aak-share.com. Kecepatan loading untuk mobile hanya 67/100 speed dan dekstop 83/100 speed, data yang dihasilkan memperlihatkan loading aak-share begitu berat.

Sebenarmya banyak faktor yang mempengaruhi kecepatan loading blog diantaranya modifikasi design Blog, javascript, dan CSS. Dalam pembahasan ini saya akan memperlihatkan tutorial cara mengatasi optimaze CSS Delivery.

CSS Delivery merupakan link eksternal yang di blockir terlebih dahulu dikala akan menampilkan halaman secara penuh, jadi blog kita akan memuat data dari CSS ektenal tersebut lebih usang dan Blog terasa berat. Untuk mengatasi duduk perkara ini diharapkan pengoptimal CSS delivery-nya. Adapun caranya sebagai berikut :

1. Metode Inline CSS Ekternal

Dalam metode inline ini mempunyai ukuran yang lebih kecil, dan di gabungkan menjadi satu dalam template Blog. Contoh formatnya menyerupai 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 menyerupai ini :

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

Kemudian kau buat inline cssnya menjadi menyerupai 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 instruksi css inline-nya diats instruksi ]]</b:skin>

2. Menghindari Inline CSS Attribute Pada HTML Element

Kendala yang sering terjadi dikala kita menulis draft mode compose dipostingan sebelum kita publikasikan, kesalahan terjadi dikala kita mengubah warna font, text align dan sebagainya. Contoh dari inline css attributenya menyerupai ini :

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

Biasanya inline css attribute yang ada pada HTML template menyerupai instruksi dibawah ini:

<div style="clear:both"/>

Untuk mengatasinya ganti instruksi diatas menjadi :

<div class='clear'/>

Serta menambahkan css di bawah ini diatas instruksi ]]</b:skin>

.clear{clear:both;}

3. Optimalkan CSS Ekternal Blogger

Untuk melihat instruksi 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 instruksi css eksternal diatas tidak hanya cukup dihapus, alasannya ialah akan muncul kembali. Solusinya diharapkan penambahan pada instruksi HTML di dalam postingan. Berikut solusinya :

Langkah 1

Ganti instruksi <head> menjadi <head>

Langkah 2

Ganti instruksi </head> menjadi

Cara diatas berlaku pada template selain bawaan blogger, yakni template yang sudah di modifikasi alasannya ialah setiap element yang dipakai pada template tidak semuanya sama.

Demikian saya sampaikan tutorial Mengatasi Optimize CSS Delivery Blogger semoga blog kita menjadi lebih SEO dan fast loading.
Sumber http://www.websiteedukasi.com/