AMP: dé oplossing voor mobile pagespeed?

30 maart 2018 Inzichten /

Wat is AMP?

In 2015 kondigden Google en Twitter het project Accelerated Mobile Pages (AMP) aan. Een project om webpagina’s op mobile sneller te laden als reactie op de Facebook Instant Articles en Apple News. Het doel hiervan is om een werkwijze te bieden om de snelheid en gebruikerservaring op mobiele websites te verbeteren. AMP is eigenlijk een HTML-pagina op dieet; veel componenten waarmee een doorsnee HTML-pagina opgebouwd wordt, zijn niet toegelaten.

Google stelt het als volgt: "The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful, and high-performing across devices and distribution platforms."

Historie.

In het begin was AMP vooral gefocust op nieuwswebsites en blogs. CNN, New York Times en verschillende nieuwsagentschappen sprongen op de kar omdat het hun website op mobile veel sneller maakte en ze gebruik konden maken van de Google Stories News Carousel die helemaal bovenaan de search engine result page (SERP) stond. Enkel met AMP-pagina’s kon je in de News Carousel terecht komen. Je kan een AMP pagina bij zoekresultaten ook herkennen aan het gekende bliksemicoon. Google geeft ook een indirecte voorkeur aan AMP-pagina’s in de zoekresultaten omdat deze sneller laden. Pagespeed is dus een SEO-factor die meespeelt en die in 2018 nog belangrijker gaat worden. Dit alles maakt dat het voor bedrijven en marketeers interessant kan zijn om in te zetten op AMP.

Je kan een AMP pagina bij zoekresultaten ook herkennen aan het bliksemicoon.

Maar er is meer aan de hand.

Ondertussen weten we dat pagespeed ook invloed heeft op de conversieratio en dat Amazon al jaren miljoenen investeert in snelle servers. Uit hun onderzoek blijkt namelijk dat een seconde in laadtijd een verschil kan maken van 1,2 miljard euro omzet. Ook Google leerde uit onderzoek dat ze 8 miljoen zoekopdrachten per dag minder zouden hebben als hun zoekresultaten 4/10e van een seconde trager zouden laden. Dit betekent natuurlijk dat ze ook veel minder advertentie inkomsten zouden genereren. We gaan interessante tijden tegemoet: mobile pagespeed en de ervaring die bezoekers hebben op mobile is belangrijk en gaat steeds een grotere rol spelen op vlak van SEO.

Maar is AMP dan het antwoord? Spoiler: wij denken (nog) van niet.

(Vanaf hier wordt het iets technischer, scroll gerust daar naar de conclusie)

eBay was de eerste e-commerce website die zich met AMP ging bezighouden. Maar dat was niet niet zonder slag of stoot. Op de SMX West conference dit jaar sprak Pete Dainty de head of SEO bij eBay zich uit over de voor- en nadelen. Hij bevestigde dat er problemen waren met attributie en het tracken van bezoekers op AMP-pagina’s.

Een van de problemen is dat AMP gebruikmaakt van een aparte Google Analytics snippet en dat de Client ID die engagement doorheen de website trackt niet automatisch geshared wordt met de standaard GA snippet. Dit kan ervoor zorgen dat je in Google Analytics opeens een hoop nieuwe users ziet die van een AMP pagina naar een niet-AMP pagina surfen.

Bij de keuze om AMP te integreren, moet men er zich van bewust blijven dat AMP een zeer jonge en specifieke methode is voor website optimalisatie. Het beperkt zich tot een zeer specifiek soort inhoudstype.

Indien men de tracking niet correct opzet kunnen er nog zaken foutlopen. Omdat AMP- pagina’s ook gecachet worden op een server van Google kan Analytics het organisch verkeer dat binnenkomt ten onrechte aanzien als referral. We hebben ook al berichten gezien van marketeers die een daling in het aantal mobiele bezoekers opmerkten. Dat komt omdat Google voorrang geeft aan AMP en niet aan gewone responsive web pagina's. Dat kan zorgen voor een daling in het aantal mobile users. AMP duwt met andere woorden de gewone responsive pagina’s dieper op de SERP.

Ook op vlak van attributie kun je moeilijkheden ondervinden omdat het standaard attributiemodel in Google Analytics via last direct click werkt. Hierdoor zullen omzet of conversies niet direct toegekend worden aan bezoekers die eerst via een AMP pagina op de website beland zijn, en die bijvoorbeeld drie dagen later het product gekocht hebben door direct naar de website te surfen. Sneller is AMP zeker en vast, maar om het correct meetbaar te maken is er nog werk aan de winkel.

Klaar voor implementatie? Enkele side notes.

De implementatie van AMP-pagina’s op een bestaande website zijn een werk van lange adem. Veel website elementen die als standaard webcontent getoond worden, zijn niet beschikbaar in AMP. Dit is voornamelijk zo als er geen gebruik gemaakt wordt van externe CSS en JavaScript files. Enkel AMP JS wordt ondersteund (zie AMP project site en GitHub repository voor officiële documentatie) en AMP specifieke, gevalideerde styling moet inline in de head ingevoegd worden. Dit kan redelijk wat werk in beslag nemen voor bestaande websites.

Om extra achtergrond te bieden: Accelerated Mobile Pages (AMP) zijn HTML-pagina’s die diverse technieken benutten om laadtijden drastisch te verminderen. Dat houdt het volgende in:

  • Caching: Google zal elke AMP pagina valideren; als dat gebeurd is, zal het de volledige pagina cachen en er een versie van op de Google server plaatsen.
  • HTML: AMP gebruikt een zwaar afgeslankte vorm van HTML. 
  • Javascript: ook de JS library is enorm afgeslankt om het laden van de content zo snel mogelijk te laten gebeuren. Er moet gebruikgemaakt worden van Async JS dus alle Javascript moet asynchroon ingeladen worden. 
  • CSS: AMP-specifieke en inline styling dragen bij tot een correct gevalideerde AMP-pagina. 
  • Andere technieken zoals lazy loading en Content Delivery Networks.

Er zijn twee manieren waarop AMP pagina’s toegevoegd kunnen worden binnen je website. Eén daarvan is het rechtstreeks aanmaken van AMP-templates in de code. Anderzijds bieden CMS-systemen zoals Wordpress, Joomla en Drupal hiervoor een eigen oplossing. Praktisch gezien zou de implementatie hier zo eenvoudig kunnen zijn als het installeren van een plugin, module en/of extensie. Er kunnen zich echter toch wat problemen voordoen hierdoor.

Zo is het bijvoorbeeld mogelijk dat bepaalde aspecten van design componenten onjuist gewijzigd zijn. In dit geval moet er ingegrepen worden om CSS en JavaScript elementen naar behoren te tweaken. Voor andere CMS-systemen is het nog even geduldig afwachten tot AMP-gerelateerde plugins ondersteund zullen worden of zal er geïnvesteerd moeten worden om de nodige templates om te zetten naar AMP gevalideerde pagina’s.

Bij de keuze om AMP te integreren, moet men er zich bewust van blijven dat AMP een zeer jonge en specifieke methode is voor website optimalisatie. Het beperkt zich tot een zeer specifiek soort inhoudstype; het is ontwikkeld voor maximale leesbaarheid en minimale laadtijden, waardoor ze perfect zijn voor onder meer blog items en andere vormen van verteerbare informatie. Ze zijn echter niet nuttig voor uitgebreide vormen van inhoud door het lage aanbod aan componenten.

AMP: ja of nee? 

De laadsnelheid is voor veel websites van groot belang en AMP lijkt the holy grail als het gaat om snelheid, SEO en websites die hun omzet willen verhogen. Doordat de implementatie en tracking van AMP lastig is, is het moeilijk om de volledige impact te meten. Het AMP project staat op dit moment nog in zijn kinderschoenen, maar is zeker iets om in de toekomst in het oog te houden. Net omdat het open source is zal de tracking op termijn beter verlopen, de JS library zal groeien en het maken van AMP gevalideerde pagina’s zal makkelijker worden.

AMP is een methode om mobile pagespeed te bevorderen, maar op dit moment is het te vroeg om 100% op deze technologie te kunnen rekenen. De invloed van mobile pagespeed mag zeker niet onderschat worden maar wij zijn ervan overtuigd dat je op dit moment beter kan werken aan de snelheid van je huidige website zonder AMP te implementeren.

Benieuwd hoe je de paginasnelheid van je website kan verbeteren?

Contacteer ons voor meer advies

Stijn Lambertyn
Online marketeer

Koen Vinken
Developer

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!