{"id":117,"date":"2026-01-19T11:12:55","date_gmt":"2026-01-19T11:12:55","guid":{"rendered":"https:\/\/wp.als081224ol.hemsida.eu\/?page_id=117"},"modified":"2026-02-15T01:46:04","modified_gmt":"2026-02-15T01:46:04","slug":"teori","status":"publish","type":"page","link":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/teori\/","title":{"rendered":"Teori"},"content":{"rendered":"\n

Validering<\/h2>\n\n\n\n

Jag har validerat en webbsida som skapats av GPT och \u00e5tg\u00e4rdat de problem som valideringen visade. Vissa var sm\u00e5fel som inte st\u00f6rde sidan, till exempel stavfel i CSS och element som inte var st\u00e4ngda korrekt. Jag lade \u00e4ven till alt-text p\u00e5 bilder som saknade det, s\u00e5 att sidan blev mer tillg\u00e4nglig f\u00f6r synskadade anv\u00e4ndare.<\/p>\n\n\n\n

Det st\u00f6rsta problemet var att ett <p>-element var st\u00e4ngt felaktigt, eftersom ett <main>-element l\u00e5g innanf\u00f6r det. Jag flyttade upp <p>-elementet och placerade <main> under, vilket l\u00f6ste problemet.<\/p>\n\n\n\n

Efter dessa \u00e4ndringar validerade jag sidan igen och nu visar valideringen inga fel. Nedan kan man se resultaten fr\u00e5n HTML- och CSS-valideringen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n

Anv\u00e4ndaragenter och utvecklingsverktyg<\/h2>\n\n\n\n

Jag har kollat anv\u00e4ndarv\u00e4nligheten p\u00e5 min landing page. Som man kan se p\u00e5 bilderna nedan \u00e4r sidan mobilv\u00e4nlig, som jag faktiskt blev lite f\u00f6rv\u00e5nad \u00f6ver. D\u00e4remot tycker jag inte sj\u00e4lv att den ser helt perfekt ut i mobilformat, och det finns saker som kan f\u00f6rb\u00e4ttras. Just nu har jag dock inte best\u00e4mt exakt vilka \u00e4ndringar jag ska g\u00f6ra.<\/p>\n\n\n\n

Bilderna som visas nedan \u00e4r tagna i Chrome och Firefox och visar hur sidan ser ut p\u00e5 en iPhone 12 Pro och en iPad Pro. Det var heller ingen st\u00f6rre skillnad mellan hur sidan s\u00e5g ut i Chrome j\u00e4mf\u00f6rt med Firefox. D\u00e4remot gillar jag inte helt att footern p\u00e5 iPad-versionen alltid hamnar l\u00e4ngst ner p\u00e5 sk\u00e4rmen. Detta beror p\u00e5 att sidan anv\u00e4nder flexbox, d\u00e4r <body> \u00e4r en flex-container med flex-direction: column. Eftersom <main> har flex: 1 fyller den ut allt tillg\u00e4ngligt utrymme mellan header och footer, vilket g\u00f6r att footern automatiskt placeras l\u00e4ngst ner \u00e4ven n\u00e4r sidan inte har s\u00e5 mycket inneh\u00e5ll.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n

Prestanda<\/h2>\n\n\n\n

Jag unders\u00f6kte prestandan p\u00e5 Skog-hemsidan med tre olika tj\u00e4nster, d\u00e4r PageSpeed var den som visade p\u00e5 s\u00e4mst prestanda. Samtliga verktyg gav liknande resultat och pekade p\u00e5 samma problem som var bildhanteringen. Bilderna var felaktiga i storlek och betydligt st\u00f6rre \u00e4n vad som beh\u00f6vdes p\u00e5 sidan.<\/p>\n\n\n\n

D\u00e4refter testade jag att komprimera webbplatsens kod. Efter komprimeringen kunde en mindre f\u00f6rb\u00e4ttring av prestandan observeras, men skillnaden var v\u00e4ldigt liten och f\u00f6r\u00e4ndrade inte problemen som fanns.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Bilder p\u00e5 prestandan efter komprimering:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n

Bildprestanda<\/h2>\n\n\n\n

Nedan visas en bild som visar prestandan f\u00f6r bilderna p\u00e5 sidan. Som man kan se \u00e4r bildprestandan inte s\u00e4rskilt bra. Programmet visar att bilderna \u00e4r on\u00f6digt stora och inte anpassade efter hur de visas p\u00e5 sidan.<\/p>\n\n\n\n

Detta kan fixas genom att minska bildstorleken eller \u00e4ndra filformat. I nul\u00e4get \u00e4r bilderna 6000 \u00d7 4000 pixlar, medan programmet rekommenderar en storlek p\u00e5 cirka 500 \u00d7 333 pixlar. Detta \u00e4r det jag ska testa f\u00f6rst.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

P\u00e5 bilden nedan ser man en stor f\u00f6r\u00e4ndring i den sammanlagda storleken p\u00e5 alla bilder. Den gick fr\u00e5n runt 10 000 KB till endast 212 KB, vilket \u00e4r en v\u00e4ldigt stor skillnad.<\/p>\n\n\n\n

Detta visar att bildstorleken p\u00e5 en webbplats kan p\u00e5verka prestandan v\u00e4ldigt mycket. Prestandav\u00e4rdet \u00f6kade fr\u00e5n ungef\u00e4r 50 till 80, vilket ocks\u00e5 \u00e4r en tydlig f\u00f6rb\u00e4ttring. Sedan s\u00e5 kan det f\u00f6rb\u00e4ttras \u00e4nnu mer med att \u00e4ndra p\u00e5 filformatet till WebP som enligt programmet ska f\u00f6rb\u00e4ttra storleken med 131,8 KB.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Efter att ha \u00e4ndrat filformatet till WebP ser jag ingen st\u00f6rre skillnad i filstorleken. D\u00e4remot rekommenderar programmet inte l\u00e4ngre att filformatet beh\u00f6ver \u00e4ndras, vilket tyder p\u00e5 att \u00e5tg\u00e4rden har fungerat.<\/p>\n\n\n\n

Efter dessa tv\u00e5 \u00e4ndringar ser man tydligt att bildprestandan kan f\u00f6rb\u00e4ttras relativt enkelt genom sm\u00e5 justeringar, som att minska bildstorleken eller byta filformat.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tillg\u00e4nglighet<\/h2>\n\n\n\n

Originella sidan:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Senaste versionen:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

P\u00e5 bilderna kan vi se att samma fel f\u00f6rekommer.<\/p>\n\n\n\n

Det f\u00f6rsta felet \u00e4r att kontrasten mellan textf\u00e4rgen och bakgrundsf\u00e4rgen \u00e4r f\u00f6r l\u00e5g, vilket kan g\u00f6ra det sv\u00e5rt att l\u00e4sa inneh\u00e5llet.<\/p>\n\n\n\n

Det andra felet \u00e4r att jag av misstag har anv\u00e4nt samma bildbeskrivning p\u00e5 tv\u00e5 olika bilder.<\/p>\n\n\n\n

Dessa problem kan enkelt \u00e5tg\u00e4rdas genom att \u00e4ndra textf\u00e4rgen s\u00e5 att den f\u00e5r b\u00e4ttre kontrast mot bakgrunden samt genom att skriva mer korrekta bildbeskrivningar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nu kan man se att inga fel finns. Det jag gjorde var att s\u00e4tta en m\u00f6rkare f\u00e4rg p\u00e5 texterna s\u00e5 att kontrasten mot den vita bakgrunden blev b\u00e4ttre. Sedan satte jag \u00e4ven mer korrekta f\u00f6rklaringar p\u00e5 bilderna. <\/p>\n\n\n\n

H\u00e4r \u00e4r ett kodutdrag (\u00e4ndrade f\u00e4rg fr\u00e5n n\u00e4ra vit till svart):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dessa f\u00f6r\u00e4ndringar gjordes f\u00f6r att g\u00f6ra sidan mer tillg\u00e4nglig f\u00f6r alla som bes\u00f6ker den, men fr\u00e4mst f\u00f6r personer med synproblem. Vissa kan ha sv\u00e5rt att se d\u00e5lig kontrast, medan andra kanske inte ser alls och d\u00e5 beh\u00f6ver tydliga bildbeskrivningar som kan l\u00e4sas upp av en sk\u00e4rml\u00e4sare.<\/p>\n","protected":false},"excerpt":{"rendered":"

Validering Jag har validerat en webbsida som skapats av GPT och \u00e5tg\u00e4rdat de problem som valideringen visade. Vissa var sm\u00e5fel som inte st\u00f6rde sidan, till exempel stavfel i CSS och element som inte var st\u00e4ngda korrekt. Jag lade \u00e4ven till alt-text p\u00e5 bilder som saknade det, s\u00e5 att sidan blev mer tillg\u00e4nglig f\u00f6r synskadade anv\u00e4ndare. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":11,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/170"}],"wp:attachment":[{"href":"https:\/\/wp.als081224ol.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}