Webbsida test: Tämja testet monster och analysera din webbplats prestanda

Jan Hornung Senast uppdaterad den 3 december 2020
14 Min.
Test av webbsida
Senast uppdaterad den 3 december 2020

Webpagetest.org är förmodligen det bästa och mest omfattande gratis verktyg för att mäta din sida laddningstid. Tyvärr ger det en hel del mycket komplexa och mycket komplexa data. Idag visar jag dig vad du har att ställa in, hur du tar med dig ordning på data och vilka mått du behöver för en professionell analys. Eftersom endast om du vet hur du laddar dina kundprojekt och egna sidor, kan du optimera dem överst.

Visst din egen sida bör vara. Och snabbt. Naturligtvis, eftersom mycket beror på laddningstiden: omvandlingsfrekvens, säkerheten sensation av dina besökare och Google ranking av ditt erbjudande. Många WordPress -Användarna inte komma till den punkt där de kan korrekt bestämma laddningstiden för sin egen sida.

Vissa webbplatsoperatorer vet till exempel inte ens vilka verktyg de kan använda för att analysera sin sida korrekt. Eller så vet de inte vilka inställningar de behöver göra för att få riktigt bra resultat. Så att du inte gör samma misstag, jag ska visa dig idag hur du får en snabb och meningsfull översikt över din webbplats med (enligt vår mening) bästa gratis mätverktyg. Så du vet exakt hur snabbt din sida laddas och om och var du behöver för att optimera.

För att förstå exakt hur varje analyssteg fungerar råder jag dig att titta på de datamängder som länkas på de viktiga punkterna eller analysera din egen sida parallellt. Det är trots allt inte så lätt att lägga ordning i de data du vill ha. Som belöning för ansträngningen får du dock de bästa data du någonsin samlat in via din Webbplats. Och särskilt om du arbetar på uppdrag av din kund eller arbeta med din WP WordPress -Projekt tjäna dina pengar, ansträngningen är alltid värt det.

Webbsida test är det bästa verktyget vi vet

Visserligen beröm vi sprudlande webpagetest.org i denna artikel. Kanske för sprudlande, men inte för fel. Eftersom Webpagetest är det enda verktyg vi vet som gör att du på ett tillförlitligt sätt kan bestämma absolut och kände laddningstid på din sida. Och för ingenting. Ingen betalning hinder, ingen prenumeration modell, helt enkelt värdefulla data och ett APIsom gör att du kan automatisera det hela: det är hur det ska vara.

För fullständighetens skull får du också fina mätresultat med Pingdom och GTmetrix. Men inte lika vacker som med webbsida test. Naturligtvis betyder detta inte att du inte kan och inte bör säkerhetskopiera dina resultat med flera tester i olika verktyg. Och det betyder inte att du inte ska mäta med Pingdom eller GTmetrix. Men jag kan rekommendera dig att titta på webbsidan test minst en gång.

Det har nästan blivit ett mantra för oss: För att mäta laddningstiden för din webbplats, verktyg som Google PageSpeed Insights inte av. Eftersom de bara fastställa prestandapotentialen på din webbplats. Naturligtvis är dessa uppgifter fortfarande värdefull - ur en prestanda och SEO synvinkel - men helt enkelt inte tillåter dig att dra slutsatser om vad som faktiskt händer när en besökare ringer upp din webbplats.

Men det är vad du vill veta. Och det är precis vad du behöver veta för att kunna avgöra om en optimeringsåtgärd är effektiv.

Tyvärr ger webbsida test inte bara inte precis fint förberedda data men också mycket omfattande testresultat. Så idag ska jag visa dig hur du använder Webpage test och hur man tolkar resultaten i grunden.

I nästa avsnitt ska jag kortfattat diskutera några bakgrunder till verktyget. Om du inte är intresserad, hoppa bara över delen.

Webbsida test: Googles storebror PageSpeed Insights

Webpagetest var ursprungligen ett AOL-projekt och var endast avsett för internt bruk. Under 2008 blev dock programmet programvara med öppen källkod och är nu huvudsakligen underhålls och utvecklas av Google. All dokumentation för webbsidestest finns på GitHub och kan även laddas ner och användas lokalt.

Under PageSpeed Insights visar var optimeringspotentialerna på din sida ligger, kan webbsidestest vara mycket mer. Eftersom det inte bara visar hur du kan förbättra din sida, men också direkt hur dina optimeringsåtgärder påverkar webbplatsens laddningstid.

Till skillnad från Pingdom och GTmetrix finns det inget företag bakom Webpagetest som vill sälja en betaltjänst (ok, förutom Google, men åtminstone tjänsten inte säljs direkt). Snarare kan man säga att webbsidan testning är en del av Googles plan för att göra nätverket snabbare totalt sett. Men du vill utvärdera Googles ambitioner i detta sammanhang.

I 4 steg till verkligt meningsfulla data för laddningstid

Ja, webbsidetest är mer komplext än andra verktyg. Men låt dig inte skjutas upp av det! I det här fallet är komplexiteten bra. Eftersom det innebär att du får bra data via din webbplats. Och även som första gången användare får du relevant information ganska snabbt.

Och detta med följande fyra steg:

Steg 1: Ställ in testparametrar

Steg 2: Få en översikt

Steg 3: Detaljerad analys

Steg 4: Analys av filtbelastningstiden

Steg 1: Ställ in testparametrar

Webpagetest ger mycket fina inställningar för att testa din webbplats. Fyra av dessa inställningar är särskilt viktiga för att få bra mätresultat:

  • Servern att testa med (1)
  • webbläsaren att testa med (2)
  • de avancerade testinställningarna, som jag kommer att gå in på mer i detalj (3)
Startsida för Webpagetest
Så här ser startsidans startsida ut. Det är därför något mer komplex än den för Pingdom eller GTmetrix.

Den server du väljer för testet simulerar en användare som ringer sidan därifrån. Om du väljer standardserver i USA kommer testresultatet att vara utdata för en sidvy från Texas. I de flesta fall är detta dock inte nödvändigtvis vad du vill. Därför är den här inställningen mycket viktig. Detta beror på att det kan kraftigt snedvrida det övergripande resultatet och måste justeras därefter, beroende på programmet.

De två vanligaste användningsfallen är:

  1. Fastställande av laddningstiden för en användare från din målgrupp
  2. Laddtidsjämförelse efter ett optimeringsmått

Om du vill veta hur dina besökare uppfattar lastningstiden för webbplatsen, då servern plats måste motsvara så nära som möjligt till platsen för en typisk användare. För en blogg med främst tyska läsare innebär det att du ska välja en server i Tyskland, till exempel i Frankfurt.

Om du vill veta vad en optimering åtgärd som behövs, då det i princip spelar ingen roll vilken server plats du använder. Det enda viktiga är att du behöver använda samma serverplats för för- och efteroptimeringstestet. Annars kan du inte jämföra mätdata på rätt sätt. Naturligtvis rekommenderar jag en tysk testserver här också. Detta ger helt enkelt de mest realistiska resultaten.

Webbsida test: Karta för att välja testserver på Webpagetest.org
Förutom ett listval har du också möjlighet att välja testservern från en karta. Du kan också se en översikt över alla testservrar här.

Den webbläsare som används

Webbsida test ger många inställningar för att simulera specifika överföringstekniker och webbläsare. Du kan till exempel definiera att sidan ska läsas in via en 3G-anslutning och Firefox. För starten är dock valet av den webbläsare som din målgrupp använder oftast tillräckligt.

Du kan till exempel visa information om detta i Google Analytics eller Piwik. RAIDBOXES till exempel, är mest besöks via Chrome.

Utdrag ur de webbläsare som används av besökare att raidboxes.de. Dessa fungerar som en mall för inställningarna i Web Page Test.
De mest använda webbläsarna på raidboxes.de. Så för en analys i Webpagetest, skulle jag främst testa Chrome. Resultat för Firefox och Safari, å andra sidan, är naturligtvis också intressanta.

Mycket viktigt: De avancerade inställningarna avgör hur väl dina mätdata i slutändan kommer att bli!

Förutom de två parametrarna som avgör hur du testar— serverplatsen och vilken webbläsare som används— ger webbsidans test också möjlighet att ställa in vad testet ska mata ut i slutet. I de avancerade inställningarna kan du till exempel definiera att endast vissa värden ska vara utdata, eller att mätningen ska stoppas automatiskt efter en viss tid. Och här är två inställningar som är särskilt viktigt att få någorlunda omfattande och tillförlitliga uppgifter: den "Antal tester att köra" och "Upprepa View".

I princip bör du mäta mer än en gång när du mäter laddningstiden. Annars riskerar du att mäta extremvärden och kanske letar efter ett problem som inte finns. Och tro mig, vi har sett det här några gånger. Jag rekommenderar minst tre på varandra följande tester.

Dessutom bör du alltid komma ihåg att mäta den carated versionen av din sida. Du kan göra detta med alternativet Upprepa vy.

Avancerade inställningar för webbsidans test
I de avancerade inställningarna för Webpagetest ligger den sanna magin i verktyget. Endast om du väljer minst 3 tester här och även inkluderar Repeat View, kommer de data du får bli riktigt intressant.

Om du har angett din webbadress , dvs https://raidboxes.de – och ställt in testparametrarna (dvs. den tyska servern, webbläsaren, de minst 3 repetitionerna och Repeat View) kan du starta testet. Beroende på hur många andra användare som testar sina sidor kan analysen ta några minuter.

Viktigt är att Webpagetest bara testar den sida som kan nås vid webbadressen, inte hela din webbnärvaro. Det innebär att du ska testa din startsida, alla målsidor och, om relevant, din produktöversikt individuellt.

I den här guiden arbetar jag med data från analysen av vår hemsida, raidboxes.de. Det betyder att du kan återskapa allt som förklaras här en till en i webpagetest.org. Klicka bara här och du kommer att få resultaten av analysen.

Steg 2: Få en översikt

Det första du ser är översikten för sidinläsningstid. Detta är indelat i tre områden:

  • testparametrarna och resultaten av de potentiella analyserna (1)
  • fördelningen av de viktigaste karaktäristiska värdena (2)
  • översikten över sidstrukturen (3)
Översiktsresultatet för webbsidans test
Översikt över de första resultaten av webpagetest.org

(1) Ju mer grönt, desto bättre

I den första rutan listas testparametrarna igen för inspektion. Om du fortfarande hittar ett fel här, bara upprepa testet. Du kan också se resultatet av den potentiella analysen. Webpagetest ger dig också resultaten av Google PageSpeed Insights Från. Så om du klarar av den spartanska representationen av Webpagetest kan du klicka på PageSpeed Insights Avståtts.

I Webpagetest används en skolbetyg och färgkod. A är den bästa, F är det sämsta betyget. Grönt indikerar en bra grad av optimering, orange indikerar användbar optimeringspotential och rött indikerar akut behov av åtgärder.

(2) Ju snabbare, desto bättre

I det andra avsnittet av resultaten får du alla relevanta nyckeldata av din sida laddningstid presenteras för smakade och oavslutade versionen av din sida. Viktigt, webbsidetest endast utdata värdena för en av de tre testen i översikten. Vilken är, visar översikten bredvid Lables Första vy och Upprepa vy dig. Kör 2 är därför, till exempel, resultatet för den andra testkörningen.

Förklaring av de individuella resultaten av Webpagetest
Tyvärr finns denna översikt endast för enskilda mätresultat, dvs enskilda provkörningar. För de riktigt värdefulla värdena måste man gå en nivå djupare. Jag ska förklara hur man gör det.

Fem värden är särskilt viktiga här:

  • Ladda tid: Den tid det tar för din webbplats att känna att sidan är fullastad. Inläsningstiden motsvarar den kände totala laddningstiden för din sida.
  • Första byte: Dags att skicka in den första databyte mellan klienten och webbservern. Detta värde bör vara mindre än 200 millisekunder om möjligt och är en viktig indikator på resultatet för din hosting.
  • Starta Render: Det här värdet beskriver den tid en sida läses in tills innehåll visas för besökaren för första gången. Fram till denna punkt kommer sidan att förbli helt vit för användaren. Detta värde bör naturligtvis också vara så lågt som möjligt. Tillsammans med inläsningstiden (eller Dokument färdigt) är detta värde betygsmåttet för den upplevda platshastigheten. Start Återge markerar början på den synliga inläsningen av din sida, Dokumentet Slutför slutet.
  • Dokumentet är färdigt: Det här värdet är samma som Inläsningstid.
  • Fullt laddad: Det här värdet anger när sidan är full, laddad med alla skript och element. Den beskriver den totala tekniska laddningstiden för sidan. Detta är oftast irrelevant för besökaren. Det mest avgörande är filtladdningstiden.

För alla dessa värden, desto mindre, desto bättre. Som riktlinje kan du komma ihåg:

  • tid till första byte ska vara mindre än 200 millisekunder
  • Startåtergivningen ska inte vara större än 2,5 sekunder
  • Dokumentet Färdigt bör inte vara större än fem sekunder

Naturligtvis är dessa värden bara tumregler. Det beror alltid på din sida: En butikssida med 50 produkter – dvs 50 eller fler bilder och beskrivningstexter – laddar långsammare än en avtryckssida, som endast består av text.

Därför kan jag bara ge råd: Testa sidorna av den direkta konkurrensen och dina förebilder. Detta är hur du får bransch-interna riktmärken.

Göra medelvärden - Nu är det dags att komma ner till rätt plats

Tyvärr visar ovanstående översikt bara resultaten av ett enda mätpass. Och du kommer ihåg: individuella, isolerade värden kan vilseleda dig. Därför har du gjort minst tre mätningar i följd för att testa webbplatsen. Och medelvärdena för dessa tre mätningar är de bästa approximationer du kan få för din sida laddningstid.

Och oroa dig inte: Att skapa medelvärden behöver bara ett knapptryck:

Webpagetest Resultat plottning
Genom att klicka på alternativet tomt, bildar Webpagetest medelvärdena för dina mätresultat.

Nu får du en initialt förvirrande mängd data från så kallade tomter. Och det är precis de resultat du vill ha. I princip är denna nya översikt densamma för alla värden. Så när du förstår hur man läser dem, de är allt annat än förvirrande.

Webbsidatesta plotvy
Dessa tomter illustrerar suveränt varför du alltid ska utföra flera mätningar: Mätpunkt 3 är nästan en sekund sämre än mätpunkt 1. Bildandet av medel är därför av avgörande betydelse för en professionell prestandaanalys.

Som ni ser dras alla tre avläsningarna (1-3) här i ett diagram (anmärkningsvärt här är skillnaden mellan mätpunkt 1 och mätpunkt 3!). Ovanför observationsområdet finns det värde som diagrammet refererar till (4). I det här fallet kände laddningstiden (Dokument Complete eller Load Time). Talet i kolumnen Medelvärde beskriver nu det genomsnittliga belastningstidsvärdet över alla tre mätningar (5). Detta genomsnitt är den mest värdefulla info du kan få från din sida.

Förresten: Med hjälp av anticken av Box Repeat kan du också ha värdena för inläsningstiden med och utan cachelagring av utdata. Och om du vill hitta resultaten för de andra värdena: bara söka efter "Första byte" och "Starta Render" via din webbläsare sökning (CTRL + F för PC och cmd + f för Mac).

Interimsslutslut: Mycket arbete för särskilt värdefulla data

Ok, det var mycket input. Och det fanns många steg att arbeta. Speciellt jämfört med enkla testmetoder. Men ansträngningen är värt det, eftersom du har sett det från siffrorna i diagrammen: Två tester med samma inställningar kan ibland vara en hel sekund isär. Så slumpen kan avgöra om du investerar tid och pengar för att ytterligare optimera dina sidor. Och precis när du är WordPress Tjäna dina pengar, vare sig med din egen butik, webbdesign kontor eller byrå, bör du ha den bästa data grunden för ett sådant beslut.

I själva verket är vi ännu inte i slutet. För nu vet du de viktigaste prestandamåtten för din webbplats, så att du vet hur snabbt sidan laddas och om det fortfarande finns optimeringspotential, men du vet ännu inte var exakt din sida kan förbättras. Och det är precis vad detaljerad analys är avsedd för.

Steg 3: Detaljerad analys

Översikten berättar redan mycket om din sida. Du kan se om det fortfarande finns utrymme för förbättringar i vissa områden, hur snabbt din sida faktiskt laddas, och om det inte kunde ladda lite snabbare. Men du vet ännu inte orsakerna till problemen. Du kan dock hitta dessa i de detaljerade rapporterna:

  • vattenfallet diagram
  • potentiell analys

Vattenfallsdiagrammen listar varje http-begäran som en webbläsare placerar på webbservern. Vid första anblicken verkar dessa diagram mycket komplexa och förvirrande. Men om du vet hur, kan du dra en hel del detaljer över din sida från ett vattenfall diagram med bara en blick. Här visar vi hur du läser vattenfallsdiagram korrekt och hur du använder dem för att ytterligare optimera din sida.

I grund och botten har en snabb sida ett kort vattenfallsdiagram med få korta önskemål. Det innebär att längden på diagrammet och längden på staplarna i varje rad är särskilt relevanta.

I Prestationsgranskningen hittar du detaljerad information om hur väl webbplatsens prestanda redan är optimerad. Denna detaljgranskning innehåller i sin tur tre element:

  • optimeringschecklistan
  • Den detaljerade uppdelningen av prestandatestet
  • ordlistan

Du bör titta på ordlistan först när du analyserar din sida webpagetest.org för första gången. Här förklaras alla viktiga villkor i Prestationsgranskningen.

Utdrag ur ordlistan för Webpagetest.
Tyvärr på engelska, men webbsidan test faktiskt förklarar varje teknisk term i detalj.

I Optimeringschecklistan hittar du de individuella utvärderingskriterier som tillämpas på var och en av HTTP-begäranrna. En grön fästing innebär att kravet uppfylls, en gul triangel märken behöver förbättras, ett rött kors indikerar frånvaron av den föreslagna optimeringsåtgärd.

Ett utdrag ur Prestandachecklistan för WebpageTest.
Med optimeringschecklistan kan du till exempel se exakt vilka bilder av din sida som fortfarande har optimeringspotential, vilka förfrågningar som ska komprimeras ytterligare och om din cachelagring fungerar som den ska.

Slutligen hittar du en beskrivning av varningarna och saknade optimeringsåtgärder i detaljersavsnittet. I webbsidestestet beskrivs de optimeringar som fortfarande är möjliga för varje resurs. Bilder visar till exempel hur mycket datavolym som kan sparas.

Med dessa detaljerade utvärderingar du måste ta itu med en tid, men med deras hjälp kan du få en detaljerad bild av din sida och dess optimering potential.

Och eftersom det i princip är samma information som PageSpeed Insights spotta ut, naturligtvis kan du också helt enkelt köra en PageSpeed analys parallellt. Eftersom detta test är mycket trevligare och bättre förberedda.

Steg 4: Analys av filtbelastningstiden

Till skillnad från alla andra tester vi känner till är Webpagetest den enda som visar filta laddningstiden för din Webbplats gratis. Du kan titta på en video av sidstrukturen via Filmtripview. På så sätt kan du se exakt vad dina besökare ser och kan utvärdera ännu bättre om och hur din sida ska optimeras.

Hitta Webbsidatest Filmstripview
Du hittar filmen stripview i översikten av dina mätresultat längst till höger. Var försiktig: Det här alternativet visas inte alltid. Varför är det inte helt klart för mig? Att upprepa testet har dock alltid gjort alternativet tillgängligt.

Filten laddar tid är antagligen det viktigaste kännetecken av din sida laddar tid. Det påverkar om dina besökare lämnar webbplatsen tidigt, konverteringssannolikheten och den övergripande upplevelsen av din webbplats. Speciellt för butiker är den upplevda webbplatsens hastighet därför en viktig riktlinje. Naturligtvis ska filtladdningstiden alltid vara så låg som möjligt.

Förutom filmremsansvyn bör du komma ihåg följande:

Schematisk representation av sidinläsningstid
Den totala totala laddningstiden filt bör vara så låg som möjligt. Samtidigt är det viktigt att avståndet mellan T0 och Start Render är så litet som möjligt. För då får användaren intrycket väldigt tidigt att sidan är fullastad, även om det är långt därifrån.

Filstripvyn visar du tiondelar av en sekund exakt hur din sida ser ut och vilka processer som utförs vid respektive tidpunkt. Om du tittar på testet med dessa data,ser du att ingenting händer på sidan i mer än tre sekunder. Men då sidan ser nästan samma i ett svep som det gör i det slutliga tillståndet. Användaren får intrycket att sidan är helt laddad inom 3,5 sekunder. Relatedly, besökaren har redan känslan efter 3,5 sekunder att han kan interagera med webbplatsen.

Speciellt när du prioriterar det synliga sidinnehållet är Filmtrip View ett mycket värdefullt verktyg.

Slutsats: Med dessa grunderna och lite övning får du en mycket bra överblick över din webbplats

Ok, efter att ha läst artikeln, bör du nu kunna välja rätt inställningar för en webbsida test, vet vilka mått du behöver tolka och hur man kan förhindra feltolkningar på grund av extremvärden. Du vet också var du hittar detaljerad information om din sida och hur du bestämmer den kände laddningstiden för din sida och hur du kan visa den.

Detta ger dig de viktiga grunderna för att få en verkligt omfattande översikt över din egen sida, dina kunders sidor och alla andra webbprojekt. Och du vet var du kan få den information som gör att du kan få mätresultaten till liv och dra meningsfulla slutsatser för din webbplats.

Men varför var det här viktigt igen? Helt enkelt: Utan en rimlig mätning av det faktiska tillståndet på din sida, kan du inte korrekt betygsätta hur din sida är för närvarande lastning. Å andra sidan saknar du information för att optimera laddningstiden.

Har du ett tips för att använda Webpagetest? Perfekt, skriv sedan en kommentar på detta inlägg!

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.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

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