Gjør nettsiden din raskere

Måten du håndterer CSS og JavaScript på ditt nettsted kan påvirke lastetiden din drastisk. Her får du tipsene til raskere nettsider.

Reduser antall HTTP-request

80% av tiden som brukes på å laste ned en nettside består av såkalt front-end. Det meste av denne tiden brukes til å laste ned alle komponentene på siden; bilder, stilark, skripts, Flash og så videre.
Reduser antall komponenter som skal lastes ned, og antallet HTTP-forespørsler vil automatisk reduseres. Dette er nøkkelen til en raskere nettside.

En måte å redusere komponenter som skal lastes ned er å forenkle sidenes design. Men du kan også lage flotte sider og samtidig opprettholde rask responstid. Vi skal ta for oss noen enkle teknikker for å redusere HTTP-forespørsler, uten at det går på bekostning av designet.

Kombinere filer

Ved å kombinere og sette sammen filer vil du kunne redusere antall filer som lastes ned. Du kan sette sammen alle scriptene du bruker til én fil, det samme med stilsett. Å kombinere filer på denne måten kan gi deg en utfordring dersom scripts og stilsett varierer fra side til side, men det er ikke vanskelig å opprettholde full funksjonalitet allikevel.

CSS-sprites

Bruken av CSS-sprites er en en meget foretrukken metode for å redusere antall bilde-forespørsler. Kort fortalt er en CSS-sprite mange bilder satt sammen til ett. Man definerer deretter hvilket bilde man skal bruke for et element via CSS, ved hjelp av background-position.

Tidligere ble CSS-sprites mest bruk til navigasjonsmenyer basert på bilder, men man ser stadig at flere og flere nettsteder benytter seg av CSS-sprites på hele eller deler av nettstedet. Et kombinert bilde har ofte redusert bildestørrelse i forhold til å laste ned alle bildene separat, i tillegg til at du slipper unna med mange HTTP-requests.

Det kan være vanskelig for nybegynnere å forstå CSS-sprites, så vi tar med et eksempel her.

Jeg har gjort klart et eksempel på denne siden, hvor du kan se ITpro’s tidligere navigasjonsmeny. Opprinnelig bestod menyen av 12 bilder/elementer som måtte lastes ned til brukeren. For å optimalisere, ble alle bildene satt sammen til ett enkelt bilde. Posisjonering av bakgrunnsbildet for hvert menyelement gjør at vi kun laster inn bildet en gang til brukeren.

Dermed sparer vi tid, ressurser og gir en bedre brukeropplevelse.

Husk at 40-60% av dine daglig besøkende besøker ditt nettsted for første gang – og dermed med tomt cache. Det å gjøre nettstedet raskt for førstegangsbesøkende er avgjørende, og antall HTTP-request er dermed kritisk.

Sett inn stilsettet øverst

Stort sett er det vanlig praksis å plassere stilsettet øverst i dokumentet, mellom HEAD-taggene, og dette gjør at nettsiden kan sende ut innholdet progressivt. Vi ønsker at leseren skal få servert innholdet så fort som mulig, og dermed er det viktig å gi brukeren et visuelt inntrykk raskt. Dette vil også forbedre den totale brukeropplevelsen.

Årsaken til at stilark ikke bør plasseres nær bunnen av dokumentet er at siden ikke kan lastes inn progressivt. Dermed vil innholdet lastes først, og deretter må stilsettet lastes inn, slik at nettsiden blir komplett. Ofte kan det bli en blank side mens man venter på stilsettet.
HTML-spesifikasjonen stedfester også at stilark skal være inkludert i HEAD-seksjonen.

Last inn scripts til slutt

I motsetning til stilsettet, bør JavaScript lastes inn nederst i dokumentet. Problemet med JavaScript er at de blokkerer parallelle nedlastinger. HTTP/1.1-spesifikasjonen tillater at det lastes ned opp til to elementer parallelt per vertsnavn. Bruker du flere vertsnavn, kan du ha flere parallelle nedlastinger. Derimot, når det gjelder scripts, vil ikke nettleseren starte flere nedlastinger – selv på forskjellige vertsnavn.

I enkelte situasjoner vil det være vrient å flytte skript til bunn i dokumentet. For eksempel, dersom du benytter document.write til å sette inn en del av sidens innhold, kan ikke den bare flyttes lavere på siden. Det kan også være andre situasjoner, men ofte kan det finnes løsninger for å unngå slike situasjoner.

Sider:

Produkttest: Fitbit Charge 4

Fitbit har kanskje ikke oppdatert utseende på sin nyeste Charge, men det er innsiden som teller, som de sier og der har det skjedd ting. Det amerikanske selskapet ble kjøpt av Google for 2,1...