Performance
Performance er et af de vigtigste skridt på vejen mod et succesrigt website.
Men det kan også være et af de sværeste aspekter at gøre noget ved.
Performance er vigtigt, da det kan gå ud over alt fra rangeringer på søgemaskiner,
lavere konverteringsrate og i værste fald mistet omsætning, hvis dit website er langsomt.
Selv om du har optimeret dit indhold, så det rammer målgruppe og søgeord perfekt,
kan et langsomt website holde resultaterne tilbage.
Hvorfor er mit website langsomt?
Et langsomt website er typisk en blanding af flere faktorer.
Den server dit website ligger på, kan være med til at holde dit websites hastighed nede.
Det kan enten være gammel hardware, at den ikke har nok ressourcer eller at den ikke er optimeret til netop dit CMS.
En typisk server bliver delt blandt 100-vis af andre websites, det kaldes Shared Hosting og ses oftest hos de billige udbydere.
På sådan en server har alle websites en lille kvote af ressourcerne der er til rådighed. Hvis dit website bruger for meget af kvoten, bliver websitet begrænset. Det kan ikke følge med, og besøgende vil uploade at det enten loader meget langsomt, eller slet ikke.
Jo flere billeder, videoer, animationer og fancy ting du har på dit website, jo flere ressourcer kræver det. Det samme gør flere besøgende.
Men hvad kan man så gøre ved det?
Enten kan man investere i en større og dyrere server, det er den lette (og hurtige) løsning. Alternativt kan man kigge på hvilke værktøjer der er til rådighed.
Her er en række af de værktøjer vi arbejder med:
Caching i 3 lag
Caching er et spøjst begreb, oftest associeret med at ændringer af indhold på et website ikke kan ses på forskellige medarbejderes computere, til stor frustration.
Men caching kan også være et af de kraftigste værktøjer, til at sikre høj performance, selv på en lille server.
Caching betyder at downloadet indhold, tekst, billeder, videoer og endda kode, gemmes lokalt i din egen browser. Næste gang du besøger det samme website vil det loade meget hurtigere, fordi indholdet allerede ligger i din browser.
Det er det der gør, at din udgave af et website kan være anderledes end din kollegas – fordi din cache er nyere.
Der er flere niveauer af caching.
Browser caching, som nævnt herover, foregår på brugerens egen computer.
Page caching foregår på server-niveau.
Object caching foregår på database-niveau.
Page caching
Her gemmes alle dit websites sider i hukommelsen på serveren, hvilket sikrer at selv førstegangsbesøgende får en hurtig oplevelse. Det bygges oftest op, så cachen bliver ryddet når man opdaterer en side. Dette sikrer at besøgende altid får det nyeste indhold.
Object caching
På et WordPress site ligger alt indholdet i en database. Der er references til hvilke billeder der vises på hvilke sider, hvordan relationen er mellem den enkelte side og andre sider og meget andet.
Hver gang en side loades sendes der en masse data frem og tilbage mellem server og database, for at sikre at det korrekte indhold bliver vist. Ved at gøre brug af object caching, kan alt dette data blive gemt i serverens hukommelse.
Optimering af billeder
Et stort billede kan være destruktivt for et websites performance, da det medfører unødvendig load-tid, ressource-forbrug på serveren og dårligt brugeroplevelse.
En tommelfingerregel er aldrig at uploade et billede der er større (pixel-dimensioner) end den boks det skal bruges i.
Men selv et billede på 400x300px der passer perfekt i sin boks kan fylde for meget.
Et billede indeholder en masse data, især hvis det er taget med et kamera, hvor EXIF-data (lokation, tidspunkt og meget mere) gemmes.
Derudover kan der være gemt data om unødvendige farver deri – forestil dit et billede af et skib på et hav. Det har ikke noget rødt, men der er stadig gemt data i billedet om netop den røde farve, og alle nuancerne heraf.
Derudover er der stor forskel på hvilken type format billedet gemmes i, og hvor meget data der følger med. De forskellige formater komprimerer netop data på forskellige måde.
Således er et PNG-format langt bedre til at gemme grafisk indhold, hvorimod et JPG-format komprimerer ægte billeder optimalt.
Hvordan kan det løses?
Der findes et utal af værktøjer, der kan rydde op i billededata. Men det er vigtigt at have for øje hvilket formål man har.
Er det blot et par billeder der skal optimeres og uploades til websitet, som en marketingmedarbejder sagtens kan klare. Eller skal processen automatiseres ved hjælp af en service, fordi der er mange medarbejdere der arbejder med billeder på websitet?
Et af de hurtige værktøjer, der integrerer med Photoshop er TinyPNG og TinyJPG. Til Mac findes der en lille app, imageoptim, som du blot trækker billederne ind i, den optimerer og gemmer dem samme sted.
En mere automatiseret og robust løsning, der ikke kræver uddannelse af medarbejdere, kan man integrere websitet med imgix, en webservice, hvor billeder automatisk uploades fra websitet og optimeres.
CDN (Content Delivery Network)
En CDN gør at dit website loader hurtigt i alle dele af verden, men er ikke kun beregnet til internationale websites.
Ved at bruge en CDN bliver ens website for det første replikeret på servere rundt om i hele verden, dette sikrer at det loader på samme vilkår for besøgende tæt på din server, som dem langt væk fra den.
I en CDN er der typisk indbygget en række performancemæssige goder. CDN’en kan holde dit website kunstigt i live, hvis serveren er nede, da der ligger en cache i selve CDN’en.
Derudover kan den gøre at statiske assets (koden dit website består af) loades direkte fra den, fremfor fra din server. Dette giver flere ressourcer til din server, der dermed gør den hurtigere.
Billeder kan også offloades til en CDN så de, på samme vilkår som statiske assets, ikke loades fra din egen server, men fra CDN’en. Dette kan kobles samme med et billedeoptimeringsværktøj som imgix til at optimere billede performance endnu mere.
Optimering af videoer
Videoer er, ligesom billeder, en stor synder når det kommer til et websites performance. De fylder meget, men ofte loades de også før det overhovedet er nødvendigt. Foruden den bagvedliggende optimering af selve videoens fil og størrelse, er det relevant at kigge på håndtering af video på websitet.
Hvis du embedder en YouTube video på dit website vil den, ud af boksen, loade en masse data for den besøgende. Fordi den skal bruge data til at vise ting såsom video-afspilleren, play-knapper, thumbnail og andet information. Hvis din besøgende aldrig havde i sinde at se videoen, har det ikke gjort noget positivt ved deres oplevelse.
En langt bedre løsning er at loade det nødvendige data, når den besøgende vælger at ville se videoen. Altså ved klik.
På den måde kan du også have et uendeligt antal videoer på en side, uden at det går synderligt ud over performance, som hvis det var embeddede videoer.
Skal vi optimere dit WordPress website?
Få et uforpligtende kig på dit website.