Saturday, December 19, 2015

Cara Avoid CSS @ Import

css @import

Ada beberapa metode penerapan untuk menampilkan sebuah css ekternal dalam sebuah situs atau blog salah satunya adalah import css. Untuk membuat kecepatan loading blog menjadi ringan dan cepat kita harus mengoptimalkan pengiriman css di blog, salah satunya bisa menghindari metode pemanggilan css @ import ini. Cara Optimalkan CSS Delivery Blogger

Bagaimana cara kerja CSS @import ..?


Jika sebuah css eksternal dipanggil  dengan metode @ import akan menambah langkah-langkah bagi browser untuk memuat halaman agar bisa terbuka seluruhnya. Browser harus mendownload terlebih dulu, mengurai, dan kemudian pergi keluar mengambil file CSS berikutnya sebelum mulai menampilkan halaman Anda. Cara seperti ini tentunya membutuhkan waktu tambahan bagi browser untuk memuat halaman yang akan berdampak pada kecepatan loading blog.
Baca Membuat Loading Blog Menjadi Super Cepat

Contoh bentuk CSS import  :

@import url("style.css")

Cara menghindari CSS @ Import


# Menggunakan Internal CSS
Untuk menghindarinya kita bisa menggunakan metode inline CSS jika dalam eksternal css tersebut hanya berukuran kecil. Contohnya seperti ini :

<!DOCTYPE html>
<HTML>
<head>
<style>
.css{
 float:right;
 background:#fff;
 font-size: 1.2em;
 text-decoration:none;
 }
</style>
</head>
<body>
</body>
</HTML>

# Memanggil CSS Eksternal HTML Secara Langsung
Daripada menggunakan import css lebih baik kita menggunakan css ekternal secara langsung dalam kode HTML

<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// css eksternal.css'/>
</head>
<body>
</body>
</HTML>