Accelerated Mobile Pages

Snel, sneller, snelst

Geschreven door: op

Sinds oktober vorig jaar heeft Google een nieuw project genaamd Accelerated Mobile Pages. Gedachte achter dit project is dat websites, wanneer benaderd via een mobieltje, sneller geladen kunnen worden dan de standaard versie van een website. Nou zullen sommigen denken: onze website is responsive dus is deze al geoptimaliseerd voor weergave op een mobieltje. Dit is een verkeerde aanname aangezien een AMP-versie van een pagina anders in de broncode wordt opgebouwd dan de responsive weergave van de website. De gedachte achter de AMP-versie van een website is dat deze sneller geladen/weergegeven kan worden dan de responsive versie van een website.

Zoek de verschillen
Het Google AMP project is eigenlijk bedacht als tegenhanger van Facebook's Instant Articles. Facebook heeft dit bedacht om weergave van artikelen sneller weer te kunnen geven.
Verschillende partijen zijn onderdeel van het AMP project, te weten: Google, Twitter, LinkedIn en Pinterest.

Mogelijkheden
Om aan de voorwaarden van een AMP-website te kunnen voldoen is een volledige herziening nodig van de HTML welke nodig is om de website weer te geven. Het gevolg van een AMP-versie van je website is dat veel dingen in de broncode niet meer mogen en sommige elementen anders gecodeerd moeten zijn. Het feit dat sommige zaken niet meer mogen heeft met name betrekking op de technische mogelijkheden van de mobiele (AMP) opbouw qua layout. Een voorbeeld hiervan is de weergave van een complexe carousel (met titels, tekst en links). Het AMP-project geeft je wel de mogelijkheid om een carousel te gebruiken echter is deze allesbehalve flexibel (alleen geschikt voor afbeeldingen). Hierdoor zal er opnieuw moeten worden bekeken hoe je sommige elementen in de AMP-versie gaat weergeven.
Een voorbeeld hiervan is onze carousel op https://www.arlanet.nl/klant-cases/keymusic/, deze gebruik afbeeldingen, thumbnails en per slide een unieke tekst. Doordat een dergelijke carousel niet mogelijk is een het AMP-project hebben wij besloten de carouselfunktie eraf te halen en iedere slide onder elkaar, met bijbehorende begeleidende tekst, weer te geven. De AMP-versie van betreffende pagina vind je op https://www.arlanet.nl/klant-cases/keymusic.html.

Requests
Kort door de bocht: alle code welke het laden van een pagina vertraagd mogen niet meer en/of moeten anders gecodeerd worden. Alle media bijvoorbeeld worden d.m.v. het AMP project asynchroom ingeladen. Dit houdt in dat de browser niet hoeft te wachten met het weergeven van de pagina totdat alle media geladen is. Externe stylesheets en javascript mogen niet meer. In het geval van CSS (Cascading Style Sheet) moet deze inline gecodeerd zijn en in het geval van Javascript: deze kun je alleen gelimiteerd gebruiken welke goedgekeurd zijn door het AMP project. De goedgekeurde Javascript vindt je op https://www.ampproject.org/docs/reference/extended.html.

Waarom?
Naast het feit dat je bezoekers van je website een betere ervaring geeft wanneer ze met een mobieltje je website benaderen is er ook nog een ander aspect welke ik interessant vindt. Websites welke namelijk ook een AMP versie aanbieden worden hiervoor door Google namelijk beloont. M.a.w. je krijgt "bonuspunten" als je website ook een AMP versie aanbiedt. Vanuit zoekmachine optimalisatie oogpunt natuurlijk zeer interessant!

Hieronder een video met meer technische uitleg met betrekking tot AMP html:

Accelerated Mobile Pages

Trefwoorden:

Aantal keer bekeken: 2.097