Webbutveckling 1 · område 7 · uppgift

Projekt 6 – Optimerad och diskret sajt

Det här är områdets kravdokument. Optimeringsguiden, fördjupningsguiden och genomgångarna ska stödja kraven nedan – inte tvärtom.

• 12 mars Inlämning kl 23:59 Projekt 6 – repo-länken lämnas i itslearning.

1. Uppdraget

Du ska göra din sajt lättare och tåligare. Lättare: bilderna ska väga en bråkdel av vad de väger nu, och du ska kunna visa hur mycket med en mätning före och efter. Tåligare: sajten ska fungera även när JavaScript inte gör det.

Ingenting nytt ska byggas. Sajten ska se likadan ut när du är klar – den ska bara komma fram fortare och hålla bättre.

Det är den sista uppgiften före slutprojektet, och den är därför också en genomgång av allt du byggt: område 2:s struktur, 3:s form, 4:s tillgänglighet och 6:s moduler ska alla stå pall när du mäter och stänger av.

2. Vilken sajt gäller det?

Samma sajt som i Projekt 5, i samma repo.

Har du av något skäl ingen fungerande sajt med moduler: hämta referensprojekt/ ur områdets material och arbeta med den. Säg till innan du gör det, så att vi vet att du gör det medvetet. Den vägen ger E och C – A kräver att du arbetar i något du byggt själv.

3. De två halvorna

De är olika sorters arbete. Optimeringen är mekanisk och går fort när du vet hur. Den diskreta delen kräver att du läser din egen kod och tänker om på några ställen.

Börja med optimeringen. Den går att göra klart före sportlovet, och då har du de tre sista veckorna på den andra halvan.

4. Kraven

Kryssa av allt eftersom. Kryssen sparas i din webbläsare.

Alla elva ska vara uppfyllda.

Nollställ alla kryss

5. Tekniska krav

Det här lämnas in

I itslearning: länken till ditt publika GitHub-repo. Inget annat, och inte koden.

I repot ska finnas:

index.html och dina övriga sidor
stil.css
js/
bilder/          bara de bilder sajten använder, i rätt storlekar
README.md        med mätningen och testet

Så kan mätavsnittet se ut

Två rubriker i README.md. Det här är lydelsen som bedöms, och den behöver inte vara längre än så här:

## Mätning

Startsidan, nätverksfliken med Disable cache och Slow 4G,
på den publicerade adressen:

  Före:  12 requests, 3,4 MB, 14,2 s
  Efter:  9 requests, 210 kB,  1,6 s

Tyngsta filen före var hero.jpg: 2,9 MB, 4032 px bred,
visades i 640 px. Den är nu tre filer – 400, 800 och
1600 px – i WebP med JPEG som reserv, och den som hämtas
på min telefon väger 18 kB. Resten av minskningen är de
fyra bilderna på galleri.html, som fick loading="lazy"
och halverad bredd.

## Testat utan JavaScript

Avstängt i Inspektera 4 mars, alla fem sidorna:

  index.html      OK. Allt innehåll finns, inga döda knappar
  galleri.html    OK. Filterraden gömd, alla bilder syns
  kontakt.html    OK. required kvar, webbläsaren validerar själv
  om.html         OK
  quiz.html    Knappen "Rätta" syns och gör inget.
               Medvetet: den är type="submit", sidan
               laddas om. Frågorna finns kvar

6. Bedömningsmatris

Matrisen läses vågrätt: en A-kolumn förutsätter att E och C i samma rad är gjorda.

7. Kom igång – de tre första sakerna

1. Mät innan du ändrar något. Öppna din publicerade sajt, nätverksfliken, Disable cache, ladda om. Skriv av talen. Du kan inte visa en förbättring du inte har ett före-värde till.
2. Sortera på Size och titta på översta raden. Det är nästan alltid en bild, och det är nästan alltid över hälften av hela sidans vikt.
3. Gör om den ena bilden. Skala, komprimera, byt format, lägg in width och height. Mät igen. Nu vet du hur mycket en bild är värd, och resten är samma sak en gång till.

8. Så ligger tiden

Fredag 5 mars är ledig, så vecka 9 har bara två lektioner. Veckan efter sportlovet är den viktigaste: det är då den diskreta halvan ska landa, och den tar längre tid än optimeringen.

Prov måndag 15 mars

Provet bygger på områdets exempelsajt i två versioner, inte på din egen. Det kommer att fråga om skillnaden mellan dem.

9. Checklista innan du lämnar in

Bilderna

1. Ingen bild är mer än dubbelt så bred som rutan den visas i
2. Foton ligger i WebP eller AVIF
3. width och height på varje img, utan px
4. alt på varje img
5. loading="lazy" på allt under första skärmen, men inte på den översta bilden
6. Oanvända bilder är borta ur bilder/

Mätningen

1. Före och efter står i README.md
2. Mätt på den publicerade adressen, med Disable cache
3. Samma sida mätt båda gångerna

Utan JavaScript

1. Avstängt i Inspektera, varje sida öppnad
2. All text och alla bilder finns
3. Ingen knapp eller länk som syns men inte gör något
4. Formulären går att fylla i, required finns kvar
5. Resultatet nerskrivet i README.md

Det vanliga

1. HTML validerar
2. CSS validerar
3. Konsolen är tom på varje sida
4. Repot är publikt
5. Länken inlämnad i itslearning

10. Felsökning