Jika temen - temen Blogger pernah berguru HTML, mestinya temen - temen blogger sudah tidak abnormal lagi dengan yang namanya CSS. Sekilas saya sudah mengutip pengertian dari CSS berdasarkan Wikipedia. Ini pertama kalinya saya membagikan Tips SEO mengenai CSS di Blog Cara SEO Blogger. Karena berdasarkan saya ini sanggup menjadi sangat bermanfaat untuk temen - temen Blogger, maka saya rasa perlu untuk saya sanggup membagikan bagaimana cara mengoptimalkan CSS untuk Loading Page Lebih Cepat.
Cascading Style Sheet (CSS)
merupakan hukum 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 sanggup sangat mensugesti suatu Blog / Website dalam proses Loading Page. Jika penggunaan CSS kurang tepat, maka sanggup 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 ialah Google PageSpeed Insight. Layanan dari Google yang sanggup mendeteksi kesalahan / arahan yang kurang sempurna yang mengganggu / menunda kecepatan Loading Page suatu halaman Blog / Website.Pada setiap kesalahan yang terdeteksi Oleh Google di PageSpeed Insight, Google akan memperlihatkan rekomendasi untuk kita, mengenai apa yang harus kita perbaiki untuk mempercepat Loading Page Blog / Website kita. Salah satunya ialah mengenai mengoptimalkan CSS.
Optimasi CSS yang Google rekomendasikan ialah dengan memakai Inline CSS.
Jika External CSS berukuran Kecil Google merekomendasikan kita untuk hanya memakai Inline CSS, Yaitu CSS yang disisipkan pribadi dalam Dokumen HTML. Cara ini akan menciptakan Browser melanjutkan Proses Rendering Halaman.Contoh Menggunakan Inline CSS yang berukuran Kecil
Jika Kode HTML Terlihat menyerupai ini :<html>Dan isi dari cssukurankecil.css ialah menyerupai 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 sanggup melaksanakan Inlining CSS. Sehingga arahan HTML nya akan berubah menyerupai ini :
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
<html>CSS yang orisinil (cssukurankecil.css) diletakkan sehabis 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 memakai Inline CSS. Karena Inline Data URL yang besar sanggup mengakibatkan ukuran CSS menjadi lebih besar, yang akan mengurangi kecepatan browser untuk melaksanakan Render Halaman. Dari perubahan Kode yang direkomendasikan oleh Google di atas. Perubahan ada pada peletakan arahan "<link rel="stylesheet" href="cssukurankecil.css"> " kita sanggup mengambil kesimpulan bahwa dengan meletakkan arahan tersebut di bawah, berarti kita memprioritaskan Halaman biar Browser sanggup merender Halaman Inti dulu barulah Browser sanggup memuat File CSS External kita. Kode ".blue{color:blue;}" tetap berada di atas biar dikala 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 sanggup 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 biar tetap hidup untuk membantu Temen - temen Blogger. Terima Kasih.
0 Response to "Cara Mengoptimalkan Css Untuk Loading Page Lebih Cepat"
Post a Comment