5 Tips til Super-Fast CSS

Feb 1, 2026

hvordan

Har du tænkt på størrelsen på dit websteds CSS? Hvis din stilark er ballooning, kan det være forsinket sidegengivelse.

16 Top CSS animation eksempler

Selvom CSS ikke er den største aktivtype, vil du tjene, det er en af de første, at browseren opdager. Fordi browseren er blokeret fra at gøre siden, indtil CSS downloades og analyseres, skal den være så magert som muligt. Her er fem tips til at hjælpe dig med at komme derhen.

Fik et komplekst websted? Du har brug for den perfekte Web Hosting. service. Eller, hvis du vil lave et websted uden travlt, prøv en Website Builder. .

01. Brug lavvandede selektorer

Dine forældre fortalte dig, at grundløshed ikke er en dyd, men når det kommer til CSS, er de forkerte. Brugt konsekvent, lavt selektorer kan trimme kilobytes af store stilark. Tag denne vælger:

nav ul li.nav-item

Dette kunne udtrykkes mere kortfattet:

.nav-item

Udover at hjælpe med at holde din CSS Svelte, vil browseren også gøre elementerne rettet mod lavt vælgere hurtigere. Browsere læser vælger fra højre til venstre. Jo dybere selektorerne er, jo længere det tager, at browseren skal gøre og genskabe de elementer, som disse vælgere anvendes til. For komplekse domme, der reflow ofte, kan korte selektor også skære ned på Jank.

Ideelt set vil du have vælgere at være så lav som muligt, men det betyder ikke, at du skal skære alt ned til benet. Nogle gange har du brug for yderligere specificitet for at udvide komponenterne. Slå den rette balance, men vær også pragmatisk.

02. Brug stenografi egenskaber

Using shorthand CSS will speed up your site — Brug af Shorthand CSS vil fremskynde dit websted

Dette virker som sund fornuft, men du vil blive overrasket over, hvor ofte langghand egenskaber bruges unødigt. Her er et eksempel på nogle Longhand egenskaber i brug:

 Font-størrelse: 1.5rem;
Line-Heund: 1.618;
Font-familie: "Arial", "Helvetica", Sans-Serif;

Det er en masse CSS! Lad os rydde det op:

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

Det skrifttype Shorthand ejendom kondenserer flere erklæringer til en praktisk en-liner, der tager meget mindre plads.

I eksemplet vist ovenfor bruger stenografi ca. 40 procent mindre plads end sin longhand ækvivalent. Det er ikke så læseligt ved første øjekast, men syntaksen bliver anden natur, efter at du har brugt lidt tid på at bruge det.

Selvfølgelig, skrifttype er ikke den eneste stenografi til rådighed for dig. For eksempel, margin. Kan bruges i stedet for længere egenskaber som f.eks margin-top. Vi Margin-Right. og så videre.

Det polstring. Ejendommen arbejder på samme måde. For flere måder at rydde op på dit CSS, tilbyder Mozilla Developer Network en nyttig liste over Shorthand Ejendom Referencer. .

Hvad hvis du har brug for at tilsidesætte en værdi længere nede i kaskaden? Lad os for eksempel sige, at du har et overskriftselement, der skal ændre sin skrifttypestørrelse for større skærme.

I dette tilfælde skal du bruge de mere specifikke skriftstørrelse Ejendom i stedet:

 H1 {
    Font: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@media (min bredde: 60rem) {
    h1 {
        Font-størrelse: 2rem;
    }
}

Dette er ikke kun praktisk, det øger også komponentens fleksibilitet. Hvis nogen anden del af den underliggende skrifttype Ejendommen er ændret, disse ændringer vil perkolere op til større skærme. Dette virker godt til komponentoverskridelser, hvor en ny kontekst kræver en anden behandling.

03. Brug preload ressource tip

Det preload. Resource Tip kan give browseren et hovedstart på at indlæse dit websteds CSS. Det preload. Resource Tip fortæller browseren at starte en tidlig hentning for et aktiv.

Du kan sætte det som en & lt; link & gt; Tag i HTML:

  & lt; link rel = "preload" href = "/ css / styles.css" as = "stil" & gt;

Eller som en HTTP-header i din serverkonfiguration:

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

I begge disse scenarier, preload. Giver browseren et hovedstart på loading /css/styles.css. . Ved brug af preload. I en HTTP-overskrift er at foretrække, da det betyder, at browseren vil opdage tipet tidligere i reaktionsoverskrifterne, i stedet for senere i reaktionsorganet.

En anden grund til at bruge preload. I en HTTP-overskrift er det, at den vil starte en server-push-begivenhed på de fleste HTTP / 2 implementeringer. Server Push er en mekanisme, hvormed aktiver er preemptively skubbet til klienten, når anmodninger om indhold foretages, og det giver præstationsfordele svarende til Inlining CSS.

Server Push er ikke tilgængelig på HTTP / 1. Dog bruger preload. I et HTTP / 1-miljø kan det stadig forbedre ydeevnen.

04. CULL afskedigelser med CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS vil analysere eventuelle CSS-filer, du giver det, og lad dig vide, hvilke regelsæt der har duplikerede erklæringer

Det kan betale for at tjekke dine CSS til duplikatregler med en redundans checker. Tag det Ruby-baserede værktøj CSSCSS, for eksempel.

Ruby brugere kan installere det med:

  GEM Installer CSSCSS

Når du er installeret, kan du undersøge dine CSS for afskedigelser som sådan:

  CSSCSS -V Styles.css

Denne kommando lister, hvilke vælgere deler regler, som du kan definere for at spare plads:

 {H1} og {P} Del 3 -erklæringer
  - Farve: # 000
  - Linjehøjde: 1.618
  - Margin: 0 0 1.5REM

Du kan flytte duplikatregler under en vælger:

 H1, P {
    Farve: # 000;
    Line-Heund: 1.618;
    Margin: 0 0 1.5rem;
}

Du ville blive overrasket over, hvor meget plads denne proces kan spare i store projekter. Brug --Hjælp Mulighed for at se flere kommandoer, du kan bruge til at tilpasse tingene yderligere.

05. Gå den ekstra mile med CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO tager dine pænt formaterede CSS og løber det gennem mange fokuserede optimeringer

For kirsebæren på toppen kan du bruge cssnano. - Et node og postcss-afhængigt værktøj. CSSNANO minker ikke kun CSS, det gør mange fokuserede optimeringer, der kan reducere din CSS endnu længere. Installer det på dit system med NPM sådan:

 NPM I -G CSSNANO-CLI

Brug derefter det til at optimere dine CSS:

 CSSNANO Styles.css Optimized-Styles.css

Hvis løbende kommandoer ad hoc er ikke din stil, kan du automatisere CSSNANO med et bygningssystem. Sådan bruger du CSSNANO i en Gulpfile:

 Const Gulp = Kræv ("GULP");
const postcss = kræve ("gulp-postcss");
const cssnano = kræve ("cssnano");

const buildcss = () = & gt; {
    Returner Gulp.Src ("CSS / Styles.css")
        .PIPE (POSTCSS ([CSSNANO ()])
        .pipe (gulp.dest ("CSS / optimeret"));
};
const watch = () = & gt; {
    gulp.watch ("CSS / Styles.css", BuildCSS);
};
eksport.buildcss = buildcss;
Exports.watch = Watch;

Det buildcss. Opgaven læser de CSS, du skriver i CSS / Styles.css. , derefter pipes den optimerede udgang til CSS / Optimized. vejviser. Det holde øje Opgave starter off. buildcss. Når der opstår ændringer i CSS / Styles.css. .

Det holde øje Opgaven kan derefter påberåbes i terminalen som sådan:

 Gulp Watch

Med nogle tweaking kan du opbygge en workflow, der udfører denne specifikke optimering ud over andre CSS-relaterede opgaver, som f.eks. Building Sass / færre filer, autoprefixing og meget mere.

Vil du gemme dine hjemmesider? Eksporter som PDF-filer og gem i pålidelige Sky lagring .

Denne artikel optrådte oprindeligt i net , verdens førende magasin til webdesignere. Abonner her .

Relaterede artikler:

Forståelse af CSS Display Ejendom
Den nye grænse af CSS-animation
Sådan opbygges komplekse layouts ved hjælp af CSS

5 Tips til Super-Fast CSS

01. Brug lavvandede selektorer

02. Brug stenografi egenskaber

03. Brug preload ressource tip

04. CULL afskedigelser med CSSCSS

05. Gå den ekstra mile med CSSNANO

hvordan - Mest populære artikler

Mixed-Media Art Tutorial: Sådan Accolor Over Digital Artwork

Opret en mus-kontrolleret parallax baggrundseffekt

Sådan tegner du Asuka fra Neon Genesis Evangelion

Tackle portræt maleri med olier

Sådan laver du din egen karakter Bibel

Sådan maler du et bybillede med farveblokke

Sådan prototype En mobilapp med Adobe XD

5 måder at styre cashflow effektivt

Kategorier