Validering
Jag har validerat en webbsida som skapats av GPT och åtgärdat de problem som valideringen visade. Vissa var småfel som inte störde sidan, till exempel stavfel i CSS och element som inte var stängda korrekt. Jag lade även till alt-text på bilder som saknade det, så att sidan blev mer tillgänglig för synskadade användare.
Det största problemet var att ett <p>-element var stängt felaktigt, eftersom ett <main>-element låg innanför det. Jag flyttade upp <p>-elementet och placerade <main> under, vilket löste problemet.
Efter dessa ändringar validerade jag sidan igen och nu visar valideringen inga fel. Nedan kan man se resultaten från HTML- och CSS-valideringen.
Användaragenter och utvecklingsverktyg
Jag har kollat användarvänligheten på min landing page. Som man kan se på bilderna nedan är sidan mobilvänlig, som jag faktiskt blev lite förvånad över. Däremot tycker jag inte själv att den ser helt perfekt ut i mobilformat, och det finns saker som kan förbättras. Just nu har jag dock inte bestämt exakt vilka ändringar jag ska göra.
Bilderna som visas nedan är tagna i Chrome och Firefox och visar hur sidan ser ut på en iPhone 12 Pro och en iPad Pro. Det var heller ingen större skillnad mellan hur sidan såg ut i Chrome jämfört med Firefox. Däremot gillar jag inte helt att footern på iPad-versionen alltid hamnar längst ner på skärmen. Detta beror på att sidan använder flexbox, där <body> är en flex-container med flex-direction: column. Eftersom <main> har flex: 1 fyller den ut allt tillgängligt utrymme mellan header och footer, vilket gör att footern automatiskt placeras längst ner även när sidan inte har så mycket innehåll.
Prestanda
Jag undersökte prestandan på Skog-hemsidan med tre olika tjänster, där PageSpeed var den som visade på sämst prestanda. Samtliga verktyg gav liknande resultat och pekade på samma problem som var bildhanteringen. Bilderna var felaktiga i storlek och betydligt större än vad som behövdes på sidan.
Därefter testade jag att komprimera webbplatsens kod. Efter komprimeringen kunde en mindre förbättring av prestandan observeras, men skillnaden var väldigt liten och förändrade inte problemen som fanns.
Bilder på prestandan efter komprimering:
Bildprestanda
Nedan visas en bild som visar prestandan för bilderna på sidan. Som man kan se är bildprestandan inte särskilt bra. Programmet visar att bilderna är onödigt stora och inte anpassade efter hur de visas på sidan.
Detta kan fixas genom att minska bildstorleken eller ändra filformat. I nuläget är bilderna 6000 × 4000 pixlar, medan programmet rekommenderar en storlek på cirka 500 × 333 pixlar. Detta är det jag ska testa först.
På bilden nedan ser man en stor förändring i den sammanlagda storleken på alla bilder. Den gick från runt 10 000 KB till endast 212 KB, vilket är en väldigt stor skillnad.
Detta visar att bildstorleken på en webbplats kan påverka prestandan väldigt mycket. Prestandavärdet ökade från ungefär 50 till 80, vilket också är en tydlig förbättring. Sedan så kan det förbättras ännu mer med att ändra på filformatet till WebP som enligt programmet ska förbättra storleken med 131,8 KB.
Efter att ha ändrat filformatet till WebP ser jag ingen större skillnad i filstorleken. Däremot rekommenderar programmet inte längre att filformatet behöver ändras, vilket tyder på att åtgärden har fungerat.
Efter dessa två ändringar ser man tydligt att bildprestandan kan förbättras relativt enkelt genom små justeringar, som att minska bildstorleken eller byta filformat.
Tillgänglighet
Originella sidan:
Senaste versionen:
På bilderna kan vi se att samma fel förekommer.
Det första felet är att kontrasten mellan textfärgen och bakgrundsfärgen är för låg, vilket kan göra det svårt att läsa innehållet.
Det andra felet är att jag av misstag har använt samma bildbeskrivning på två olika bilder.
Dessa problem kan enkelt åtgärdas genom att ändra textfärgen så att den får bättre kontrast mot bakgrunden samt genom att skriva mer korrekta bildbeskrivningar.
Nu kan man se att inga fel finns. Det jag gjorde var att sätta en mörkare färg på texterna så att kontrasten mot den vita bakgrunden blev bättre. Sedan satte jag även mer korrekta förklaringar på bilderna.
Här är ett kodutdrag (ändrade färg från nära vit till svart):
Dessa förändringar gjordes för att göra sidan mer tillgänglig för alla som besöker den, men främst för personer med synproblem. Vissa kan ha svårt att se dålig kontrast, medan andra kanske inte ser alls och då behöver tydliga bildbeskrivningar som kan läsas upp av en skärmläsare.