De voor- en nadelen van AMP voor Magento-webshops

De voor- en nadelen van AMP voor Magento-webshops

Het is al lang niet meer zo dat webshops uitsluitend doorzocht worden door desktopgebruikers. Smartphones zijn tegenwoordig verantwoordelijk voor minimaal 60 procent van de bezoekers én online aankopen. Onderzoek wijst uit dat een korte laadtijd essentieel is voor de mobiele gebruikerservaring. Ruim de helft van de bezoekers haakt af als een pagina meer dan drie seconden nodig heeft om te laden.
Het is dus belangrijk dat jouw Magento-webshop snel en responsive is op mobiele apparaten, zeker omdat elke milliseconde van belang is als de moderne klant wilt aanspreken. Gelukkig zijn er verschillende manieren om je Magento-shop snel en responsive te houden. De Accelerated Mobile Pages (AMP) behoren tot de meest veelbelovende technieken op het gebied van mobiele snelheidswinst. Maar wat houdt deze techniek precies in? En wat zijn de belangrijkste voor- en nadelen van AMP? Wij leggen het uit.

Wat zijn Accelerated Mobile Pages?

Accelerated Mobile Pages vormen een protocol dat de laadsnelheid van internetpagina’s op mobiele apparaten een flinke snelheidsboost geeft. AMP zorgt ervoor dat pagina’s tot wel 85 procent sneller worden geladen dan pagina’s die geen gebruikmaken van de technologie. En nog indrukwekkender: de consumptie van online informatie gaat dankzij AMP wel acht keer sneller dan op een webpagina zonder AMP het geval is.
De AMP-techniek lijkt op het eerste gezicht wel wat op responsive webdesign, zeker omdat beide oplossingen gebruikmaken van dezelfde programmeertalen (CSS, JavaScript en HTML). Toch zijn er verschillen. Responsive is een methode van webdesign die pagina’s zo inricht dat ze goed bekeken kunnen worden op mobiele apparaten. Bij AMP gaat het echter om een compleet framework dat ingericht is met één hoofdgedachte: zo snel mogelijk kwaliteitscontent tonen op mobiele apparaten. AMP’s laden sneller dan responsive pagina’s en slokken ook nog eens minder resources en ruimte op.
De AMP-versie van een pagina is dan ook echt iets anders dan de normale responsive-versie. Kijk bijvoorbeeld maar eens op de site van de Britse krant The Guardian voor het verschil tussen de twee.

Hoe werkt de techniek?

AMP’s worden gebouwd met drie hoofdelementen, namelijk AMP-HTML, AMP-JavaScript en Google AMP-cache. We zullen ze hieronder even nader onder de loep nemen.

AMP-HTML

Dit element is een begrensde versie van HTML. Bepaalde tags, attributen en stijlen worden beperkt in hun gebruik of vervangen door tags uit de AMP HTML library. Het resultaat: laadtijden van minder dan een seconde.

AMP JavaScript libraries

Het tweede element van een AMP wordt gevormd door de JavaScript libraries. Die werken asynchroon en staan garant voor snelle laadtijden.

AMP Google cache

Dit is het derde element van een Accelerated Mobile Page. Als jouw pagina voldoet aan alle vereisten en slaagt voor de AMP-validatietest, indexeert Google de pagina. Vervolgens wordt de pagina toegevoegd aan het CDN van Google. Het resultaat? Als je een pagina zoekt in Google, wordt die direct vanuit de cache ingeladen, zelfs als je internetverbinding aan de trage kant is.
Gevalideerde AMP’s zijn in Google te herkennen aan een icoontje in de vorm van een bliksemschicht. Een AMP-versie draait altijd naast de gewone versie van de pagina. Beide pagina’s hebben een eigen URL, maar verwijzen in de broncode naar elkaar. Zo kunnen zoekmachines de AMP-versie makkelijk vinden.

Hier kun je lezen welke technische stappen je precies moet doorlopen om Accelerated Mobile Pages in Magento 2 aan te maken en te valideren.

AMP-componenten

Accelerated Mobile Pages werken met zogenoemde componenten. Die zorgen ervoor dat zoveel mogelijk functionaliteiten worden gedekt. Er zijn momenteel al meer dan 100 componenten beschikbaar, terwijl er ook continu nieuwe aan het bestaande aanbod worden toegevoegd. Als je ze goed inzet, dekken de componenten ruim 90 procent van de AMP-functionaliteiten.
Er zijn drie soorten AMP-componenten. We zetten ze kort voor je op een rij.

  • De eerste groep is built-in en vereist geen verdere bewerking vanuit de Javascript library. Voorbeelden zijn amp-img of amp-pixel.
  • Om extended components te laten werken, moet je speciale JavaScript libraries gebruiken die vernoemd zijn naar de component-tag. Voorbeelden hiervan zijn amp-audio and amp-form.
  • De experimentele componenten zijn wel al uitgebracht, maar nog niet geschikt voor wijdverspreid gebruik. Ze zijn nog niet uitgebreid getest en kunnen veel kinderfouten bevatten. Het kan dus dat deze componenten nog niet zo functioneren als de bedoeling is.

De voordelen van AMP

Het gebruiken van Accelerated Mobile Pages heeft veel voordelen. Tijd om te kijken naar de manieren waarop de techniek de mobiele winkelervaring op jouw Magento-webshop kan verbeteren.

Lagere bounceratio’s

AMP’s leveren een belangrijke bijdrage aan een verbeterde winkelervaring door de laadtijd van pagina’s te reduceren. Dit leidt tot lagere bounceratio’s en bezoekers die langer op je webwinkel blijven. Zo wordt de kans ook groter dat klanten meerdere pagina’s bezoeken en uiteindelijk een aankoop doen.

Advertentiecampagnes optimaliseren

Tests en onderzoeken tonen aan dat Accelerated Mobile Pages bijdragen aan hogere doorklikcijfers. Advertenties worden vaker aangeklikt, waardoor het potentieel van onlinemarketing sterk groeit. Bovendien biedt AMP veel extra marketingmogelijkheden zoals snel laadbare advertentiebanners en extra advertentienetwerken.

Betere vindbaarheid

Laadsnelheid is een van de factoren die Google meeweegt in de algoritmes die de rankings van websites en webpagina’s bepalen. AMP’s dragen dus bij aan je vindbaarheid, vooral omdat je door de toegenomen laadsnelheid hoger komt te staan in de organische zoekresultaten van Google. Accelerated Mobile Pages zijn ook prima compatibel met andere SEO-tools van Google zoals AdWords Conversion Tracking en Google Tag Manager.

Meer zicht op je klanten

AMP’s geven je de mogelijkheid om een keur aan klanteninfo te ontsluiten. Het aantal clicks en conversies of de hoeveelheid nieuwe en terugkerende klanten; met AMP kun je het allemaal probleemloos meten. Daarnaast bieden AMP’s ingebouwde ondersteuning voor Google Analytics. Dit helpt je om nog meer klantgegevens te verzamelen en jouw dienstverlening perfect af te stemmen op de wensen van je mobiele bezoekers.

Te gebruiken op diverse platforms

AMP’s zijn gemakkelijk te activeren in Magento. Dat geldt ook voor een breed spectrum aan andere platforms en contentmanagementsystemen zoals Drupal, WordPress, WooCommerce, ProcessWire of Joomla.

De nadelen van AMP

Ondanks het imposante lijstje met voordelen, is het niet allemaal rozengeur en maneschijn. De AMP-techniek heeft vanuit het oogpunt van Magento webwinkel ontwikkeling, en e-commerce in het algemeen, ook wel wat nadelen. Die pijnpunten willen we je natuurlijk niet onthouden.

Functionele beperkingen

Veel van de functionaliteiten waar zowel klanten als webshop-eigenaren dol op zijn, worden niet ondersteund door de AMP-technologie. Denk bijvoorbeeld aan betaalopties, aanbevelingen, afreken-pagina’s of A/B-tests. Dit komt omdat een pagina alleen als AMP wordt geaccepteerd als je gebruikmaakt van JavaScript-, HTML- en CSS-elementen uit de Google library.

Weinig support voor dynamische pagina’s

AMP werkt niet of nauwelijks met dynamische e-commercepagina’s of -functionaliteiten zoals winkelwagentjes, zoekresultaten en faceted search. Als je AMP volledig omarmt, moet je de hulp van PWA-technologie inroepen of je bezoekers doorverwijzen naar je reguliere, niet-AMP-site voor mobiel gebruik.

Je moet extra investeren in ontwikkeling

AMP toepassen betekent dat je weer een nieuw codeframework voor je Magento-webshop moet installeren, gebruiken en ondersteunen. Hoe steil de leercurve is, hangt natuurlijk grotendeels af van de aanwezige technische kennis. Maar er zal zeker wat leerwerk komen kijken bij het overschakelen op AMP.

Afhankelijk van de Google-infrastructuur

Veel technologie-experts betichten Google van monopolievorming. Het omarmen van AMP betekent investeren in Google-infrastructuur, want Google host AMP’s op zijn domein en brengt content vanuit Google cache. AMP is dus wellicht niet jouw ding als je zelf de touwtjes strak in handen wil houden en het niet ziet zitten om sterk afhankelijk te worden van Google.

AMP of niet?

Het is zeker niet nodig om de AMP-technologie toe te passen op alle pagina’s. Verstandiger is om alleen van statische pagina’s een AMP-versie te maken. Dit zijn dus pagina’s met niet-veranderlijke content, waarvan de inhoud niet afhangt van het klik- of surfgedrag van bezoekers. Het heeft bijvoorbeeld geen zin om van het winkelwagentje of de checkout een Accelerated Mobile Page te maken. Dergelijke pagina’s zijn namelijk niet zo belangrijk voor SEO-doeleinden. Bovendien gebruiken ze veel maatwerk-JavaScript, wat vloekt met de AMP-beginselen.

Statische pagina’s kun je meestal wel goed in de vorm van AMP’s gieten. Denk bijvoorbeeld aan de volgende paginatypes:

  • Product- en categoriepagina’s
  • Pagina’s die zoekresultaten weergeven
  • CMS-pagina’s

Hoewel Accelerated Mobile Pages zeker vanuit snelheids– en SEO-oogpunt een interessante ontwikkeling vormen, zitten er nog wat haken en ogen aan de praktische toepasbaarheid van de techniek. Het selectief toepassen van AMP binnen je Magento-shop biedt zeker kansen. Tegelijkertijd moet je je realiseren dat AMP (nog) niet geschikt is voor alle winkelpagina’s en je webshop (deels) afhankelijk maakt van de Google-infrastructuur.

Advies bij UX MAZE

Wil je meer weten over AMP en wat deze nieuwe ontwikkeling in internetland voor jouw Magento-webshop kan betekenen? Neem dan vrijblijvend contact met ons op. Bij UX Maze hebben we veel kennis van en ervaring met Magento. Bovendien zijn we goed op de hoogte van de allerlaatste trends binnen de e-commercebranche.