Webbsida test: Tämja testet monster & analysera dina webbplatser

Jan Hornung Senast uppdaterad den 23 jan 2020
14 Min.
Test av webbsida
Senast uppdaterad den 23 jan 2020

WebPagetest (Olikartade) ä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 ordning på data och vilka mått du behöver för en professionell analys. För bara 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: omvandlingsfrekvensen, säkerheten känsla av dina besökare och Google ranking av ditt erbjudande. Många WordPress -Användare kommer inte till den punkt där de kan korrekt bestämma laddningstiden för sin egen sida.

Vissa webbplatsoperatörer vet till exempel inte ens vilka verktyg de kan använda för att analysera sin sida korrekt. Eller de vet inte vilka inställningar de behöver göra för att få riktigt bra resultat. Så att du inte gör samma misstag, ska jag 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 optimera.

För att förstå exakt hur varje analyssteg fungerar, råder jag dig att titta på de datamängder som är länkade på viktiga punkter eller analysera din egen sida parallellt. När allt kommert är det inte så lätt att sätta ordning i de data du vill. Men som en belöning för ansträngningen får du de bästa data du någonsin samlat in via din webbplats. Och speciellt om du arbetar på uppdrag av din kund eller arbeta med din WP WordPress -Projekt tjänar dina pengar, ansträngningen är alltid värt det.

Webbsida test är det bästa verktyget vi vet

Visserligen prisar vi webpagetest.org sprudlande 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 den absoluta och kände laddningstiden för din sida. Och för ingenting. Ingen betalningsbarriär, ingen prenumerationsmodell, helt enkelt värdefulla data och en API, vilket gör att du kan automatisera det hela: det är så det ska vara.

För fullständighetens skull kan du också Pingdom Och GTmetrix (1998) vackra mätresultat. 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å webbsida 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 bestämmer prestandapotentialen på din webbplats. Naturligtvis är dessa data fortfarande värdefulla - 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 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 Webbsida 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 av detta, Hoppa över delen är lätt.

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 öppen källkod och är nu huvudsakligen förvaltas och vidareutvecklas av Google. All dokumentation av Webpagetest finns på Github och kan också Hämtade och används lokalt.

Under PageSpeed Insights som visar var optimeringspotentialen på din sida ligger, kan webbsidan testet vara mycket mer. Eftersom det inte bara visar hur du kan förbättra din sida, men också direkt hur din optimering åtgärder påverkar din webbplats 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 webbsida 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 laddningstidsdata

Ja, webbsida test är mer komplex än andra verktyg. Men låt dig inte avskräckas 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örstagångsanvändare får du relevant information ganska snabbt.

Och detta med följande fyra steg:

Steg 1: Ställa in testparametrar

Steg 2: Få en översikt

Steg 3: Detaljerad analys

Steg 4: Analys av filtladdningstiden

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 mer i detalj (3)
Hemsida för Webpagetest
Så här ser hemsidan för startsidan ut. Det är därför något mer komplext än Pingdom eller GTmetrix.

Den server du väljer för testet simulerar en användare som anropar sidan därifrån. Om du väljer standardservern i USA matas testresultatet ut 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 totala resultatet och måste justeras i enlighet med detta, beroende på ansökan.

De två vanligaste användningsfallen är:

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

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

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

Webbsidestest: Karta för att välja testservern 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. Till att börja med räcker det dock att välja vilken webbläsare som målgruppen använder oftast.

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

Utdrag från de webbläsare som används av besökare till raidboxes.de. Dessa fungerar som en mall för inställningarna i Webbsida 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å intressant.

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

Förutom de två parametrar som avgör hur du ska testa – serverplatsen och den webbläsare som används – ger webbsidans test också möjlighet att ange vad testet ska skrivas ut i slutet. I de avancerade inställningarna kan du till exempel definiera att endast vissa värden ska matas ut eller att mätningen ska stoppas automatiskt efter en viss tid. Och här är två inställningar som är särskilt viktiga för att få någorlunda omfattande och tillförlitliga data: "Antal tester att köra" och "Upprepa vyn".

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 karda versionen av din sida. Du kan göra detta med alternativet Upprepa vy.

Avancerade inställningar för webbsidatest
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 innehåller repeat view, kommer de data du får att bli riktigt intressanta.

Har du din webbadress - t.ex. https://raidboxes.de – ange och ställa in testparametrar (dvs. den tyska servern, webbläsaren, minst 3 repetitioner och upprepa vyn), 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 testar bara den sida som kan nås på webbadressen, inte hela din webbnärvaro. Det innebär att du bör testa din hemsida, alla målsidor och, i förekommande fall, din produktöversikt individuellt.

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

Steg 2: Få en översikt

Det första du ser är sidans tidsöversikt. Detta är indelat i tre områden:

  • testparametrarna och resultaten av de potentiella analyserna (1)
  • uppdelningen av de viktigaste karakteristiska värdena (2)
  • översikten över sidstrukturen (3)
Översiktsresultaten för webbsidan testet
Översikt över de första resultaten av webpagetest.org

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

I den första rutan visas 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.

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

(2) Ju snabbare, desto bättre

I den andra delen av resultaten får du alla relevanta viktiga data för din sida laddningstid presenteras för smakade och oavslutade versionen av din sida. Viktigt är att webbsidestestet bara matar ut värdena för ett av de tre testerna i översikten. Vilken är, visar översikten bredvid Den första vyn lables och upprepningsvyn dig. Kör 2 är till exempel resultatet för den andra testkörningen.

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

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

  • Laddningstid: Den tid det tar för din webbplats att känna att sidan är fulladdad. Laddningstiden motsvarar sidans filttid för den totala laddningstiden.
  • Första byte: Dags att skicka den första databyten 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 ditt webbhotell.
  • Starta rendering: Det här värdet beskriver den tid en sida läser in tills innehållet visas för besökaren för första gången. Fram till denna punkt förblir sidan helt vit för användaren. Detta värde bör naturligtvis också vara så lågt som möjligt. Tillsammans med laddningstiden (eller Dokument complete) är detta värde klassificeringsmåttet för den upplevda platshastigheten. Starta Render markerar början på den synliga inläsningen av sidan, Slutför slutet.
  • Dokumentet har slutförts: Det här värdet är detsamma som laddningstid.
  • 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, ju mindre, desto bättre. Som riktlinje kan du komma ihåg:

  • första byte bör vara mindre än 200 millisekunder
  • Startåtergivningen bör inte vara större än 2,5 sekunder
  • Dokumentet är slutfört bör inte vara längre ä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 – laddas långsammare än en avtryckssida, som endast består av text.

Därför kan jag bara råda: Testa sidorna av den direkta konkurrensen och dina förebilder. Det är så här du får branschintern riktmärken.

Att göra medelvärden - Nu är det dags att komma ner till rätt ställe

Tyvärr visar ovanstående översikt bara resultaten av ett enda mätpass. Och du kommer ihåg: individuella, isolerade värderingar kan vilseleda dig. Det är därför du har gjort minst tre på varandra följande mätningar för att testa din webbplats. Och medelvärdena för dessa tre mätningar är de bästa approximationerna du kan få för din sida laddningstid.

Och oroa dig inte: Skapa medelvärden behöver bara en knapptryckning:

Webbplatstest Resultat plottning
Genom att klicka på ritytan 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 här är precis de resultat du vill ha. I princip är den nya översikten 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.

Webbplatstest plotvy
Dessa ritplaner illustrerar utmärkt varför du alltid bör utföra flera mätningar: Mätpunkt 3 är nästan en sekund värre än mätpunkt 1. Det är därför nödvändigt att eterna av medel för en professionell prestationsanalys.

Som ni kan se, alla tre avläsningar (1-3) ritas här i ett diagram (anmärkningsvärt här är skillnaden mellan mätpunkt 1 och mätpunkt 3!). Ovanför ritytan finns det värde som diagrammet refererar till (4). I det här fallet filtladdningstiden(Dokument komplett eller laddningstid). Talet i kolumnen Medel beskriver nu det genomsnittliga belastningstidsvärdet för alla tre måtten (5). Det här genomsnittet är den mest värdefulla information du kan få från din sida.

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

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

Ok, det var en hel del 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 ifrån varandra. 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, oavsett om du är med din egen butik, webbdesign kontor eller byrå, bör du ha den bästa datagrunden för ett sådant beslut.

Faktum är att vi ännu inte är i slutet. För nu vet du de viktigaste prestandamåtten på din webbplats, så att du vet hur snabbt sidan läses in och om det fortfarande finns optimeringspotential, men du vet ännu inte exakt var 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 hittar dock dessa i de detaljerade rapporterna:

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 rita mycket information över din sida från ett vattenfallsdiagram med bara en blick. Här visar vi hur du läser vattenfall diagram 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 några korta förfrågningar. Detta innebär att diagrammets längd och längden på staplarna i varje rad är särskilt relevanta.

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

  • Checklista för optimering
  • Den detaljerade uppdelningen av prestandatestet
  • ordlistan

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

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

I checklista för optimering hittar du de enskilda utvärderingskriterier som tillämpas på var och en av HTTP-begäranden. En grön bock 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ärden.

Ett utdrag från checklistan för webbsidatest.
Med optimeringschecklistan kan du till exempel se exakt vilka bilder av din sida som fortfarande har optimeringspotential, vilka begäranden som ska komprimeras ytterligare och om cachelagringen fungerar som den ska.

Slutligen hittar du en beskrivning av varningar och saknade optimeringsåtgärder i informationsavsnittet. Webbsidestest beskriver 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 måste du ta itu med lite tid, men med deras hjälp kan du få en detaljerad bild av din sida och dess optimeringspotential.

Och eftersom det är i stort sett 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 filtlasttiden

Till skillnad från alla andra tester vi vet, är Webpagetest den enda som visar filten laddningstiden för din webbplats gratis. Du kan titta på en video av sidstrukturen via Filmstripview. 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 Webpagetest Filmstripview
Du hittar filmen stripview i översikten över dina mätresultat längst till höger. Varning: 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.

Filtladdningstiden är förmodligen det viktigaste kännetecknet för sidans laddningstid. 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 bör filtladdningstiden alltid vara så låg som möjligt.

Förutom filmen stripview, bör du komma ihåg följande:

Schematisk representation av sidans laddningstid
Den totala totala laddningstiden som känns 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 mycket tidigt på att sidan är fulladdad, även om den är långt ifrån den.

Filstripvyn visar dig tiondelar av en sekund exakt hur sidan ser ut och vilka processer som utförs vid respektive tidpunkt. Om du gör testet med dessa data, då inser du att ingenting händer på sidan i mer än tre sekunder. Men då ser sidan nästan likadan ut i ett svep som det gör i sluttillståndet. Användaren får intrycket att sidan är fulladdad inom 3,5 sekunder. Relaterat har besökaren 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 översikt ö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 filtinläsningstiden för din sida och hur du kan se den.

Detta ger dig de viktiga grunderna för att få en verkligt omfattande översikt över din egen sida, dina kunders sidor och 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 detta viktigt igen? Helt enkelt: Utan en rimlig mätning av det faktiska tillståndet På sidan kan du inte betygsätta hur sidan läses in för tillfället. Och å andra sidan, du saknar information för Optimering av laddningstid.

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

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.