Wat is prerendering (voor SEO)?

Prerendering is een krachtige techniek voor het verbeteren van de laadsnelheid van webpagina’s. Dit is essentieel in de dynamische wereld van webontwikkeling en digitale marketing.

In dit artikel geef ik een overzicht van de stappen om prerendering op een effectieve manier toe te passen, met als belangrijkste punten het verhogen van de snelheid en toegankelijkheid van websites.

De voordelen van prerendering

Bij prerendering wordt een webpagina vooraf geladen en uitgevoerd. Dit gebeurt nog voor de gebruiker dit opvraagt. De pagina is dus al volledig gerenderd op de server. Zodra de bezoeker de URL opent, wordt de pagina direct weergegeven. Prerending zorgt vooral voor snellere laadtijden en een betere gebruikerservaring.

1. De werking: waar de browser normaal gesproken de website pas laadt wanneer een gebruiker een URL invoert of op een link klikt, zorgt prerendering ervoor dat een website van tevoren al wordt gerendeerd. HTML, CSS, JavaScript en andere bronnen van de server worden al voor het openen van een website opgehaald. Als een gebruiker toegang tot de pagina vraagt zijn de meeste onderdelen van de pagina dus al geladen en worden deze meteen getoond.
2. Voordelen voor gebruikerservaring en laadtijden: preredenering vermindert de laadtijd en verbetert. Doordat de pagina vooraf wordt gerendeerd, zijn er minder tijd en bronnen nodig om de pagina te laden en te renderen in de browser van de gebruiker. De gebruiker heeft dus sneller toegang tot de content en verbetert de gebruikerservaring. Een snellere laadtijd kan bovendien ook de SEO verbeteren.
3. Voordelen voor SEO: zoekmachines geven voorkeur aan snel ladende websites. Prerendering zorgt er dus voor dat een website hoger in Google komt. Ook zorgt prerendering ervoor dat bepaalde JavaScript frameworks worden gerenderd voordat ze worden geserveerd aan Googlebot.

Wanneer is prerendering interessant?

Prerendering is vooral geschikt in gevallen waar snelheid en directe toegankelijkheid essentieel zijn. Dit zijn bijvoorbeeld websites met veel verkeer. Elke seconde aan laadtijd heeft hierbij impact op de gebruikerservaring en conversieratio’s. Ook voor pagina’s met complexe of zware content kan prerendering nuttig zijn. Denk aan websites met grote afbeeldingen of geavanceerde scripts die vaak een langzame laadtijd hebben.

1. Websites met veel verkeer: voor websites met veel verkeer, waaronder populaire nieuwswebsites, grote blog of online winkels, heeft de laadtijd een grote invloed op de gebruikerservaring. Elke seconde telt hierbij. Prendering kan helpen de serverbelasting te verdelen en zo de pieken beter te beheren.
2. E-commerce platforms: ook voor online winkels waar de conversie direct aan de gebruikerservaring is gekoppeld, is prerendering nuttig. Snellere laadtijden verbeteren de gebruikerservaring en zorgen ervoor dat (potentiële) klanten sneller door de verschillende stadia van het aankoopproces gaan zonder gefrustreerd te raken door trage laadtijden.
3. Interactieve websites: prerendering is ook bruikbaar voor websites met veel zware of complexe elementen – denk aan games, online tools of interactieve datavisualisaties.  Deze websites hebben vaak meer tijd nodig om te laden. Het prerenderen kan de laadtijd aanzienlijk verkorten.

Wanneer is prerendering niet geschikt?

Indien websites afhankelijk zijn van realtime data of gepersonaliseerde gebruikerservaring is prerendering minder geschikt. Als de content dynamisch verandert op basis van interacties of voorkeuren van gebruikers kan prerendering problemen opleveren. Doordat de inhoud vooraf is geladen kan verouderde of irrelevante informatie worden weergegeven.

Voorbeeld: op een nieuwswebsite worden headlines en verhalen elk uur geüpdatet. Bij prendering kan in dat geval informatie worden weergegeven die al niet meer actueel is wanneer de gebruiker de pagina bezoekt.

Ook op een e-commerce website met gepersonaliseerde productaanbevelingen op basis van gebruikersgedrag is prerendering niet geschikt. De aanbevelingen zouden namelijk moeten veranderen zodra de gebruiker interactie heeft met de website.

Het implementeren van prerendering belast de server bovendien extra, omdat er minder middelen nodig zijn voor het vooraf verwerken van de pagina’s. Dit kan een belemmering vormen voor kleinere websites of bedrijven met een beperkte servercapaciteit. Extra server gebruik kan hogere kosten met zich meebrengen en de prestaties van een website verminderen. Dit heeft zowel invloed op de gebruikerservaring als de SEO-positie.

Maak dus altijd een afweging tussen de voordelen van prerendering en de specifieke behoeften en dynamieken van een website. Bij websites met dynamische content of beperkte server middelen, zijn alternatieven voor prerendering vaak beter geschikt voor het verbeteren van de laadsnelheid en gebruikerservaring. Denk aan lazy loading of asynchronous JavaScript.  

Prerendering versus client/server/dynamische rendering

Om te weten of prerendering of client, server of dynamische rendering het meest geschikt is, moet je goede afwegingen maken. Vaak is dit een kwestie van maatwerk. Om een idee te krijgen leg ik hieronder de standaard scenario’s uit.

Prerendering versus server-side rendering

Bij server-side rendering wordt een volledige pagina op de server gegenereerd voordat deze naar de browser wordt gestuurd. Dit is effectief voor SEO, omdat zoekmachines de pagina’s makkelijk crawlen en indexeren. Prerendering laadt en rendert de pagina vooraf. Hierdoor is de inhoud direct beschikbaar als een gebruiker de pagina opvraagt.

Het grootse verschil zit hem in het tijdstip van de rendering. De server-side rendering wordt gerendeerd bij elke gebruikersaanvraag, terwijl de pagina bij prerendering vooraf wordt gerendeerd.

Prerendering versus client side rendering

Client side rendering verschilt aanzienlijk van prerendering. Client side rendering zorgt ervoor dat de content door de browser van de gebruiker wordt gegenereerd, meestal via JavaScript. De pagina wordt dynamisch geladen en gerenderd. Dit biedt flexibiliteit voor interactieve websites. Wel heeft dit nadelen voor de SEO, omdat zoekmachines het lastig vinden om deze content te indexeren.

Prerendering kan bovenstaand probleem oplossen door de pagina van tevoren te laden, zodat de inhoud direct toegankelijk is voor gebruikers en zoekmachines.

Prendering versus dynamische rendering

Dynamische rendering biedt een middenweg tussen server-side en client side rendering. Deze techniek is net zo flexibel als client side rendering, maar heeft betere SEO-mogelijkheden.

Bij dynamische rendering kiest de server op basis van het gebruikerstype – een zoekmachine of een persoon – of de content server-side of client-side wordt gerenderd.

Bij prendering wordt niet gekeken naar het type gebruiker. Prerendering is daarom eenvoudiger te implementeren, maar minder flexibel dan dynamische rendering.

De verschillen

Onderstaande tabel geeft de verschillen tussen prerendering, server-side rendering, client-side rendering en dynamische rendering duidelijk weer.

Rendering Type	Beschrijving	SEO	Gebruikerservaring
Prerendering	Laadt en rendert de pagina vooraf, waardoor de inhoud direct beschikbaar is bij gebruikersaanvraag.	Goed voor SEO	Snelle laadtijden
Serverside Rendering	Genereert de volledige pagina op de server bij elke gebruikersaanvraag, gunstig voor SEO.	Uitstekend voor SEO	Afhankelijk van servercapaciteit
Clientside Rendering	Rendert de content in de browser van de gebruiker, meestal met JavaScript, biedt flexibiliteit voor interactieve sites.	Minder gunstig voor SEO	Dynamische, interactieve ervaring
Dynamische Rendering	Kiest op basis van het gebruikerstype of de content server-side of client-side wordt gerenderd, een balans tussen flexibiliteit en SEO.	Balans tussen flexibiliteit en SEO	Aangepast aan gebruikerstype

Mijn stappenplan voor prerendering

Voorheen was development noodzakelijk voor het instellen voor prerendering. Tegenwoordig maken verschillende tools prerendering steeds eenvoudiger. Ik gebruik hiervoor meestal https://prerender.io/. 

Stap 1: Analyseer de behoefte aan prerendering

• Beoordeel een website: kijk naar de huidige laadtijden van een website en de gebruikerservaring. Bekijk welke pagina’s profijt hebben van snellere laadtijden.
• Analyseer het verkeer: ontdek het verkeerspatroon van de website. Bekijk of er piekuren zijn waarin de laadsnelheid een bottleneck wordt en pak deze pagina aan.

Stap 2: Bepaal welke prerendering tool geschikt is

• Bekijk de beschikbare opties: er zijn diverse prerendering tools en services beschikbaar. Kies de tool die het beste bij de technische specificaties past, rekening houdend met het budget van de organisaties.
• Test de compatibiliteit: de gekozen tool moet compatibel zijn met de webinfrastructuur en content management systemen.

Stap 3: Implementatieplanning

• Maak een implementatieschema: bepaal een tijdlijn voor het implementeren van prerendering. Bedenk of deze aanpak gefaseerd moet zijn of niet.
• Technische voorbereiding: samen met het web ontwikkelingsteam moeten de nodige technische aanpassingen worden voorbereid.

Stap 4: Implementeer prerendering

• Configureer de gekozen tool: stel de prerendering tool in en houd daarbij rekening met de specificaties van een website.
• Test op een klein aantal pagina’s: implementeer de prerendering eerst op een klein aantal pagina’s om het effect te testen.

Stap 5: Analyse en aanpassing

• Analyseer de prestaties: gebruik analytics tools om de impact van prerendering op laadtijden en gebruikerservaring te meten en analyseer de prestaties.
• Breng wijzigen aan: bekijk op basis van de verzamelde gegevens en feedback of eventuele aanpassingen nodig zijn.

Stap 6: Uitrol en continue monitoring

• Implementeer meer pagina’s: als de initiële resultaten positief zijn, kan de prerendering uit worden gebreid naar meer pagina’s.
• Blijf monitoren en verbeteren: blijf continu monitoren om de voordelen van prerendering te maximaliseren. Zorg voor compatibiliteit met toekomstige website-updates.

Stap 7: Evaluatie en feedback

• Evalueer het effect: beoordeel het effect van prerendering op de SEO en gebruikerservaring.
• Verzamel feedback van gebruikers: feedback van gebruikers is waardevol voor het SEO-stappenplan. Aan de hand hiervan kunnen eventuele wijzigingen worden doorgevoerd.

SEO-experts maken gebruik van bovenstaand stappenplan om de prerendering succesvoller te maken. De laadtijden zullen sneller worden en de gebruikservaring wordt verbeterd.

Samengevat

Het implementeren van prerendering kan de laadtijd sterk verlagen en daarmee de gebruikerservaring verhogen. Met behulp van bovenstaand stappenplan kunnen organisaties hun websites optimaliseren, niet alleen wat betreft de laadtijd, maar ook wat betreft SEO. Hierdoor komt de pagina hoger in Google.

Wel is een juiste aanpak belangrijk. Alleen op deze manier wordt prerendering waardevol voor de algehele digitale strategie.