Einanas
commented
1 month ago Volgens de light house test is mijn website volledig accessible, ofwel toegankelijk, zowel als mobiel als desktop.
SEO, ofwel search engine optimization, geeft een 91% voor de resultaten. Het enige wat ontbreekt wat het een 100% kan geven is dat er een meta ontbreekt in de
<head> van de <html>.
De Performance (72%) en de Best Practices (71%) hebben beide een matige scoren.
Voor de Performance zijn er al een aantal dingen die weggewerkt moeten worden. Al die dingen komen van andere files. Of het komt van svelte zelf.
De Best Practices geeft aan dat er cookies worden gebruikt voor de afbeeldingen. Het heeft te maken met waar de persoon die afbeelding vandaan heeft want de lighthouse geeft aan dat het van discord komt en daardoor cookies erbij betrekt. Ook geeft het aan dat er geen correctie aspect ratio is voor de afbeeldingen. Dit kan gefixt worden door de afbeeldingen een correcte hoogte en breedte te geven.
De Best Practices is van 71% naar 75% doordat ik dit heb gedaan in de code bij css:|
.card-image img {
object-fit: contain;
}
Contain houdt in dat het afbeelding zich aanpast zonder dat het bij snijdt, ofwel dat het aspect ratio zich niet aanpast.
DLC: Bouwen
Met detail kaartje bedoelen we de uitgebreide versies van de visitekaartjes wanneer je op het kaartje klikt, met een naam , descriptie en avatar. Het zou handig zijn om hier een component van te maken. Haal het Id uit directus.
Bijvoorbeeld squad id: https://fdnd.directus.app/items/person/?filter={"squad_id":3}