Accelerated Mobile Pages

AMP LogoAMP (of voluit Accelerated Mobile Pages) is een web-framework door Google georchestreerd, in samenwerking met onder meer Twitter en Wordpress. Het doel van dit het framework is om snel ladende webpagina's te creeëren, door minder resources en dataverkeer af te dwingen. AMP kent namelijk richtlijnen:

  • enkele HTML elementen zijn vervangen (denk aan gebruik van media);
  • eigen JavaScript kan niet ingezet worden (je kunt gebruik maken van vooraf gedefinieerde set van tools);
  • CSS dient in het document te staan met een toegestaan CSS gebruik tot 50kb (een verlengstuk van het Critical Path CSS gedachte);
  • custom fonts (en tegenwoordig ook iconsets zoals fontawesome) zijn mogelijk, maar kunnen enkel vanaf bepaalde cdn/url's ingeladen worden.

Voor- en nadelen van Accelerated Mobile Pages

AMP voorbeeldHet resultaat is als het ware een 'lightweight' equivalent van webpagina's (een kopie dus, alhoewel het mogelijk is een pagina enkel middels AMP te realiseren en er geen variant naast te bouwen), welke niet enkel voorziet in minder dataverkeer vanuit hosting-opzicht, maar ook in snellere pagina's en daarmee meer doorklik gedrag door bezoekers.

In bijgevoegde afbeelding is zo een lightweight ofwel AMP equivalent op een door ons gerealiseerde website te zien.

Het web verandert snel en er lijken weinig restricties, maar heeft als keerzijde dat op smartphones (ondanks dat het computers op zich zijn) de gebruikerservaring teniet wordt gedaan doordat er zware JavaScript plugins, CSS animaties als ook advertenties (welke een website vertragen maar ook bezoekers kunnen irriteren) worden ingezet.

AMP voordelen

AMP wordt momenteel vooral door online uitgevers c.q. kranten ingezet en heeft als voordelen:

  • open source project;
  • mobiele doch content/media rijke pagina's met hoge gebruikservaring;
  • het is platform onafhankelijk doordat het via het web gepresenteerd wordt;
  • online artikelen via AMP, worden in de Google zoekresultaten gehighlight en hebben kans in de Google carousel terecht te komen;
  • advertenties kunnen alsnog worden benut, maar zullen minder storend zijn voor bezoekers doordat AMP de presentatie op zich neemt;
  • presentatie ligt in tegenstelling tot Apple News of Facebook Instant Articles in eigen hand;
  • minder data-verkeer en meer klik gedrag door mobiele bezoekers.

Nadelen en minpunten van AMP

Naast het feit dat er geen eigen JavaScript en slecht beperkt CSS gebruiken kan worden, kan het ook nog eens tijd kosten om dit te implementeren. Je zou dit wat Google betreft echter moeten zien als voordelen, er wordt meer gebouwd voor user-experience en het KISS principe, in plaats van voor het motto "Alles is mogelijk". Ook kun je wegens (CSS) beperkingen, wellicht in mindere mate je merkidentiteit naar voren laten komen.

Accelerated Mobile Pages en Wordpress

In het Blue2 CMS (versie 4) is AMP reeds geimplementeerd, waarmee alle pagina's een AMP equivalent krijgen door onder de motorkap onder meer gebruik te maken van DOM manipulatie. De meeste open-source systemen kennen inmiddels een plugin waarmee de Accelerated Mobile Pages bewerkstelligd kan worden.

Wordpress is een voorbeeld van een CMS dat AMP plugins kent. Dit artikel claimt dat dit zorgt voor 4 keer snellere pagina's en 8 keer minder data verbruik dan traditionele webpagina's. Mijn mening is dat websites in het beginsel zo zouden moeten zijn en dus nam ik de proef op de som, waaruit blijkt dat er nauwelijks laadtijd of resource verschil zit tussen AMP en HTML pagina's dat door het Blue2 CMS wordt gegenereerd.

De claim omtrent een 4 keer snellere website, mag dus geinterpreteerd worden als een bekentenis van Wordpress over de tekortkomingen van de laadtijd van Wordpress sites. Dit laatste is op zijn beurt niet bevorderlijk voor zoekmachine optimalisatie.

Contact opnemen AMP vergelijken

Aan de slag met AMP

Nieuwsgierig geworden? Wij waren het al. Officiele documentatie is hier te vinden. Code voorbeelden van AMP componenten tref je aan op ampbyexample.com. Direct van start met een algeheel AMP template inclusief toelichting op formuliervelden, typografie et cetera, kan via ampstart.com.