HC 1.6 Optimering och validering
Table of contents
Optimering
Att optimera sin kod innebär både att sidan laddas in mycket snabbare i browsern, och att den får bättre rating i sökmotorer (SEO). Det finns flera saker du kan tänka på för att optimera din kod, och olika verktyg att testa med.
Generella saker att tänka på kan vara DRY KISS (Don’t Repeat Yourself och Keep It Simple Stupid), som innebär att inte upprepa sig och att försöka hålla koden enkel.
Ett bra tips är att kolla in Chrome DevTools Lighthous, där går att testa performance och få en lista på saker du kan optimera på sidan.
HTML 1 2
- Embedda inte CSS eller JavaScript i HTML-dokumentet, utan minifiera och länka in
- Länka in JavaScript filer i slutet på
<body>- taggen eller använda defer om de länkas in i<head> - Validera koden (se mer nedan)
- Se till att alla bilder är så komprimerade som möjligt med fortsatt bibehållen kvalitet
- Prioritera att ladda in de tyngsta dokumenten i
<head>medrel="preload"
CSS 1 3
- Minifiera CSS-dokumenten så de har liten filstorkek
- Ladda in CSS:en i
<head>så den laddas så snabbt som möjligt - Använd autoprefixer eller liknande verktyg för att lägga till alla vendor prefixes innan produktions build
- Bundla dina stylesheets istället för att länka in flera på sidan
- Använd properties som
will-changeochfont-display - Använd så specifika selectorer så mycket som möjligt
- Se till att bundla stylesheets så att samma kod inte importeras två gånger
Validering
Att validera koden innebär att kolla att den följer best practice uppsatta av W3C. En kod som klarar valideringen är också mer optimerad. Valideringen hjälper också till att få bra SEO, hitta fel i koden, öka användarvänligheten och tillgängligheten och ser till att sidan funger på flera enheter.
W3C har ett verktyg för att validera HTML och ett för CSS. Det går antingen att skriva in adressen till sidan eller ladda upp själva koden. OBS, viktigt isåfall att koden är kompilerad.