Cara Mengoptimalkan CSS DELIVERY Pada Blog

Kali ini BLOGGINGPASURUAN akan berbagi tips Cara Mengoptimalkan CSS Delivery Pada Blog khususnya Blogspot. Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap Cascading Style Sheet atau umumnya disebut CSS eksternal yang berada dalam code template HTML anda, ini karena browser akan load terlebih dahulu setiap CSS internal untuk ditampilkan pada screen baik itu PC atau pun Mobile. Apa pengaruhnya terhadap kecepatan loading blog anda ?. Pendapat BLOGGINGPASURUAN, hal ini akan membutuhkan waktu tambahan buat browser untuk loading CSS eksternalnya dan inilah yang mengakibatkan loading blog lama atau berat walau di koneksi internet normal sekalipun, Apalagi koneksinya lambat… Bisa dibayangkan.

Hal ini jelas berpengaruh pada SEO karena pungunjung bisa jadi batal berkunjung ke BLOG kita cuma gara gara loading lama atau lemot bangetttt.

1. Inline CSS eksternal berukuran kecil dalam HTML template.

2. Jangan lakukan 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>

Sumber 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 }

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>

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 HANYA JIKA 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.

Jangan inline atribut CSS dalam elemen html.

Semaksimal mungkin jangan inline atribut CSS dalam elemen html template blog anda.

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)

Bagaimana menempatkan 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>

Usaha 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'/>

Dan dari HTML template blog Sobat. Karena menurut pengalaman nich 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  (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).

Semoga bermanfaat....

Tutorial		HTML
Widget		CSS
JQuery		IT

Wong Pasuruan

Cara Mengoptimalkan CSS DELIVERY Pada Blog

2 comments: