21 Måder til at optimere din CSS og fremskynde dit websted

Sep 11, 2025

hvordan

CSS skal passere gennem en relativt kompleks pipeline, ligesom HTML og JavaScript. Browseren skal downloade filerne fra serveren og derefter fortsætte til at analysere og anvende dem på DOM. På grund af ekstreme optimeringsniveauer er denne proces normalt temmelig hurtig - for mindre webprojekter, der ikke er baseret på rammer, udgør CSS normalt en lille del af det samlede ressourceforbrug.

Rammer forstyrrer denne ligevægt. Medtag en JavaScript GUI Stack som jQuery UI, og se CSS, JS og HTML-størrelser Skyrocket. Ofte føler udviklere normalt klemmen sidst - når den sidder bag en kraftig otte-kerne arbejdsstation med T3-internet, bekymrer sig ikke om hastighed. Dette ændrer sig som latencies eller CPU-begrænsede enheder kommer til at spille.

19 Cool CSS animation eksempler for at genskabe

Optimering af CSS kræver en multidimensionel tilgang. Mens håndskrevne kode kan slimmer ned ved hjælp af forskellige teknikker, er det ineffektive rammekode med hånden ineffektiv. I disse tilfælde giver brug af en automatiseret minimiser bedre resultater.

Følgende trin tager os på en rejse gennem verden af CSS optimering. Ikke alle enkelt kan være direkte gældende for dit projekt, men hold dem i tankerne. Vil du have noget enklere? Prøv A. Website Builder. .

01. Brug Shorthand

Den hurtigste CSS-klausul er en, der aldrig bliver analyseret. Ved hjælp af stenografi klausuler, som f.eks. Marginklæringen, der er vist nedenfor, reducerer radikalt størrelsen af dine CSS-filer. En masse ekstra stenografi danner kan findes af Googling 'CSS Shorthand'.

 P {margin-top: 1px;
    Margin-højre: 2px;
    Margin-bottom: 3px;
    Margin-venstre: 4px; }

P {margin: 1px 2px 3px 4px; }

02. Find og fjern ubrugte CSS

Eliminerer unødvendige dele af din mark-up forårsager naturligvis enorme hastighedsgevinster. Googles Chrome-browser har denne funktionalitet ud af boksen. Simpelthen gå for at se & gt; Udvikler & GT; Developer Tools og Åbn fanen Kilder i en nylig version, og åbn kommandosammen. Derefter skal du vælge Vis dækning og feast dine øjne på dækningsanalysesvinduet, der fremhæver ubrugt kode på den aktuelle webside.

03. Gør det på en mere behagelig måde

Navigering gennem line-by-line analysen er ikke nødvendigvis behagelig. Chrome's Web Performance Audit returnerer lignende oplysninger - bare åbne den fra værktøjslinjen, se & gt; Udvikler & GT; Udviklerværktøjer & GT; Revisioner og lad det løbe. Når det er færdigt, vil en liste over problematiske elementer komme op.

04. Vær opmærksom på problemerne

Husk, at en autentiseret analyse af en CSS altid kan føre til fejl. Udfør en grundig test på hele hjemmesiden efter udskiftning af dine CSS-filer med de minierede dem - man ved aldrig, hvilke fejl, som den optimerer, der er forårsaget. Og bevæger sig fremad, anstændigt Web Hosting. Kan hjælpe dig med at udjævne krøllerne på dit websted.

05. Inline kritiske CSS

Indlæsning af eksterne stylesheets koster tid på grund af latens - Enhver husker 'Flash of Unstyled Content'? De mest kritiske bits af kode kan derfor gå ind i header-taggen. Sørg for ikke at overdrive det, dog. Husk, at koden også skal læses af mennesker, der udfører vedligeholdelsesopgaver.

 & lt; html & gt;
  & lt; hoved & gt;
    & lt; stil & gt;
      .blå {farve: blå;}
    & lt; / stil & gt;
    & lt; / Head & GT;
  & lt; body & gt;
    & lt; div klasse = "blå" & gt;
      Hej Verden!
    & lt; / div & gt;

06. Tillad antiparallel parsing

@import tilføjer struktur til din CSS-kode. Desværre er fordelene ikke gratis: Da importen kan redde, er det ikke muligt at analysere dem parallelt. En mere paralleløs måde bruger en serie af & lt; link & gt; Tags, som browseren kan hente på én gang.

 @import URL ("A.CSS");
@import url ("b.css");
@import url ("c.css");
v & lt; link rel = "stylesheet" href = "a.css" & gt;
& lt; link rel = "stylesheet" href = "b.css" & gt;
& lt; link rel = "stylesheet" href = "c.css" & gt;

07. Udskift billeder med CSS

For mange år siden var et sæt semi-gennemsigtige PNG'er til at skabe gennemskinnelige effekter på hjemmesider almindeligt. I dag giver CSS filtre et ressourcebesparende alternativ. Som et eksempel sikrer snippet, der ledsager dette trin, at det pågældende billede vises som en gråtoner version af sig selv.

 img {
    -webkit-filter: gråtoner (100%); / * gamle
Safari * /
    Filtrer: gråtoner (100%);
}

08. Brug farve genveje

Fælles visdom lærer, at sekscifrede farvebeskrivelser er den mest effektive måde at udtrykke farver på. Dette er ikke tilfældet - i nogle tilfælde kan stenbeskrivelser eller farvnavne være kortere.

 Mål {Baggrundsfarve: #ffffff; }
Mål {Baggrund: #fff; }

09. Eliminer unødvendige nuller og enheder

CSS understøtter en bred vifte af enheder og nummerformater. De er et taknemmeligt mål for optimering - både bageste og efter nuller kan fjernes, som det fremgår af udgangen nedenfor. Husk endvidere, at et nul altid er et nul, og at tilføje en dimension ikke tilføjer værdi til de indeholdte oplysninger.

 PADDING: 0.2EM;
Margin: 20.0EM;
Avalue: 0px;
Padding: .2em;
Margin: 20em;
Avalue: 0;

10. Eliminer for store semikoloner

Denne optimering er noget kritisk, da den påvirker ændringer i kode. CSS 'specifikation giver dig mulighed for at udelade det sidste semikolon i en ejendomsgruppe. Da besparelserne opnået ved denne optimeringsmetode er minimal, nævner vi dette hovedsageligt for dem, der arbejder på en automatiseret optimering.

 P {
. . .
Font-størrelse: 1.33EM
}

11. Brug en tekstur atlas

Indlæser flere små sprites er ineffektivt på grund af protokollomkostninger. CSS-sprites kombinerer en række små billeder i en stor PNG-fil, som derefter er brudt fra hinanden via CSS-regler. Programmer som f.eks TexturePacker. Forenkle oprettelsen af oprettelsen.

. Download {
  Bredde: 80px;
  Højde: 31px;
  Baggrundsstilling: -160px -160px
}
. Download: Hover {
  Bredde: 80px;
  Højde: 32px;
  Baggrundsstilling: -80px -160px
}

12. Chase ned px

En pænt måde at øge ydeevnen bruger en specialitet i CSS-standarden. Numeriske værdier uden en enhed antages at være pixels - fjernelse af PX gemmer to byte for hvert nummer.

 H2 {PADDING: 0px; Margin: 0px;}
H2 {polstring: 0; Margin: 0}

13. Undgå dyre egenskaber

Analysen har vist nogle tags at være dyrere end andre. Listen, der ledsager dette trin, anses for at være særligt præstation - sulten - undgå dem, når de får mulighed for at gøre det.

 Border-radius
    Box-Shadow.
    transformation
    filter
    : nth-barn
    Position: Fast;
    osv.

14. Fjern Whitespace

Whitespace - Tænk faner, vognretur og rum - Gør kode lettere at læse, men tjener lidt formål fra en parsers synspunkt. Eliminer dem før forsendelse. En endnu bedre måde indebærer at delegere dette job til et shell script eller lignende apparat.

15. Eliminere kommentarer.

Kommentarer tjener også ikke noget formål til kompilatoren. Opret en brugerdefineret parser for at fjerne dem før levering. Ikke alene sparer det båndbredde, men det sikrer også, at angriberne og klonere har en hårdere tid til at forstå tanken bag koden ved hånden.

16. Brug automatisk kompression

Yahoo's brugeroplevelseshold skabte en applikation, der håndterer mange komprimeringsopgaver. Det skibes som en jar-fil, tilgængelig her. , og kan køres med en JVM valg.

 Java -jar Yuicompressor-x.y.z.jar
BRUG: JAVA -JAR YUICOMPRESSOR-X.Y.Z.JAR
 [Valg] [Input File]
Globale muligheder.
    -H, - Help viser dette
 Information
    --Type & lt; JS | CSS & GT; Angiver
 Type af inputfilen

17. Kør det fra NPM

Skulle du foretrække at integrere produktet i node.js, besøg npmjs.com/package/yuicompressor. . Det dårligt vedligeholdte depot indeholder et sæt indpakningsfiler og en JavaScript API.

 Var Compressor = Kræv ('Yuicompressor');
Compressor.compress ('/ sti / til /
fil eller streng af JS ', {
// Kompressor muligheder:
charset: 'utf8',
Type: 'JS',

18. Hold Sass et al i Check

Mens CSS-vælgerens ydeevne ikke er næsten lige så kritisk som det for nogle år siden (se ressource), udsender rammer som SASS nogle gange ekstremt kompleks kode. Tag et kig på outputfilerne fra tid til anden og tænk på måder at optimere resultaterne på. Fik resultater at dele med et hold? Hold filer i opsigtsmæssige Sky lagring .

Hvad er sass?

19. Opsæt caching

Et gammelt ordsprog hævder, at den hurtigste fil er en, der aldrig bliver sendt over ledningerne. Gør browserens cache-anmodninger opnår dette effektivt. Desværre skal opsætningen af caching headkerne finde sted på serveren. Gør god brug af de to værktøjer, der vises i skærmbillederne - de giver en hurtig måde at analysere resultaterne af dine ændringer.

20. Bust cachen

Designere kan ofte ikke lide caching på grund af frygt for problemer med kommende ændringer. En pæn vej rundt om problemet indebærer, herunder tags med filnavnet. Desværre virker ordningen skitseret i koden, der ledsager dette trin, ikke overalt, da nogle proxies nægter at cache-filer med 'dynamiske' stier.

 & lt; link rel = "stylesheet" href = "style.css? V = 1.2.3" & gt;

21. Glem ikke det grundlæggende

Optimering af CSS er bare en del af spillet. Hvis din server ikke bruger HTTP / 2 og GZIP-komprimering, går en masse tid tabt under dataoverførsel. Heldigvis er det normalt simpelt at fastsætte disse to problemer. Vores eksempel viser et par tweaks til den almindeligt anvendte Apache Server. Skulle du finde dig selv på et andet system, skal du blot kontakte serverdokumentationen.

 pico /etc/httpd/conf/httpd.conf
AddOutputFilterByType DefLate Text / HTML
AddOutputFilterbyType Deflate TEXT / CSS

Denne artikel blev oprindeligt offentliggjort i udstedelse 282 af Creative Web Design Magazine Webdesigner . Køb problem 282 her eller Abonner på Web Designer her .

Relaterede artikler:

10 fantastiske nye CSS-teknikker
Hvilket er den bedste CSS-præprocessor?
En introduktion til CSS-brugerdefinerede egenskaber

21 Måder til at optimere din CSS og fremskynde dit websted

01. Brug Shorthand

02. Find og fjern ubrugte CSS

03. Gør det på en mere behagelig måde

04. Vær opmærksom på problemerne

05. Inline kritiske CSS

06. Tillad antiparallel parsing

07. Udskift billeder med CSS

08. Brug farve genveje

09. Eliminer unødvendige nuller og enheder

10. Eliminer for store semikoloner

11. Brug en tekstur atlas

12. Chase ned px

13. Undgå dyre egenskaber

14. Fjern Whitespace

15. Eliminere kommentarer.

16. Brug automatisk kompression

17. Kør det fra NPM

18. Hold Sass et al i Check

19. Opsæt caching

20. Bust cachen

21. Glem ikke det grundlæggende

hvordan - Mest populære artikler

Sådan tegner du perspektiv

Visual Development Tips: Fortæl en historie med dit kunstværk

Hvad er der indenfor vinkel 8?

Sådan opretter du et digitalt oliemaleri ved hjælp af Artrage

Opret en animeret damptekst effekt

Sådan opbygges en chatbot-grænseflade

Sådan prototype En mobilapp med Adobe XD

Udforsk kreativ kode med p5.js

Kategorier