Del 6 Att testa sin webbplats

Det är god idé att både under utveckling men framför allt innan lansering testa flertalet aspekter av sin webbplats. Redan i Webbutveckling 1 pratade vi om validering av HTML och CSS men det finns flertalet andra tester att genomföra – t.ex. tillgänglighet, hastighet, semantik mm.

Nedanstående lista är en samling av de vanligaste testverktygen som är externa. Det finns även massvis med testverktyg som går att bygga in i utvecklarens arbetsflöde men då är vi mer inne på Webbutveckling 3 istället för 2.

Ögna igenom verktygen nedan och bekanta dig lite snabbt med de som är nya för dig.

6.1 Nu HTML Checker (Online/VS Code)

Används för validering av HTML och CSS. Du har tillägg installerade i Visual Studio Code (W3C Validation, CSSTree validator) som genomför denna kontroll direkt i editorn men du kan även klistra in kod eller en webbadress på onlinetjänsten som är tillgänglig på validator.w3.org/nu

6.2 WCAG Contrast Checker (Firefox Extension)

Ett tillägg till Firefox som ger dig kontrastvärden för nuvarande webbplats och huruvida dessa uppfyller olika standarder eller ej. Ett rimligt krav är att åtminstone inte få några fel på den lägre kravnivån – AA. Du startar Firefox, går till adressen addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker och väljer Lägg till.

6.3 Lighthouse Audits (Chrome Dev Tools)

I Chromes inspektörsmodul (Chrome Dev Tools) finns flertalet nyttiga verktyg. Ett som du tidigare kanske inte har nyttjat är Audits som är ett testbatteri baserat på ett paket som heter Lighthouse. Högerklicka, inspektera, välj fliken Audits och kör igång testerna. För att detta ska fungera måste sidan du är inne på begäras från en webbserver.

6.4 Wave WebAIM

Ett tillägg till antingen Firefox eller Chrome som genomför ett gäng tester av typen tillgänglighet. Gå till wave.webaim.org/extension och välj din installation.

6.5 Googles mobilvänlighetstest (Online)

Testet kontrollerar hur väl sidan fungerar på en mobil enhet. Observera att för att detta verktyg skall fungera helt korrekt så bör din webbplats vara publicerad och åtkomlig online. Det går visserligen att klistra in kod men för att bilder och andra Webbutveckling 2 resurser skall läsas in korrekt måste dessa vara möjliga att nå via en webbadress. Du finner verktyget på search.google.com/test/mobile-friendly

6.6 Manuella tester

Automatiserade tester och testverktyg underlättar arbetet väldigt mycket med man ska inte underskatta värdet av manuella tester – särskilt när det kommer till saker som är lite svårare att mäta, som t.ex. användarupplevelse. Genom att låta någon annan än utvecklaren/utvecklarna faktiskt prova webbplatsen/gränssnittet kan man få ovärderlig feedback och upptäcka saker som kanske endast är självklara för några enstaka personer.

6.7 Minify (Online/VS Code)

För att minimera antalet filer och storleken på dessa som skall skickas till en klient när denne begär en sida använder man så kallad minify-teknik. All whitespace plockas bort och filer av samma typ bakas ihop till en och samma. Detta är oftast alltid enkelt att genomföra för CSS- och JavaScript-filer men om man jobbar med någon webbserverteknik som ASP.NET eller PHP är det lite svårare att göra för HTML eftersom att det då behöver bakas in i ett arbetsflöde. Du kan antingen använda tillägget Minify till Visual Studio Code eller någon tjänst online, t.ex minifier.org