Innhold
- 01. Bruk grunne velgere
- 02. Bruk stenografiske egenskaper
- 03. Bruk hintet om forhåndsinnlasting av ressurser
- 04. Sletting av oppsigelser med csscss
- 05. Gå en ekstra mil med cssnano
Har du tenkt på størrelsen på nettstedets CSS? Hvis stilarket ditt ballonger, kan det forsinke gjengivelse av sider.
- 16 topp CSS animasjonseksempler
Selv om CSS ikke er den største aktivatypen du vil tjene, er det en av de første nettleseren oppdager. Siden nettleseren er blokkert fra å gjengi siden til CSS er lastet ned og analysert, må den være så mager som mulig. Her er fem tips for å hjelpe deg med å komme dit.
Har du et komplekst nettsted? Du trenger den perfekte webhotelltjenesten. Eller hvis du vil lage et nettsted uten oppstyr, kan du prøve en nettstedbygger.
01. Bruk grunne velgere
Foreldrene dine fortalte deg at grunnhet ikke er en dyd, men når det gjelder CSS, tar de feil. Brukes konsekvent, kan grunne velgere trimme kilobyte av store stilark. Ta denne velgeren:
nav ul li.nav-element
Dette kan uttrykkes mer kortfattet:
.nav-element
I tillegg til å hjelpe til med å holde CSS-glatt, vil nettleseren også gjengi elementene som målrettes av grunne velgere raskere. Nettlesere leser velgere fra høyre til venstre. Jo dypere velgerne er, jo lengre tid tar det for nettleseren å gjengi og gjengi elementene de velgerne brukes på. For komplekse DOM-er som ofte flyter tilbake, kan korte velgere også kutte ned på jank.
Ideelt sett vil du at velgerne skal være så grunne som mulig, men dette betyr ikke at du skal kutte alt ned til beinet. Noen ganger trenger du ytterligere spesifisitet for å utvide komponentene. Slå den rette balansen, men vær også pragmatisk.
02. Bruk stenografiske egenskaper
Dette virker som sunn fornuft, men du vil bli overrasket over hvor ofte langhåndseiendommer brukes unødvendig. Her er et eksempel på noen langhåndseiendommer i bruk:
skriftstørrelse: 1.5rem; linjehøyde: 1.618; font-family: "Arial", "Helvetica", sans-serif;
Det er mye CSS! La oss ordne det:
font: 1.5rem / 1.618 "Arial", "Helvetica", sans-serif;
De font stenografisk eiendom kondenserer flere erklæringer til en praktisk one-liner som tar mye mindre plass.
I eksemplet vist ovenfor bruker stenografien omtrent 40 prosent mindre plass enn dens tilsvarende. Det er ikke så lesbart ved første øyekast, men syntaksen blir en annen natur etter at du har brukt litt tid på å bruke den.
Selvfølgelig, font er ikke den eneste stenografien som er tilgjengelig for deg. For eksempel, margin kan brukes i stedet for lengre egenskaper som margin-topp, margin-høyre og så videre.
De polstring eiendom fungerer på samme måte. For flere måter å rydde opp i CSS, tilbyr Mozilla Developer Network en nyttig liste over referanse for stenografiske eiendommer.
Hva om du trenger å overstyre en verdi lenger nede i kaskaden? La oss for eksempel si at du har et overskriftselement som må endre skriftstørrelsen for større skjermer.
I dette tilfellet bør du bruke det mer spesifikke skriftstørrelse eiendom i stedet:
h1 {font: 1.5rem / 1.618 "Arial", "Helvetica", sans-serif; } @media (min bredde: 60rem) {h1 {skriftstørrelse: 2rem; }}
Dette er ikke bare praktisk, det øker også komponentfleksibiliteten. Hvis noen annen del av den underliggende font egenskapen er endret, vil disse endringene percolate opp til større skjermer. Dette fungerer bra for komponentoverstyringer der en ny kontekst krever en annen behandling.
03. Bruk hintet om forhåndsinnlasting av ressurser
De forhåndslast ressurshint kan gi nettleseren et forsprang på å laste inn CSS på nettstedet ditt. De forhåndslast ressurshint ber nettleseren om å starte en tidlig henting av et aktivum.
Du kan angi det som en lenke> tag i HTML:
link rel = "preload" href = "/ css / styles.css" as = "style">
Eller som en HTTP-overskrift i serverkonfigurasjonen:
Lenke: /css/styles.css>; rel = forhåndslast; som = stil
I begge disse scenariene, forhåndslast gir nettleseren et forsprang på lasting /css/styles.css. Ved hjelp av forhåndslast i en HTTP-overskrift er å foretrekke, siden dette betyr at nettleseren vil oppdage hintet tidligere i svarhodene, i stedet for senere i svaret.
En annen grunn til å bruke forhåndslast i en HTTP-overskrift er at den vil starte en server push-hendelse på de fleste HTTP / 2-implementeringer. Server push er en mekanisme der eiendeler presses preemptively til klienten når forespørsler om innhold blir gjort, og det gir ytelsesfordeler som ligner på inline CSS.
Server push er ikke tilgjengelig på HTTP / 1. Imidlertid bruker forhåndslast i et HTTP / 1-miljø kan fremdeles forbedre ytelsen.
04. Sletting av oppsigelser med csscss
Det kan lønne seg å sjekke CSS-en din for dupliserte regler med en redundanskontroll. Ta det rubinbaserte verktøyet csscss, for eksempel.
Ruby-brukere kan installere den med:
perle installere csscss
Når du er installert, kan du undersøke CSS for oppsigelser slik:
csscss -v styles.css
Denne kommandoen viser hvilke velgere som deler regler som du kan kopiere for å spare plass:
{h1} OG {p} del tre erklæringer - farge: # 000 - linjehøyde: 1.618 - margin: 0 0 1.5rem
Du kan flytte dupliserte regler under en velger:
h1, p {farge: # 000; linjehøyde: 1.618; margin: 0 0 1,5rem; }
Du vil bli overrasket over hvor mye plass denne prosessen kan spare i store prosjekter. Bruke --hjelp alternativet for å se flere kommandoer du kan bruke til å tilpasse ting videre.
05. Gå en ekstra mil med cssnano
For kirsebæret på toppen kan du bruke cssnano - en node og et PostCSS-avhengig verktøy. cssnano minifiserer ikke bare CSS, det gjør mange fokuserte optimaliseringer som kan redusere CSS-en din ytterligere. Installer det på systemet ditt med npm slik:
npm i -g cssnano-cli
Bruk den deretter til å optimalisere CSS:
cssnano styles.css optimalisert-styles.css
Hvis kjøring av kommandoer ad hoc ikke er din stil, kan du automatisere cssnano med et build-system. Slik bruker du cssnano i en gulpfile:
const gulp = krever ("gulp"); const postcss = krever ("gulp-postcss"); const cssnano = krever ("cssnano"); const buildCSS = () => {return gulp.src ("css / styles.css") .pipe (postcss ([cssnano ()]) .pipe (gulp.dest ("css / optimized"));}; const watch = () => {gulp.watch ("css / styles.css", buildCSS);}; exports.buildCSS = buildCSS; exports.watch = watch;
De buildCSS oppgave leser CSS du skriver i css / styles.css, rør deretter optimalisert utgang til css / optimalisert katalog. De se oppgaven starter buildCSS når endringer oppstår i css / styles.css.
De se oppgaven kan deretter påberopes i terminalen slik:
gulp watch
Med litt tilpasning kan du bygge en arbeidsflyt som utfører denne spesifikke optimaliseringen i tillegg til andre CSS-relaterte oppgaver, for eksempel å bygge Sass / Less-filer, autoprefixing og mer.
Vil du lagre nettsidene dine? Eksporter som PDF-filer og lagre pålitelig skylagring.
Denne artikkelen dukket opprinnelig opp i nett, verdens ledende magasin for webdesignere. Abonner her.
