“Hvorfor er min hjemmeside så langsom?”

Performance – eller load hastighed – er et vigtigt emne at forstå, for alle der har en hjemmeside.

Jo hurtigere siden loader, jo mere sandsynligt er det, at brugeren forbliver på siden, og får set indholdet. Og jo flere der bliver, jo flere salg / nyhedsbrevstilmeldinger / reklameindtægter etc. får man.

Men tit og ofte er hjemmesidens ejer slet ikke bevidst om, hvad der kan gøre deres side langsom, og de kan komme til at begå nogle klassiske fejl i den forbindelse.

Hvad skal du være opmærksom på

De(n), der har ansvaret for at oprette indhold på en hjemmeside, har lige så meget ansvar for load-hastigheden som udvikleren har.

Udvikleren kan, når siden kodes op, gøre sit for at der ikke loades flere kodefiler end nødvendigt, at de loades senere om muligt, og at noget af indholdet (typisk billeder) loades gradvist ved scroll, så det kun er det indhold, der er umiddelbart synligt, der skal loades i udgangspunktet. Det er et godt udgangspunkt.

Men alt andet kommer ovenpå dette. Hvert stykke indhold, der produceres, kan komme til at gøre siden langsommere, uden at sidens ejer nødvendigvis er klar over det.

De typiske syndere er tredjeparts-kode, og billeder samt videoer.

Billeder og videoer

Når du uploader et billede til din hjemmeside, tænker du formodentlig, at kvaliteten skal være så god som muligt. Men det er der, du tager fejl.

Jo bedre kvalitet billedet er, jo mere information indeholder det, og jo mere fylder det. Og der findes gode værktøjer til at komprimere billeder, uden at en bruger vil kunne se et fald i kvalitet.

To gode retningslinjer:

  • Load ikke billeder, hvis dimensioner er større, end der er plads til at vise på siden. Hvis du kun skal vise en thumbnail på 50px x 50px – så load et billede, med præcis de dimensioner – fremfor billedet i fuld størrelse, der sagtens kan være 6000px i bredden og 4000px i højden.
  • Komprimer dine billeder inden upload. Der er gratis værktøjer til at gøre dette, som f.eks. tinyPNG og JPEG Optimizer.

Hvis du har taget dine billeder med et “rigtigt” kamera, så kan jeg garantere dig, at du vil fortryde det, hvis du ikke gør de to ting. For et sådant billede kan sagtens fylde over 10MB, hvor det ikke behøver at fylde mere end 200KB for stadig at se fint ud på din side.

De samme retningslinjer gælder i øvrigt for videoer. Og i forhold til videoer opnås den bedste kompression som regel, hvis man benytter muligheden for at indlejre videoen fra YouTube eller Vimeo, fremfor selv at hoste den.

Tredjeparts-kode

Selvfølgelig vil du gerne have Google Analytics på din side, så du kan se, hvilket indhold brugerne interagerer med, og måske også hvad de køber. Og selvfølgelig skal du have et cookie-banner, da det jo er et lovkrav…

Men behøver du to Facebook Pixels? Kan en enkelt ikke gøre det?

Og behøver du at have Hotjar aktiveret hele tiden? Eller WhoCopiedMe? Eller Sleeknote? Eller en Facebook like-boks (kan et billedlink ikke gøre det)? Eller e-mærket widgets? Eller Trustpilot embeds? Eller Viabill? Eller… jamen, du kan fortsætte i det uendelige.

Hver gang du “bare lige” kan snuppe en stump kode, og lægge det på din side for at forbinde til tredjepart, så gør du siden langsommere. Og det, du først og fremmest skal vide er, at du ikke ved hvor mange ekstra ressourcer siden skal loade. Det er sjældent kun 1. Det kan lige så godt være 20 – og du har ingen kontrol over det.

Så, for din egen skyld:

  • Evaluer omhyggeligt, hvad du mener er det værd, og udelad alt, som du ikke er 100% sikker på tilfører dig værdi.
  • Lav evt. dine egne alternativer, såsom et billedlink i stedet for en Facebook Like-boks eller et e-mærket widget. Få evt. en udvikler til at hjælpe dig, hvis du finder det svært.
  • Hvor muligt, så load kun tredjeparts-koden på den side, hvor den skal bruges. Du behøver f.eks. ikke at loade Trustpilot på forsiden, hvis du kun skal vise anmeldelser på en underside. Det gør hele siden langsommere.

Vær også opmærksom på, at du ikke kan garantere datasikkerhed ved brug af tredjeparts-løsninger. Koden ligger jo ikke hos dig, så du har ingen kontrol over, hvad der spores på eller hvad oplysningerne bruges til. Det er endnu et godt argument, for kun at loade det mest nødvendige.

Hvad med Google Pagespeed?

Når de fleste website-ejere ønsker at undersøge deres sides performance, kigger de fleste helt automatisk på Google Pagespeed. Og tit og ofte får de et granatchok. Men det, de ofte ikke ved, er at Google Pagespeed ikke først og fremmest måler på, hvorvidt siden er performant – eller opfattes som værende performant af brugerne. Pagespeed er et Google-værktøj, hvilket vil sige at det tester for Google’s foretrukne teknologier og metoder, hvilket ikke altid er muligt eller hensigtsmæssigt at implementere på en side.

For eksempel vil Pagespeed næsten med sikkerhed anbefale “nyere billedformater”, såsom webP, som alternativ til JPG og PNG billeder. Men det, der ikke bliver sagt, er at webP nok giver en mindre filstørrelse og dermed bedre loadhastighed i Google’s egen browser Chrome – men at der er flere andre browsere, der slet ikke understøtter formatet. Så for at få det til at virke skal man enten loade flere versioner af samme billede – eller lade brugerne i stikken, hvis de ikke benytter Chrome.

Tag Pagespeed-resultater med et gran salt, husk på at det er Google’s egne preferencer der testes efter, og prøv gerne at teste din side med andre værktøjer også, for at få et mere realistisk billede af situationen.

For eksempel kan jeg varmt anbefale WebPageTest – et værktøj, mange udviklere bruger. Det giver langt mere detaljerede (omend også mere tekniske) resultater. Og du har selv kontrol over, hvilket device / sted / internethastighed du ønsker at teste på.

Retningslinjer

For nu at opsummere, så er min klare anbefaling, at være opmærksom på følgende:

  • Load ikke billeder, hvis dimensioner er større, end der er plads til at vise på siden. Hvis du kun skal vise en thumbnail på 50px x 50px – så load et billede, med præcis de dimensioner – fremfor billedet i fuld størrelse, der sagtens kan være 6000px i bredden og 4000px i højden.
  • Komprimer dine billeder inden upload. Der er gratis værktøjer til at gøre dette, som f.eks. tinyPNG og JPEG Optimizer.
  • Evaluer omhyggeligt tredjeparts-løsninger, og udelad alt, som du ikke er 100% sikker på tilfører dig værdi.
  • Lav evt. dine egne alternativer, såsom et billedlink i stedet for en Facebook Like-boks eller et e-mærket widget.
  • Hvor muligt, så load kun tredjeparts-koden på den side, hvor den skal bruges. Du behøver f.eks. ikke at loade Trustpilot på forsiden, hvis du kun skal vise anmeldelser på en underside. Det gør hele siden langsommere.
  • Test din sides performance med flere værktøjer, for at få det bedste billede af situationen.

I langt de fleste tilfælde vil en bedre load-hastighed også kunne ses på bundlinjen – så det kan virkelig betale sig at investere tid og energi på, at få din side optimeret.

Men husk på: Det er en løbende proces, der skal tænkes ind hver eneste gang, du overvejer at integrere et nyt plugin, eller lave nyt indhold. Ikke blot en engangsforestilling.

Er du interesseret i et samarbejde?