You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
6.8 KiB
107 lines
6.8 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-23T01:07:24+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "nl"
|
|
}
|
|
-->
|
|
# Analyseer een website op prestaties
|
|
|
|
## Overzicht van de opdracht
|
|
|
|
Prestaties analyseren is een essentiële vaardigheid voor moderne webontwikkelaars. In deze opdracht voer je een uitgebreide prestatie-audit uit van een echte website, waarbij je zowel browsergebaseerde tools als externe diensten gebruikt om knelpunten te identificeren en optimalisatiestrategieën voor te stellen.
|
|
|
|
Je taak is om een gedetailleerd prestatierapport te leveren dat jouw begrip van webprestatieprincipes aantoont en jouw vermogen om professionele analysetools effectief te gebruiken.
|
|
|
|
## Instructies voor de opdracht
|
|
|
|
**Kies een website** voor analyse - selecteer een van de volgende opties:
|
|
- Een populaire website die je vaak gebruikt (nieuwssite, sociale media, e-commerce)
|
|
- Een open-source projectwebsite (GitHub-pagina's, documentatiesites)
|
|
- Een website van een lokaal bedrijf of portfolio
|
|
- Je eigen project of eerder coursework
|
|
|
|
**Voer een analyse met meerdere tools uit** met ten minste drie verschillende benaderingen:
|
|
- **Browser DevTools** - Gebruik de Chrome/Edge Performance-tab voor gedetailleerde profilering
|
|
- **Online audittools** - Probeer Lighthouse, GTmetrix of WebPageTest
|
|
- **Netwerkanalyse** - Onderzoek resource-lading, bestandsgroottes en aanvraagpatronen
|
|
|
|
**Documenteer je bevindingen** in een uitgebreid rapport dat het volgende bevat:
|
|
|
|
### Analyse van prestatietrends
|
|
- **Laadtijdmetingen** vanuit meerdere tools en perspectieven
|
|
- **Core Web Vitals** scores (LCP, FID, CLS) en hun implicaties
|
|
- **Resourceverdeling** die laat zien welke middelen het meest bijdragen aan de laadtijd
|
|
- **Netwerk waterval analyse** om blokkerende middelen te identificeren
|
|
|
|
### Probleemidentificatie
|
|
- **Specifieke prestatieknelpunten** met ondersteunende gegevens
|
|
- **Oorzaakanalyse** die uitlegt waarom elk probleem optreedt
|
|
- **Gebruikersimpactbeoordeling** die beschrijft hoe problemen echte gebruikers beïnvloeden
|
|
- **Prioriteitsrangschikking** van problemen op basis van ernst en moeilijkheidsgraad van oplossen
|
|
|
|
### Optimalisatie-aanbevelingen
|
|
- **Specifieke, uitvoerbare verbeteringen** met verwachte impact
|
|
- **Implementatiestrategieën** voor elke aanbevolen wijziging
|
|
- **Moderne best practices** die kunnen worden toegepast (lazy loading, compressie, etc.)
|
|
- **Tools en technieken** voor voortdurende prestatiemonitoring
|
|
|
|
## Onderzoeksvereisten
|
|
|
|
**Vertrouw niet alleen op browsertools** - breid je analyse uit met:
|
|
|
|
**Externe auditdiensten:**
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Uitgebreide audits
|
|
- [GTmetrix](https://gtmetrix.com/) - Inzichten in prestaties en optimalisatie
|
|
- [WebPageTest](https://www.webpagetest.org/) - Testen onder realistische omstandigheden
|
|
- [Pingdom](https://tools.pingdom.com/) - Wereldwijde prestatiemonitoring
|
|
|
|
**Gespecialiseerde analysetools:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Analyse van de grootte van JavaScript-bundels
|
|
- [Image optimization tools](https://squoosh.app/) - Mogelijkheden voor optimalisatie van middelen
|
|
- [Security headers analysis](https://securityheaders.com/) - Impact van beveiligingsprestaties
|
|
|
|
## Formaat van de resultaten
|
|
|
|
Maak een professioneel rapport (2-3 pagina's) dat het volgende bevat:
|
|
|
|
1. **Samenvatting** - Overzicht van belangrijkste bevindingen en aanbevelingen
|
|
2. **Methodologie** - Gebruikte tools en testaanpak
|
|
3. **Huidige prestatiebeoordeling** - Basisstatistieken en metingen
|
|
4. **Geïdentificeerde problemen** - Gedetailleerde probleemanalyse met ondersteunende gegevens
|
|
5. **Aanbevelingen** - Geprioriteerde verbeterstrategieën
|
|
6. **Implementatieplan** - Stapsgewijze optimalisatieplanning
|
|
|
|
**Voeg visueel bewijs toe:**
|
|
- Screenshots van prestatietools en statistieken
|
|
- Grafieken of diagrammen die prestatiedata tonen
|
|
- Voor/na vergelijkingen waar mogelijk
|
|
- Netwerk waterval diagrammen en resourceverdelingen
|
|
|
|
## Beoordelingscriteria
|
|
|
|
| Criteria | Uitmuntend (90-100%) | Voldoende (70-89%) | Verbetering nodig (50-69%) |
|
|
| -------- | -------------------- | ------------------ | -------------------------- |
|
|
| **Diepte van analyse** | Uitgebreide analyse met 4+ tools, gedetailleerde statistieken, oorzaakanalyse en gebruikersimpactbeoordeling | Goede analyse met 3 tools, duidelijke statistieken en basisprobleemidentificatie | Basisanalyse met 2 tools, beperkte diepgang en minimale probleemidentificatie |
|
|
| **Diversiteit van tools** | Gebruik van browsertools + 3+ externe diensten met vergelijkende analyse en inzichten van elk | Gebruik van browsertools + 2 externe diensten met enige vergelijkende analyse | Gebruik van browsertools + 1 externe dienst met beperkte vergelijking |
|
|
| **Probleemidentificatie** | Identificeert 5+ specifieke prestatieproblemen met gedetailleerde oorzaakanalyse en gekwantificeerde impact | Identificeert 3-4 prestatieproblemen met goede analyse en enige impactmeting | Identificeert 1-2 prestatieproblemen met basisanalyse |
|
|
| **Aanbevelingen** | Biedt specifieke, uitvoerbare aanbevelingen met implementatiedetails, verwachte impact en moderne best practices | Biedt goede aanbevelingen met enige implementatierichtlijnen en verwachte resultaten | Biedt basisaanbevelingen met beperkte implementatiedetails |
|
|
| **Professionele presentatie** | Goed georganiseerd rapport met duidelijke structuur, visueel bewijs, samenvatting en professionele opmaak | Goede organisatie met enig visueel bewijs en duidelijke structuur | Basisorganisatie met minimaal visueel bewijs |
|
|
|
|
## Leerdoelen
|
|
|
|
Door deze opdracht te voltooien, toon je aan dat je in staat bent om:
|
|
- **Professionele prestatietools en methodologieën toe te passen**
|
|
- **Prestatieknelpunten te identificeren** met data-gedreven analyse
|
|
- **De relatie tussen codekwaliteit en gebruikerservaring te analyseren**
|
|
- **Specifieke, uitvoerbare optimalisatiestrategieën aan te bevelen**
|
|
- **Technische bevindingen professioneel te communiceren**
|
|
|
|
Deze opdracht versterkt de prestatieconcepten die in de les zijn geleerd en bouwt praktische vaardigheden op die je gedurende je carrière als webontwikkelaar zult gebruiken.
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. |