Vanaf halverwege juni 2021 zal Google een update uitrollen binnen haar algoritme rondom de Web Core Vitals, Een belangrijk onderdeel daarvan is de CLS - Cumulative Layout Shift.
In het kort: deze CLS score is gebaseerd op de verspringingen van de layout na het laden van de eerste elementen van de pagina. Hoe meer de content verspringt, hoe minder de gebruikerservaring. Oorzaken hiervan kunnen onder andere zijn: fonts die nog geladen worden, afbeeldingen die nog geladen worden, en asynchroon geladen content die door javascript wordt toegevoegd.
De Appwiki widget valt in de laatste categorie. De impact van de Appwiki feed op de CLS score hoeft niet altijd significant te zijn maar als een feed hoog in de pagina (boven de vouw) staat, kan dit een negatief effect hebben op deze score. In dit geval loopt de pagina het risico om geraakt te worden door deze Google update.
Om te voorkomen dat onze feeds een negatief effect heeft op de CLS, en daarmee potentieel op je Google ranking, hebben we een oplossing ontwikkelt. De oplossing reserveert een vaste ruimte voor de feeds zodat de pagina layout stabieler blijft, en de grote verspringingen worden voorkomen.
Disclaimer: deze oplossing lost alleen de CLS issues met de Appwiki feeds op. De oplossing heeft geen invloed op andere CLS issues zoals bijvoorbeeld met banners en afbeeldingen.
Een gedeelte van deze oplossing is al ingebouwd in de plugin, maar om het te activeren moet er nog wel een snippet in de head sectie van de relevante pagina’s worden geplaatst:
<script src="https://proteus.appwiki.nl/prevent.js" async></script>Dit zou er ongeveer zo kunnen uitzien in de code van je website:
<head>
<script src="https://proteus.appwiki.nl/prevent.js" async></script>
<title>My website about software</title>
<head/>Het implementeren van deze snippet kan op 2 manieren:
De eerste optie heeft het voordeel dat deze eenvoudig en snel is te implementeren op alle pagina’s. Je bent dus in één keer klaar. Ook als je dan nieuwe pagina’s aanmaakt met een Appwiki feed, zal de oplossing direct werken. Nadeel is dat het script ook wordt ingeladen op pagina’s waar geen Appwiki feed staat en dus voor deze pagina’s overbodig is.
De tweede optie is arbeidsintensiever maar heeft het laatstgenoemde nadeel niet. Wel zul je dan bij nieuwe pagina’s pagina’s met een Appwiki feed niet moeten vergeten de snippet opnieuw in de <head> sectie te plaatsen.
De tool meet de hoogte van de widget en laadt deze in de database. Bij een volgende bezoek zal een css selector de ruimte reserveren voor deze widget gebaseerd op de eerder gemeten hoogtes.
Omdat de hoogte van de widget afhankelijk is van de viewport, en onderhevig is aan veranderingen in custom styling en actieve adverteerders worden de hoogtes verdeeld over verschillende viewports en wordt er een mediaan genomen van de laatste gemeten waardes zodat er snel kan worden gereageerd op veranderingen.
Appwiki is het beginpunt voor bedrijfssoftware selectie. Wij geloven dat bedrijven met online tools en software slimmer, sneller en flexibeler zijn. En dus beter hun klanten kunnen helpen en beter concurreren in de markt.
Appwiki experts adviseren jou bij software selectie. Jouw wensen en bedrijfsprofiel bepalen de meest geschikte software. We brengen onze kennis, informatie van leveranciers en data van gebruikers samen, zodat jij eenvoudig een selectie maakt en snel software vindt die bij je past.
We brengen in je in contact met software aanbieders en ontvangen daarvoor een vergoeding. Adviseren we dan alleen aanbieders die betalen? Nee hoor, we adviseren alleen de aanbieders waarvan we zeker weten dat ze bij jouw bedrijf passen.