Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Mudah Optimalkan CSS Delivery Blogger, Postingan ini masih berhubungan dengan Artikel Tips Blogger.
Cara Mudah Optimalkan CSS Delivery Blogger - Ini merupakan faktor yang juga termasuk dalam kecepatan speed blog anda, karena banyak juga faktor yang utama berasal dari suatu struktur modifikasi design blogger sendiri. karena itulah disini saya akan berbagi informasi yang mungkin bermanfaat buat teman-teman blogger semuanya terutama yang ingin page speed blognya meningkat, karena disini kita akan membahas tentang optimasi design blogger yang terkait pengiriman css di blog agar tampil kece, lebih cepat dan ringan tentunya.
Karena hal tersebut akan berpengaruh saat semua browser kita pakai akan memblokir lebih dulu semua CSS eksternal yang ada dan kemudian akan ditampilkan secara penuh. Oleh karena itu akan membutuhkan waktu yang lama untuk memuat data dari CSS eksternal itu tersebut yang akan membuat blog loading blog teman-teman menjadi terasa sangat berat.
Tetapi tenang saja teman-teman disini kita akan membahas langkah-langkahnya, tetapi teman-teman harus simak baik-baik.
Langkah-langkah Optimalkan CSS Delivery menurut Google Insight rules :
Kemudian kita akan buat CSS Eksternal tadi menjadi inline CSS dengan menyalin url diatas, setelah itu paste ke bagian new tab browser, maka akan tampil sederetan isi dari CSS eksternal tersebut. Berikut contoh isi CSS seperti ini :
Untuk Contoh Bagian Inline CSSnya akan tampil seperti ini :
Berikut merupakan contoh bentuk inline css attributnya akan tampil seperti ini :
Tidak juga menutup kemungkinan script inline css attribut ini berada pada HTML template, biasanya juga pada kode dibawah ini :
Cara untuk mengatasinya tinggal kalian ganti kode tersebut menjadi dibawah ini :
Kemudian tambah CSS
Pada cara "Optimal Css Delivery Blogger" pada bagian kedua kode css eksternal ini masih tidak cukup hanya menghapusnya. karena masih bakal muncul saat akan kita check pada situs Page Speed insight dan GTMetrix, Cara mengatasinya cukup kalian ganti kode berikut :
Demikian artikel Cara Mudah Optimalkan CSS Delivery Blogger. semoga artikel ini bisa membantu teman-teman semua dan semoga bermanfaat.
Pada Artikel kali ini kita akan membahas Cara Mudah Optimalkan CSS Delivery Blogger, Postingan ini masih berhubungan dengan Artikel Tips Blogger.
Cara Mudah Optimalkan CSS Delivery Blogger
Advertisement
Cara Mudah Optimalkan CSS Delivery Blogger - Ini merupakan faktor yang juga termasuk dalam kecepatan speed blog anda, karena banyak juga faktor yang utama berasal dari suatu struktur modifikasi design blogger sendiri. karena itulah disini saya akan berbagi informasi yang mungkin bermanfaat buat teman-teman blogger semuanya terutama yang ingin page speed blognya meningkat, karena disini kita akan membahas tentang optimasi design blogger yang terkait pengiriman css di blog agar tampil kece, lebih cepat dan ringan tentunya.
Karena hal tersebut akan berpengaruh saat semua browser kita pakai akan memblokir lebih dulu semua CSS eksternal yang ada dan kemudian akan ditampilkan secara penuh. Oleh karena itu akan membutuhkan waktu yang lama untuk memuat data dari CSS eksternal itu tersebut yang akan membuat blog loading blog teman-teman menjadi terasa sangat berat.
Tetapi tenang saja teman-teman disini kita akan membahas langkah-langkahnya, tetapi teman-teman harus simak baik-baik.
Langkah-langkah Optimalkan CSS Delivery menurut Google Insight rules :
1. Metode Inline CSS Eksternal
Cara metode inline ini hanya bisa digunakan untuk css yang berukuran kecil dan kemudian akan kita gabung menjadi satu dalam suatu skin template blog kita. Berikut ini contoh format 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> Kemudian kita akan buat CSS Eksternal tadi menjadi inline CSS dengan menyalin url diatas, setelah itu paste ke bagian new tab browser, maka akan tampil sederetan isi dari CSS eksternal tersebut. Berikut contoh isi CSS seperti ini :
.element{
float:right;
background:#fff;
font-size: 1.2em;
text-decoration:none;
} Untuk Contoh Bagian Inline CSSnya akan tampil 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. Cara Menghindari Inline CSS Attribut Pada HTML Element
Pada bagian ini sering terjadi pada saat kalian menulis draft metode compose di postingan sebelum kita akan publish, mulai dari ganti warna font, text align dan lain-lainnya.Berikut merupakan contoh bentuk inline css attributnya akan tampil seperti ini :
<span style="color: #444444;"> TULISAN</span>
<div style="text-align:center"> TULISAN </div> Tidak juga menutup kemungkinan script inline css attribut ini berada pada HTML template, biasanya juga pada kode dibawah ini :
<div style="clear:both"/> Cara untuk mengatasinya tinggal kalian ganti kode tersebut menjadi dibawah ini :
<div class='clear/> Kemudian tambah CSS
.clear{clear:both;} 3. Cara Optimalkan CSS Eksternal Blogger
Bagian blog kalian langsung pilih Inspect element untuk edit html untuk melihat struktur kode css eksternal dan biasanya untuk default blogger akan setidaknya ada 2 CSS Eksternal 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=.....'/> Pada cara "Optimal Css Delivery Blogger" pada bagian kedua kode css eksternal ini masih tidak cukup hanya menghapusnya. karena masih bakal muncul saat akan kita check pada situs Page Speed insight dan GTMetrix, Cara mengatasinya cukup kalian ganti kode berikut :
Ganti kode <head> menjadi <head> dan </head> menjadi <!--<head/>-->Catatan : Cara diatas akan berlaku jika template selain bawaan default dari blogger atau pihak ketiga, dan jika ada kemungkinan akan merubah suatu tampilan blog anda, karena element yang digunakan tidak sama dengan template yang digunakan.
Demikian artikel Cara Mudah Optimalkan CSS Delivery Blogger. semoga artikel ini bisa membantu teman-teman semua dan semoga bermanfaat.
EmoticonEmoticon