Hastighedsoptimering – Sådan får du et hurtigt site

af | mar 17, 2020

 Hastigheden på dit website, har en af de mest afgørende roller i alle dele af online marketing. Det er med til, at afgøre, om dine kunder konverterer på dit website, om dine besøgende bliver der, klikker videre – og om de kommer igen.

Du kender det selv. Bare at vente 5 sekunder på, at en hjemmeside renderer, kan føles som en evighed og medføre, at vi forlader sitet til fordel for et andet.

Blot så alle er med, er rendingstiden, den tid det tager for en browser, at fortolke og vise indholdet på en URL.

Men hvordan gør du din hjemmeside hurtig?

Hastighedsoptimering er en videnskab i sig selv. Der ligger mange områder i det. Alle elementer på dit website, kan potentielt forringe hastigheden. Kodningen, billederne, webserveren hjemmesiden har adresse på, hvilken rækkefølge elementerne bliver loadet – er noget, du kan få optimeret, så hastigheden bliver bedre.

Du vil i dette indlæg, få mere indsigt i, hvad du skal optimere. Men lad os først, komme lidt mere ind på, hvad du får ud af en god hastighed på dit website.

God hastighed giver mere trafik og flere kunder

Amazon har tidligere fremlagt en case, der indikerer at for hvert 100 ms (0,1 sekund) ekstra load tid, koster dem 1% i omsætningen. Derfor er hastighedsoptimering, noget de fleste også kigger på, når det kommer til konverteringsoptimering.

Google har fremvist et andet eksempel – som også er interessant for trafikken – det er dog ikke overraskende; nemlig at load tiden øger afvisningsprocenten (hvor mange der forlader sitet uden, at foretage en handling).

En god hastighed giver dit website mere trafik og flere kunder. Du får bedre rankings på Google, ved at have et hurtigt website. Google har flere gange meldt ud, at desto bedre hastigheden på et website er, desto bedre placeringer vil du få. Og når man tænker over, at afvisningsgraden også er en del af Googles algoritme, giver netop denne del også rigtig god mening udover, at det er en direkte ranking parametre.

Landingssideoplevelsen i Google Ads Quality Score, bliver også bedre, hvis websitet er hurtigt. Når man har en højere Quality Score vil man spare penge grundet en lavere klikpris og derved få mere trafik ud af de samme budgetter.

Generelt vil de besøgende, der måske ellers var smuttet igen, med højere sandsynlighed købe noget fra websitet eller kontakte dig.

Du hører derfor aldrig en konsulent sige, at et fokus på hastighedsoptimering er en dum idé – det vil hjælpe alle dine andre investeringer i online marketing.

Værktøjer til at teste hastighed

Personligt bruger jeg flere forskellige værktøjer, til at tjekke hastigheden på et website – eller en konkret underside derpå.

Men der er to meget nemme (og gratis) værktøjer, der vil kunne hjælpe langt de fleste med, at finde de “skyldige” årsager til en dårlig hastighed. Har du tjekket dit websites hastighed før, kender du dem nok – nemlig PageSpeed Insights fra Google og Website Speed Test fra Pingdom.

Begge værktøjer har jeg indsat på denne side i en iframe, så du kan teste din hastighed uden at hoppe videre, mens du læser resten af dette indlæg.

PageSpeed Insights

PageSpeed Insights giver dig en score på X ud af 100, på både mobil og desktop. Denne score fortæller, hvor godt siden er optimeret til hastighed. Det er altså ikke den konkrete tid, det tager at loade siden, værktøjet viser – men hvor godt optimeret siden er ift. hvad man kunne have gjort.

Udover at give en score, kommer værktøjet også med konkrete idéer til, hvad du skal arbejde med, og i flere tilfælde også, hvordan du optimerer området.



Test værktøjet i fuld version her.

Pingdom Tools

Pingdom tools viser load tiden, det har taget, før hjemmesiden er fuldt renderet. Samtidig med dette, får du en “Performance grade” der indikerer hvor godt, hjemmesiden er optimeret. Det er vigtigt, at du vælger den server, der er tættest på dig (jeg bruger typisk London eller Frankfurt).

Det fede ved Pingdom, er at de forskellige elementer på siden, bliver visualiseret i den rækkefølge, de bliver renderet i. Således kan du finde frem til, hvor lang tid det at rendere de enkelte elementer. Jeg bruger bl.a. værktøjet til, at finde frem til om konkrete elementer – såsom et script – er årsagen til en dårlig hastighed.



Test værktøjet i fuld version her.

Hvad bør du optimere på dit website?

Et kort men godt svar er; Så meget som muligt!

Hastighedsoptimering handler om, at gøre et website hurtigere – og hvad, du bør optimere på dit website, er ikke nødvendigvis de samme syndere, som jeg har haft på mit.

Forskellige CMS’er, temaer, brug af kode og billeder, gør at det er forskellige udfordringer, man står med. Af netop denne årsag, vil jeg beskrive de mest almindelige dele af hastighedsoptimering, du bør undersøge, om du kan optimere.

Få optimeret dine billeder

Load tiden kan forringes af rendering af et “tungt” billede. Hvis billedet fylder mange megabyte, kan det øge load tiden med mange sekunder.

For at gøre dit website hurtigt, bør du derfor hele tiden, optimere dine billeder. Der findes i dag flere forskellige teknologier til formålet – både til komprimering af billederne, så de fylder mindre – men også teknologi såsom LazyLoad, hvor billedet først bliver indlæst, når det er relevant.

De nyeste webformater til billeder

I mange år, har man brugt .png, .jpeg og .gif, som standard formater for billede-filer. Dog er formaterne typisk for “tunge” i forhold web i dag, da de i sig selv ikke er komprimeret.

Google har udviklet et helt nyt format til web – WebP. Formatet er en komprimeret udgave af et billede, lavet til web. WebP er en del hurtigere end de klassiske PNG, eller JPEG. Og jeg kan klart anbefale, at du overgår til dette format. Der er lige nu nogle enkelte browsere, der ikke understøtter WebP, hvorfor det kan være en god idé, at lave et serverside tjek, der kontrollere browseren før den eksekverer WebP.

Anvender du JPEG 2000 eller JPEG XR, som også er nye standarder for billede-filer, er du også på den sikre side. Det vigtigste er blot, at du i dag anvender billede-formater, der ikke sløver for meget på hastigheden.

Hvis du anvender et af de tidligere billede-formater, og tester dit website i Google PageSpeed Insights, vil du også få en meddelse om, at du bør skifte dem ud med ét af de tre nye webformater.

Der findes flere muligheder for, at konvertere til WebP. Nogle af de løsninger, vil jeg fremvise senere i indlægget. Hvis du ikke har WordPress, bør du undersøge hvilke plugins, der findes til dit CMS. Alternativt kan du downloade Googles eget konverteringsværktøj her.

Komprimering af billeder

De fleste ved, at billedets størrelse har en afgørende betydning for hastigheden på et website. Derfor er komprimering af billeder ekstremt vigtig. Hvis du ikke kan anvende WebP, JPEG 2000 eller JPEG XR, bør du som minimum sørge for, at komprimere dine billeder.

Der findes flere plugins til de forskellige CMS’er, der kan komprimere billederne automatisk. Også helt uden at pixelere billederne. Du kan i afsnittet om WordPress få konkrete plugins, du bør kigge på, hvis du anvender det som CMS.

Bruger du ikke WordPress, kan jeg anbefale TinyPNG. Her uploader du manuelt dine billeder, hvor værktøjer vil komprimere disse.

Dertil er det en god idé, at have billedet i den størrelse der vises. Hvis dit billede er 1000×1000 pixels, men det vises i 100×100 pixels – kan du spare en del ved, at benytte den korrekte størrelse, som billedet vises i.

Lazy Load

Lazy Load er en teknologi, der bruges til at loade elementer, når de er på skærmen og ikke før. Man anvender JavaScript til, at rendere et element, når det er nødvendigt at fremvise (når elementet er i viewporten).

Det mest benyttede formål ved brug af Lazy Load, er til rendering af billederne på en side. Jeg anbefaler Lazy Load, hvis det bruges og kodes rigtigt. For med Lazy Load, vil load tiden ikke være unødvendig høj, selvom man har mange billeder, der måske alligevel ikke bliver scrollet til. Har du en side med mange billeder, vil Google PageSpeed også anbefale en teknologi som LazyLoad.

En anden form for Lazy Load, er ved visning af indlæg i et nyhedsarkiv, eller produkter i en kategori på en webshop. Selvom der er mange fordele ved, at bruge Lazy Load inden for hastighedsoptimering, kan det også give nogle SEO-mæssige udfordringer.

Så pas nu lidt på: Hvis du anvender eller overvejer Lazy Load, bør du alt andet lige, vide dig sikker på, at Google kan indlæse og fortolke de elementer der anvender Lazy Load.

Lazy Load implementeres med JavaScript. Og Google er ikke verdensmester til fortolkning af netop JavaScript. Du kan derfor risikere, at Lazy Load vil skjule indhold for Google, der egentlig skal bruges i SEO sammenhæng (billeder, tekst og links). Så husk nu, at konsultere med din SEO konsulent, før du implementerer Lazy Load!

Sprites

Sprites kaldes også CSS sprites. Det er kort fortalt, en metode hvorpå CSS sammenlægger flere billeder til ét billede. På denne måde skal browseren downloade færre filer, og load tiden bliver forbedret.

Metoden kan bruges i forskellige sammenhænge – hvis du eksempelvis har ikoner fra sociale medier, kan du i stedet for, at have billederne enkeltvis, sammenlægge dem til ét billede, som browseren skal downloade. Det kunne også være, at du havde en masse brand logoer som reference, og disse blev sammenlagt til et billede i stedet for 10.

Sådan klarer du CSS

CSS er kodesproget, der bruges til styling af HTML elementer. CSS kan bruges i koden på 3 måder: Intern CSS, Inline CSS og ekstern CSS.

Før jeg beskriver de 3 forskellige metoder, er det vigtigt at vide; CSS er essentielt for at have et pænt website – men samtidig, kan “for meget” CSS også være en hastighedsdræber. Derfor er det vigtigt, at CSS der ikke benyttes på en pågældende side, der ikke anvender det kode.

En sidste ting, der også er vigtig er, at man bør komprimere sin CSS, så den ikke fylder for meget.

Nu til de 3 forskellige metoder!

Intern CSS

Intern CSS er klart, at anbefale, når det kommer til hastighedsoptimering. Ved denne metode, vil man have alt CSS kode i <head> og derfor vil CSS’en sammen med øvrigt, blive fortolket af klienten (browseren) som noget af det første. Samtidig skal klienten, ikke hente en masse CSS fra eksterne filer.

Inline CSS

Inline CSS er en metode, hvorpå du tillægger “style” som attribut til HTML elementer, der kan styles. Herpå kan du angive størrelse, farve mm. på det pågældende element, uden det er nødvendigt, at indsætte nyt CSS i enten en ekstern fil, eller i toppen af koden og lave en henvisning til elementet.

Ekstern CSS

Modsat intern- og inline CSS, bruger man ved ekstern CSS en ekstern fil. Filen hedder typisk “stylesheet.css” og kan være på ens egen webserver, såvel som en ekstern webserver. Ekstern CSS har i mange år været den mest populære, og effektive metode til håndtering af CSS – udelukkende, fordi det har været “nemt” at gøre på denne måde og alt er samlet et sted.

Ulempen ved eksterne CSS filer, er at klienten skal downloade en fil, der er henvist til i koden, og samtidig fortolke den, før resten af HTML’en fortolkes.

Hvis du af en eller anden årsag, ikke ønsker at bruge intern CSS, kan du i stedet overveje sammenlægning af dine eksterne CSS filer. Det er klart desto flere CSS filer, der skal downloades, desto længere tid vil det tage, at loade en side. Det afhænger dog også af, hvilken version din protokol (HTTP) er af – men mere om dette, i afsnittet om HTTP/2.

Opsummering – sådan optimerer du CSS for bedre hastighed:

  • Overvej benyttelse af intern CSS.
  • Hvis du anvender HTTP/1.1: Sammenlæg CSS filer, hvis du i stedet ønsker brug af ekstern CSS.
  • Hvis du anvender HTTP/2: Opdel dine CSS filer
  • Fjern unødvendig CSS kode, der ikke benyttes på en pågældende side.
  • Komprimer CSS koden, så den ikke fylder mere end den behøver.

Optimering af HTML

HTML kan hurtigt fylde unødvendig plads. Optimering af HTML koden, for bedre hastighed, er faktisk relativt lige til. Ligesom alt andet kode, bør du sørge for, at den bliver komprimeret. Koden kan på den måde fylde færre kilobytes.

Det er også vigtigt, at kode der ikke, har nogen betydning bliver fjernet. Du bør derfor fjerne kommentarer såsom: <!– HTML kommentar –>

Ofte ser jeg også, at der på hjemmesider, er en masse overflødige meta koder – enten nogle der ikke giver mening eller nogle, der ikke bruges mere – fjern disse.

For at opsummere, hvordan du optimerer HTML:

  • Komprimer koden, så den fylder mindre
  • Fjern kommentarer, der ikke bruges
  • Fjern overflødige meta koder

JavaScript – Få det nu fikset

JavaScript er scripting kode, der kan gøre en side interaktiv. Koden kommunikerer med klienten, og udføres med inputs fra browseren uden at hente data fra en database – dette kan ske, selv efter siden er loadet.

De fleste bruger JavaScript – det bliver i høj grad brugt til tracking (Google Analytics, Facebook Pixel mm.), kontaktformularer, tilføjelse af produkter til indkøbskurv mm.

JavaScript kan både skrives i <head> og i <body> og eksekveres ligeledes.

Den største udfordring ved JavaScript ift. hastighedsoptimering er, hvis man ikke har taget højde for, hvordan koden skal eksekveres, kan det pause fortolkningen af HTML. Det vil medføre unødvendig mere load tid.

Det vender vi tilbage til.

JavaScript bør som al andet kode, også komprimeres, så det ikke fylder “for meget”. Kodesproget kan inkorporeres i koden på to måder – Intern JavaScript og Ekstern JavaScript.

Intern JavaScript

Intern JavaScript er hvorpå, at JavaScripten bliver kodet ind i HTML dokumentet – hvilket klart er at foretrække. På denne måde, skal klienten ikke hente koden fra en ekstern fil.

Ekstern JavaScript

Ekstern JavaScript er henvisning til en ekstern fil udenfor HTML dokumentet, hvor koden er skrevet og henvist til fra HTML dokumentet. Her skal klienten altså hente et nyt dokument, for at kunne downloade scriptet.

Eksekvering af JavaScript

Der er 3 måder, man kan eksekvere JavaScript på, hvilket har en indflydelse på hastigheden – Normalt, Asynkront eller Deferred.

Normal JavaScript
Hvis man ikke har taget højde for, hvordan JavaScript skal eksekveres, vil koden hedde <script> – her vil klienten fortolke HTML indtil, den finder JavaScriptet. Når JS koden forekommer, vil HTML fortolkningen pauses for i stedet, at downloade og eksekvere scriptet, før HTML fortolkningen går videre.

Dette vil altså medføre, at load tiden stiger, og give fænomenet kaldt “render blocking”. Hvis du i Google PageSpeed Insights får meddelelsen “Fjern gengivelsesblokerende JavaScript” er det derfor.

Async
En metode til, at løse udfordringen med “render blocking”, er tilføjelse af “async” til dine scripts: <script async>.

Ved at loade dine scripts asynkront, vil HTML’en ikke pauses, mens et script downloades, men først pauses når scriptet eksekveres og derefter downloade resterende HTML.

Defer
Med defer eksekveres koden efter al HTML er fortolket. Her bruger man <script defer>.

Denne metode fjerner også “render blocking”. Deferred JavaScript vil ikke pause fortolkningen af HTML, da scriptet downloades mens HTML fortolkes og eksekveres først, når HTML er eksekveret.

Nedenfor, kan du se en visualisering af de 3 forskellige metoder til eksekvering af JavaScript:

Hvilken metode, du bør vælge afhænger af, hvilke scripts det drejer sig om og hvilken indvirkning, de har på dit website.

Opsummering af JavaScript:

  • Sørg for at komprimere din JavaScript kode.
  • Fjern unødvendig brug af JavaScript.
  • Overvej om du kan gøre brug af Intern JavaScript.
  • Sørg for at din JavaScript, ikke har et render blocking issue (vælg en metode til eksekvering).

Serveren og dets konfigurations betydning

Serveren har en essentiel betydning for, om dit website loader hurtigt. Det er egentlig lige gyldigt, hvor meget du optimerer, på dit website, hvis din webserver ikke tillader, sitet at være hurtigt. Der kan være mange årsager til, at et webserver er langsomt.

Hosting løsninger

Hvis du deler din webserver med en masse websites, vil alle disse websites være med til, at belaste serveren og derved vil dit websites load tid influeres af de andre.

Hvis du er seriøs omkring dit website og har et behov for konstant oppetid, eller virkelig en god load tid – bør du ikke benytte dig af en klassisk shared hosting løsning.

Du bør i stedet overveje en cloud baseret løsning eller en dedikeret server. Ved en dedikeret server løsning, ejer du en webserver med kun dit website på. Det kan dog være dyrt.

Medmindre du har flere 100.000 besøgende om måneden, bør du i stedet overveje en cloud baseret løsning.

I modsætning til en dedikeret og en shared host, bruger en cloud baseret løsning mange servere. Derved er oppetiden typisk bedre og vælger man en rigtig hosting løsning, vil man få rigtig gode resultater på hastigheden.</