Mengoptimalkan pengiriman CSS blogger
Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap CSS (Cascading Style Sheet) eksternal yang berada dalam anda. Hal ini terjadi karena browser akan load terlebih dahulu setiap CSS internal untuk ditampilkan dalam screen baik itu pc atau pun mobile. Lantas apa pengaruhnya terhadap kecepatan loading blog anda ?. Menurut pemahaman saya, akan dibutuhkan waktu tambahan buat browser untuk loading CSS eksternal dalam blog anda dan inilah yang mengakibatkan loading blog akan terasa lama atau berat walau di koneksi internet normal sekalipun.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.
Jangan inline atribut CSS dalam elemen html.
Sebisa mungkin jangan inline atribut CSS dalam elemen html template blog anda.Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mungkin jangan inline css atribut dalam elemen html. Beberapa dampak yang mungkin akan ditimbulkan jika anda melakukan ini adalah blog menjadi tidak valid html (karena adanya duplikasi atribut seperti yang telah saya sebutkan di atas). Selain itu inline css atribut dalam elemen html akan membuat css atribut yang telah di inline akan di blokir karena hal ini tidak sesuai dengan kebijakan keamanan konten. Untuk lebih jelasnya tentang kebijakan keamanan konten anda bisa membaca di http://www.w3.org/TR/CSP/.
Selain itu inline css atribut ke dalam elemen html tidak sesuai dengan pagespeed rules developer google insights tentang Optimalkan pengiriman CSS di blogger. Inline CSS atribut ke dalam elemen html hanya akan menambah waktu loading blog anda. Hal ini terjadi karena browser memerlukan waktu tambahan untuk membaca atribut css yang terdapat di dalam dokumen html blog anda (secara umum dokumen html di artikan sebagai halaman suatu blog atau situs). Bentuk yang umum di jumpai seperti berikut ini: < div style=' ini atau itu' > kode js atau kode lain< /div >, ataupun < p style='...' >Kalimat ini atau kalimat itu< /p >.
Contoh inline css atribut dalam elemen html
Beberapa contoh paling sederhana yang saya ketahui dan hampir bisa saya pastikan ada di setiap html template blogger anda.1. < div style='clear: both;' / >
Jika anda temukan kode ini di html template anda. Hampir bisa saya pastikan akan muncul errors untuk kode diatas saat anda cek blog anda di http://validator.w3.org/. Hal ini terjadi karena terdapat atribut css di dalam tag html (div).
Jika anda temukan kode ini di html template anda. Hampir bisa saya pastikan akan muncul errors untuk kode diatas saat anda cek blog anda di http://validator.w3.org/. Hal ini terjadi karena terdapat atribut css di dalam tag html (div).
Cara agar kode < div style='clear: both;' / > valid html5
Lantas bagaimana cara membuat kode diatas valid html5 dan tidak lagi terdapat atribut css dalam tag html template. Ganti kode di atas dengan kode < div class='clear'/ > serta tambahkan kode css .clear{clear:both} ini sebelum kode ]] >< /b:skin > di dalam html template anda.2. < div style='float:left atau right atau none' >< /div >
Kode ini paling banyak digunakan blogger indonesia untuk memasang iklan (dibawah judul postingan). Padahal fungsi kode ini secara umumnya bisa lebih banyak dari hanya sekedar memasang iklan. Sebagai contoh anda bisa memasang iklan di bawah postingan blog anda dengan memasang kode:
< div style='float:left atau right atau none' > (pilih salah satu antara left, right atau none)
Kode iklan yang sudah di parse
< /div >
sebelum kode < data:post.body/ >.
Saya sendiri sangat menghargai para blogger yang telah membagikan pengalamannya untuk pengguna internet perihal kode ini dan manfaatnya. Hanya saja menurut saya kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog anda sama dengan anda inline css atribut di elemen html.
Kode ini paling banyak digunakan blogger indonesia untuk memasang iklan (dibawah judul postingan). Padahal fungsi kode ini secara umumnya bisa lebih banyak dari hanya sekedar memasang iklan. Sebagai contoh anda bisa memasang iklan di bawah postingan blog anda dengan memasang kode:
< div style='float:left atau right atau none' > (pilih salah satu antara left, right atau none)
Kode iklan yang sudah di parse
< /div >
sebelum kode < data:post.body/ >.
Saya sendiri sangat menghargai para blogger yang telah membagikan pengalamannya untuk pengguna internet perihal kode ini dan manfaatnya. Hanya saja menurut saya kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog anda sama dengan anda inline css atribut di elemen html.
Cara agar kode < div style='float:left atau right atau none' >< /div > valid html5
Untuk membuat kode ini valid html, ganti kode di atas dengan < div class='tentukan-nama-untuk-elemen-ini' >...< /div >. Serta jangan lupa untuk menambahkan kode css .tentukan-nama-untuk-elemen-ini{float:left atau right atau none} sebelum kode ]] >< /b:skin > di html template anda.Pastinya masih lebih banyak contoh lagi tentang bentuk inline css dalam dalam elemen html. Lantas bagaimana cara mengetahui berapa jumlah css atribut yang telah kita inline di elemen html. Tidak banyak situs yang saya ketahui untuk cek masalah ini. Tapi setidaknya saya tahu satu situs milik Patrick Sexton (terima kasih Patrick, berkat artikel anda tentang pagespeed rule yang membuat blog ini loading lebih cepat dari sebelumnya) yang menyediakan tools cek css delivery.
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/>--> 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 --
0 Response to "Mengoptimalkan pengiriman CSS blogger"
Post a Comment