Waarom je best AMP gebruikt op je website - Mailbox

Waarom je best AMP gebruikt op je website

Share on FacebookPin on PinterestTweet about this on TwitterPrint this pageShare on Google+Email this to someone

Accelerated Mobile Pages, of kortweg AMP, zijn webpagina’s die specifiek aangepast zijn voor mobiele apparaten. Volgens Google zijn mobiele websites nog te traag en dat is vooral op mobiele apparaten nefast, want 40% van gebruikers haakt af als een pagina niet binnen 3 seconden laat op hun smartphone of tablet.

Technische aspecten van AMP

Accelerated Mobile Pages zijn aangepaste HTML-varianten van webpagina’s met statische content, geoptimaliseerd voor mobiele apparaten. Google heeft hiervoor een eigen open source framework voor ontworpen: AMP HTML. Deze combinatie van aangepaste HTML en AMP-componenten is ideaal om kleine en snelle wegpagina’s te ontwikkelen.

Omdat het hier gaat om statische content (geen interactieve elementen), wordt de AMP-technologie vooral gebruikt door nieuwswebsites om artikels sneller te laden. Google Zoeken is bovendien ook extra geoptimaliseerd om de AMP-zoekresultaten duidelijker weer te geven. AMP-versies van artikels worden getoond in een galerij bovenaan de zoekresultaten waar je als gebruiker door kan scrollen.

En even voor alle duidelijkheid : de pagina’s worden wel degelijk gekopieerd en op Google servers geplaatst om de snelheid nog te verbeteren. Google wordt dus als het ware een “hosting” firma in het geval van AMP.

Hoe pas ik mijn website aan voor AMP?

In essentie ga je alle vertragende elementen uit je website halen: bepaalde HTML-elementen zoals formulieren kan je niet gebruiken en standaard JavaScript wordt niet toegestaan. Bovendien wordt de AMP-versie van je website gecached: de pagina’s worden niet langer standaard vanop een bepaalde server geladen, maar vanop de server het dichtste bij de ontvanger. Foto’s en advertenties zullen ook niet meteen gedownload worden, maar pas wanneer de lezer scrollt tot bij de beelden.

Klaar om zelf jouw AMP-pagina aan te maken?

De meeste website bouwers (zoals WordPress bijvoorbeeld) hebben een plug-in om dat te doen. En Google heeft ook een uitgebreide handleiding opgemaakt die jou stap voor stap uitleg hoe je zelf een AMP-pagina kan maken (link: https://www.ampproject.org/docs/get_started/create).

5 Tips voor snelle, efficiënte AMP-pagina’s

  1. Gebruik asynchrone scripts: dit wil zeggen dat je niet alle elementen van je website synchroon in een bepaalde volgorde gaat downloaden. Wat je wel doet is alle essentiële elementen laden, en bepaalde vertragende scripts pas laden wanneer de gebruiker erbij in de buurt komt.
  2. Externe bronnen statisch opmeten: de afmetingen van externe bronnen (afbeeldingen, advertenties of iframes) moeten bij AMP-pagina’s altijd weergegeven worden in de HTML zodat er al rekening mee gehouden wordt wanneer de pagina geladen wordt.
  3. Optimaliseer de web lettertypes: een klassieke webpagina zal eerst alle andere elementen downloaden vooraleer de lettertypes worden gedownload. Op een AMP-versie zal het lettertype direct beginnen downloaden, onafhankelijk van andere elementen. Meer informatie over lettertype optimalisatie lees je hier (link: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization).
  4. Rangschik externe bronnen volgens prioriteit: de AMP-technologie rangschikt alle externe bronnen volgens prioriteit en zal dus niet alle bronnen tegelijkertijd laden. Enkel de belangrijkste bronnen (die dat het meest waarschijnlijk door de gebruiker gezien gaan worden) wordt eerst gedownload. Pas wanneer de gebruiker door de pagina scrollt, zal de rest beginnen downloaden.
  5. Verwijs altijd naar de desktopversie van je website en wees niet bang om niet-AMP-linken erbij te zetten. Dit is niet alleen goed voor de SEO-optimalisatie van je AMP-pagina, maar stelt de gebruiker ook in staat verder te surfen op jouw website.

Online cursus met video’s en duidelijke tips & tricks

Voor degenen die nog een stapje verder willen gaan, kunnen we doorverwijzen naar onze online cursus “SEO optimalisatie voor wordpress“.  Daar wordt de techniek van de activatie én het beheer (maar ook de integratie met de Yoast SEO plugin) van AMP in WordPress uitgebreid toegelicht. Video’s, tips, tricks do’s and don’ts zijn allemaal aanwezig in deze hands-on online cursus. 24/24 7/7 toegankelijk.