We hebben een gratis Shopware 6 plugin beschikbaar gesteld op Github om de javascript bibliotheek “Flying pages” gemakkelijk te integreren en configureren binnen jouw Shopware 6 administratie.
Download en bekijk de plugin op Github
De voordelen van Flying Pages
Flying Pages bekijkt terwijl een gebruiker door jouw site navigeert welke interne links er binnen de viewport staan en op welke link/button een gebruiker wil klikken, deze links worden vooraf opgehaald (prefetching).
Wanneer de gebruiker vervolgens op een link binnen zijn viewport klikt zal de laadsnelheid van deze pagina aanzienlijk verbeteren.
Doordat Flying Pages werkt met een limiet aan het aantal links dat per seconde kan worden opgehaald, wordt de serverbelasting beperkt.
Flying Pages vs Quicklink vs Instant.page
Flying Pages combineert de functies van vergelijkbare javascript bibliotheken zoals Quicklink en Instant.page en lost enkele beperkingen en problemen bij deze bibliotheken op.
Instant.page haalt enkel links vooraf op wanneer een gebruiker over een link of button heen beweegt. Hoewel dit wel de belasting van de server aanzienlijk beperkt, zullen de links binnen de viewport dus niet standaard opgehaald worden.
Quicklink haalt links binnen de viewport op, op een vergelijkbare manier als Flying Pages. Tegenover Flying Pages kan er bij Quicklink echter geen limiet op het aantal aanvragen per seconde worden ingesteld, wat de serverbelasting aanzienlijk kan verhogen. Dit kan in sommige gevallen resulteren in een vastlopende server.
De Shopware 6 configuratie
Na het installeren van de plugin vind je binnen jouw Shopware 6 administratie de volgende configuratie opties:
- Prefetch delay (in seconds)
Met deze instelling kun je een wachttijd instellen om links vooraf op te halen nadat de browser via window.requestIdleCallback() als inactief wordt herkend. Deze wordt standaard ingesteld op 0 zodat de links direct worden opgehaald vanaf het moment dat de browser inactief wordt. - Ignore keywords
Met deze instelling kun je een aantal links instellen die niet vooraf opgehaald dienen te worden.
Voorbeeld: ‘/cart’, ‘/login’ - Maximum requests (per second)
Met deze instelling kun je een limiet instellen op het aantal links dat per seconde kan worden opgehaald. Hiervoor wordt een taakwachtrij aangemaakt. Door deze instelling op 0 te zetten worden alle links binnen de viewport direct opgehaald zonder limiet. We raden aan om deze instelling te gebruiken om de serverbelasting aanzienlijk te verlagen, standaard staat deze instelling op 3 aanvragen per seconde. - Hover delay (in milliseconds)
Met deze instelling kun je een wachttijd in milliseconden instellen voordat een link waar de muis boven zit wordt opgehaald. Standaard staat deze instelling op 50ms.
Demo
Credits / Copyright
Alle credits voor de originele Flying Pages javascript bibliotheek gaan naar Gijo Varghese.