Laddningstid och Core Web Vitals

Webbplatsen är för långsam: mät orsakerna och åtgärda dem effektivt

Om er webbplats är för långsam beror det nästan alltid på några få, tydligt mätbara orsaker: ett trögt serversvar, för stora bilder och videor, felkonfigurerad cachning eller för mycket JavaScript. Den som först mäter och sedan tar itu med den viktigaste faktorn uppnår märkbara förbättringar med rimlig arbetsinsats.

Jag analyserar er webbplats med labb- och fältdata, anger orsakerna konkret och åtgärdar dem i server, tema och innehåll. Resultatet visar jag genom en ny mätning.

Elias Arndt, WordPress-expert från Schleswig
Elias Arndt

Webbutveckling, programmering och AI
★★★★★ 5,0 på Google

Skicka en projektförfrågan

Beskriv ert projekt med några meningar. Ni får personlig återkoppling.

Så känner ni igen att er webbplats är för långsam

Den egna känslan bedrar ofta. På kontorsdatorn med snabb anslutning och en full webbläsarcache verkar en webbplats snabb, medan den på en genomsnittlig smartphone i mobilnätet förblir tom i flera sekunder. Därför är mätningen på mobila enheter meningsfull, eftersom de flesta besökare surfar där.

Google bedömer laddningsupplevelsen med tre mätvärden, Core Web Vitals. Largest Contentful Paint (LCP) mäter när det största synliga elementet visas och bör ligga under 2,5 sekunder. Interaction to Next Paint (INP) mäter hur snabbt sidan reagerar på klick och inmatningar; målvärdet ligger under 200 millisekunder. Cumulative Layout Shift (CLS) registrerar hur mycket innehåll förskjuts under laddningen och bör ligga kvar under 0,1.

Det är viktigt att skilja mellan labbdata och fältdata. PageSpeed Insights visar högst upp värdena från riktiga Chrome-användare under de senaste 28 dagarna och nedanför ett simulerat test. Båda värdena kan skilja sig betydligt från varandra, och det är fältdata som räknas vid Googles bedömning.

Laddar er webbplats inte alls längre eller visar den en vit sida, handlar det om ett avbrott med andra orsaker. För det finns sidan WordPress laddar inte längre.

De vanligaste orsakerna till långa laddningstider

I mina analyser dyker samma bromsar upp gång på gång. Oftast samverkar två eller tre av dem.

Trögt serversvar

Tar servern lång tid på sig fram till den första byten, fördröjs allt annat. Orsakerna är överbelastade abonnemang, gamla PHP-versioner eller tidskrävande databasfrågor vid varje anrop.

Felaktig cachning

Ett cacheplugin är snabbt installerat, men inte alltid rätt konfigurerat. Vissa konfigurationer levererar inte cachelagrade sidor till mobila enheter alls, utan att det märks på datorer.

Överdimensionerade medier

Foton direkt från kameran och bakgrundsvideor i full upplösning utgör ofta den största delen av datamängden. Moderna format som WebP eller AVIF och anpassade bildstorlekar för varje enhet minskar den avsevärt.

För mycket JavaScript

Sidbyggare, sliders och animationer laddar in skript som webbläsaren först måste bearbeta innan sidan reagerar. Det försämrar framför allt INP-värdet på svagare smartphones.

Skript från tredje part

Spårning, chattwidgets, karttjänster och cookie-banners laddas från externa servrar. Varje enskilt skript kostar tid, och deras sammanlagda påverkan underskattas ofta.

Webbfonter och layoutförskjutningar

Webbfonter som laddas in sent och bilder utan fasta mått gör att innehåll hoppar runt när sidan laddas. Det försämrar CLS-värdet och leder till felklick.

En växande pluginflora

Tillägg som har lagts till under flera år laddar ofta in sina filer på varje sida, även där de inte behövs.

Så gör jag din webbplats snabbare

1

Mäta

Jag samlar in fältdata och labbdata för de viktigaste sidtyperna, separat för mobila enheter och datorer. På så sätt skapas ett utgångsvärde som varje ändring kan mätas mot.

2

Ringa in orsakerna

Utifrån laddningsordningen i vattenfallsdiagrammet och webbläsarens belastning avgör jag vilka resurser som fördröjer LCP och vilka skript som blockerar sidans respons.

3

Utnyttja de största hävstångseffekterna

Jag börjar med de åtgärder som ger mest i förhållande till arbetsinsatsen, till exempel cachningskonfiguration, bildkomprimering, fördröjd inläsning av skript och HTTP/2. Alla ändringar testar jag först i en förhandsvisningsmiljö.

4

Mäta igen

Efter lanseringen upprepar jag mätningen under samma förhållanden. Googles fältdata uppdateras under 28 dagar, därför kontrollerar jag dem igen efter några veckor.

5

Hålla jämna steg

Nya tillägg och stora bilder kan gradvis försämra laddningstiden igen. Med regelbundet underhåll av webbplatsen upptäcks sådana försämringar tidigt.

Från praktiken: min egen webbplats och en föreningssida

Även på eliasarndt.de låg PageSpeed-värdet för mobila enheter först bara på 68. En av orsakerna var ett cacheplugin som inte levererade cachelagrade sidor till mobila enheter, vilket inte märktes på datorer. Efter korrigeringen och ytterligare optimeringar ligger värdet för mobila enheter på 95 och för datorer på 99. Tillgänglighetsvärdet i Lighthouse ökade samtidigt från 86 till 100.

På webbplatsen för en förening i Schleswig var orsaken en annan. Startsidan laddade omkring 60 MB med videor och bilder. Genom att koda om medierna sjönk datamängden till 16 MB, utan att synligt innehåll behövde tas bort.

Båda fallen visar varför mätningen kommer först. Symptomen var liknande, men den effektiva åtgärden var helt olika i de båda fallen.

När optimering ensam inte längre räcker

Vissa webbplatser är byggda på en grund som bara i begränsad utsträckning kan snabbas upp, till exempel en tung sidbyggare med många nästlade element eller ett föråldrat system utan uppdateringar. Då lönar det sig att jämföra med en relansering av webbplatsen, exempelvis baserad på ett slimmat ramverk som Astro, som som standard levererar nästan ingen JavaScript.

En snabb webbplats ger ensam ännu inga bättre placeringar på Google, eftersom laddningstiden där bara är en faktor bland många. Den minskar dock avvisningsfrekvensen och gör formulär och kassa mer behagliga för era besökare. Den som ändå bearbetar bilder och kod kan samtidigt förbättra webbplatsens tillgänglighet.

Vanliga frågor om långsamma webbplatser

Varför visar PageSpeed Insights så mycket sämre värden för mobila enheter än för datorer?

Det mobila testet simulerar en genomsnittlig smartphone med strypt anslutning och svagare processor. Stora bilder och mycket JavaScript påverkar därför resultatet betydligt mer där, vilket gör värdet för mobila enheter viktigare.

Ofta är det en viktig byggsten, men ensam räcker den sällan. Felaktigt inställd cachning kan till och med vara verkningslös, till exempel om mobila enheter inte får några cachelagrade sidor. Dessutom hjälper cachning föga mot överdimensionerade bilder eller blockerande skript.

Ibland. En lång svarstid från servern tyder på problem med webbhotellet, PHP-versionen eller databasen. Om servern är snabb men webbplatsen ändå känns trög, ligger orsaken oftast i medier och skript på själva webbplatsen.

Som riktlinje gäller Googles gränsvärden: ett LCP under 2,5 sekunder, ett INP under 200 millisekunder och ett CLS under 0,1, vardera mätt för minst 75 procent av sidvisningarna.

Fältdata baseras på besöken under de senaste 28 dagarna. Därför syns förbättringar stegvis där, medan en labbmätning visar dem direkt efter genomförandet.

Ta reda på vad som gör din webbplats långsam

Ange adressen till din webbplats och vilka sidor som är viktigast för dig. I det kostnadsfria första samtalet visar jag var de största bromsarna finns och vilka åtgärder som lönar sig.