Hvordan optimalisere CSS-levering – 7 enkle trinn

css optimaliseringsvektorbildeBorte er dagene da designeksperter og bransjeledende bloggere anbefalte å bygge nettsider ikke mer enn 30 kilobyte…


Da var det forventet at dette “capet” kunne håndtere HTML, JavaScript, bilder, CSS og Flash. La oss være ærlige, det krever ikke mye å fullstendig overstige 30 kb.

Ettersom JavaScript og CSS fikk popularitet, ble det vanlig at CSS alene overskred taket på 30 KB. Dette gjelder spesielt for større nettsteder.

Du bør imidlertid ikke være altfor fokusert på “kilobyttellingen” når du bygger og designer sider for nettstedet ditt. Det er viktig å beholde sidene dine optimalisert og tett når du skriver CSS.

Optimalisering handler ikke bare om å minimere størrelsene på filene dine. Det handler om å holde sidene dine fri for rot og oppblåsthet, gjøre dem så organiserte og effektive som mulig. Når du lærer mer om beste fremgangsmåter for CSS-optimalisering, vil du oppdage at du automatisk oppretter mindre filstørrelser.

Her er 5 enkle ting du kan gjøre for å optimalisere CSS-en akkurat nå.

Hvordan fullt ut optimalisere CSS-levering

1. Bruk Shorthand

Å skrive i korthet har blitt en veldig vanlig praksis. Dette er den enkleste måten å redusere koden og hvor lang tid det tar å kode. Hvis du ikke gjør dette ennå, er det ingen tid som i dag.

css font eiendom

Det er et mangfold av elementer som du kan bruke ordbok til, men de vanligste inkluderer:

  • Margin
  • padding
  • Font
  • Outline
  • Grense
  • Bakgrunn
  • List-style

korthet konfigurasjonsverdierDu kan også kombinere verdier ved å bruke ordbok. Ved å spesifisere forskjellige verdier vil nettleseren i det vesentlige bruke en spesifisert måte for å tolke reglene.

Å bruke hvilken som helst korthet vilje gjør den generelle koden din langt mer kortfattet. Du lagrer både tegn og linjer.

Hvis du bruker stenografi på alle mulige områder, kan dette redusere den totale filstørrelsen dramatisk.

2. Bli kvitt hakkene

dvs. css-regelFor å tjene IE-spesifikke CSS-regler, ved å bruke betingede CSS-hacks gir du fordelen av å servere en mindre og renere standard CSS-fil.

Det hjelper med nettlesere som er mer standardkompatible. Den ekstra sidevekten vil imidlertid bare lastes ned av nettleserne som krever det.

Hvis du må bruke en hacking, er det viktig at koden du bruker er spesifikk for versjonen av Internet Explorer du er fokusert på.

Det er mange forhåndsskrevne koder som fungerer som hacks hvis du ikke vil skrive dine egne. Bare ta deg tid til å virkelig se på den forhåndsskrevne koden og forsikre deg om at den er nøyaktig Ellers kan dette føre til enda flere problemer.

Hvis du nå kan bruke CSS for å få de resultatene du ønsker, gjør du dette uten noen hacks. Dette er selvfølgelig avhengig av at alle andre ting er like. Den generelle koden din vil være langt lettere og enklere når du bruker færre hacks på nettstedet ditt.

3. Vær smart når du bruker Whitespace

For din CSS-kode, whitespace er avgjørende for lesbarhet.

Whitespace inneholder elementer, som faner, mellomrom og ekstra linjeskift. Hver bit av hvitområdet du klarer å eliminere, ligner på å eliminere en karakter.

fjerne tomme linjerImidlertid anbefales det ofte ikke å skvise på hvitområdet for en mindre fil. Du må fortsatt opprettholde optimal lesbarhet på websidene dine.

Whitespace er viktig for formatering, så du vil finne en balanse. Hvis du skriver i store blokker til tekst for å eliminere litt hvitrom, det korte oppmerksomhetsspennet for lesere på internett vil få dem til å klikke unna.

En måte å gi både en mindre filstørrelse og lesbarhet er å grøfte faner og bare sette en enkelt linje mellom avsnittene. Dette gir tilstrekkelig hvitrom fra et lesbarhetssynspunkt, men det eliminerer også noe av det hvitområdet som ikke er nødvendig.

Nå, for CSS-filens produksjonsversjon, kan du fjerne hvitområdet. Den vil fremdeles være til stede i arbeidsfilen din.

Dette er en annen måte å inngå kompromisser på, slik at du har både mindre filer og lesbar formatering.

4. Beskjær tilbakestillinger og rammer

Når du bruker et CSS-rammeverk, er det viktig at du går gjennom dokumentasjonen.

Det er like viktig å se på hver eneste linje som er i CSS-filen. Det er tider hvor du vil oppdage at det er noen regler i rammene du ikke vil ha for ditt nåværende prosjekt. Disse kan fjernes.

fjernet ubrukte css-regler

Du kan finne ut at du kan oppnå presentasjonsdetaljer på en mer kortfattet og elegant måte …

Dette er kanskje ikke det du vanligvis bruker, men hvis det fungerer, kan dette gi en renere ramme. Når du vet om dem, hjelper dette deg også å unngå utilsiktet duplisering av regelsett.

Den samme informasjonen gjelder også for tilbakestillinger. Når du bruker tilbakestillinger, hjelper de med å nøytralisere standardstil for nettleser. Hvis du er kjent med nettstedet du oppretter, er det ikke uvanlig å finne visse erklæringer som du vet at du ikke trenger.

For eksempel, på en generell blogg, vil du sannsynligvis ikke bruke dem. Bare kvitt deg med hva du ikke trenger for den spesifikke siden du bygger. Du kan sikre bedre optimalisert arbeid når du bruker et sett med regler angående tilbakestilling eller rammeverk.

I deres standardtilstand bør de imidlertid ikke godkjennes. For å holde CSS-filene lesbare og magre, se på hver erklæring individuelt og kutt ned de som er unødvendige.

5. Framtidssikker CSS

Css syntaks

Et annet nyttig CSS-optimaliseringsalternativ: skille flertallet av reglene dine fra dine layoutspesifikke erklæringer.

Tilordne oppsettet til sin egen individuelle fil hvis dette er mulig. Hvis ikke, kan det i det minste være en fordel å gi den sin egen seksjon.

Til syvende og sist, posisjonering og flyter – som er de gjeldende metodene ved bruk av CSS – var ikke ment å tjene som layoutverktøy.

Noen går så langt som å si at disse faktisk ligner på layout hacks. Det er ikke et levedyktig alternativ på dette tidspunktet, og håpet er at når de først er avtalt layoutstandarder, begynner de å få støtte fra nettlesere.

Når denne støtten skjer, skal det ikke være veldig vanskelig å bytte ut boksmodellegenskapene som er hacket opp for de som er ment for oppsett.

Akkurat nå, det beste valget er å håndtere oppsettet ditt ved å bruke de riktige egenskapene. Dette vil vanligvis kondensere sidevekten mer effektivt enn å bruke det begrensede sett med egenskaper som er tilgjengelige for å kompensere for påfunn.

6. Hold alltid oppdatert dokumentasjon angående arbeidet ditt

Enten du jobber på et nettsted som et team eller alene, er det viktig å følge med på alt du har gjort.

For eksempel, alene, kan du glemme noe du har gjort. Som et lag kan det hende at noen gjør noe, og du er kanskje ikke klar over det før du gjør endringer som kan forårsake problemer med forskjellige elementer i koden..

legge til css kommentarKodeduplikasjoner er et enormt bekymringsområde for både team og individuelle designere, spesielt når du bruker populære nettstedbyggere. Wix, Squarespace og annen nettstedbyggingsprogramvare er kjent for duplisering av kode, eller mangler den helt fra databasen.

Å bruke stilarkguider og markeringsguider er levedyktige dokumentasjonsvalg. Du kan også bruke CSS-kommentarer er et annet alternativ, og dette kan være gunstig for å dele av elementene i CSS-filer som er lange. Hvis du setter disse i stil- eller markeringsguiden, forhindrer de dem i å legge til filstørrelsen.

En av de raskeste måtene å oppblåse kode er ved å gjøre det samme arbeidet to ganger. Koding er sammensatt, så det er viktig å oppbevare nøyaktig dokumentasjon av alt du har gjort.

Hvis du jobber alene, er det ideelt å gå gjennom denne dokumentasjonen hver gang du setter deg ned for å begynne å jobbe. Når du jobber som en del av et team, må du sørge for at alle som koder i samme dokument holder seg til en fellesskapsstil eller markeringsguide slik at kodingendringer lett blir forstått av alle i gruppen.

7. Komprimere filene dine (CSS Optimization 101)

css komprimering og optimaliseringsgif

Komprimering: det er litt mer enn dette …

En effektiv måte å optimalisere CSS på er ved å bruke komprimering. Dette er en måte å sikre at filene dine er nettleservennlige selv om de er uleselige av mennesker.

Sammenlignet med arbeidskopiene vil disse være en brøkdel av størrelsen. Det er forskjellige applikasjoner som du kan dra nytte av for å gjøre komprimeringsprosessen enklere.

Disse vil utføre oppgaver, for eksempel å finne og fikse eventuelle CSS-egenskaper som overskriver hverandre, komprimerer hvitt mellomrom og leter etter sjanser til å bruke CSS-kort.

I tillegg til disse applikasjonene, kan de også hjelpe deg med å lære mer om oppgavene du kan gjøre for hånd hvis du foretrekker det. Du kan også bruke forskjellige tekstredigerere til å formatere CSS-filene dine.

De kan tjene zip-versjoner av de forskjellige CSS-filene du har. Dette gjøres vanligvis ved hjelp av PHP. Hvis du vil bruke optimaliserings- og komprimeringsverktøy, må du sørge for å gjennomgå flere alternativer før du velger det riktige for deg.

Nå er disse programmene generelt flinke til å minimere feil, men de er ikke perfekte. På grunn av dette bør du alltid gjennomgå CSS-en etter å ha brukt et program for å sikre nøyaktighet. Kode som er optimalisert og ren er kritisk for filstørrelse, men også for lesbarhet og vedlikehold.

Din tur

Prinsippene som diskuteres her er solide hensyn til CSS, men også for JavaScript, HTML og andre programmeringsspråk. Sammenlignet med gjengivelsen av nettstedet ditt, er ikke CSS-filer like fremtredende for sluttbrukeren.

Prinsippene som diskuteres her hjelper imidlertid både med å utvikle opplevelsen og brukeropplevelsen.

De fleste gode webhotellfirmaer vil hjelpe deg med CSS-optimalisering. Raskere nettsteder gjør deg til en lykkelig kunde, men mindre filer belastes heller ikke på serverne deres.

Vi har testet alle de kanadiske nettvertene, og anbefaler SiteGround. Ikke bare hjelper de deg med å optimalisere CSS-levering, men teknisk support er uten sidestykke.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map