Steven Heyse

amp websiteapp websiteprogressive web appMeer topics web app

30.10.2019 - Search

Sneller! Sneller! Sneller! Kunnen we met AMP en PWA de laadsnelheden op mobiele toestellen aanwakkeren?

We zeiden het al: een snelle laadtijd is cruciaal voor elke website – niet alleen op desktop, maar zeker ook mobiel. Sites die te traag laden verliezen bezoekers … en dus ook klanten. Zeker voor grote websites kan de impact immens zijn. Om je een idee te geven: een laadtijd die 0,1 seconde langer duurt, betekent voor een e-commercesite als Amazon een daling van 1% in de verkoop. Op jaarbasis komt dat overeen met een verlies van maar liefst 1,3 miljard dollar.

Dit artikel is een fragment uit e-book ‘Scoren met SEO – Nu en in de toekomst’.

Technische ingrepen om de laadsnelheid van pagina’s te verbeteren worden dan ook met open armen verwelkomd. Zo werd in 2015 het Accelerated Mobile Pages Project of AMP gelanceerd. Dat open source-initiatief had van bij het begin de bedoeling om de laadsnelheid van mobiele pagina’s drastisch te versnellen. Grote spelers zoals Twitter, LinkedIn, WordPress en Pinterest sprongen meteen op deze technologie. Toch is lang niet iedereen overtuigd van de gunstige effecten van AMP – sommige sites laten na de implementatie zelfs een stevige terugval in bezoekers en/of leads optekenen. De vraag is dan ook of AMP een blijver is, of dat er vandaag en in de toekomst andere en betere technologieën furore zullen maken.

Je laadsnelheid versterken met AMP

Maar eerst wat meer over AMP. Hoewel het om een open source-initiatief gaat, is Google de drijvende kracht achter deze technologie. Dat alleen al maakt de implementatie voor heel wat internetspelers een absolute must. Bovendien beloofde Google van bij het begin om zich met AMP te focussen op drie grote domeinen: content, distributie en advertising. Onnodig te zeggen dus dat dit voor onlinespelers als muziek in de oren klonk.

Maar wat omvat die AMP-technologie nu concreet? Kort samengevat komt het erop neer dat je een soort ‘light’-versie van je webpagina’s voorziet die veel sneller laadt op mobiele toestellen.

AMP-pagina’s worden opgebouwd met drie elementen:

  • AMP HTML: HTML-code, verrijkt met aangepaste AMP-specifieke tags of ‘AMP HTML components’. Daarmee kun je op een makkelijke manier veelvoorkomende patronen op pagina’s efficiënt implementeren.
  • AMP JS: deze library zorgt voor de snelle weergave van de AMP HTML-pagina’s. De AMP JS-bibliotheek omvat alle AMP best performance practices, lijst de AMP-tags op en beheert op een slimme manier het laden van de paginabronnen. Zo zorgt AMP JS ervoor dat er geen elementen zijn die het laadproces van de pagina’s blokkeren.
  • AMP Cache: voor de caching van AMP HTML-pagina’s kun je Google AMP Cache gebruiken, een netwerk dat AMP HTML-pagina’s capteert en automatisch optimaliseert. Als je gebruikmaakt van Google AMP Cache, worden alle afbeeldingen en JS-bestanden van dezelfde bron geladen. Daarnaast test dit cachingsysteem ook of de markup van de pagina voldoet aan alle AMP HTML-specificaties.

Nog een cruciaal element: bij implementatie van AMP staat altijd de User Experience voorop, niet het gemak van de developer. Dat betekent dan ook dat sommige implementaties erg complex zijn.

De reacties: van ‘mèh’ tot ‘jaaaaa!’

De hamvraag is natuurlijk of AMP in de praktijk effectief iets oplevert. In heel wat gevallen wel. The Washington Post bijvoorbeeld noteerde in 88% van de gevallen een verbeterde laadtijd voor mobiele pagina’s. Daarnaast was er ook een stijging met 23% van het aantal mobile search users dat de site binnen de week opnieuw bezocht.

En er waren nog sites die gunstige effecten lieten optekenen, denk maar aan de succesverhalen bij Forbes, Twitter Lite, Ali Express of tal van andere bedrijven.

Toch zijn er ook negatieve geluiden te horen. Zo beweren sommige gebruikers dat AMP enkel effectief is voor nieuwssites, dat het niet werkt voor e-commercesites en dat het design van je site er altijd onder lijdt. Volgens ons klopt dat niet en kan AMP zeker doeltreffend zijn, maar hangt alles af van hoe je het implementeert. Als je implementatie technisch niet goed in elkaar zit, kan dat inderdaad een averechts effect hebben en snel leiden tot een daling van je organisch verkeer. Je hoofd erbij houden en de richtlijnen nauwgezet volgen is dan ook de boodschap.

En sowieso is het aangewezen om vooraf een kosten-batenanalyse te maken. Heb je vandaag al een responsive website die het ‘mobile first’-principe huldigt, goeie laadsnelheden kan voorleggen en gebruikers een uitmuntende mobiele ervaring biedt? Dan kun je je budgetten waarschijnlijk beter aan iets anders besteden dan aan AMP. Stort je dus niet halsoverkop in dit avontuur, maar vraag je altijd eerst af of het sop de kool wel waard is.

Is het een app? Is het een site? Het is een PWA!

AMP of geen AMP, sowieso ziet het ernaar uit dat de mobiele user experience in de toekomst nóg aan belang zal winnen. Een eigen mobiele app voor elke content heavy website lijkt dan misschien voor de hand liggend, maar voor veel bedrijven is dat – financieel gezien – geen haalbare kaart. Niet iedereen beschikt over de middelen van The Washington Post of, dichter bij huis, HLN of Het Nieuwsblad. Voor wie zijn gebruikers toch een optimale mobiele ervaring wil bieden, vormt een PWA of Progressive Web App misschien een interessant alternatief.

Een PWA is een web app die eigentijdse webtechnologieën inzet om gebruikers de ervaring van een heuse standalone app te bieden. Simpel gezegd is het dus een website die zich gedraagt als een mobiele app.

Voor een vlotte werking is het cruciaal dat PWA’s betrouwbaar en uiterst snel zijn. Het grote voordeel is dat ze platformonafhankelijk zijn en dus zowel op iOS als op Android kunnen functioneren. Bij ‘gewone’ apps is dat niet het geval, waardoor je altijd meerdere versies moet aanbieden en een meerkost onvermijdelijk is.

Naast de betere UX en het financiële voordeel ten opzichte van traditionele apps, zijn er nog tal van andere redenen waarom je als bedrijf een eigen PWA zou overwegen:

  • Als je PWA perfect functioneert en een toegevoegde waarde biedt, verdient hij misschien een plaatsje op het startscherm van je users.
  • Ook onder minder goede netwerkverbindingen kun je transacties realiseren.
  • Je geeft je engagement een flinke boost.
  • Dankzij een uitmuntende user experience realiseer je meer conversies.

Blijft nog de vraag wanneer we precies van een PWA spreken  – en niet van een gewone mobiele site? In totaal zijn er een tiental voorwaarden. Zo moeten de url’s offline kunnen laden, mag de inhoud van de pagina niet verspringen tijdens het laden, moet de app responsive zijn op alle mogelijke schermgroottes, etc. Voor wie alle details wil kennen maakte Google een handige checklist met alle specificaties.

Zeg jij ook ‘PW-jA’?

Enkele jaren geleden stelde iedereen zich de vraag of het noodzakelijk was om in te zetten op responsive websites. Het antwoord daarop is uiteraard ‘ja’ gebleken. Vandaag kun je je als bedrijf hetzelfde afvragen over progressive webapplicaties.

Wanneer je de pro’s en contra’s van een eigen PWA afweegt, moet je voor ogen houden dat het aantal mobiele gebruikers nog altijd in stijgende lijn gaat en dat die gebruikers ook steeds hogere eisen stellen aan hun user experience. Vanuit die optiek heeft een PWA, die net zoals een app een prominente plaats heeft op de smartphone van je gebruikers, een groot voordeel. De drempel om telkens opnieuw met je merk in contact te komen is namelijk veel kleiner dan bij een mobiele site waar ze nog altijd actief naartoe moeten surfen. Met een PWA kan je merk (letterlijk) constant ‘in the picture’ staan.

De conclusie van dit alles? Met een relatief beperkte inspanning kun je voor je gebruikers een grote meerwaarde creëren en je doelgroep beter bereiken dan ooit. En dat levert heel wat op: een betere merkvisibiliteit, een grotere tevredenheid bij je gebruikers, meer terugkerende bezoekers en een stijging in het aantal conversies!

Ch-ch-check it out!

Ben je geprikkeld, maar weet je na het lezen van dit hoofdstuk nog altijd niet hoe een PWA er concreet kan uitzien? Neem dan zeker een kijkje op progressivewebapproom.com voor een uitgebreide reeks voorbeelden en laat je inspireren.

Meer weten? Dan raden we je graag ‘Progressive Web Apps: the future of the mobile web’, Googles nieuwe – en gratis – e-book over PWA’s aan.

 

Dit artikel is een fragment uit onze gloednieuwe – en gratis! – e-book Scoren met SEO – Nu en in de toekomst’. Wil je je SEO-kennis verder bijspijkeren? Download hem dan nu!

Steven Heyse

Steven zet beroepsmatig letters in de juiste volgorde. Wie Engels spreekt, mag hem een copywriter noemen. Hij is een liefhebber van vinylplaten en stripverhalen. Ook ‘muzikaal’ actief trouwens, enfin ja ...

Lees meer van Steven