I detta inlägg sammanfattar vi olika åtgärder som kan vidtas för att förbättra laddningstiden på en webbplats. Vi analyserar de olika faktorer som påverkar webbplatsers hastighet och hur vi uppfyller kraven för Googles mätning av Core Web Vitals.
En snabbare webbplats leder till högre konverteringsgrad, färre korta besök (bounce rate) på webbplatsen och förbättrar användarupplevelsen för besökaren. Hastigheten på sajten påverkar också de organiska resultaten eftersom att det är en av flera rankningsfaktorer.
Mer information i inlägget
-
Om laddtider
-
Kort om mobilvänlighet
-
Om Core Web Vitals
-
Beståndsdelar, laddtidsanalys
Om laddtider
Varför är laddtider viktiga?
Att aktivt optimera en webbplats för att nå laddtider på lägre än 2 sekunder är inte bara bra ur ett SEO-perspektiv. Det har också en positiv effekt på andra kanaler och användarupplevelsen som helhet.
Laddtider är en av flera rankingfaktorer under Core Web Vitals – ett måttsystem som Google lanserat för att mäta de viktigaste tekniska aspekterna av en webbplats. En webbplats med höga laddtider eller som inte uppnår andra CWV-värden riskerar att sjunka i position i de organiska sökträffarna.
UX, bounce rate och trafik
Användarupplevelsen (UX, User Experience) är den måttpunkt som är viktigast att arbeta med att höja. För varje sekund ökar risken att besökaren väljer att lämna webbplatsen. Det leder till en högre avvisningsfrekvens, framförallt för mobila användare.
Betalda sökträffar och Quality Score
Laddtiderna påverkar också resultat för de betalda sökträffarna, eftersom att även de rangordnas efter användarupplevelsen av målsidan. Högre laddtider ger ett sämre Quality Score.
Mobilvänlighet
Laddtider och upplevelsen på mobila enheter är av högsta prioritet. Att tekniskt fungera i mobiltelefon är inte detsamma som att vara optimerad för enheten.
Om webbplatsen inte är optimerad för användare med mobiltelefon är risken stor att användaren kommer att gå tillbaka till sökresultat och leta vidare till en annan webbplats.
Behöver du en ny hemsida? Eller behöver din hemsida ses över?
Kom igång idag – kontakta oss
Om Core Web Vitals
Core Web Vitals består totalt av sex olika mätpunkter
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- First Contentful Paint (FCP)
- Interaction to Next Paint (INP)
- Time to First Byte (TTFB)
Av de sex mätpunkterna räknas tre som primära, viktiga webbvärden: LCP, FID och CLS.
Google har annonserat att webbplatser som uppnår kraven för Core Web Vitals kommer att bli belönade med boost i ranking.
LCP
Largest Contentful Paint
LCP handlar om hur lång tid det tar för första synliga bild eller textblock inom viewport (synlig startvy) att ladda och har stark koppling till laddtider.
Flera olika element spelar roll såsom rubriker, paragrafer, formulär, CSS-element och bild och video.
Aktiviteter för förbättrad LCP
- Optimera CSS och JavaScript
- Reducera CSS och JavaScript som inte används
- Minfiera CSS-, JavaScript- och HTML-filer
- Aktivera lazy load för bildinnehåll
- Använda bildformat anpassade för web (WebP)
- Snabb server för webbhotell/hosting
CLS
Cumulative Layout Shift
CLS handlar om hur ofta besökare av webbplatsen upplever oväntade förändringar i layout medan sidan ladds. Det kan orsakas av att element laddar osynkat eller överlappat, av att element saknar height och width attribut eller dynamiska tredjepartsresurser som ändrar storlek.
Aktiviteter för förbättrad CLS
- Ange height och width attribut på samtliga bilder, videos, annonser eller andra iframes etc.
- Ladda inte typsnitt som är större eller mindre i storlek än sin fallback
Övriga riktlinjer
- Undvik dynamiskt injicerat innehåll
- Använd för viktiga typsnitt
- Reservera plats för element som är viktiga
FID
First Input Delay
FID handlar om hur lång tid det tar att svara på besökarens initiala reaktion. Det vill säga hur lång tid det tar från att besökaren interagerar med sidan (klickar, scrollar etc) tills det att webbläsaren kan börja processa svaret på interaktionen.
Aktiviteter för förbättrad FID
- Minifiera och komprimera JavaScript
- Cachelagra kod med PRPL-mönster
- Aktivera lazy loading
Övriga riktlinjer
-
Minska mängden JavaScript
-
Dela upp kod som tar lång tid att ladda
-
Ladda in tredjepartskod på ett effektivt sätt
-
Flytta aktiviteter som inte berör gränssnitt till bakgrundstråd
Bildhantering
Beståndsdelar, laddtidsanalys
Bildformat
Vilket bildformat som används på webbplatsen är avgörande för sidans hastighet.
JPEG – det vanligaste formatet
PNG – anpassat för transparenta bilder
GIF – rörliga bilder
WebP – modernt format med högre komprimeringsmöjligheter
Bildkomprimering
Hög kvalitet på bilder är viktigt för att webbplatsen ska upplevas mer levande. Att ladda upp bilder i full storlek ska undvikas eftersom att det leder till betydligt långsammare hemsidor.
Att komprimera bilderna minskar filstorleken vilket i sin tur sänker laddtider på webbplatsen.
Height och width
För att förbättra CLS-värde för webbplatsen ska alla bildelement ha blivit angivna bredd och höjd.
Bilder i rätt storlek
Undvik att ange bilders storlek endast via CSS och HTML. Publicera bilder i rätt storlek, eftersom att sökmotorer behöver hämta in bildens fulla storlek vid inhämtning av webbplatsen.
Lazy loading
Lazy loading innebär att bilderna hämtas in först när de ska visas på skärmen. Sidan upplevs snabbare eftersom att all sidans innehåll inte behöver hämtas direkt.
Datahantering
Beståndsdelar, laddtidsanalys
Minifiera JavaScript, CSS & HTML
Rensa bort exempelvis onödiga mellanslag och radbrytningar som läses in i filerna.
Reducera JavaScript
Reducera de JavaScript som inte används. Skjut upp inläsningen av alla script tills de behövs så att lägre mängd data skickas över.
Reducera CSS
Reducera stilmallar och regler som inte behövs och skjut upp stilmallar som kan hämtas först när innehållet visas.
Minska körningstid för JavaScript
Minska tiden det tar att läsa in och köra JavaScript-kod.
Undvik att köra äldre JavaScript
Genom vissa funktioner kan moderna JavaScript köras i äldre webbläsare, men för moderna webbläsare behövs inte funktionerna för att köra script. Applicera en modern strategi för JavaScriptimplementering för att minska mängden data som behöver överföras.
Resurser som blockerar
Skjut upp eller blockera körning av CSS och JavaScript som blockerar renderingen av webbplatsen.
Lagring och komprimering
Beståndsdelar, laddtidsanalys
Komprimering med Gzip
Textresurser och andra element kan skickas komprimerade med Gzip för att minska mängden data som överförs till webbplatsen.
Cachelagring
Undvik att besökaren behöver ladda ner innehåll varje gång de besöker webbplatsen genom att aktivera cachelagring. Cachelagring innebär att filerna laddas in lokalt från webbläsaren med hjälp av exempelvis cookies, istället för att föras över från servern vid varje besök.
Server response time
Allt innehåll laddas in på webbplatsen först efter att det upprättats kontakt med servern. Teman, plugin och serverns egna prestanda påverkar svarstiden.
CDN
Genom att aktivera CDN (Content Delivery Network) förkortas laddningstiden på webbplatsen genom att webbplatsen hämtar statiskt innehåll såsom bilder, JavaScript och CSS på så kallade noder istället för på huvudservern.
Undvik stora DOM-träd
DOM-träd räknas ut av HTML-taggar på webbplatsen. Ett stort DOM-träd leder till ökad minnesförbrukning, uträkningen av flödet tar längre tid och layouten produceras långsammare.
Arbetsbelastning
Reducera tiden det tar att tolka, kompilera och köra JavaScript.
Nätverksbelastning
Minska den totala summan av resurser som hämtas till webbplatsen. Hög nätverksbelastning påverkar användarens kostnader för dataöverföring och är direkt kopplat till långsam sidhastighet.
Reducera mängd resurser i kedjekoppling
Mängden resurser som läses in med hög prioritet bör undvikas att göras för hög.
Synlig text
Typsnitt är stora och tar tid att hämta in. Webbläsare döljer ofta texten innan typsnittet hämtats vilket orsakar Flash of invisible text. Med funktionen font-display i CSS-koden synliggörs texten medans typsnittet laddas in.
Minska påverkan från tredjepartskod
Begränsa antalet tredjepartsleverantörer och förskjut inläsning till efter att sidans huvudinnehåll laddats in.
