1. Inline CSS eksternal berukuran kecil dalam HTML template.
2. Jangan inline atribut CSS dalam elemen html.
3. Optimalkan pengiriman CSS di blogger.
Inline CSS eksternal berukuran kecil dalam HTML template.
Anda bisa inline CSS eksternal yang berukuran kecil dan menggabungkannya di dalam skin atau style html template anda untuk mempercepat loading blog anda. Sebagai contoh jika terdapat CSS eksternal dari situs lain dalam html template anda dengan susunan (mungkin) seperti di bawah ini:
<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/>
<b:skin>...</b:skin>
</head>
<body>
<div class='nama-style'>
Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.
</div>
</body>
</HTML>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/>
<b:skin>...</b:skin>
</head>
<body>
<div class='nama-style'>
Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.
</div>
</body>
</HTML>
Dan sumber dari css-ukuran-kecil.css di atas adalah seperti di bawah ini (anda bisa lihat setiap sumber dari CSS eksternal dengan copy url css eksternal tersebut dan pastekan ke browser anda).
.biru { color : biru }
.kuning { font-size : 16px}
.nama-style { float : left ; width : 30% }
.none { display : none }
.kuning { font-size : 16px}
.nama-style { float : left ; width : 30% }
.none { display : none }
Maka anda bisa inline CSS eksternal berukuran kecil tersebut (membuat CSS eksternal tersebut menjadi internal) seperti di bawah ini:
<!DOCTYPE html>
<HTML>
<head>
<b:skin>
.nama-style { float : left ; width : 30% }
</b:skin>
</head>
<body>
<div class='nama-style'>
Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.
</div>
</body>
</HTML>
<HTML>
<head>
<b:skin>
.nama-style { float : left ; width : 30% }
</b:skin>
</head>
<body>
<div class='nama-style'>
Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.
</div>
</body>
</HTML>
Anda bisa melihat di atas bahwa kode CSS eksternal berukuran kecil (<link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/>) bisa di ganti dengan hanya menampilkan source yang hanya di perlukan oleh html template blog anda (dalam contoh ini source nya adalah .nama-style { float : left ; width : 30% }).
Catatan penting:
1. Anda bisa inline CSS eksternal situs lain JIKA HANYA source CSS eksternal tersebut mempunyai ukuran kecil. Jangan inline CSS eksternal berukuran besar kedalam skin blog anda karena kemungkinan besar hal ini akan menambah permasalahan baru terkait rules speed insights google (Prioritize visible content atau above the fold).
2. Pengguna platform blogger tidak bisa menggunakan cara ini untuk mengoptimalkan pengiriman CSS eksternal. Saya akan bagikan pengalaman bagaimana memaksimalkan pengiriman CSS buat anda yang memakai paltform blogger beserta dampaknya di bawah. -- Kembali ke atas --
Jangan inline atribut CSS dalam elemen html.
Sebisa mungkin jangan inline atribut CSS dalam elemen html template blog anda. -- Kembali ke atas --Optimalkan pengiriman CSS di blogger.
CSS (Cascading Style Sheet) eksternal di blogger biasanya terdapat di antara kode <head> dan </head> dalam html template. Sebagai contoh setiap user yang menggunakan platform blogger setidaknya terdapat 2 CSS eksternal dengan kode yang mirip seperti di bawah ini:<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> (Kode CSS ekstenal yang terdapat dalam blog ini)
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/> (Kode CSS eksternal yang terdapat dalam blog ini)
dan penempatan CSS eksternal tersebut dalam html template adalah seperti di bawah ini:
<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>
<b:skin>...</b:skin>
</head>
<body>
Kode elemen html dalam body.
</body>
</HTML>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>
<b:skin>...</b:skin>
</head>
<body>
Kode elemen html dalam body.
</body>
</HTML>
Untuk mengoptimalkan pengiriman CSS eksternal blogger anda tidak cukup hanya menghapus:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
dan
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>
dari html template blog anda. Karena menurut pengalaman saya browser akan tetap load 2 CSS eksternal ini walaupun telah di hapus dari html template blog.
Jika anda ingin mengoptimalkan pengiriman CSS blogger lakukan 2 langkah mudah di bawah ini:
1. Ganti kode <head> menjadi <head>.
2. Ganti kode </head> menjadi <!--< head/ >--> (hilangkan spasi antara <, > dan head/. Klik Save Template.
Catatan:
1. Mengoptimalkan pengiriman CSS blogger hanya bisa dilakukan dengan template non default blogger.
2. Cara memaksimalkan pengiriman CSS blogger ini kemungkinan akan mengubah tampilan dari blog anda. Hal ini mungkin terjadi karena skin yang terdapat dalam html template blog anda tidak mewakili semua kode elemen (div class yang terdapat dalam elemen html blog anda tersebut). -- Kembali ke atas --