5 sfaturi pentru Super-Fast CSS

Sep 13, 2025

să

Te-ai gândit la dimensiunea CSS a site-ului tău? Dacă foaia de stil este balonantă, ar putea întârzia redarea paginilor.

16 exemple de animație CSS de top CSS

Deși CSS nu este cel mai mare tip de activ pe care îl vei servi, este unul dintre primii pe care browser-ul descoperă. Deoarece browserul este blocat de la redarea paginii până când CSS este descărcată și analizată, trebuie să fie cât mai slabă posibilă. Iată cinci sfaturi pentru a vă ajuta să ajungeți acolo.

Ai un site complex? Aveți nevoie de perfect web hosting serviciu. Sau, dacă doriți să faceți un site fără agitație, încercați a Builder de site-uri web .

01. Utilizați selectoare superficiale

Părinții tăi ți-au spus că superficialitatea nu este o virtute, dar când vine vorba de CSS, ei greșesc. Utilizat în mod consecvent, selectorii superficiali pot tăia kilobytes pe foi de stil mari. Luați acest selector:

nav ul li.nav-item

Acest lucru ar putea fi exprimat mai succint:

.nav-item

Pe lângă faptul că vă ajută să păstrați Sveltele CSS, browserul va face, de asemenea, elementele vizate de selectoarele de mică adâncime mai rapide. Browsere citesc selectoarele de la dreapta la stânga. Cea mai profundă selectoarele sunt, cu atât este mai lungă pentru ca browser să facă și să redevenită elementele pe care se selectează acești selectori. Pentru ca Domuri complexe care refuză adesea, selectorii scurți pot, de asemenea, tăiați pe Jank.

În mod ideal, doriți ca selectorii să fie cât mai puțin superficiali, dar asta nu înseamnă că ar trebui să taie totul până la os. Uneori aveți nevoie de specificitate suplimentară pentru a extinde componentele. Așezați echilibrul potrivit, dar și pragmatic.

02. Folosiți proprietățile stenografice

Using shorthand CSS will speed up your site — Utilizarea stenogradei CSS va accelera site-ul dvs.

Acest lucru pare a fi bun simț, dar veți fi surprins de cât de des sunt folosite proprietățile de lungă durată. Iată un exemplu de proprietăți de lungă durată în uz:

 font-dimensiune: 1,5rem;
Înălțimea liniei: 1.618;
Font-Family: "Arial", "Helvetica", Sans-Seif;

Asta e o mulțime de CSS! Să-i ordonim:

 Font: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Seif;

Font. Proprietatea de stenogramă condensează mai multe declarații într-o căptușeală la îndemână care ocupă mult mai puțin spațiu.

În exemplul prezentat mai sus, stenografia utilizează aproximativ 40% mai puțin spațiu decât echivalentul său de lungă durată. Nu este la fel de citit la prima vedere, dar sintaxa devine a doua natură după ce ați petrecut ceva timp folosind-o.

Desigur, Font. nu este singura stenografie disponibilă pentru dvs. De exemplu, Marja. pot fi utilizate în locul proprietăților mai lungi, cum ar fi Margin-top. , Marginea-dreapta. și așa mai departe.

padding. proprietatea funcționează în același mod. Pentru mai multe modalități de a vă curăța CSS, Mozilla Developer Network oferă o listă de ajutor Referințe de proprietate pe stenogramă .

Dacă trebuie să depășiți o valoare mai jos în cascadă? De exemplu, să spunem că aveți un element de rubrică care trebuie să-și schimbe dimensiunea fontului pentru afișaje mai mari.

În acest caz, ar trebui să utilizați mai specific marimea fontului Proprietate în schimb:

 H1 {
    Font: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Seif;
}
@Media (min-lățime: 60rem) {
    H1 {
        font-dimensiune: 2rem;
    }
}

Acest lucru nu este numai convenabil, ci crește și flexibilitatea componentelor. Dacă o altă parte a subiacentului Font. Proprietatea este modificată, aceste schimbări vor fi percolate până la afișaje mai mari. Acest lucru funcționează excelent pentru suprascrierea componentelor în care un nou context necesită un tratament diferit.

03. Folosiți indiciu de resurse de preîncărcare

Preîncărcați Sugerul de resurse poate da browserului un cap de pornire la încărcarea site-ului dvs. CSS. Preîncărcați Sugestia de resurse spune browserului să inițieze o preluare timpurie pentru un activ.

O puteți seta ca a & Link & gt; Etichetă în HTML:

& Link Rel = "Preload" HREF = "/ CSS / stiluri.Css" ca = "stil" & gt;

Sau ca un antet HTTP în configurația serverului dvs .:

link: & lt; /css/styles.css> ;; rel = preload; ca = stil

În ambele scenarii, Preîncărcați oferă browserului un cap de pornire la încărcare /css/styles.css. . Folosind. Preîncărcați Într-un antet HTTP este preferabil, deoarece acest lucru înseamnă că browserul va descoperi sugestii mai devreme în antetele de răspuns, în loc de mai târziu în corpul de răspuns.

Un alt motiv de utilizare Preîncărcați Într-un antet HTTP este că va iniția un eveniment de împingere a serverului pe cele mai multe implementări http / 2. Serverul Push este un mecanism prin care activele sunt împinse în mod preemptiv la client atunci când se fac cereri de conținut și oferă beneficii de performanță similare cu cea a CSS-ului.

Push Server nu este disponibil pe http / 1. Cu toate acestea, utilizarea Preîncărcați Într-un mediu HTTP / 1 poate îmbunătăți performanța.

04. Cull redundanțe cu CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS va analiza orice fișiere CSS pe care le dați-o și vă informați ce reguli au declarații duplicate

Acesta poate plăti pentru a verifica CSS-ul pentru regulile duplicate cu un checker de redundanță. Luați, de exemplu, CSSCS-ul instrumentului bazat pe Ruby.

Utilizatorii din Ruby pot instala cu:

Gem Install CSSCS

Odată instalat, puteți examina CSS pentru concedieri ca așa:

CSSCS-V Stiluri.Css

Această comandă listează care selectoare partajează regulile pe care le puteți de-duplica pentru a economisi spațiu:

 {h1} și {p} împărtășesc 3 declarații
  - Culoare: # 000
  - înălțimea liniei: 1.618
  - Marja: 0 0 1,5rem

Puteți să mutați regulile duplicate sub un selector:

 H1, P {
    Culoare: # 000;
    Înălțimea liniei: 1.618;
    Marja: 0 0 1,5rem;
}

Ați fi surprins de cât de mult spațiu poate economisi acest proces în proiecte mari. Folosește --Ajutor Opțiunea de a vedea mai multe comenzi pe care le puteți utiliza pentru a elimina lucrurile mai departe.

05. Du-te la extra mile cu Cssnano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — Cssnano ia CSS-ul dvs. frumos formatat și o conduce prin multe optimizări concentrate

Pentru cireșe deasupra, puteți folosi Cssnano. - un instrument dependent de nod și postcs. Cssnano nu numai că miazăază CSS, face multe optimizări concentrate care pot reduce și mai mult CSS. Instalați-l pe sistemul dvs. cu NPM ca Deci:

 npm i -g cssnano-cli

Apoi utilizați-l pentru a vă optimiza CSS:

 Cssnano stiluri.css optimizate-stils.css

Dacă comenzile de funcționare ad hoc nu este stilul dvs., puteți automatiza Cssnano cu un sistem de construcție. Iată cum să utilizați Cssnano într-o gulpfile:

 Const Gulp = necesită ("Gulp");
const postcs = necesită ("Gulp-PostCss");
const cssnano = necesită ("cssnano");

const buildcss = () = & gt; {
    Return Gulp.Src ("CSS / STYLES.CSS")
        .PIP (PostCSS ([CSSNANO ()])
        .pă (Gulp.Dest ("CSS / Optimizat"));
};
const ceas = () = & gt; {
    Gulp.watch ("CSS / STYLES.CSS", BuildCss);
};
exports.buildcss = buildcss;
exports.watch = ceas;

BuildCss. Sarcina citește CSS pe care o scrieți css / stils.css. , apoi conducea ieșirea optimizată la css / optimizat Directory. ceas Sarcina începe off. BuildCss. Ori de câte ori apar schimbări css / stils.css. .

ceas Sarcina poate fi apoi invocată în terminal ca așa:

 Gulp Watch

Cu unele eliminați, puteți construi un flux de lucru care efectuează această optimizare specifică în plus față de alte sarcini legate de CSS, cum ar fi clădirea SASS / mai puțin fișiere, autoprefixing și multe altele.

Doriți să salvați paginile site-ului dvs.? Export ca PDF-uri și salvați în fiabilă Stocare in cloud .

Acest articol a apărut inițial în net , Magazine de conducere din lume pentru designeri de web. Abonați-vă aici .

Articole similare:

Înțelegerea proprietății afișajului CSS
Noua frontieră a animației CSS
Cum se construiesc layout-uri complexe folosind CSS

5 sfaturi pentru Super-Fast CSS

01. Utilizați selectoare superficiale

02. Folosiți proprietățile stenografice

03. Folosiți indiciu de resurse de preîncărcare

04. Cull redundanțe cu CSSCSS

05. Du-te la extra mile cu Cssnano

să - Cele mai populare articole

Cum se utilizează schița gravitațională

Photoshop Color Schimbare: 2 Instrumente Trebuie să știți

Cum se modelează conceptul de artă în cinema 4d

Designer de afinitate: Cum să utilizați Pixel Persona

colorarea greyscale lucrează în Photoshop

Cum se creează un monstru de stil de labirint de pantaloni

Cum se creează părul în stil de manga în mișcare

Începeți cu prototiparea în Adobe XD

Categorii