Wat zijn Accelerated Mobile Pages ?
Accelerated Mobile Pages (AMP) is een manier om webpagina’s makkelijk en snel op een smartphone te tonen aan de gebruiker. Het grote verschil met responsive websites is het design en de snelheid. Een AMP pagina ziet er qua design vaak simpel uit maar laadt daarintegen gemiddeld 4 keer zo snel als een normale pagina. Dit komt doordat bij AMP de lay-out van de webpagina’s al bekend is voordat de website onderdelen zijn ingeladen.
Een ander groot voordeel dat Google geeft AMP pagina’s op mobiel een hogere ranking dan normale pagina’s. Google zet een AMP teken bij het resultaat zodat je weet dat je naar een snellere AMP pagina gaat.
Hoe werken AMP Pagina’s?
AMP pagina’s zijn opgebouwd uit 3 kernonderdelen: AMP-HTML, AMP-JS en AMP-Cache.
AMP-HTML is een aparte set van vooraf gedefinieerde HTML tags. Doordat de tags vooraf zijn gedefinieerd kan de mobiele versie sneller worden getoond worden door een javascript library AMP-JS. AMP-JS zorgt ervoor dat de “kern” van de pagina eerst wordt ingeladen zoals content. Daarna volgen de trackingcodes. Bovendien zorgt de AMP-JS ervoor dat alle externe javascript bestanden asynchroon worden ingeladen waardoor alles sneller inlaadt.
De AMP-Cache is optioneel, maar zorgt ervoor dat pagina’s door Google worden bewaard waardoor ze sneller beschikbaar zijn voor gebruikers. Om te controleren of je gedeelde AMP pagina te zien is als een echte AMP pagina, kun je testen op https://search.google.com/search-console/amp
AMP HTML
Een AMP HTML pagina is bijna hetzelfde maar er zitten nog wel een paar verschillen in. Kijk bijvoorbeeld naar de HTML tag. Ook de <img> tag veranderd naar een <amp-img> tag.
Het meest simpele AMP HTML document ziet er zo uit:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
Een overzicht van alle AMP-HTML tags kun je vinden op https://www.ampproject.org/docs/reference/spec
AMP JS
De AMP Javascript bibliotheek zorgt ervoor dat de bron eerst wordt ingeladen en daarna de AMP HTML, allemaal om een snelle weergave van uw pagina te verzekeren.
Een van de grootste optimalisaties komt dat alles wat afkomstig is van externe bronnen asynchroon maakt, dus niets in de pagina kan ervoor zorgen dat er iets geblokkeerd wordt tijdens het renderen.
Andere prestatie technieken zoals het sandboxen van alle iframes, het vooraf berekenen van de lay-out van elk element op de pagina en het uitschakelen van trage CSS selectors.
AMP Cache
De Google AMP Cache kan worden gebruikt om de AMP HTML-pagina’s te cachen door middel van een content delivery network (CDN). DE CDN slaat de AMP HTML-pagina’s op verbetert zo de pagina prestaties via HTTP 2.0 voor maximale efficiëntie. AMP Cache wordt geleverd met een ingebouwd validatiesysteem zodat de pagina gegarandeerd werkt en niet afhankelijk is van externe bronnen. Het validatiesysteem doorloopt een pagina om te bevestigen dat de opmaak voldoet aan de AMP-HTML specificatie.
Hoe installeer je AMP in WordPress ?
AMP kun je makkelijk implementeren in WordPress door middel van plugins.
De basis is de AMP plugin van Automattic. Je kunt de plugin installeren via:
https://nl.wordpress.org/plugins/amp/
Wanneer de AMP plugin eenmaal is geactiveerd hebben alle berichten op je site een dynamisch genereerde AMP versie, die je kunt bereiken door het toevoegen van /amp/ aan het einde van je URL. De link van deze pagina “/blog/accelerated-mobile-pages” wordt dan /blog/accelerated-mobile-pages/amp.Om je AMP Pagina nog beter te maken kun je een andere plugin instaleren AMP for WP. Met deze plugin heb je iets meer mogelijkheden om je een AMP pagina te stijlen via de backend van WordPress. Je kunt de plugin installeren via:
https://nl.wordpress.org/plugins/accelerated-mobile-pages/
Meer informatie over AMP
Wil je meer over AMP weten, kijk dan ook even op de officiële site van AMP, de link is https://www.ampproject.org/