21 sätt att optimera din CSS och påskynda din webbplats

Sep 11, 2025

Hur

CSS måste passera genom en relativt komplex rörledning, precis som HTML och JavaScript. Webbläsaren måste hämta filerna från servern och sedan fortsätta att analysera och applicera dem på DOM. På grund av extrema optimeringsnivåer är denna process vanligtvis ganska snabb - för mindre webbprojekt som inte är baserade på ramar, gör CSS vanligtvis bara en liten del av den totala resursförbrukningen.

Ramar störde denna jämvikt. Inkludera en JavaScript GUI-stack som JQuery UI, och titta på CSS, JS och HTML-storlekar skyrocket. Ofta känner utvecklarna vanligtvis nypen - när den sitter bakom en kraftfull åtta kärnstation med T3 Internet, bryr sig ingen om hastighet. Detta ändras som latenser eller CPU-begränsade enheter kommer att spela.

19 COOL CSS Animationsexempel för att återskapa

Optimera CSS kräver ett multimensionellt tillvägagångssätt. Medan handskriven kod kan slösas ner med olika tekniker, är går över ramkod för hand ineffektiv. I dessa fall ger med hjälp av en automatiserad minimiser bättre resultat.

Följande steg kommer att ta oss på en resa genom Världen av CSS-optimering. Inte alla ensamma kan vara direkt tillämplig på ditt projekt, men håll dem i åtanke. Vill du ha något enklare? Prova a Website Builder .

01. Använd stenografi

Den snabbaste CSS-klausulen är en som aldrig blir parsed. Med hjälp av shorthand-klausuler, såsom marginaldeklarationen som visas nedan, reducerar radikalt storleken på dina CSS-filer. Många ytterligare shorthandsformer kan hittas av Googling 'CSS-shorthand'.

 p {margin-top: 1px;
    marginal-höger: 2px;
    Marginalbotten: 3px;
    marginal-vänster: 4px; }

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

02. Hitta och ta bort oanvända CSS

Att eliminera onödiga delar av din markering orsakar uppenbarligen enorma hastighetsvinster. Googles Chrome-webbläsare har den här funktionaliteten ur lådan. Helt enkelt gå till Se & GT; Utvecklare & GT; Utvecklarverktyg och öppna fliken Källor i en ny version och öppna kommandemenyn. Därefter väljer du Visa täckning och festa dina ögon på täckningsanalysfönstret som markerar oanvänd kod på den aktuella webbsidan.

03. Gör det på ett mer bekvämt sätt

Navigering genom linjen-för-line-analysen är inte nödvändigtvis bekväm. Chrome's Web Performance Audit returnerar liknande information - öppna den bara från verktygsfältet, visa och gt; Utvecklare & GT; Utvecklarverktyg och GT; Revisioner och låt det springa. När det är klart kommer en lista över problematiska element att dyka upp.

04. Var medveten om problemen

Tänk på att en automatiserad analys av en CSS alltid kan leda till fel. Utför ett noggrant test på hela webbplatsen efter att du byter ut dina CSS-filer med de minifierade - man vet aldrig vilka misstag som optimisatorn orsakade. Och framåt, anständigt webbhotell Kan hjälpa dig att stryka ut veckningarna på din webbplats.

05. Inline Critical CSS

Laddar externa stylesheets kostar tid på grund av latens - någon kommer ihåg "blixten av ostylat innehåll"? De mest kritiska bitarna av kod kan därför gå in i huvudetiketten. Se till att du inte överdriver det. Tänk på att koden också måste läsas av människor som utför underhållsuppgifter.

 & lt; html & gt;
  & lt; huvud & gt;
    & lt; stil & gt;
      .Blue {color: blue;}
    & LT; / Style & GT;
    & LT; / Head & GT;
  & lt; kropp & gt;
    & lt; div class = "blue" & gt;
      Hej världen!
    & lt; / div & gt;

06. Tillåt antiparallell parsing

@import lägger till struktur till din CSS-kod. Tyvärr är fördelarna inte gratis: Eftersom importen kan bo, är det inte möjligt att analysera dem. Ett mer parallellt sätt använder en serie av & lt; länk & gt; Taggar, som webbläsaren kan hämta på en gång.

 @import URL ("A.CSS");
@import URL ("B.CSS");
@import URL ("C.CSS");
V & LT; länk rel = "stylesheet" href = "a.css" & gt;
& lt; länk rel = "stylesheet" href = "b.css" & gt;
& lt; länk rel = "stylesheet" href = "c.css" & gt;

07. Byt ut bilder med CSS

För år sedan var en uppsättning halvtransparenta PNGs för att skapa genomskinliga effekter på webbplatser vanliga. Idag ger CSS-filter ett resursbesparande alternativ. Som ett exempel säkerställer snippet som åtföljer detta steg att bilden i fråga framträder som en gråskala version av sig själv.

 IMG {
    -WebKit-filter: gråskala (100%); / * gammal
safari * /
    Filter: gråskala (100%);
}

08. Använd färggenvägar

Vanliga visdom lär att sexsiffriga färgbeskrivningar är det mest effektiva sättet att uttrycka färger. Detta är inte fallet - i vissa fall kan stenografiska beskrivningar eller färgnamn vara kortare.

 Target {Bakgrundsfärg: #ffffff; }
mål {bakgrund: #ff; }

09. Eliminera onödiga nollor och enheter

CSS stöder ett brett utbud av enheter och nummerformat. De är ett tacksamt mål för optimering - både efterföljande och följande nollor kan avlägsnas, vilket framgår av snippet nedan. Vidare, kom ihåg att en noll alltid är en noll, och att lägga till en dimension ger inte värde av informationen.

 Padding: 0,2EM;
Marginal: 20.0EM;
Avalue: 0px;
Padding: .2EM;
marginal: 20em;
Avalue: 0;

10. Eliminera överdrivna semikolon

Denna optimering är något kritisk, eftersom den påverkar ändringar av koden. CSS-specifikation låter dig släppa ut den sista semikolonen i en fastighetsgrupp. Eftersom de besparingar som uppnåtts av denna optimeringsmetod är minimal, nämner vi detta främst för dem som arbetar med en automatiserad optimist.

 p {
. . .
FONT-STORLEK: 1.33
}

11. Använd en textur Atlas

Att ladda flera små sprites är ineffektiv på grund av protokollöverdrag. CSS-sprites kombinerar en serie små bilder i en stor PNG-fil, som sedan bryts bort via CSS-reglerna. Program som Texturpacker Förenkla skapningsprocessen kraftigt.

 .Download {
  Bredd: 80px;
  Höjd: 31px;
  Bakgrundsposition: -160px -160px
}
.Download: Hover {
  Bredd: 80px;
  Höjd: 32px;
  Bakgrundsposition: -80px -160px
}

12. Chase ner PX

Ett snyggt sätt att öka prestanda använder en specialitet i CSS-standarden. Numeriska värden utan enhet antas vara pixlar - Ta bort PX sparar två byte för varje nummer.

 H2 {PADDING: 0PX; Marginal: 0px;}
H2 {PADDING: 0; Marginal: 0}

13. Undvik dyra egenskaper

Analys har visat att vissa taggar är dyrare än andra. Listan som åtföljer detta steg anses vara särskilt prestationshungrig - undvika dem när de får möjlighet att göra det.

 Border-Radius
    boxskugga
    omvandla
    filtrera
    : nth-barn
    Position: Fast;
    etc.

14. Ta bort whitespace

Whitespace - Tänk flikar, vagnens avkastning och mellanslag - gör kod lättare att läsa men tjänar lite syfte från en parsers synvinkel. Eliminera dem före leverans. Ett ännu bättre sätt innebär att delegering av detta jobb till ett skalskript eller liknande apparat.

15. Eliminera kommentarer

Kommentarer tjänar också inget syfte till kompilatorn. Skapa en anpassad parser för att ta bort dem före leverans. Det sparar inte bara bandbredd utan det garanterar också att angripare och kloner har svårare att förstå tanken bakom koden till hands.

16. Använd automatisk kompression

Yahoo's User Experience Team skapade en applikation som hanterar många kompressionsuppgifter. Det skickas som en burkfil, tillgänglig här , och kan köras med en JVM av val.

 Java -jar yuicompressor-x.y.z.jar
Användning: Java -jar yuicompressor-x.y.z.jar
 [Alternativ] [Inmatningsfil]
Globala alternativ
    -H, --Help Visar detta
 information
    --type & lt; JS | CSS & GT; Anger
 Typ av inmatningsfilen

17. Kör den från npm

Om du föredrar att integrera produkten i Node.js, besök npmjs.com/package/yuicompressor . Det dåligt underhållna förvaret innehåller en uppsättning omslagsfiler och en JavaScript API.

 var kompressor = kräver ('yuicompressor');
kompressor.compress ('/ bana / till /
fil eller sträng av js ', {
// Kompressoralternativ:
Charset: 'UTF8',
Typ: 'JS',

18. Håll Sass et al i check

Medan CSS-selektor är inte nästan lika kritisk som för några år sedan (se resurs), avger ramar som SASS ibland extremt komplexa kod. Ta en titt på utdatafilerna från tid till annan och tänka på sätt att optimera resultaten. Har resultat att dela med ett lag? Håll filerna i delbara molnlagring .

Vad är sass?

19. Ställ in caching

Ett gammalt adage hävdar att den snabbaste filen är en som aldrig skickas över ledningarna. Att göra webbläsarens cache-förfrågningar uppnår detta effektivt. Tyvärr måste inställningen av cache-rubrikerna ske på servern. Gör bra användning av de två verktyg som visas i skärmdumparna - de ger ett snabbt sätt att analysera resultaten av dina ändringar.

20. Byst cachen

Designers tycker ofta om att caching på grund av rädsla för problem med kommande förändringar. Ett snyggt sätt kring problemet innebär att du kan inkludera taggar med filnamnet. Tyvärr fungerar schemat som beskrivs i koden som åtföljer detta steg inte överallt som vissa proxyer vägrar att cachefiler med "dynamiska" vägar.

 & lt; länk rel = "stylesheet" href = "style.css? V = 1.2.3" & gt;

21. Glöm inte grunderna

Optimera CSS är bara en del av spelet. Om din server inte använder http / 2 och gzipkomprimering, förloras mycket tid under dataöverföring. Lyckligtvis är det enkelt att fixa dessa två problem. Vårt exempel visar några tweaks till den vanliga Apache-servern. Om du befinner dig på ett annat system, kontakta bara serverdokumentationen.

 pico /etc/httpd/conf/httpd.conf
ADDOUTPUTFILTERBYTYPE DEFLATE TEXT / HTML
ADDOUTPUTFILTERBYTYPE DEFLATE TEXT / CSS

Denna artikel publicerades ursprungligen i utgåva 282 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 282 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

10 fantastiska nya CSS-tekniker
Vilket är den bästa CSS-preprocessorn?
En introduktion till CSS anpassade egenskaper

21 sätt att optimera din CSS och påskynda din webbplats

01. Använd stenografi

02. Hitta och ta bort oanvända CSS

03. Gör det på ett mer bekvämt sätt

04. Var medveten om problemen

05. Inline Critical CSS

06. Tillåt antiparallell parsing

07. Byt ut bilder med CSS

08. Använd färggenvägar

09. Eliminera onödiga nollor och enheter

10. Eliminera överdrivna semikolon

11. Använd en textur Atlas

12. Chase ner PX

13. Undvik dyra egenskaper

14. Ta bort whitespace

15. Eliminera kommentarer

16. Använd automatisk kompression

17. Kör den från npm

18. Håll Sass et al i check

19. Ställ in caching

20. Byst cachen

21. Glöm inte grunderna

Hur - Mest populära artiklar

Cinema 4D Tutorials: 13 av det bästa

6 Snabba tips för att förbättra din penselpennritning

Hur man ritar med affinitetsfoto för iPad

Kom igång med HTML Canvas

Master User Experience Strategy

Hemligheterna att uppfylla en kreativ design kort

Topptips för att förfina dina handritade illustrationstekniker

Hur man gör en realistisk sportbil gör

Kategorier