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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT