Start din webshop i dag
  • Hastighedsoptimering
  • Tema-artikler
  • Brugermanual

    • Vores support på dette emne er begrænset til shoppens funktionalitet. Hvis du ønsker yderligere hjælp kan vi henvise til vores SEO-partnere.

    Du kan se en oversigt over vores SEO-partnere her.

    Hastighedsoptimering (PageSpeed)

    I denne artikel:

      Introduktion

      Hastighed påvirker kundekonverteringsrater, organiske søgeresultater, reklamer og en række andre ting, der i de fleste tilfælde påvirker din indtjening.

       

      Bemærk: Denne artikel er for frontend udviklere og shopejere med teknisk viden, som ønsker at vide, hvad der kræves for at få en side til at ligge i top på Google PageSpeed Insights.

      Det skal nævnes at shopsystemet godt kan opsættes til at score 100/100 på Google PageSpeed, omend det vil betyde at du skal træffe nogle valg i forhold til dit indhold og de services du integrerer (Google Analytics, Facebook osv.), samt om det i virkeligheden er karakteren på PageSpeed du sigter efter, eller de reelle loadtider på shoppen (dette er to forskellige ting).

       

      Google PageSpeed Insights

      Det er vigtigt at gøre sig klart, at Google PageSpeed giver karakterer baseret på nogle meget specifikke faktorer, i stedet for den totale loadtid af dit site. Dette betyder at to websites, som er kodet på samme måde, kan få samme karakter, omend loadtiden er forskellig pga. de data og ressourcer der benyttes på sitet. Dette tvinger ejeren af websitet til at fokusere på karaktererne frem for loadtiderne, og fordele/omkostninger ved at foretage ændringer i systemet. Oven i dette så giver det forholdsvis dårlige karakterer at benytte tracking værktøjer så som Google Analytics mv., hvilket alle seriøse webshops benytter i dag. Dette gør at karakteren 100/100 nærmest er uopnåelig. Man kan med fordel prøve alternativerne Pingdom, GTmetrix eller WebPageTest for at få en "second opinion".

      Det er dog blevet således at mange regner Google PageSpeed for "standarden" til at måle page speed med. Alt, hvad der går derud over regnes for at være for teknisk for folk der ikke arbejder med disse ting, hvilket er lidt ærgerligt da de dårlige karakterer ofte kan spores tilbage til indholdsskaberne selv. Meningen med denne artikel er derfor at belyse nogle af de begreber som man bør kende for bedre at kunne forebygge og hastighedsoptimere indholdet på sin side.

      Så for at opsummere, så vil vi anbefale at man ser nærmere på at løse de advarsler ("warnings") som Google PageSpeed genererer. Men vi vil ikke anbefale at jagte en topscore på 100/100 da det ikke er et realistisk mål, hvis du vil have Google Analytics osv. på din shop. Husk at du kan benytte andre værktøjer og at du kan sammenligne dine loadtider og karakterer med dine konkurrenters.

       

      Google PageSpeed advarsler

      "Fjern ressourcer til blokering af gengivelse"

      Google vil have dig til at loade JavaScript og CSS asynkront, så loading af siden ikke blokeres af disse ressourcer. Vi har derfor placeret "app.js" i bunden af BODY. Dette er dog ikke optimalt når det kommer til CSS, men vi forventer at der kommer en mere standardiseret løsning load af CSS ressourcer asynkront. Men som udvikler findes der måder at komme omkring dette på.

      Grunden til at du bør benytte inline CSS til kritisk styling er for at undgå det man kalder "Flash of unstyled content" (FOUC), hvor siden kortvarigt vises uden styling, fordi CSS loades ind separat.

      Hvis du får denne advarsel på JavaScript ressourcer, skal du indsætte dine egne JavaScripts i bunden af BODY som vi gør med app.js.

       

      "Udførelsestid for JavaScript"

      Denne advarsel vises ironisk nok, hvis du benytter eksterne scripts som Google Analytics. Hvilket betyder at det er svært at undgå denne advarsel på et moderne site i dag.

      Til at starte med er det vigtigt at forstå, at brugen af disse eksterne scripts skal minimeres. Det er derfor vigtigt at tjekke, hvilke der er inkluderet, og overveje om de kan undværes.

      Der findes to måder at korrigere denne problemstilling på, da at disse scripts loades eksternt og er udenfor shoppens kontrol:

      1. Fjern dem, eller så mange af dem som muligt.
      2. Host dem lokalt, og kontroller dine cache headers selv. Dette kræver at du selv opdaterer scriptet så det matcher seneste updates fra f.eks. Google Analytics. Dette kan automatiseres ved at opsætte et cronjob på en ekstern server. Du kan se processen for Gogle Analytics her.

      Du kan overveje at acceptere denne advarsel indtil nye webstandarder kan løse denne problematik.

       

      "Vis billeder i formater af næste generation"

      Når det kommer til billedfiler, er størrelsen altid en vigtig faktor. Man bør altid sørge for at de billeder man benytter, ikke er større end nødvendigt, både i forhold til pixel størrelse men også i forhold til komprimering. To billeder i samme pixel størrelse kan have vidt forskellige filstørrelser alt efter mængden af farver mv.

      Google Page Speed anbefaler billedformatet "WEBP" som et optimeringsparameter, netop for at få en hurtigere side. Og når du uploader et billede til shoppen, så genereres automatisk en ekstra version af de billeder du lægger op med formatet WEBP. Det gælder for Produkt-, Slider- (billedbanner) og kategoribilleder. På denne måde kan shoppen servere billedet i WEBP-format, hvis browseren understøtter dette, og ellers benyttes det originale billede som "fallback".

       

      "Formindsk JavaScript" og "Formindsk CSS"

      Denne advarsel vises, hvis du har implementeret dine egne JavaScripts eller CSS. I så fald skal du komprimere dem (fjerne mellemrum (blank space), kommentarer, optimere metoder og variabelnavne mv.), ligesom vi har gjort med shoppens standard JavaScript og CSS.

       

      Nyttige links

      Hastighedstest

      Andre artikler