Versnellen pagina's via asynchrone formulieren

Sigma Solutions past een ontwikkelde techniek toe om conversiemogelijkheden zoals formulieren asynchroon in te laden, waarmee de initiële laadtijd van een pagina lager wordt.

Als je website snel ingeladen wordt, blijven bezoekers vaker en langer op je website en de bounce-rate zal minder worden. Dit verhoogt de conversie. Verschillende manieren zorgen ervoor dat je pagina snel laadt, bijvoorbeeld: geen te grote afbeeldingen inladen, zo min mogelijk scripts uitvoeren. Een reden waarom je pagina minder snel laadt dan wenselijk, is dat er veel elementen aanwezig zijn. Je versnelt de website dus ook door het aantal elementen te verminderen.

Het gaat in dat geval uiteraard over HTML-elementen (of tags). Alle elementen op een pagina worden door de browser verwerkt bij het inladen van de pagina en daarna bij het tonen van de pagina. Een browser zal bijvoorbeeld kijken of een bepaald element zichtbaar is in het venster en daarvoor moet berekend worden hoe groot zo'n element is en wat de positie is. Minder elementen op je pagina, betekent minder berekeningen en dus een pagina die sneller laadt.

Als je een menustructuur op je website hebt waarin linkjes staan die nooit worden getoond, maar altijd via CSS op verborgen staan, dan kan je deze linkjes verwijderen uit de broncode. Twee gelaagde DIV-elementen kúnnen worden samengevoegd tot één element. En zo zijn er veel meer optimalisatie te bedenken.

Formulieren zijn er om contact te krijgen met potentiële klanten. Echter kunnen formulieren een groot aantal elementen hebben die aanvankelijk niet nodig zijn. Wij hebben een techniek ontwikkeld waarmee formulieren asynchroon worden ingeladen, waardoor de aanvankelijke laadtijd verlaagd wordt.

De nieuwe techniek houdt in dat formulieren worden ingeladen als iframes in een pagina. Elk formulier heeft z'n eigen pagina in het systeem. Deze pagina wordt pas ingeladen door het frame wanneer de browser de frame in het venster ziet, hetzij bij inladen pagina of na scrollen (lazyload).

Deze techniek vereist Javascript om het formulier in te laden en om bezoekers zonder Javascript of met screenreaders een mogelijkheid te bieden het formulier wel in te vullen, wordt het iframe aangemaakt op basis van een linkje. Elk formulier heeft z'n eigen pagina in het systeem en via dit linkje kan het formulier worden benaderd.

Samengevat werkt de oplossing als volgt:

1. Het CMS genereert een link naar het formulier: <a href="/Formulier/">Open het formulier</a>.
2. Een script zorgt ervoor dat het linkje wordt omgezet naar een iframe: <iframe data-src="//static.accessify.cloud/Formulier" />
3. Middels lazyload wordt de pagina met daarop het formulier pas ingeladen in het iframe wanneer het iframe daadwerkelijk zichtbaar is.

Zo zorgen we ervoor dat pagina's sneller laden, wat conversieverhogend werkt, en tegelijkertijd bieden we alle bezoekers de mogelijkheid formulieren in te vullen.