Hoe je je website performance verbetert met third-party facades

Wat zijn third-party resources? #

Marketeers willen gebruikers graag volgen via analytics-tools, A/B-testen en hen andere 'cadeautjes' geven zoals advertenties, social media-knoppen, video's, tekst-naar-spraakmodules, chatfuncties en andere scripts of widgets. Third-party resources voegen functionaliteit toe door een website interactiever en dynamischer te maken. Maar er zijn goede redenen om voorzichtig te zijn met deze scripts: ze kunnen beveiligings- en privacyproblemen veroorzaken, onvoorspelbaar gedrag vertonen of onbedoelde gevolgen hebben. In dit artikel richten we ons op de website performance-problemen die ze vaak veroorzaken, met als gevolg ontevreden gebruikers, lagere conversies en andere negatieve effecten. Daar komt een nieuw aspect bij: zoekmachines meten gebruikerservaring actief en nemen die mee in hun rankingalgoritme. Een slechte gebruikerservaring is tegenwoordig zichtbaar in je organische zoekresultaten. Maar hoe meten zoekmachines slechte UX?

Google's Core Web Vitals en Lighthouse Performance #

Google introduceerde de Web Vitals als methode om gebruikerservaring objectief te meten aan de hand van meerdere variabelen. De Core Web Vitals zijn de drie variabelen die Google als de belangrijkste aanmerkt. Om een positief effect te zien op organische zoekprestaties moet je slagen voor de test en 'goed' scoren op alle drie:

• Largest Contentful Paint (LCP), die laadprestaties meet.
• First Input Delay (FID), die interactiviteit meet.
• Cumulative Layout Shift (CLS), die visuele stabiliteit meet.

Een goede score behalen is lang niet altijd eenvoudig, zeker niet als je ook veel third-party resources wilt inzetten. En zelfs als je de Core Web Vitals-beoordeling van Google haalt, wacht de volgende uitdaging: een Lighthouse performance score van boven de 90 behalen om ook op de overige Web Vitals 'goed' te scoren. Bereik je een score van 90 of hoger in Lighthouse, dan is je website volgens Google voldoende snel voor de gebruiker.

Het speelveld: snelheid versus functionaliteit #

Aan de ene kant wil de marketeer zo veel mogelijk bijhouden en uitstekende functionaliteit bieden via third-party scripts. Aan de andere kant zal de developer waarschijnlijk adviseren om zo min mogelijk te laden voor snelle laadtijden en responsiviteit. In de praktijk is het niet zo zwart-wit: de marketeer wil ook een snelle website vanwege betere commerciële resultaten. Maar in het algemeen lijkt het erop dat je moet kiezen tussen snelheid en functionaliteit. Liefst wil je die keuze niet maken, en in het volgende onderdeel beschrijven we een technische oplossing die we vaak inzetten: de third-party facade.

Wat is een third-party facade? #

Het ideaal is om third-party functionaliteit te verbergen totdat je die daadwerkelijk nodig hebt. Maar je wilt bezoekers wel laten zien dat er een klikbaar element is om de third-party tool te starten. Hier komt de facade om de hoek kijken: een statisch element dat eruitziet als een ingebedde third-party tool, maar pas functioneel wordt op het moment dat je erop klikt. Omdat er geen functionaliteit achter zit, hoeft er alleen een eenvoudig statisch element te laden — wat veel sneller gaat. Zo werkt het in Lighthouse:

• Lighthouse identificeert third-party resources die kunnen worden uitgesteld via de Lighthouse third-party facade-audit.
• De data over de impact van uittelbare resources wordt opgeslagen in een 'Third Party Web database'.
• De audit mislukt als de pagina resources laadt die in de database staan.
• Je ziet een melding in het rapport: 'sommige third-party resources kunnen lazy-loaded worden met een facade'.
• Je weet dat er werk aan de winkel is.

Analyseer de tijdlijn van de netwerkverzoeken van een website en kijk welke third-parties worden geladen. Het is mogelijk dat een third-party niet in de genoemde database staat maar je website wel aanzienlijk vertraagt. Door de third-party resources tijdelijk te verwijderen, kun je vergelijken hoe snel je website laadt zonder hen. De volgende stap is het bouwen van de facade of het gebruiken van een open-source oplossing.

Hoe stel je third-party resources uit met een facade? #

De techniek is in principe eenvoudig: je voegt een third-party resource niet direct toe aan je code, maar laadt de pagina met een element dat er vergelijkbaar uitziet. Bijvoorbeeld hetzelfde chatpictogram, maar zonder functionaliteit erachter. Het interactiepatroon ziet er als volgt uit:

• Bij laden: voeg de facade toe aan de pagina.
• Bij hoveren: de facade maakt vooraf verbinding met de third-party resource.
• Bij klikken: de facade vervangt zichzelf door het echte third-party product.

Je kunt de facades zelf bouwen of open-source versies gebruiken die zelfs worden aanbevolen door Google. Voor sommige oplossingen voeg je code in je websitecode in; andere vereisen JavaScript-plugins. Er zijn ook plugins beschikbaar voor contentmanagementsystemen zoals WordPress of Magento.

Enkele situaties waarin een facade nuttig kan zijn:

• Live chats zoals Drift, Intercom, Facebook Messenger.
• Social media-widgets.
• YouTube en andere ingebedde videospelers.
• Voor lazy loading van advertenties of afbeeldingen.

Op basis van deze techniek maakte Paul Irish een versie voor YouTube Embeds.

Conclusie #

Door third-party resources te vervangen door niet-functionele facades verbeter je je performance-audits. Eigenlijk is het geen truc, want je website laadt ook daadwerkelijk sneller doordat alleen het noodzakelijke wordt ingeladen. Controleer of je website third-party resources heeft en, zo ja, of die kunnen worden uitgesteld via facades. Een snellere website zorgt voor tevreden gebruikers die beter converteren en vaker terugkomen.

Hulp nodig? #

Third-party facades zijn een veelgebruikte techniek voor web performance-specialisten. We begrijpen echter dat het niet altijd eenvoudig is om dit zonder technische ondersteuning te implementeren. Wil je meer weten over hoe third-party facades jouw website kunnen helpen? Neem contact met ons op of plan een (video)gesprek.