Beranda » Trik » Meningkatkan kecepatan load dengan optimasi css

Meningkatkan kecepatan load dengan optimasi css

Meningkatkan kecepatan load dengan optimasi css

Sekarang ini kecepatan website/blog menjadi faktor peringkat mesin pencarian, dan CSS optimasi mampu memainkan peran utama dalam meningkatkan kecepatan situs/blog tertentu. Di sini saya membagi beberapa langkah bagaimana mengoptimalkan CSS untuk kecepatan muat situs.

01Menghindari CSS eksternal/impor style sheet

Mengimpor CSS lain ke CSS akan memaksa browser untuk men-download CSS satu demi satu. Hal ini meningkatkan waktu tunggu sampai semua load selesai Download CSS. @import yang digunakan untuk mengimpor CSS lain. misalnya

/*file:first.css*/ 
@import url("second.css");

Dalam contoh di atas, first.CSS second.CSS impor. Ketika first.css download maka second.css download, peningkatan waktu tunggu.

solusi:

Alih-alih menggunakan @import, memaksa untuk men-download CSS paralel. Hal ini akan mempercepat waktu render. Gunakan tag <link> untuk setiap stylesheet, yang memungkinkan browser untuk men-download semua stylesheet paralel.

<html>     
<head>         
...         
<link type="text/css" href="first.css" media="screen" />         
<link type="text/css" href="second.css" media="screen" />         
...     
</head>     
<body>         
....     
</body> 
</html>

02Hapus kode yang tidak digunakan

Kode yang tidak terpakai dalam CSS akan meningkatkan ukuran file. File yang lebih besar membutuhkan waktu untuk men-download, dan penurunan kecepatan situs.

solusi:

Gunakan CSS mengecilkan untuk menghapus semua kode yang tidak terpakai dari CSS, untuk itu penggunaan CSS kompresor.

Catatan: Periksa versi CSS kompresor, karena jika Anda menggunakan CSS3 dan kompresor menggunakan CSS2.1 atau kurang dari kompresor akan menghapus semua CSS3 properti seperti bayangan, radius perbatasan, dll Ini adalah cara yang lebih baik untuk mengecilkan CSS secara manual.

03kode Duplikasi

Kode duplikasi menulis sifat yang sama untuk tag yang berbeda. Ini akan meningkatkan ukuran file CSS. Misalnya, jika Anda ingin menerapkan gaya yang sama untuk tag h1 dan h2,

h1{     
     font-family:Georgia, "Times New Roman", Times, serif;     
     font-size:18px;     
     font-weight:800;     
     color:#039;            
} 

h2{     
     font-family:Georgia, "Times New Roman", Times, serif;     
     font-size:18px;     
     font-weight:800;     
     color:#039;            
}

Dalam contoh di atas sifat dari tag h1 diulang untuk tag h2, kehendak ini meningkatkan ukuran CSS.

solusi:

Gunakan operator koma untuk menerapkan sifat yang sama untuk beberapa tag.

h1, h2{     
          font-family:Georgia, "Times New Roman", Times, serif;     
          font-size:18px;     
          font-weight:800;     
          color:#039;            
}

04Hindari CSS Expression

Ekspresi CSS digunakan untuk mengubah sifat CSS dinamis. Ekspresi CSS ini hanya bekerja di Internet Explorer juga ungkapan ini mengeksekusi setiap kali ketika memuat halaman, scroll ke bawah, browser yang mengubah ukuran, acara mouse bergerak di browser. Ekspresi dapat memperlambat kecepatan situs/blog Anda.

Contoh ekspresi CSS.

#customeDiv {    
        position:absolute;    
        width:100px;    height:100px;    
        left:expression(document.body.offsetWidth  - 110 + "px");    
        top:expression(document.body.offsetHeight - 110 + "px");   
}

solusi:

Jika mungkin menghindari ekspresi CSS.

Saya harap artikel ini membantu Anda untuk meningkatkan kecepatan website/blog Anda. Salam...

Meningkatkan kecepatan load dengan optimasi css

Belum ada tanggapan untuk "Meningkatkan kecepatan load dengan optimasi css"

Post a Comment