Hoe je snel ladende website-frontends bouwt in JavaScript

In onze snelle digitale wereld spelen de prestaties van websites tegenwoordig een cruciale rol in het succes van elke online onderneming. De website moet in staat zijn om bezoekers aan te trekken en vast te houden, wat resulteert in betere zoekmachine rankings, hogere conversiepercentages en een betere gebruikerservaring (UX). Soms hebben de ontwikkelaars hulp nodig bij bepaalde problemen, zoals problemen met het laden van inhoud.

Daarom moeten ze prioriteit geven aan prestatieoptimalisatietechnieken om snelladende, responsieve en gebruiksvriendelijke websites te ontwerpen. Snel ladende front-ends voor websites worden gebouwd door bestandsgroottes te optimaliseren, netwerkverzoeken te beperken, caching en asynchroon laden te gebruiken en best practices te implementeren. Dit artikel leidt je in detail door de genoemde technieken en je kunt meer over het onderwerp te weten komen.

1. HTTP-aanvragen minimaliseren

Het aantal HTTP-verzoeken dat een pagina moet voltooien voordat de pagina daadwerkelijk wordt gewijzigd, kan de laadtijd van de website vertragen. Hoe groter het aantal verzoeken, hoe langzamer de laadtijd, vooral als de verzoeken grote hoeveelheden te laden gegevens bevatten, zoals grote afbeeldingen, video’s of HTTP payloads. De manier om de laadtijd van je pagina te verbeteren is door het aantal aanvragen te inspecteren en te proberen deze te verminderen.

De beste manier om dit te doen is door alle JavaScript-bronnen te combineren tot één, wat je kunt doen met verschillende applicaties, bibliotheken en online tools.
Combineer de meerdere JavaScript-bestanden in de juiste volgorde zodat eventuele afhankelijkheden worden gerespecteerd.
De volgorde van de te combineren bestanden kan worden opgegeven met behulp van een bestandslijst of een groep bestandsset elementen.

2. Code minimaliseren en comprimeren

Een andere manier om de prestaties van websites te verbeteren is het minen en comprimeren van de broncode door overbodige tekens te verwijderen. Het is toepasbaar op HTML, CSS, JavaScript en andere soorten broncode. Bij het schrijven van dergelijke bestanden gebruiken ontwikkelaars vaak witruimte en commentaar om de code gemakkelijker leesbaar en bewerkbaar te maken voor andere ontwikkelaars.

Maar als het aankomt op het serveren van de webpagina, is het essentieel om commentaar en ongebruikte codes te verwijderen, de namen van variabelen te vereenvoudigen en witruimtes te verwijderen.
Hierdoor is er geen risico dat er functionaliteit van de pagina wordt verwijderd.
Bewaar ook de niet-geminimaliseerde code voor toekomstige ontwikkeling.
Er zijn talloze hulpprogramma’s voor het minificeren van broncode, waaronder minifer.org, HTMLMinifer, CSS Minifer en JSMinify.

3. Afbeeldingen optimaliseren

Je weet dat afbeeldingen het grootste deel van de inhoud van websites uitmaken en goed moeten worden geoptimaliseerd om de laadtijd van webpagina’s te verkorten. De volgende stap is het optimaliseren van je afbeeldingen met behulp van de volgende technieken:

Beeldcompressie
Moderne afbeeldingsindelingen gebruiken
Techniek van lui laden
Gebruik een CDN (Content Delivery Network)

Beeldcompressie

Het is een techniek om afbeeldingen te verkleinen zonder de kwaliteit aan te tasten. Het kan de prestaties van webpagina’s helpen verbeteren omdat kleinere afbeeldingen minder gegevens bevatten en sneller laden. Er zijn twee soorten compressies, namelijk verliesvrij en verliesvrij.

Compressie zonder verlies behoudt de beeldkwaliteit, terwijl compressie met verlies enig kwaliteitsverlies kan veroorzaken, maar dit kan niet merkbaar zijn voor het menselijk oog. TinyPNG, SVGOMG, Squoosh.app, Compressor.io, JPEGmini en Kraken.io zijn bijvoorbeeld enkele tools die je kunnen helpen bij het comprimeren van afbeeldingen voor je webapplicatie.

Moderne afbeeldingsindelingen gebruiken

Zorg ervoor dat je de juiste bestandsindelingen gebruikt, wat betekent JPEG voor foto’s, PNG voor afbeeldingen en illustraties, en GIF voor eenvoudige afbeeldingen en animaties. Je kunt de website ook optimaliseren door moderne afbeeldingsformaten te gebruiken, zoals WebP, AVIF, FLIF en HEIF, die een betere compressie kunnen bieden dan traditionele formaten zoals JPEG en PNG.

Het zal je helpen om hogere laadsnelheden te bereiken voor de gebruikers van de website. Soms worden deze moderne indelingen niet door alle browsers ondersteund. Zorg er in die gevallen voor dat je PNG toevoegt als fallback met het element picture.

Techniek van lui laden

In plaats van alle afbeeldingen in één keer te laden, maakt deze techniek het mogelijk om alleen de afbeeldingen te laden die zichtbaar zijn voor gebruikers. Het helpt de prestaties en laadsnelheid van de website te verbeteren. Het is mogelijk om dit te doen door het img element te gebruiken en het loading attribuut in te stellen op lazy.

Er zijn oudere browsers waarbij het kenmerk laden mogelijk niet wordt ondersteund. In zulke gevallen kan JavaScript je helpen dit te implementeren door handmatig te laden. Alleen zichtbare of bijna zichtbare afbeeldingen worden geladen, wat het laden van pagina’s versnelt en de gebruikerservaring verbetert.

Gebruik een CDN (Content Delivery Network)

Op basis van de geografische locatie van gebruikers stuurt het afbeeldingen naar hen via een servernetwerk.

4. Redirects verminderen

Het verminderen van omleidingen op een webpagina betekent dat de browser niet langer meerdere verzoeken hoeft te doen aan de server. Het zal de gebruikers ten goede komen door de laadtijd van de pagina te verkorten. Gewoonlijk is het zo dat als je browser een pagina opvraagt, hij eerst de server aanvraagt en dan wacht op het antwoord. Als de server de browser doorverwijst naar een andere website, moet de browser een nieuwe aanvraag doen naar de nieuwe pagina.

Deze procedure neemt enige tijd in beslag en als er meerdere omleidingen zijn, kan de laadtijd van de pagina aanzienlijk worden vertraagd. Het verminderen van omleidingen zorgt ervoor dat de browser minder verzoeken verstuurt en sneller antwoorden krijgt, waardoor pagina’s sneller laden.

5. Browser caching gebruiken

Browser caching is een techniek om het laden van pagina’s te verkorten door de browser toe te staan bepaalde bronnen van webpagina’s lokaal op te slaan. Wanneer een gebruiker een website bezoekt, downloadt de browser de bronnen die nodig zijn om de pagina te renderen, zoals afbeeldingen, CSS en JavaScript. De browser slaat deze bronnen lokaal op met behulp van browser caching.

De browser hoeft de bronnen niet opnieuw te downloaden als de gebruiker terugkeert naar dezelfde pagina, waardoor de pagina sneller wordt geladen.
De browser downloadt bijvoorbeeld het HTML-bestand van de server en controleert de cache op statische elementen (zoals JavaScript, CSS en afbeeldingen) en stuurt de inhoud uit de cache terug als deze is gevonden. Anders wordt de inhoud van de server geretourneerd.

In dit artikel wordt besproken hoe je snel ladende website frontends kunt bouwen in JavaScript. Dus als je als ontwikkelaar bovenstaande strategieën volgt, kun je zeker een website bouwen met snel ladende pagina’s om gebruikers een geweldige ervaring te geven wanneer ze je website bezoeken. Zorg er dus voor dat je je website optimaliseert, want dat is heel belangrijk bij frontend-ontwikkeling.

Interessante links:

JS optimalisatietechnieken

9 Best Practices voor het optimaliseren van de prestaties aan de voorkant

Rahil Kandamplayil

Hi, my name is Rahil. I work at YUHIRO Global and I help web agencies and software companies from Europe to build developer teams in India.