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 visat sig effektiva. Men även förment väloptimerade sidor har ofta fortfarande potential. Det är därför det är värt det utöver Googles PageSpeed Insights och Co. Eftersom många prestandaverktyg levererar äkta data guldgruvan, vilket möjliggör en mycket omfattande analys - om du vet vad du ska leta efter. Jag ska visa dig 7 tips idag, med dem som Analysene lyckas på bara 7 sekunder.

Enkla prestandaverktyg som Googles Testa min webbplats Eller Google PageSpeed Insights som ett resultat av detta en lista över rekommendationer för åtgärder. Det kan vara bra till att börja med. Om du vill WordPress övervaka projekten på ett effektivt och WordPress Om du vill optimera meningsfullt, bör du förr eller senare tillgripa ett prestandaverktyg som också matar ut laddningstiden för din sida och visar dig exakt hur din blogg, din butik, din företagssida beter sig när du handlar.

Det handlar bland annat om att Pingdom, GTMetrix (på nytt) Eller Test av webbsida. Dessa ger ofta en så kallad Diagram över vattenfall Med. 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 värdare är, hur effektivt din sida laddas och var webbplatsens byggarbetsplatser finns.

Och med lite övning kan du analysera varje sida med ett ögonkast och i (handstoppad) 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 nu undrar: Varför hela ansträngningen? Det finns bra prestanda verktyg som redan visar mig alla viktiga optimering åtgärder. Dessutom är det oftast begränsat till följande punkter ändå:

Visst, när du har klargjort 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 (med rätta) omfattas av alla bra prestanda guider.

Till exempel

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

Men vår erfarenhet från hundratals systematiska prestandaanalyser med webbsidestestning och omfattande webbplatskontroller 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 laddas och hur snabbt det hela händer.

Hur får man till dataskatten

Alla bra prestandaanalyser också produktionen vattenfall diagram. Om du till exempel använder Pingdom-verktygen behöver du bara rulla ner tillräckligt långt.

WordPress optimera Pingdom vattenfall
Med Pingdom verktyg måste du bläddra lite för att nå vattenfallet diagrammet. Motsvarande avsnitt kallas Filbegäranden. Webbsida test och GT-Metrix har var sina 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 vattenfallsdiagram korrekt.

Hur man läser vattenfall diagram korrekt

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

  1. Tiden tas bort på X-axeln.
    Vattenfallsdiagram är strukturerade kronologiskt: X-axeln låter dig se exakt när ett element börjar läsas in 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 för att börja optimera laddningshastigheten.
  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 läses in.
    Webpagetest färger HTML, CSS, bilder, blixt etc., Pingdom använder symboler för detta ändamål.
  4. Ytterligare ett 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 den här bilden hittar du de fyra områden som beskrivs ovan.

WordPress optimera med 7 sekunders analys

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

I vår resultatanalys 7 sekunders analys Bevisat: Diagrammet ger dig en glimt av sju viktiga faktorer för laddningshastighet. 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 vattenfall diagram Webpagetest, eftersom vi alltid använder detta verktyg, antingen manuellt eller automatiskt.

Tips #1: Storlek frågor

Ju längre vattenfallet är (dvs. ju fler element tas bort på Y-axeln), desto fler förfrågningar måste 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 klara sig utan. Till exempel är chatt ett sådant verktyg. Lastningen av chattprogrammet saktar naturligtvis ner vår webbplats. Men snabb chatt support är en viktig del av vårt webbhotell. Vi kan avstå från Plugin så inte.

HTTP/2 säkerställer också 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 begäranden bearbetas samtidigt, i stället för en efter en. 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-begäranden. För att kunna dra nytta av HTTP/2 måste din webbplats laddas via HTTPS, dvs via en SSL-certifikat. Har.

I vilket fall som helst har erfarenheten visat att det inte finns något direkt samband mellan ett vattenfalls längd och den faktiska lasthastigheten. Minst upp till en viss gräns: över 100 förfrågningar I de flesta fall finns det ett ganska antal Besparingspotential.

Om din webbplats överskrider den här tröskeln bör du ta en titt på dina HTTP-begäranden i detalj. Till exempel laddas vår hemsida med över 130 HTTP-begäranden. 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 klara dig utan.

Tips #2: Identifiera laddningstid

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

Om det maximala värdet på din X-axel är över 10, bör du definitivt ta itu med din sida laddningshastighet.

Sidans totala laddningstid bör vara mindre än 10 sekunder

Tips #3: Upptäck 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ände.

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

Lyckligtvis kändes dock denna laddningstid via vattenfallsdiagram också mycket bra för krypet. Såvitt vi vet är Webpagetest det enda gratis verktyg som kan användas mellan tekniskt mätt Laddningstiden och uppfattas av användaren laddningstiden.

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

Den gröna linjen anger när det första visuella elementet på webbsidan läses in (här kallas "Starta render"-punkten). Den blå linjen anger när användaren uppfattar sidan som fulladdad – från och med nu ökar sannolikheten för 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 orange området visar den fas där inget synligt innehåll återges. Fram till slutet av denna fas ser besökaren bara en vit sida. Det blå området markerar tidsintervallet mellan Start render och laddningstid under vilken besökaren kan uppfatta en synlig återgivningsprocess (t.ex. ett timglas). Båda bildar tillsammans filten laddar tid.

Test av webbsida är det enda verktyg som ger dig dessa data. Vi är inte medvetna om detta från Pingdom Tools eller GTMetrix. Denna regel gäller därför endast om du Användning av webbsidans test:

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

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

Jämfört med HTTP /1, HTTP / 2 erbjuder en avgörande fördel: Med den nyare webbstandarden, sidor laddas mycket snabbare. Men förutom ett SSL-certifikat behöver du också din värdare för att ge dig den här tjänsten. Många platsoperatörer är dock oklara om så verkligen är fallet med dem eller inte.

En av de största fördelarna med HTTP/2 är samtidig bearbetning av flera begäranden. Och du kan tydligt se dessa i ditt vattenfallsdiagram. Eftersom begäranden tas bort kronologiskt börjar flera staplar vid samma punkt på X-axeln när HTTP/2 används.

WordPress optimera laddningsbeteendet hos en WordPress sida med och utan HTTP/2
Till vänster är det typiska laddningsbeteendet hos en WordPress sidan utan HTTP/2. De enskilda HTTP-begäranden utförs sekventiellt. Till höger kan du se hur samma sida fungerar med HTTP/2: De enskilda begärandena läses in här samtidigt.

Läs in enskilda begäranden parallellt, sidan körs med HTTP/2.

Tips #5: Identifiera 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 webmasters antar att de redan har fått ut det mesta av detta.

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

Så här optimerar du dina bilder på ett förnuftigt sätt, 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 för de återstående begärandena, indikerar detta en lång bildinläsningstid.

WordPress Optimera så här ser det ut när bilderna är för stora
Ett extremt men mycket levande exempel på okomprimerade bilder. Några av filerna ensam tar ö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 vanligtvis se exakt vilka filer de är i ett vattenfallsdiagram. Detta gör sökandet efter laddningstidsbromsar mycket enklare.

Långa belastningsstaplar för bildresurser indikerar komprimeringsdetstial.

Tips #6: Hitta omdirigeringar

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

Begäranden med vidarebefordrare markeras vanligtvis i färg. Diagrammet visar också vilken vidarebefordran som är inställd och vart den leder.

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

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

Gula linjer markerar framåt.

Tips #7: Upptäcka fel i korthet

Ibland kanske 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 vattenfallsdiagramfel identifieras med röda linjer
Denna sida kastar ut en 404 fel.

I det här fallet kastar vattenfallsdiagrammet ut ett felmeddelande och markerar linjen med begäran i rött. Diagrammet visar också vilket fel som är inblandat och vilken resurs som orsakar felet.

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

Med Lathund 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 sidoperator bör tänka på: laddningstider, ordning på rendering och felmeddelanden. Beväpnad med tips från den här artikeln kan du snabbt känna igen och effektiv, där optimeringspotentialen fortfarande måste 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)?
  • Läsa in begäranden parallellt (via HTTP/2)?
  • Är bilderna för stora (så att 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 på djupet.

RAIDBOXER för den första timmen och supportchef. På Bar och WordCamps föredrar han att prata om PageSpeed och webbplatsprestanda. Det bästa sättet att muta honom är med en espresso - eller bayerska Brezn.

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

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