Hastighedsoptimering af hjemmesider med garanti for en hurtig hjemmeside

Komprimering af billeder og filer

Komprimering af filer, er en eller flere handlinger som gør filer mindre end de typisk er. Der er mange måder hvorpå man kan gøre netop det. Og der er selvfølgelig ting man bør se på først.

Komprimering af billeder

Billeder kan typisk blive komprimeret ret meget uden at miste deres kvalitet. Men før du begynder at komprimere billeder, vil det være en god ide at du finder ud af hvilken størrelse billederne skal bruges i og derefter komprimere billederne korrekt.

De fleste komprimeringsværktøjer, kan også gøre billederne fysisk mindre

Minificering og komprimering af html, serverside, css og javascript

At komprimere og minificere denne type filer hjælper på mange fronter. minificere man fx serversidefiler, vil serveren arbejde hurtigere med at generere HTML koden. Og minificere og komprimere man html, css og javascriptfiler, vil de fylde mindre, og blive hentet hurtigere. Måden er blandt andet  at fjerne unødig Whitespace, linjeskift og kommentarer i programmeringskoden både CSS, serverside, HTML og JS.

Til sidst

Når du har gjort ovenstående, kan du lade serveren komprimere html, css og js filer.

Hvad kan man opnå?

Jo, reelt kan man opnå ret meget ved at gøre det, og faktisk gå hele vejen. Nogen gange ender man ud i at kode bliver lettere ulæselig, men det er noget man må tage med efter min mening. Jeg har oplevet en reduktion i det antal KB en bruger henter ned, på op imod 80%. Så det er bestemt værd at tage med.

Caching / HTML caching skal aktiveres

Selvom caching og caching plugins ikke er det jeg vil kalde reel hastighedsoptimering. Så er det alligevel noget du bør få aktiveret på din hjemmeside.

Det der typisk sker når en bruger besøger en hjemmeside er at siden, design, tekst, kald til andre kilder etc. skal genereres ud fra de data der er i databasen. Dette sker via serverside kode som fx PHP. Alt efter størrelsen på hjemmesiden, kan dette tage alt fra 0.2-2 sekunder (Også kaldet TTFB). Men når man aktiverer HTML caching går dine besøgende helt udenom den normale generering af hjemmesiden, og får i stedet en cachet udgave. Hvilket resulterer i en TTFB på omkring de 0.1-0.2 sekunder i stedet for. Husk at caching er det man aktivere til sidst, efter man har lavet den reelle optimering, det kan nemlig skjule flaskehalse som du også bør tage hånd om.

En anden effekt som caching også har, er at det aflaster serveren og skaber betydeligt bedre performance. Det er især vigtigt når man har en webshop hvor serveren til hver en tid skal kunne køre i ucachet tilstand som fx ved kurv og kassen. Og hvis ikke hele siden belaster serveren, vil kurv og kassen også køre hurtigere.

Optimer databasen

At optimere databasen er ikke så nemt som man skulle tro, det handler både om indstillinger, men også databaseplacering og opsætning af tabeller og indexes. gør man det på den rette måde, kan man få de allerede eksisterende kald til databasen, til at køre noget hurtigere, hvilket overordnet optimere både performance og loadtider.

Optimering og minimering af kald til databasen

En ting er at optimere databasen, en anden er at optimere de flere hundrede kald/læsninger som en hjemmeside typisk foretager når du besøger en side på en hjemmeside.

Det man typisk gør er at se på om de eksisterende læsninger kan optimeres på den ene eller den anden måde, der er nemlig flere måder at opnå de samme resultater på, og rigtig tit ser jeg at man kan fjerne rigtig meget støj ved at optimere disse læsninger i databasen. Yderligere vil det være en rigtig god ide hvis man minimere antallet af kald, især dem hvor resultatet kun ændre sig i ny og næ. Der er jo ikke nogen grund til at gå til databasen for så at læse det samme hver gang en bruger kommer forbi.

Valg af tema

Langt de fleste benytter temaer på deres hjemmeside som der reelt ikke er brug for, eller som tilføjer alt for mange funktioner som man alligevel ikke bruger.

Vælg det rette WordPress tema

Ja det kan virke underligt at jeg skriver wordpress tema, men sagen er den at måde hvorpå man kan installerer temaer i wordpress, er så nem at rigtig mange bare installerer temaer fordi de kan så mange ting, har indbygget editor og meget andet.

Men de begår ret ofte en stor fejl, og især set i forhold til hastighed, er fejlen ret stor og til at få øje på. Reglen gælder dog også andre systemer. Du kan læse mere om det at vælge det rette tema her

Hvad kan man opnå ved at tænke over dette

Som skrevet før, så er det til at få øje på. Det rette temavalg kan gøre en hjemmeside op imod 10-15 gange hurtigere. Men læs mere om det ovenfor.

Optimer Core Web Vitals – Google og brugerne mærker det

Ja det kan være svært at vide helt hvad Google måler på. Men det er min teori at det mest logiske ville være at se på hvornår siden over folden er klar til brug så at sige. Altså hvornår kan brugeren klikke på siden og faktisk se siden som den var tiltænkt da den blev designet.

Det er et princip som jeg siden start har optimeret ud fra, Google kalder det i dag Core Web Vitals, og lader til at have fået ret stor fokus hos Google inden for de sidste par år.

Hvordan ser man så det?

Jo, man kan bruge to parametre til at se på hvor godt det egentlig gå på siden set i forhold til dette. Onload tid og hastighedsindeks, indikerer ret kraftigt hvornår siden er klar over folden. Typisk vil et site der er godt optimeret, ikke have ret stor forskel på netop de tal.

Hvad gør man så ved det?

Der er faktisk mange ting man kan gøre ved det. Og når vi selv optimerer, ser vi blandt andet på det og mange andre ting.

• Load kun css, js og billeder når de skal bruges
• Load eksterne elementer efter onload
• Lazyload iframes
• Ryd op i fonte
• Indsæt logo og andre ikoner over folden inline
• Fjern plugins som ikke bruges
• Fjern css som ikke bruges
• Minimer brugen af eksterne ting som fx pixler, hotspot etc. Eller load det senere
• og mange flere.

Faktisk kan man sige at stort set alle optimeringer man laver, ender ud i en bedre og hurtigere loadtid som brugeren og Google både kan mærke og se