Webperf
Mellan 2011 och 2015 drev jag en webbplats, webbfunktion.com, där man enkelt kunde testa sin webbplats prestanda genom att skriva in adressen. Den webbplatsen är nu nedlagd i väntan på en snyggare lösning.
Under dessa år har nästan 61 000 webbsidor utvärderats. De kriterier som körts har varit främst första versionen av Google Pagespeed. Utvärderingskriteriet har varit med de behov en vanlig datoranvändare har. Här kommer vi in på anledningen till att jag behöver göra ett nytag. Idag finns det en nyare version av Google Pagespeed och rimligen är det med mobila preferenser man ska köra dessa tester (vilket jag gör i mina andra utvärderingar).
Genomsnittlig webbprestanda
För dig som är lite nyfiken på dessa 1,6 miljoner datapunkter har jag gjort några sammanställningar. Nedan lista läser du på sättet att värdet är mellan 0-100, där det bästa betyget är 100. Det kan bland annat vara intressant att jämföra med sin egen webbplats.
- Google Pagespeed-betyg (score) - 73.5
- Minimera HTTP-förfrågans storlek (MinimizeRequestSize) - 99.93
- Göra landningssidors hänvisningar cachningsbara (MakeLandingPageRedirectsCacheable) - 99.1
- Lägg CSS i sidhuvudet (PutCssInTheDocumentHead) - 98.6
- Speca teckenuppsättning, tidigt (SpecifyCharsetEarly) - 98.1
- Skicka filer asynkront (PreferAsyncResources) - 97.9
- Undvik import i CSS-filer (AvoidCssImport) - 97.8
- Ange en cache-validator (SpecifyACacheValidator) - 97.6
- Ha endast en adress till en fil (ServeResourcesFromAConsistentUrl) - 97.4
Exempel: Ibland laddar man in identiska filer fast från olika adresser. - Lägg små Javascript inline i HTML-koden (InlineSmallJavaScript) - 97.4
- Fixa så Javascript och CSS kommer i rätt ordning (OptimizeTheOrderOfStylesAndScripts) - 97.2
- Minska antalet hänvisningar (MinimizeRedirects) - 96.96
Exempel: Ibland blir det långa kedjor av hänvisningar innan man är framme vid målet. - Undvik felaktiga hämtningar (AvoidBadRequests) - 96.9
Exempel: försöker hämta in en bild som inte längre finns. - Lägg små CSS-filer inline i HTML-koden (InlineSmallCss) - 95.9
- Inte ha frågetecken i adressen till statiska filer (RemoveQueryStringsFromStaticResources) - 95.8
- Förminska Javascript (MinifyJavaScript) - 92.5
Exempel: ta bort onödiga mellanslag, tomma rader m.m. från filen så den blir mindre. - Skala ner bilderna till rätt upplösning (ServeScaledImages) - 91.9
- Förminska HTML-koden (MinifyHTML) - 88.6
Exempel: ta bort onödiga mellanslag, tomma rader m.m. från filen så den blir mindre. - Undvik onödiga omritningar av gränssnittet (EliminateUnnecessaryReflows) - 86
Exempel: om en serie Javascript-händelser påverkar utseendet på sidan kommer gränssnittet behöva ritas om flera gånger. - Tillåt filer att skickas i flera olika format (SpecifyAVaryAcceptEncodingHeader) - 85.9
Exempel: webbserver låter besökarens utrustning styra om filer ska skickas komprimerat eller uppackat. - Låt filer skickas från flera olika platser (AvoidExcessSerialization) - 83.1
Exempel: som att man har bilder på media.webbsajt.se när sajten som sådan ligger på webbsajt.se - Fördröj körning av Javascript (DeferParsingJavaScript) - 82.9
- Optimera bilder (OptimizeImages) - 72.5
Exempel: bilder kan oftast sparas hårdare komprimerat för visning på webben, dessutom gärna ha körts genom förlustfri komprimering som Imageoptim mfl program. - Slå samman bilder till en bildkarta (SpriteImages) - 72
Exempel: det går oftast fortare att ladda hem en stor bild än många små. - Förminska CSS-filerna (MinifyCss) - 57.4
Exempel: ta bort onödiga mellanslag, tomma rader m.m. från filen så den blir mindre. - Aktivera komprimering av textfiler (EnableGzipCompression) - 46.5
- Använd webbläsarens cache, sätt livslängd på filer (LeverageBrowserCaching) - 21.3
Det finns några riktigt enkla grejer allt för få gjort. Som att använda komprimering och sätta en förväntad livslängd på filer. Skulle gjort stor skillnad och tar nästan ingen tid alls att fixa.
Lite annan data som också samlats in
- Antalet filer per sidvisning (numberResources) - 37.9 st
- Antalet statiska filer per sidvisning (numberStaticResources) - 29.7 st
- Svarskod enligt HTTP (responseCode) - 203.6
Exempel: när en sida inte kan hittas skickas kod 404, när det funkar kod 200, med andra ord har väldigt få sidor försvunnit över tid. - Genomsnittlig längd på sidtitlar (seotitlelen) - 42.5
- Antal Javascript-filer per sidvisning (numberJsResources) - 9.7 st
- Antal CSS-filer per sidvisning (numberCssResources) - 4.2 st
- Antalet domäner inblandade i en sidvisning (numberHosts) - 5.7 st
Så länge som man inte använder protokollet HTTP/2 så är praxis att försöka ha så få filer som möjligt. Exempelvis räcker det alldeles utmärkt med en enda Javascript-fil, eller en enda CSS-fil. Har man nästan 38 filer per sidvisning kan det i ett mobilt scenario betyda 38 x 1,2 sekunder i ren väntetid innan filer kommer börja skickas till användaren. Det duger ju inte riktigt.
Du som inte orkar vänta på min nästa tjänst för denna typ av webbanalys kan alltid kolla in filen default.py på Github (github.com/marcusosterberg/webcheck)
