5 Tips untuk CSS super cepat

Sep 13, 2025

Bagaimana caranya

Pernahkah Anda memikirkan ukuran CSS situs Anda? Jika lembar gaya Anda balon, itu bisa menunda rendering halaman.

16 Contoh Animasi CSS Teratas

Meskipun CSS bukan tipe aset terbesar yang akan Anda layani, ini adalah salah satu yang pertama sehingga browser menemukan. Karena browser diblokir dari rendering halaman sampai CSS diunduh dan diuraikan, itu harus ramping mungkin. Berikut ini lima tips untuk membantu Anda sampai di sana.

Punya situs yang kompleks? Anda membutuhkan yang sempurna hosting web. layanan. Atau, jika Anda ingin membuat situs tanpa keributan, coba a Pembangun Situs Web .

01. Gunakan pemilih dangkal

Orang tua Anda memberi tahu Anda bahwa kekurangan kota bukanlah kebajikan, tetapi ketika datang ke CSS, mereka salah. Digunakan secara konsisten, pemilih dangkal dapat memangkas kilobyte dari lembaran gaya besar. Ambil pemilih ini:

nav ul li.nav-item

Ini dapat diekspresikan dengan lebih ringkas:

.nav-item

Serta membantu menjaga CSS lorong, browser juga akan membuat elemen yang ditargetkan oleh pemilih dangkal lebih cepat. Browser membaca pemilih dari kanan ke kiri. Seleksi yang lebih dalam, semakin lama dibutuhkan browser untuk membuat dan merender kembali elemen-elemen yang diputuskan oleh pemilih. Untuk dom kompleks yang sering reflow, pemilih pendek juga dapat mengurangi jank.

Idealnya, Anda ingin pemilih menjadi dangkal mungkin, tetapi ini tidak berarti Anda harus memotong semuanya ke tulang. Terkadang Anda membutuhkan spesifisitas tambahan untuk memperpanjang komponen. Tekan keseimbangan yang tepat, tetapi juga pragmatis.

02. Gunakan Properti Singkatan

Using shorthand CSS will speed up your site — Menggunakan SHEHHAND CSS akan mempercepat situs Anda

Ini sepertinya masuk akal, tetapi Anda akan terkejut melihat seberapa sering properti Longhand digunakan secara tidak perlu. Berikut ini contoh beberapa properti Longhand yang digunakan:

 Ukuran font: 1.5REM;
Tinggi garis: 1.618;
FONT-FAMILY: "Arial", "Helvetica", Sans-Serif;

Itu banyak CSS! Mari kita rapi itu:

 Font: 1.5REM / 1.618 "Arial", "Helvetica", Sans-Serif;

Itu font Properti singkatan mengembun beberapa deklarasi ke dalam satu liner yang praktis yang membutuhkan ruang yang jauh lebih sedikit.

Dalam contoh yang ditunjukkan di atas, singkatan menggunakan sekitar 40 persen lebih sedikit ruang daripada yang setara. Ini tidak dapat dibaca pada pandangan pertama, tetapi sintaks menjadi sifat kedua setelah Anda menghabiskan waktu menggunakannya.

Tentu saja, font bukan satu-satunya singkatan yang tersedia untuk Anda. Sebagai contoh, batas dapat digunakan sebagai ganti properti yang lebih panjang seperti margin-top. , margin-right. dan seterusnya.

Itu lapisan properti bekerja dengan cara yang sama. Untuk lebih banyak cara untuk membersihkan CSS Anda, Mozilla Developer Network menawarkan daftar bermanfaat Referensi Properti Singkatan .

Bagaimana jika Anda perlu mengesampingkan nilai lebih jauh ke bawah di kaskade? Misalnya, katakanlah Anda memiliki elemen judul yang perlu mengubah ukuran fontnya untuk tampilan yang lebih besar.

Dalam hal ini, Anda harus menggunakan yang lebih spesifik ukuran huruf Properti sebagai gantinya:

 h1 {
    Font: 1.5REM / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@Media (Lebar Min: 60REM) {
    h1 {
        Ukuran font: 2REM;
    }
}

Ini tidak hanya nyaman, itu juga meningkatkan fleksibilitas komponen. Jika ada bagian lain dari yang mendasarinya font Properti dimodifikasi, perubahan itu akan meresap ke tampilan yang lebih besar. Ini berfungsi dengan baik untuk komponen menimpa di mana konteks baru membutuhkan perawatan yang berbeda.

03. Gunakan petunjuk Sumber Daya Preload

Itu preload. Petunjuk sumber daya dapat memberikan peramban awal untuk memuat CSS situs Anda. Itu preload. Petunjuk sumber daya memberi tahu browser untuk memulai pengambilan awal untuk suatu aset.

Anda dapat mengaturnya sebagai & lt; tautan & gt; Tag dalam html:


    & lt; tautan rel = "preload" href = "/ css / styles.css" AS = "gaya" & gt;

Atau sebagai header HTTP dalam konfigurasi server Anda:

tautan


  : & lt; /css/styles.css> rel = preload; sebagai = gaya

Dalam kedua skenario ini, preload. memberi peramban awal saat memuat /css/styles.css. . Menggunakan preload. Dalam header HTTP lebih disukai, karena ini berarti browser akan menemukan petunjuk sebelumnya pada header respons, alih-alih nanti dalam tubuh respons.

Alasan lain untuk digunakan preload. Dalam header HTTP adalah bahwa ia akan memulai acara push server pada sebagian besar implementasi HTTP / 2. Server Push adalah mekanisme dimana aset didorong oleh klien ketika permintaan untuk konten dibuat, dan menawarkan manfaat kinerja yang mirip dengan CSS yang tidak terdefinisi.

Server Push tidak tersedia di HTTP / 1. Namun, menggunakan preload. Dalam lingkungan HTTP / 1 masih dapat meningkatkan kinerja.

04. Cull Redudansi dengan CSSCS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCS akan menganalisis semua file CSS yang Anda berikan dan beri tahu Anda aturan mana yang memiliki deklarasi duplikat

Ini dapat membayar untuk memeriksa CSS Anda untuk aturan duplikat dengan pemeriksa redundansi. Ambil CSSCS alat berbasis Ruby, misalnya.

Pengguna Ruby dapat menginstalnya dengan:


  GEM Instal CSScss

Setelah diinstal, Anda dapat memeriksa CSS Anda untuk redudansi seperti:


  csscss -v styles.css

Perintah ini mencantumkan pemilih yang membagikan aturan yang dapat Anda duplikat untuk menghemat ruang:

 {h1} dan {p} bagikan 3 deklarasi
  - Warna: # 000
  - Tinggi garis: 1.618
  - MARGIN: 0 0 1.5REM

Anda dapat memindahkan aturan duplikat di bawah satu pemilih:

 H1, P {
    Warna: # 000;
    Tinggi garis: 1.618;
    MARGIN: 0 0 1.5REM;
}

Anda akan terkejut melihat seberapa banyak ruang yang dapat dihemat proses ini dalam proyek-proyek besar. Menggunakan --Tolong Opsi untuk melihat lebih banyak perintah yang dapat Anda gunakan untuk men-tweak lebih jauh.

05. BAIK MILE DENGAN CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNano mengambil CSS Anda yang diformat dengan baik dan menjalankannya melalui banyak optimasi terfokus

Untuk ceri di atas, Anda dapat menggunakan cssnano. - Alat simpul dan postcss. CSSNano tidak hanya menguraikan CSS, itu membuat banyak optimasi terfokus yang dapat mengurangi CSS Anda lebih jauh. Instal pada sistem Anda dengan NPM seperti itu:

 NPM I -G CSSNANO-CLI

Kemudian gunakan untuk mengoptimalkan CSS Anda:

 CSSNano Styles.css Optimized-Styles.css

Jika memerintahkan perintah ad hoc bukanlah gaya Anda, Anda dapat mengotomatiskan CSSNano dengan sistem build. Inilah cara menggunakan CSSNano dalam Gulpfile:

 const gulp = membutuhkan ("tegukan");
const postcss = membutuhkan ("gulp-postcss");
const consnano = membutuhkan ("cssnano");

const buildcss = () = & gt; {
    Kembalikan Gulp.Src ("CSS / Styles.css")
        .PIPE (POSTSS ([CSSNANO ()])
        .pipe (gulp.dest ("css / optimal"));
};
const watch = () = & gt; {
    gulp.watch ("css / styles.css", buildcss);
};
ekspor.Buildcss = buildcss;
ekspor.watch = arloji;

Itu Buildcss. tugas membaca CSS yang Anda tulis css / styles.css. , kemudian pipa output yang dioptimalkan ke CSS / Dioptimalkan direktori. Itu menonton tugas dimulai Buildcss. Setiap kali perubahan terjadi pada css / styles.css. .

Itu menonton tugas kemudian dapat dipanggil di terminal seperti:

 Gulp Watch

Dengan beberapa penyesuaian, Anda dapat membangun alur kerja yang melakukan optimasi spesifik ini selain tugas-tugas terkait CSS lainnya, seperti membangun file SASS / KURSY, autoprefixing dan banyak lagi.

Ingin menyimpan halaman situs web Anda? Ekspor sebagai PDF dan simpan di dapat diandalkan penyimpanan awan .

Artikel ini awalnya muncul di bersih , majalah terkemuka dunia untuk desainer web. Berlangganan di sini .

Artikel terkait:

Memahami Properti Tampilan CSS
Perbatasan baru animasi CSS
Cara Membangun Tata Letak Kompleks Menggunakan CSS

5 Tips untuk CSS super cepat

01. Gunakan pemilih dangkal

02. Gunakan Properti Singkatan

03. Gunakan petunjuk Sumber Daya Preload

04. Cull Redudansi dengan CSSCS

05. BAIK MILE DENGAN CSSNANO

Bagaimana caranya - Artikel Terpopuler

Cara menggunakan REECT Spring ke Menghidupkan Komponen

Gunakan WordPress sebagai CMS tanpa kepala

Cara Membuat Adegan Ruang Fotorealistik

Model makhluk bajak laut alien di zbrush

Bangun aplikasi yang berfungsi offline

7 Cara Pembunuh untuk Mempengaruhi Perilaku Pengguna

11 tips untuk membuat lanskap berair dalam 3D

kekuatan Flexbox yang luar biasa

Kategori