WordPress-Optimera: Så här analyserar du din webbplats på 7 sekunder

Jan Hornung Senast uppdaterad den 12 oktober 2020
9 Min.
Med dessa tips och vår lathund kan du analysera din WordPress sidor på bara 7 sekunder och ännu bättre än Google PageSpeed Insights
Senast uppdaterad den 12 oktober 2020

Vill du WordPress vissa åtgärder är kristallklara, välkända och bevisade effektiva. Men även förment väloptimerade sidor har ofta fortfarande potential. Det är därför det är värt det bortom Googles PageSpeed Insights och Co. Eftersom många prestanda verktyg ger sanna data guldgruvan, vilket möjliggör en mycket omfattande analys - om du vet vad du behöver leta efter. Idag ska jag visa dig 7 tips för att göra analysene på bara 7 sekunder.

Enkla prestandaverktyg som Googles Testa min webbplats ellerGoogle PageSpeed Insights som ett resultat av detta, en lista med rekommendationer för åtgärder. Det kan vara bra för starten. Om du vill WordPress dock övervaka projekt effektivt och WordPress Om du vill optimera meningsfullt bör du förr eller senare ta till ett prestandaverktyg som också ger ut laddningstiden för din sida och visar exakt hur din blogg, din butik, din företagssida beter sig när du handlar.

Dessa inkluderar till exempel Pingdom, GTMetrix eller Webpagetest. Dessa ger ofta ett så kallat vattenfallsdiagram. Dessa något skrymmande datamängder är knappast märkt av många användare. Men om du är professionell med WordPress du bör förstå hur de fungerar. Eftersom: Det finns ingen annan datakälla som visar hur snabbt din sida laddas, hur bra din hoster är, hur effektivt din sida laddas och var webbplatsens byggarbetsplatser finns.

Och med lite övning kan du analysera varje sida i korthet och i (hand-stoppad) 7 sekunder varje sida 😉

Hur ska det här fungera? Jag ska visa dig detta steg för steg idag!

WordPress optimera: Utan vattenfallsdiagram skrapar du bara på ytan

Kanske du undrar nu: Varför hela ansträngningen? Det finns bra prestanda verktyg som redan visar mig alla viktiga optimeringsåtgärder. Dessutom är det oftast begränsad till följande punkter ändå:

Visst, när du väl har förtydligat och optimerat dessa punkter har du skapat en mycket bra grund för en riktigt snabb sida. Det är därför dessa skäl är (med rätta) som omfattas av alla bra prestanda guider.

Till exempel

Och även med de vanligaste Laddningstidsbromsar från WordPress sidor hamnar dessa skäl alltid på de främre ställena.

Men vår erfarenhet från hundratals systematiska resultatanalyser med webbsida testning och omfattande kontroller plats visar: Även i förment "optimerad" WordPress Sidor hittas alltid prestanda fallgropar. Och det är där vattenfallet diagrammet hjälper. Eftersom det kan göra något speciellt: det visar hur din sida laddas, vilka element som laddas och hur snabbt det hela händer.

Hur man tar sig till dataskatten

Alla bra prestanda analyser också ut vattenfall diagram. Om du till exempel använder Pingdom-verktygen, så måste du bara rulla ner tillräckligt långt.

WordPress optimera Pingdom Vattenfall
Med Pingdom verktygen måste du bläddra lite för att nå vattenfallet diagrammet. Motsvarande avsnitt kallas Filförfrågningar. Webpage test och GT-Metrix har var sina egna flikar för diagrammen.

Men för att fånga all denna information på rätt sätt, måste du förstå hur man läser vattenfall diagram korrekt.

Hur man läser vattenfall diagram korrekt

Den koncentrerade informationstätheten innebär att vattenfallsdiagram inte är exakt kända för sin tydlighet. I själva verket behöver du bara veta fyra saker för att förstå posterna:

  1. Tid tas bort på X-axeln.
    Vattenfallsdiagram är strukturerade kronologiskt: X-axeln gör att du kan se exakt när ett element börjar laddas och hur lång tid det tar att ladda. Det är just denna kronologiska struktur som gör ett vattenfallsdiagram så värdefullt. På så sätt kan du se exakt var laddningstiden går förlorad och vilka processer du behöver börja för att optimera din laddningshastighet.
  2. Varje HTTP-begäran registreras på Y-axeln.
    För de flesta vattenfallsdiagram kan du klicka på elementen på Y-axeln för ytterligare information om dem.
  3. En förklaring anger vilken typ av resurs som laddas.
    Webpagetest färger HTML, CSS, bilder, flash etc., Pingdom använder symboler för detta ändamål.
  4. Ett ytterligare kodningssystem ger information om hur enskilda begäranden körs, till exempel hur lång tid det tar att ansluta till servern, eller om HTTPS används.
WordPress-Optimera: Så här analyserar du din webbplats på 7 sekunder
WordPress optimera områden i ett vattenfallsdiagram
I denna illustration hittar du de fyra områden som beskrivs ovan.

WordPress optimera med den 7 sekunders analys

Så nu är det klart hur du läser ett vattenfall diagram - men vilka insikter kan du dra av det?

I vår resultatanalys har den 7 sekunders analysen visat sitt värde: Diagrammet ger dig information om sju viktiga faktorer för laddningshastigheten i en överblick. Dessa sju hacka hjälper dig att förstå exakt hur och hur snabbt din webbplats återges. Och de visar var det finns potential att göra dem snabbare, åtgärda problem, eller förbättra dem ytterligare.

Observera

I våra exempel, förresten, kommer vi alltid att hänvisa till vattenfallet diagram av Webpagetest, eftersom vi alltid använda detta verktyg, vare sig manuellt eller automatiskt.

Tips #1: Storleken spelar roll

Ju längre vattenfallet är (dvs. ju fler element tas bort på Y-axeln), desto fler begäranden behöver bearbetas och ju långsammare sidan laddas. Ändå behöver ett långt vattenfall inte nödvändigtvis vara dåligt. Det finns funktioner och externa resurser som du helt enkelt inte kan eller inte vill göra utan. Till exempel, live chat är ett sådant verktyg. Lastningen av chattprogrammet av naturligtvis saktar ner vår webbplats. Snabb chattsupport är dock en viktig del av vår hosting. Vi kan avstå från de Plugin så inte.

HTTP/2 ser också till att det stora antalet förfrågningar inte längre är lika viktigt som det var för några år sedan.

Med den nya webbstandarden kan förfrågningar behandlas samtidigt, i stället för den ena efter den andra. Dessutom skickar servern redan HTML-filer till webbläsaren under HTTP/2 som en försiktighetsåtgärd. Den nya standarden kompenserar för nackdelar som du kan uppleva från ett stort antal HTTP-förfrågningar. Men för att dra nytta av HTTP/2 måste din webbplats laddas via HTTPS, dvs ha ett SSL-certifikat.

I vilket fall som helst har erfarenheten visat att det inte finns någon direkt korrelation mellan längden på ett vattenfall och den faktiska lastningshastigheten. Åtminstone upp till en viss gräns: Med långt över 100 förfrågningar, i de flesta fall finns det definitivt potential förbesparingar.

Om din webbplats överskrider detta tröskelvärde bör du ta en titt på dina HTTP-förfrågningar i detalj. Till exempel laddar vår startsida med över 130 HTTP-förfrågningar. Så det finns potential för optimering här.

Om ditt vattenfall innehåller mer än 100 förfrågningar, ta en närmare titt på vilka du kan göra utan.

Tips #2: Upptäck laddningstid

Det maximala värdet på din X-axel är väsentligt för att analysera lastningshastigheten: här kan du se hur mycket tid som förflyter innan din webbplats är helt återgiven. Ju mindre detta värde är, desto bättre.

Om maxvärdet på din X-axel är över 10, bör du definitivt ta itu med din sidas laddningshastighet.

Sidans totala inläsningstid ska vara kortare än 10 sekunder

Tips #3: Detektera filtladdningstid

De flesta användare bryr sig inte om vilka värden som spottar ut analysverktyg. Det enda som räknas för dem är: hur snabbt sidan laddas kändes.

För dig som platsoperatör är det därför viktigt att förbättra denna fartkänsla så mycket som möjligt. Du kan uppnå detta, till exempel genom optimal cachelagring, ovan-the-fold optimering eller – om dina kunder är baserade utomlands – användningen av ett Content Delivery Network (CDN).

Lyckligtvis är dock detta kände lastningstid via vattenfall diagram också mycket bra för krypet. Så vitt vi vet är Webpagetest det enda gratisverktyget som skiljer mellan den tekniskt uppmätta laddningstiden och den inläsningstid som användaren uppfattar.

Hela diagrammet visar den mindre viktiga tekniska laddningstiden. Filtens inläsningstid döljs mellan de blå och gröna linjerna i diagrammet.

Den gröna linjen anger när webbsidans första visuella element läses in (här kallas punkten "Start återge"). Den blå linjen anger när användaren uppfattar sidan som fullt laddad – från och med nu ökar sannolikheten att interagera med sidan avsevärt. Dessa två linjer bör vara så långt till vänster och så nära varandra som möjligt.

WordPress optimera kartläggningen av filtladdningstiden
Det orangea området visar den fas då inget synligt innehåll återges. Fram till slutet av denna fas ser besökaren bara en vit sida. Det blå området markerar tidsspannet mellan Startåtergivning och Inläsningstid under vilken besökaren kan uppfatta en synlig renderingsprocess (t.ex. ett timglas). Båda bildar tillsammans filta som laddar tid.

Webpage test är det enda verktyg som förser dig med dessa data. Vi är inte medvetna om detta från Pingdom Tools eller GTMetrix. Den här regeln gäller därför bara om du använder Webpagetest:

Den gröna linjen ska visas efter ca 2 till 3 sekunder, den blå linjen efter 7 sekunder senast.

Tips #4: HTTP/2 jämfört med HTTP/1

Jämfört med HTTP/1 erbjuder HTTP/2 en avgörande fördel: Med den nyare webbstandarden laddas sidor mycket snabbare. Men förutom ett SSL-certifikat behöver du också din hoster för att ge dig denna tjänst. Men många platsoperatörer är oklara om detta faktiskt är fallet med dem eller inte.

En av de största fördelarna med HTTP/2 är samtidig behandling av flera begäranden. Och du kan tydligt se dessa i ditt vattenfall diagram. Eftersom begäranrna tas bort kronologiskt, startar flera staplar på samma punkt i X-axeln när HTTP/2 används.

WordPress optimera laddningsbeteendet hos en WordPress sida med och utan HTTP/2
Till vänster, den typiska laddning beteende av en WordPress sida utan HTTP/2. De enskilda HTTP-begäranden utförs sekventiellt. Till höger kan du se hur samma sida beter sig med HTTP/2: De enskilda förfrågningarna laddas här samtidigt.

Ladda enskilda förfrågningar parallellt, din sida körs med HTTP/2.

Tips #5: Upptäcka för stora bilder

Med cirka 30 procent av de webbplatser vi analyserar, finner vi fortfarande potential när det gäller bildstorlek. Detta trots att de flesta webbansvariga antar att de redan har fått ut det mesta av detta.

Enligt vår erfarenhet är bilder den viktigaste faktorn för sidinläsningstid efter cachelagring. För varje bild du laddar upp i backend, WordPress visar automatiskt en hel rad andra filer, miniatyrerna eller presenterade bilder. Korrekt komprimering av dessa filer är en av de mest effektiva sätten att minska storleken och därför lastning hastigheten på din sida.

Hur du optimerar dina bilder förnuftigt, till exempel:

I vattenfallsdiagrammet kan bilder snabbt identifieras med hjälp av förklaringen: Webbsidas test visar dem med violetta staplar, Pingdom med en ikon. Endast GTMetrix skiljer inte bilder separat. I vilket fall som helst, om motsvarande staplar är mycket längre än staplarna av de återstående begäranden, indikerar detta en lång bild laddningstid.

WordPress Optimera detta är vad det ser ut när bilder är verkligen för stor
Ett extremt men mycket levande exempel på okomprimerade bilder. Några av filerna ensam ta över 8 sekunder att ladda, sakta ner hela sidan.

I ett sådant fall som ovan bör du ta en närmare titt på dina bilder. Genom att klicka på motsvarande begäran kan du oftast se exakt vilka filer de är i ett vattenfallsdiagram. Detta gör sökandet efter laddningstid bromsar mycket lättare.

Långa belastningsstaplar för bildresurser indikerar komprimeringssystezial.

Tips #6: Hitta omdirigeringar

Ett vattenfallsdiagram hjälper dig att förstå inte bara vilka objekt som laddas när och hur snabbt, utan också hur många omdirigeringar har ställts in och var de pekar.

Förfrågningar med vidarebefordrare är vanligtvis markerade i färg. Diagrammet talar också om vilken vidarebeslängning som är inställd och vart den leder.

WordPress optimera vidarekoppling identifiera
Den här sidan har flera 302 skotare i rad.

Med ett vattenfallsdiagram kan du se med en blick hur många och vilka omdirigeringar som har ställts in. Detta hjälper också till att upptäcka forwardloops efter en DNS-ändring. Tack vare de gula markeringarna har vi kunnat upptäcka onödig eller till och med skadlig skotningssand flera gånger.

Gula linjer markerar framåt.

Tips 7: Upptäck fel i korthet

Ibland kan det hända att element på en webbsida inte återges korrekt. Detta kan till exempel påverka AdSense-ramar, men även inbäddade kartor och teckensnitt.

WordPress optimera i vattenfallet diagram fel identifieras med röda linjer
Denna sida kastar ut ett 404 fel.

I det här fallet kastar vattenfallsdiagrammet ut ett felmeddelande och markerar raden med begäran i rött. Diagrammet anger också vilket fel det gäller och vilken resurs som ger felet.

Röda linjer indikerar fel när sidan ska återgivas.

Med lathunden alla tips i sikte

Ett vattenfallsdiagram är förmodligen den mest värdefulla utvärdering du kan använda för din WordPress sidor kan erhållas. Detta kombinerar olika data som du som en sida operatör bör ha i åtanke: laddningstider, ordning på rendering och felmeddelanden. Beväpnad med tipsen från den här artikeln kan du snabbt och effektivt se var optimeringspotentialen fortfarande ska höjas:

  • Är vattenfallet för långt (över 100 förfrågningar)?
  • Är X-axelns högsta värde för stort (större än 10)?
  • Ladda förfrågningar parallellt (via HTTP/2)?
  • Är bilderna för stora (så bilderna är dåligt optimerade)?
  • Är de gröna och blå linjerna för långt till höger eller för långt ifrån varandra (så uppfattar användaren sidan som långsam)?
  • Finns det oväntade gula linjer (framåt)?
  • Finns det röda linjer (fel)?

Visserligen, första gången du kan behöva ännu längre för denna analys. Med lite erfarenhet kan du dock med vattenfallsdiagram WordPress mycket bättre att förstå och att optimera projekt mer djupgående.

RAIDBOXER av den första timmen och Supportchef. På Bar och WordCamps, föredrar han att prata om PageSpeed och webbplats prestanda. Det bästa sättet att muta honom är med en espresso – eller bayerska Brezn.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.