Jika temen - temen Blogger pernah belajar HTML, mestinya temen - temen blogger sudah tidak asing lagi dengan yang namanya CSS. Sekilas saya sudah mengutip pengertian dari CSS menurut Wikipedia. Ini pertama kalinya saya membagikan Tips SEO mengenai CSS di Blog Cara SEO Blogger. Karena menurut saya ini bisa menjadi sangat bermanfaat untuk temen - temen Blogger, maka saya rasa perlu untuk saya dapat membagikan bagaimana cara mengoptimalkan CSS untuk Loading Page Lebih Cepat.Cascading Style Sheet (CSS)
merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets
CSS bisa sangat mempengaruhi suatu Blog / Website dalam proses Loading Page. Jika penggunaan CSS kurang tepat, maka bisa saja CSS tersebut mengganjal atau memperlambat Proses Loading Page. Menunda Proses Browser dalam memuat suatu halaman Blog / Website.
Bagaimana Aturan Penggunaan CSS yang direkomendasikan Oleh Google?
Salah satu Fasilitas Google yang sangat membantu para Webmaster adalah Google PageSpeed Insight. Layanan dari Google yang dapat mendeteksi kesalahan / kode yang kurang tepat yang mengganggu / menunda kecepatan Loading Page suatu halaman Blog / Website.Pada setiap kesalahan yang terdeteksi Oleh Google di PageSpeed Insight, Google akan memberikan rekomendasi untuk kita, mengenai apa yang harus kita perbaiki untuk mempercepat Loading Page Blog / Website kita. Salah satunya adalah mengenai mengoptimalkan CSS.
Optimasi CSS yang Google rekomendasikan adalah dengan menggunakan Inline CSS.
Jika External CSS berukuran Kecil Google merekomendasikan kita untuk hanya menggunakan Inline CSS, Yaitu CSS yang disisipkan langsung dalam Dokumen HTML. Cara ini akan membuat Browser melanjutkan Proses Rendering Halaman.Contoh Menggunakan Inline CSS yang berukuran Kecil
Jika Kode HTML Terlihat seperti ini :<html>Dan isi dari cssukurankecil.css adalah seperti ini :
<head>
<link rel="stylesheet" href="cssukurankecil.css">
</head>
<body>
<div class="blue">
Hallo, Duniaku!
</div>
</body>
</html>
.yellow {background-color: yellow;}Maka Temen - temen Blogger dapat melakukan Inlining CSS. Sehingga kode HTML nya akan berubah seperti ini :
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
<html>CSS yang asli (cssukurankecil.css) diletakkan setelah onload Halaman.
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="cssukurankecil.css">
Kesimpulan...
Tetap berhati - hatilah dalam menggunakan Inline CSS. Karena Inline Data URL yang besar dapat mengakibatkan ukuran CSS menjadi lebih besar, yang akan mengurangi kecepatan browser untuk melakukan Render Halaman. Dari perubahan Kode yang direkomendasikan oleh Google di atas. Perubahan ada pada peletakan kode "<link rel="stylesheet" href="cssukurankecil.css"> " kita dapat mengambil kesimpulan bahwa dengan meletakkan kode tersebut di bawah, berarti kita memprioritaskan Halaman agar Browser dapat merender Halaman Inti dulu barulah Browser dapat memuat File CSS External kita. Kode ".blue{color:blue;}" tetap berada di atas agar ketika Halaman yang kita prioritaskan Di Render / Di Muat lebih dulu, Teks "Hellow, World!" yang muncul tetap berwarna biru sebelum CSS External (cssukurankecil.css) selesai dimuat.
Sumber :
- http://id.wikipedia.org/wiki/Cascading_Style_Sheets
- https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Sekian yang dapat saya bagikan Mengenai Cara Mengoptimalkan CSS untuk Loading Page Lebih Cepat. Jika Temen - temen Blogger masih bingung, ada yang ingin ditanyakan, atau ingin mengucapkan terima kasih, silahkan Berkomentar. Jangan Lupa Share ke Jejaring Sosial ya, dengan Like, G+, Share di Twitter dsb. Support Blog ini agar tetap hidup untuk membantu Temen - temen Blogger. Terima Kasih.
Tidak ada komentar:
Posting Komentar