Yellow Lab Tools: Kvalitet på frontend och GUI-prestanda

“Inte så jävla krångligt” var titeln på Jonas Söderströms senaste bok till kommunikatörer. Den poängen går att återanvända i fler sammanhang. Som för oss som bygger webbplatser - gör inte tekniken så jävla krånglig. Ett mätbart sätt att kolla detta är Yellow Lab Tools, vilket är ett av Webperfs tester.

“No website should go live without being tested on Yellow Lab Tools”
– YellowLabTools: WebPerf and front-end quality testing tool (Github)

Webperf har ett flertal olika prestandatester. Utöver utmärkta Sitespeed.io och Google Lighthouse API har vi också ett ytterligare test kallat Yellow Lab Tools (YLT). Yellow Lab Tools är specialiserat på gränssnittskod och den konfiguration som påverkar gränssnittet gentemot användarna av våra webbplatser.

Webperf har haft Yellow Lab Tools sedan i oktober 2018 och har nu under dessa två första åren börjat trimma in testet i vårt betygsystem med 1-5. Det innebär att du bör ta resultaten med en nypa salt för tidiga resultat, men nu i november 2020 har vi kalibrerat testet en aning.

Vill du testa Yellow Lab Tools finns den i en enkel och praktisk version på webben. Nyttan med testerna här på Webperf är som vanligt att enkelt kunna jämföra flera webbplatsers resultat.

Betygsättning med data från Yellow Lab Tools

De webbplatser som listas på Webperf utvärderas egentligen enbart baserat på hur deras startsidor presterar. Det gäller alla tester, förutom det som handlar om 404-meddelanden och standardfiler som robots.txt Tanken är att det är det minst orättvisa sättet att jämföra webbplatser - att startsidor är mer jämförbara än genomsnittet av ett antal sidor på respektive webbplats.

Genomsnitt för startsidors betyg på Webperf för Yellow Lab Tools är 3,31 av 5 om vi utgår från 18 november 2020.

Algoritm för betyg med Yellow Lab Tools

Betyget grundar sig på Yellow Lab Tools omdöme globalScore. Från och med 18:e november funkar det på följande sätt:

(int(yellow_lab) / 20) + 0.5

Alltså omvandlas en skala mellan 0-100 till skalan 0-5.

Dessutom med 0,5 som handikapp / bonus. Annars skulle bara de med 100 i Yellow Lab Tools globalScore få en femma i Webperfs betyg. Utöver det har vi på Webperf undantaget att ifall en webbplats ändå hamnar under 1,0 så kommer de åtminstone få en 1:a i betyg. Med tanke på att vi ger 0,5 i handikapp och att genomsnittet i skrivande stund är 3,31 så känns betyget ganska balanserat.

Tidigare Yellow Lab Tools-betyg än 18:e november 2020

Innan 18:e november 2020 utgick betyget från Yellow Lab Tools på globalScore för att sätta ett betyg. Närmare bestämt:

100-91 = 5 i betyg
71-90 = 4 i betyg
51-70 = 3 i betyg
31-50 = 2 i betyg
->30 = 1 i betyg

En webbplats på Webperf kan som lägst få en etta i betyg på respektive test.

Kriterier i Yellow Lab Tool

Yellow Lab Tools kollar som sagt GUI (Graphical User Interface), vilket kan göras mer eller mindre komplicerat och på så sätt påverka användarupplevelsen.

Följande saker kontrolleras av Yellow Lab Tools:

globalScore - totalbetyget Webperf använder sig av
pageWeight - webbsidans tyngd gör den långsammare, särskilt mycket på en trög internetuppkoppling.
requests - antalet filer/förfrågningar leder till fler beroenden att lösa ut, fler filer att ladda hem och att förhoppningsvis alla lyckas laddas ner varje gång till varje besökare
domComplexity - DOM betyder Document Object Model och det handlar om hur stor och komplex denna struktur är bakom kulisserna för en webbsida
domManipulations
scroll
badJavascript
jQuery
cssComplexity
badCSS
fonts
serverConfig - finns det brister i hur webbservern är konfigurerad?

Varianter av Yellow Lab Tools

Den variant av Yellow Lab Tools som används på Webperf är en lokal kopia genom NodeJS pakethanterare npm i våra testdatorer. Du kan också använda Yellow Lab Tools på följande sätt:

Förtydligande 2021: Varför skiljer sig mitt betyg på Webperf med yellowlab.tools?

De tester Webperf gör med Yellow Lab Tools är med en äldre version av deras test än det som de sedan början av 2021 används på yellowlab.tools, det vill säga deras 2.0-version.
När de släpper 2.0 öppet för oss utomstående kommer vi givetvis gå över till det nya testet – när vi fått det att funka på ett bra sätt. Största skillnaden tycks vara att yellowlab.tools 2.0 stödjer nyare bildformat, vilket straffar sig på den äldre versionen. Så bråka inte med dina webbutvecklare om YLT-betyget på Webperf.se :)