21 måter å optimalisere CSS og øke hastigheten på nettstedet ditt

Sep 14, 2025

hvordan

[1. 3]

CSS må passere gjennom en relativt kompleks rørledning, akkurat som HTML og JavaScript. Nettleseren må laste ned filene fra serveren og deretter fortsette å analysere og bruke dem til DOM. På grunn av ekstreme nivåer av optimalisering, er denne prosessen vanligvis ganske rask - for mindre webprosjekter som ikke er basert på rammer, utgjør CSS vanligvis bare en liten del av totalt ressursforbruk.

Rammer forstyrrer denne likevekten. Ta med en JavaScript GUI-stable som jquery ui, og se CSS, JS og HTML-størrelser skyrocket. Ofte føler utviklere vanligvis klemmen sist - når du sitter bak en kraftig åtte kjerne arbeidsstasjon med T3 internett, ingen bryr seg om fart. Dette endres som latenser eller CPU-begrensede enheter kommer til å spille.

19 Cool CSS animasjonseksempler for å gjenskape

Optimalisering av CSS krever en flerdimensjonal tilnærming. Mens håndskrevet kode kan slimes ned ved hjelp av ulike teknikker, er det å gå over rammenummer for hånden ineffektiv. I disse tilfellene gir du en automatisert minimiser bedre resultater.

Følgende trinn vil ta oss på en reise gjennom verden av CSS optimalisering. Ikke hver eneste kan være direkte gjeldende for prosjektet ditt, men hold dem i tankene. Vil du ha noe enklere? Prøv A. Nettstedbygger .

01. Bruk Shorthand.

Den raskeste CSS-klausulen er en som aldri blir analysert. Bruke Shorthand Clauses, som for eksempel marginalerklæringen som er vist nedenfor, reduserer radikalt størrelsen på CSS-filene dine. Mye ekstra shorthandformer kan bli funnet av Googling 'CSS Shorthand'.

 P {margin-top: 1px;
    margin-høyre: 2px;
    margin-bunn: 3px;
    margin-venstre: 4px; }

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

02. Finn og fjern ubrukte CSS

Å eliminere unødvendige deler av din markering forårsaker åpenbart enorme hastighetsgevinster. Googles Chrome-nettleser har denne funksjonaliteten ut av esken. Bare gå til Vis & GT; Utvikler og GT; Utviklerverktøy og åpne kategorien Kilder i en nylig versjon, og åpne kommandommenyen. Etter det, velg Vis dekning og fest øynene dine på dekselanalysevinduet som fremhever ubrukt kode på den nåværende nettsiden.

03. Gjør det på en mer komfortabel måte

Navigere gjennom linjen-by-line-analysen er ikke nødvendigvis behagelig. Chrome Web Performance Revisjon returnerer lignende informasjon - bare åpne den fra verktøylinjen, visning og GT; Utvikler og GT; Utviklerverktøy og GT; Revisjon og la det løpe. Når du er ferdig, vil en liste over problematiske elementer dukke opp.

04. Vær oppmerksom på problemene

Husk at en automatisert analyse av en CSS alltid kan føre til feil. Utfør en grundig test av hele nettstedet etter å ha erstattet CSS-filene dine med de minifiserte - en vet aldri hva som feiler optimalen forårsaket. Og beveger seg fremover, anstendig Web Hosting. Kan hjelpe deg med å stryke ut krøllene på nettstedet ditt.

05. Inline kritiske CSS

Laster ut eksterne stilark koster tid på grunn av latens - noen husker "blits av unstyled Content"? De mest kritiske biter av kode kan derfor gå inn i topptekstmerket. Pass på at du ikke overdriver det, men. Husk at koden også må leses av mennesker som utfører vedlikeholdsoppgaver.

 & lt; html & gt;
  & lt; head & gt;
    & lt; Style & gt;
      .blue {farge: blå;}
    & lt; / style & gt;
    & lt; / head & gt;
  & lt; body & gt;
    & lt; div class = "blå" & gt;
      Hei Verden!
    & lt; / div & gt;

06. Tillat antiparallel parsing

@Import legger til struktur i CSS-koden din. Dessverre er fordelene ikke gratis: som importen kan nest, parsing dem parallelt ikke er mulig. En mer parallellisk måte bruker en serie av & lt; link & gt; Tags, som nettleseren kan hente på en gang.

 @Import URL ("A.CSS");
@Import url ("b.css");
@Import URL ("C.CSS");
v & l, link rel = "stilark" href = "a.css" & gt;
& lt; link rel = "Stylesheet" href = "b.css" & gt;
& lt; link rel = "Stylesheet" href = "c.css" & gt;

07. Bytt bilder med CSS

For mange år siden var et sett med halvtransparent PNGer for å skape gjennomsiktige effekter på nettsteder vanlig. I dag gir CSS-filtre et ressursbesparende alternativ. Som et eksempel sikrer koden som følger med dette trinnet at bildet i spørsmålet vises som en gråtonversjon av seg selv.

 img {
    -Webkit-Filter: Gråskala (100%); / * gammel
Safari * /
    Filter: gråtoner (100%);
}

08. Bruk fargene snarveier

Felles visdom lærer at sekssifrede fargebeskrivelser er den mest effektive måten å uttrykke farger på. Dette er ikke tilfelle - i noen tilfeller kan shorthand beskrivelser eller fargeavn være kortere.

 Mål {bakgrunnsfarge: #FFFFFF; }
mål {bakgrunn: #fff; }

09. Eliminere unødvendige nuller og enheter

CSS støtter et bredt utvalg av enheter og nummerformater. De er et takknemlig mål for optimalisering - både etterfølgende og følgende nuller kan fjernes, som demonstreres i koden nedenfor. Videre, vær oppmerksom på at null alltid er null, og at å legge til en dimensjon ikke legger til verdi for informasjonen som finnes.

 polstring: 0.2 EM;
margin: 20.0em;
Avalue: 0px;
polstring: .2EM;
margin: 20em;
Avalue: 0;

10. Eliminere overdreven semikolon

Denne optimaliseringen er noe kritisk, da det påvirker endringer i koden. CSS 'spesifikasjon lar deg utelate det siste semikolonet i en eiendomsgruppe. Som besparelsene som oppnås ved denne optimaliseringsmetoden er minimal, nevner vi dette hovedsakelig for de som jobber med en automatisert optimiser.

 p {
. . .
Font-størrelse: 1.33em
}

11. Bruk en teksturatlas

Lasting av flere små sprites er ineffektivt på grunn av protokollkvinnene. CSS Sprites kombinerer en rekke små bilder til en stor PNG-fil, som deretter brytes fra hverandre via CSS-regler. Programmer som TexturePacker. Forenkle opprettelsesprosessen sterkt.

 .Download {
  Bredde: 80px;
  Høyde: 31px;
  Bakgrunnsposisjon: -160px -160px
}
.Download: hover {
  Bredde: 80px;
  Høyde: 32px;
  Bakgrunnsposisjon: -80px -160px
}

12. Chase ned pxen

En fin måte å øke ytelsen bruker en spesialitet i CSS-standarden. Numeriske verdier uten en enhet antas å være piksler - fjerning av PX lagrer to byte for hvert tall.

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

13. Unngå dyre egenskaper

Analysen har vist noen koder for å være dyrere enn andre. Listen som følger med dette trinnet, anses å være spesielt ytelse-sulten - unngå dem når du får muligheten til å gjøre det.

 Border-Radius
    Box-Shadow.
    forvandle
    filter
    : nth-barn
    posisjon: fast;
    etc.

14. Fjern Whitespace.

Whitespace - Tenk faner, vognreturer og mellomrom - gjør koden enklere å lese, men serverer lite formål fra en parser synspunkt. Eliminer dem før frakt. En enda bedre måte innebærer å delegere denne jobben til et skallskript eller lignende apparat.

15. Eliminere kommentarer

Kommentarer tjener også ingen hensikt til kompilatoren. Opprett en egendefinert parser for å fjerne dem før levering. Ikke bare sparer båndbredden, men det sikrer også at angriperne og klonene har en vanskeligere tid å forstå tanken bak koden for hånden.

16. Bruk automatisk komprimering

Yahoo's User Experience Team opprettet et program som håndterer mange komprimeringsoppgaver. Det skip som en krukkefil, Tilgjengelig her , og kan kjøres med en jvm av valg.

 java -jar yuicompressor-x.y.z.jar
Bruk: Java -jar yuicompressor-x.y.z.jar
 [Alternativer] [Input File]
Globale alternativer
    -H, --Hjelp viser dette
 informasjon
    - Type & lt; JS | CSS & GT; Spesifiserer den
 Type av inngangsfilen

17. Kjør det fra NPM

Skulle du foretrekke å integrere produktet i node.js, besøk npmjs.com/package/yuicompressor. . Det dårlig vedlikeholdte depotet inneholder et sett med wrapper-filer og en JavaScript API.

 var kompressor = kreve ("yuicompressor");
Kompressorompress ('/ PATH / TIL /
fil eller streng av JS ', {
// Kompressoralternativer:
Charset: 'UTF8',
Type: 'JS',

18. Hold Sass et al i sjakk

Mens CSS Selector-ytelse ikke er nesten like kritisk som det var for noen år siden (se ressurs), gir rammer som Sass noen ganger ekstremt kompleks kode. Ta en titt på utdatafilene fra tid til annen og tenk på måter å optimalisere resultatene på. Fikk resultater å dele med et lag? Hold filene i delbart skylagring .

Hva er Sass?

19. Sett opp caching

Et gammelt ordtak hevder at den raskeste filen er en som aldri blir sendt over ledningene. Å gjøre nettleserens cacheforespørsler oppnår dette effektivt. Dessverre må oppsettet av cachinghodene finne sted på serveren. Gjør god bruk av de to verktøyene som vises i skjermbildene - de gir en rask måte å analysere resultatene av endringene dine.

20. Bust cachen

Designere misliker ofte caching på grunn av frykt for problemer med kommende endringer. En fin måte rundt problemet innebærer, inkludert koder med filnavnet. Dessverre virker ordningen i koden som følger med dette trinnet ikke overalt, da noen proxyer nekter å buffer filer med "dynamiske" stier.

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

21. Ikke glem det grunnleggende

Optimalisering av CSS er bare en del av spillet. Hvis serveren din ikke bruker HTTP / 2 og GZIP-komprimering, går mye tid i løpet av dataoverføringen. Heldigvis er det vanligvis enkelt å fikse disse to problemene. Vårt eksempel viser noen tweaks til den vanlige Apache-serveren. Skulle du finne deg selv på et annet system, må du bare se serverdokumentasjonen.

 pico /etc/httpd/conf/httpd.conf
ADDOUTPUTFILTERBYTYPE Deflate Text / HTML
ADDOUTPUTFILTERBYTYPE Deflate Text / CSS

Denne artikkelen ble opprinnelig publisert i utgave 282 av Creative Web Design Magazine Webdesigner . Kjøp problem 282 her eller Abonner på webdesigner her .

Relaterte artikler:

10 fantastiske nye CSS-teknikker
Hvilken er den beste CSS-preprocessoren?
En introduksjon til CSS tilpassede egenskaper

21 måter å optimalisere CSS og øke hastigheten på nettstedet ditt

01. Bruk Shorthand.

02. Finn og fjern ubrukte CSS

03. Gjør det på en mer komfortabel måte

04. Vær oppmerksom på problemene

05. Inline kritiske CSS

06. Tillat antiparallel parsing

07. Bytt bilder med CSS

08. Bruk fargene snarveier

09. Eliminere unødvendige nuller og enheter

10. Eliminere overdreven semikolon

11. Bruk en teksturatlas

12. Chase ned pxen

13. Unngå dyre egenskaper

14. Fjern Whitespace.

15. Eliminere kommentarer

16. Bruk automatisk komprimering

17. Kjør det fra NPM

18. Hold Sass et al i sjakk

19. Sett opp caching

20. Bust cachen

21. Ikke glem det grunnleggende

hvordan - Mest populære artikler

Instagram Reels Tutorial: En nybegynnerguide

Hvordan øke hastigheten på og optimalisere WordPress-nettstedene

Hva er inne i vinkel 8?

Hvordan tegne et tegn i penn og blekk

Tegn en figur på under fem minutter

Hvordan prototype en mobilapp med origami Studio

Hvordan skulptør en 3D-trykt goblin

Hvordan bevege seg mellom Daz Studio og Cinema 4D

Kategorier