L5. Optimalisatie van webdocumenten voor betere prestaties

Optimalisatie van webdocumenten voor betere prestaties

• Je kunt documenten optimaliseren om de laadtijd van een website te verkorten en de algehele prestaties te verbeteren
• Je kunt technieken zoals compressie, caching en minificatie toepassen.
•  Je kunt de juiste bestandsextensies gebruiken om laadtijden te verminderen en de prestaties van een website te verbeteren.

Begin de les door de leerdoelen te delen met de studenten. Leg uit dat ze aan het einde van de les in staat moeten zijn om deze doelen te bereiken.

Wat weet je al over het optimaliseren van webdocumenten?

Optimaliseren van afbeeldingen

- Gebruik geoptimaliseerde afbeeldingsbestanden.
- Comprimeer afbeeldingen zonder kwaliteitsverlies.
- Gebruik de juiste bestandsindelingen (JPEG, PNG, GIF) voor verschillende soorten afbeeldingen.

Bespreek de verschillende manieren om afbeeldingen te optimaliseren, zoals het gebruik van geoptimaliseerde bestanden, compressie en het kiezen van de juiste bestandsindelingen. Laat voorbeelden zien van de bestandsformaten en leg uit wanneer ze het beste kunnen worden gebruikt.

Optimaliseren van CSS-bestanden

- Minimaliseer CSS-bestanden door overbodige spaties, opmerkingen en niet-gebruikte code te verwijderen.
- Combineer meerdere CSS-bestanden tot één bestand.
- Gebruik externe CSS-bestanden in plaats van inline-stijlen.

Leg uit dat het minimaliseren van CSS-bestanden de laadtijd kan verkorten door onnodige code te verwijderen. Bespreek ook het combineren van CSS-bestanden en het gebruik van externe bestanden in plaats van inline-stijlen.

Optimaliseren van JavaScript-bestanden

- Minimaliseer JavaScript-bestanden door onnodige spaties, opmerkingen en niet-gebruikte code te verwijderen.
- Plaats JavaScript-bestanden aan het einde van de HTML-pagina.
- Gebruik asynchrone of uitgestelde ladingsmethoden voor niet-kritieke JavaScript.

Beschrijf de stappen om JavaScript-bestanden te optimaliseren, inclusief minimalisatie, plaatsing en ladingsmethoden. Leg uit waarom het belangrijk is om JavaScript-bestanden aan het einde van de HTML-pagina te plaatsen en waarom asynchrone of uitgestelde ladingsmethoden nuttig kunnen zijn.

Compressie van bestanden

- Gebruik compressie om bestandsgrootte te verkleinen.
- Gzip-compressie voor tekstbestanden.
- JPEG-compressie voor afbeeldingen.

Leg uit wat compressie is en hoe het kan helpen om de bestandsgrootte te verkleinen. Bespreek specifieke compressiemethoden zoals Gzip voor tekstbestanden en JPEG-compressie voor afbeeldingen.

Caching van bestanden

- Gebruik caching om bestanden lokaal op te slaan.
- Stel HTTP-caching headers in.
- Gebruik een content delivery network (CDN) voor statische bestanden.

Beschrijf wat caching is en hoe het kan helpen om de prestaties van een website te verbeteren. Leg uit hoe HTTP-caching headers kunnen worden ingesteld en waarom het gebruik van een CDN nuttig kan zijn voor statische bestanden.

Minificatie van bestanden

- Verwijder onnodige spaties, opmerkingen en witruimte uit bestanden.
- Gebruik minificatie-hulpmiddelen zoals UglifyJS voor JavaScript en CSSNano voor CSS.
- Controleer of de minified bestanden nog steeds correct werken.

Leg uit wat minificatie is en waarom het kan helpen om de bestandsgrootte te verkleinen. Bespreek specifieke minificatie-hulpmiddelen voor JavaScript en CSS en benadruk het belang van het controleren van de functionaliteit van de minified bestanden.

Juiste bestandsextensies gebruiken

- Gebruik de juiste bestandsextensies voor verschillende bestandstypen, zoals HTML, CSS, JavaScript en afbeeldingen.
- Vermijd het gebruik van onjuiste extensies.

Leg uit waarom het belangrijk is om de juiste bestandsextensies te gebruiken voor verschillende bestandstypen. Bespreek de mogelijke problemen die kunnen optreden bij het gebruik van onjuiste extensies.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.