Bedre ytelse i grensenitt
I takt med at stadig mer funksjonalitet flytter fra serveren til klienten i form av Ajax-funksjonalitet, og bruken av CSS og grafikk tiltar øker også behovet for å optimere ytelse i grensesnittet. Følgende er noen nyttige tips.
Hva slags ytelse?
Hva snakker vi om når vi snakker om ytelse i grensesnittet? Vel, la oss snu på det og se på noen potensielle problemer:
- Funksjonalitet flytter fra serveren til klienten i form av Ajax-funksjonalitet = mer Javascript å laste ned
- Stadig mer forseggjorte design = mer CSS og bilder å laste ned
- Voksende Javascript stiller strengere krav til ytelse i disse for å unngå at brukeren må vente på seine script
- Forskjellige måter å organisere design på kan gi flere HTTP-forespørsler per sidevisning og andre bieffekter
Dette er selvfølgelig ikke alt som kan skape trøbbel, men det er et utvalg som illustrerer kjerneproblemet: nettverk. I grensesnittet handler optimalisering i høy grad om nettverk, fordi det handler mye om hvor fort brukeren er i stand til å laste ned alt som utgjør grensesnittet. Har du også mye Javascript må du selvfølgelig tenke på hvordan du best implementerer funksjonalitet her, no som ikke er tema for dette innlegget.
Nedlastingshastighet
For å optimere nedlastingshastighet må vi forstå de ulike bestanddelene som påvirker det.
Linjehastighet kan du selvfølgelig ikke kontrollere hos brukerne dine, men du kan sørge for at dine egne servere har god nok opplastingshastighet.
Filstørrelsen kan komprimeres på forskjellige måter for å raskere overføre data til brukeren.
Antall filer kan reduseres; de fleste nettlesere vil i utgangspunktet begrense seg til 3 samtidig nedlastinger fra samme domene på ethvert tidspunkt.
Caching. Det er mange måter å påvirke hvordan nettleseren cacher innhold på slik at du sparer tid for hver kommende sidevisning. I utgangspunktet er du interessert i at brukerne dine kun laster ned innhold fra serveren din når du vet at det er nyere enn hva de allerede har på maskinen sin. Desverre har du ikke full kontroll, og undersøkelser fra Yahoo! viser at de ser 40-60% besøk med tom cache, og rundt 20% av alle sidevisninger gjøres til enhver tid med blank cache.
Optimering av filstørrelse
Filstørrelsen kan man påvirke på mange måter. Det mest generelt nyttige tipset er å benytte gzip til å komprimere filer på serveren før du sender dem avgårde. Deretter vil nettleseren pakke opp filene før de vises til brukeren. For de fleste typer filer vil besparelsen i nedlastingstid overstige overheaden i å pakke ned og opp filene på henholdsvis server og klient.
Under Apache kan du bruke
mod_deflate for å bruke gzip.
Bilder/grafikkelementer
Bilder bør vanligvis ikke komprimeres med gzip fordi gevinsten på godt komprimerte bildefiler vanligvis er så liten at gzip-operasjonen tar mer tid enn nettverksbesparelsene gir. Det er derfor viktig at bilder komprimeres skikkelig før du legger de på plass på serveren.
Fordi det ofte er mange av dem bør grafikkelementer gis spesiell oppmerksomhet når de lagres. Det er viktig å prøve seg frem med antall farger, komprimeringsnivå og filtype for å oppnå minst mulige filer samtidig som du beholder kvaliteten. Et godt tips kan være å prøve deg frem med gif eller png på alt av småelementer for å finne hva som gir best resultat. Sålenge du ikke bruker transparens vil du kunne bruke png akkurat som gif uten problemer.
En annen måte å optimere grafikkelementer på er ved å bruke såkalte "
CSS sprites". 2 eller flere grafikkelementer som ikke trenger å repetere i både x- og y-retning kan lagres i samme fil, og inkluderes i
CSS med snedig bruk av background-position. Gevinsten her er redusert antall oppslag mot serveren.
CSS og Javascript
CSS kan på tilsvarende måte som bilder komprimeres. Måten man komprimerer en CSS-fil på er ved å strippe ut alt som ikke trengs for å oppnå ønsket resultat. I første omgang vil dette dreie seg om "luft" (mellomrom, linjeskift, tab osv) og kommentarer. I store filer kan man spare noen kilobyte på å fjerne dette.
Å komprimere CSS på denne måten for hånd er selvfølgelig en dødfødt sak. Heldigvis finnes det verktøy som YUI Compressor og lignende som gjør dette automatisk.
Også med
CSS er det mulig å spare oppslag mot serveren ved å slå sammen filer fremfor å bruke flere @import eller link-tagger.
For Javascript gjelder stort sett det samme, og nevnte YUI Compressor fungerer enda bedre med Javascript. Grunnen til at den gjør det bedre på Javascript er at den kan komprimere enkelte variabel- og funksjonsnavn i tillegg til å fjerne luft og kommentarer.
I tillegg til "minifiserere" som dette (og JsMin) finnes det programmer som kan pakke Javascript enda tightere ved å gå mer agressivt til verks i å gjøre om koden din. Et eksempel her er Packer.
Det er i den siste tiden gjort undersøkelser som tilsier at selvom Packer i utgangspunktet produserer mindre filer, gir YUI Compressor bedre resultater sammen med gzip. Dette kommer av at Packer er så kompakt at gzip ikke får gjort stort, og at Packer har en overhead når koden skal pakkes opp med en til sammenligning sein Javascript-algoritme.
Mål, mål, mål
Dette er bare toppen av isfjellet, og er man seriøs på ytelse vil man kunne gjøre mange mange flere tiltak enn de som er nevnt her. Det som er viktig hele veien når man optimerer (uavhengig av hva man optimerer) er at man måler. Bruk webanalyse til å samle data om dine besøkende for å se om det kan gi hint til hvor du bør begynne. Mål alltid to eller flere teknikker opp mot hverandre.
Usikker på om det er best å lage ett stort bilde med masse tomrom for å bruke det i en "sprite", eller bare gå for to mindre bilder (og dermed en ekstra server-henvendelse)? Test det, både med og uten nettlesercache. Tallene vil være til uvurderlig hjelp i å avgjøre slike tvilstilfeller.
Måleverktøy finnes også i form av mye omtalte Firebug. Her finner du et nettverkspanel som gir deg noen tall å gå ut ifra. For å virkelig få denne til å skinne bør du også installere Firebug-tillegget YSlow, et uvurderlig verktøy når det kommer til å optimere grensesnitt.
I tillegg til YSlow står Yahoo bak et sett med retningslinjer for optimale grensesnitt. Disse byr på noen av punktene i dette innlegget i større detalj, og flere til. De er et must å lese for alle som ønsker å lage kjappe nettsider. For de virkelig ivrige er det bare å investere i boken fra samme fagmiljø: High Performance Web Sites.
Hva er dine beste tips på ytelse i grensesnitt? Hvilke av disse teknikkene bruker du bevisst, og hvilke burde du oftere se til?
