Daniël van der Gaag 22 May 2018
Dat een trage webshop funest is voor gebruikerservaringen verrast niemand meer. Snelheid is tegenwoordig zelfs zó belangrijk dat Google in juli 2018 aankondigde dat dit een ranking factor werd. Met Mobile Accelerated Pages (AMP) geef je jouw webshop een boost tegenover je competitie. Toch lever je ook iets in bij deze oplossing. Alle voor- en nadelen van AMP voor Magento-webwinkels lees je in deze blog.
Een Accelerated Mobile Page is een webpagina die speciaal is ontwikkeld voor mobiele gebruikers. Een AMP laadt altijd binnen twee seconden en is daarmee tot wel vier keer sneller dan een normale webpagina. Dat AMP zoveel efficiënter is zit grotendeels in de manier waarop HTML, Javascript en het Content Delivery Network (CDN) zijn opgebouwd. Tijdrovende functies in HTML en Javascript worden weggelaten en de AMP-code wordt opgeslagen op het CDN, zodat de webwinkel zo snel mogelijk getoond wordt. Hieronder zie je hoe zo’n AMP-webshop eruitziet:
Afbeelding 1: AMP-weergaves in Google (L) en op de productpagina (R)
Afbeelding 2: AMP-weergave van een Magento-categoriepagina
Het creëren van AMP’s vraagt om aanvullende functionaliteiten. In Magento-webshops wordt deze functionaliteit beschikbaar door plugins, zoals bijvoorbeeld die van Plumrocket en Wompmobile. Zulke plugins kunnen zowel op bestaande als op nieuwe Magento-webshops worden geïnstalleerd. Na het implementeren kun je AMP-versies creëren voor de homepagina, categorie-, product- en CMS-pagina’s.
De belangrijkste reden om voor AMP te kiezen is uiteraard de snellere weergave van je pagina’s. Deze eigenschap pakt mooi uit voor je SEO; Google verkiest immers snelle webshops boven trage webshops en laat Accelerated Mobile Pages dus sneller hoger ranken. Dat de hogere rank puur vanwege het AMP-keurmerk wordt veroorzaakt is overigens een fabeltje!
De meta descriptions van AMP-webshops worden van een bliksemschicht-symbooltje voorzien om te verwijzen naar de AMP-technologie. Dit is erg positief voor je CTR, aangezien bezoekers voorafgaand aan het klikken al weten dat je webwinkel mobielvriendelijk is.
De uitgangspunten van AMP zorgen ervoor dat het ‘AMP-proof’ maken van webshops soms leidt tot beperkingen (lees hierover ook de blog van mijn oud SEO-collega Jens). Sommige functies zijn namelijk niet compatible met AMP, omdat ze te complex zijn om uit te kleden. Gelukkig zijn er steeds meer oplossingen beschikbaar. Zo ontwikkelt de website AMP by example diverse (voorbeeld)oplossingen waarmee je categorie- en productpagina’s AMP-proof kunt maken. Het is inmiddels ook al mogelijk om met Google Tag Manager, Google Analytics en Google Ads Conversion tracker te werken op AMP.
Ieder voordeel heeft z’n nadeel, en dat geldt helaas ook voor Accelerated Mobile Pages. Hier vind je een kort overzicht van de kanttekeningen die deze oplossing heeft voor webshops. Let wel: deze beperkingen gelden voor alle AMP-webshops, niet enkel voor die van Magento.
Een AMP is niet responsive; ze wordt enkel getoond wanneer bezoekers je webshop bezoeken vanaf een mobiel toestel. Het inzetten van AMP’s betekent dus niet dat de desktopvariant van je webwinkel ook meteen sneller wordt.
Het implementeren van AMP is geen eenvoudige taak en vraagt om aardig wat tijd en middelen. Er wordt gebruik gemaakt van HTML, maar dit is geen ‘normale’ HTML. Je hebt AMP, HTML (en CSS, en Javascript) nodig om AMP’s mogelijk te maken. Wij krijgen regelmatig aanvragen van webshops om dit voor hen op te zetten aangezien niet iedereen deze kennis in-house beschikbaar heeft.
Afbeelding 3: Bij AMP HTML worden speciale AMP-properties toegevoegd aan HTML
Dit is een veelvoorkomend misverstand. Sommige webshop-gerelateerde functies vragen om zwaardere technieken, en deze zijn niet compatible met het AMP-concept. Voegt een bezoeker bijvoorbeeld je producten aan z’n winkelwagen toe, dan wordt deze doorgestuurd naar de mobiele versie van je webwinkel.
AMP is een feature met zowel voor- als nadelen. Kies je voor deze pagina’s, dan kies je voor mobielvriendelijke oplossing waar nog veel beweging in zit. Weeg grondig de voor- en nadelen af voordat je de overstap maakt (een goede technische partij denkt hierbij overigens altijd met je mee). Neem ook andere oplossingen mee in je afweging; zo kan het zijn dat Progressive Web Apps een praktischere oplossing bieden dan AMP-pagina’s, aangezien je hier ook op de desktop van meeprofiteert. Soms is het zelfs mogelijk om een wisselwerking te maken tussen AMP’s en PWA’s!
Tip: in deze blog vertel ik meer over PWA en Magento
Tip: krijg in deze webinaropname meer tips over Magento en online marketing
Daniël is werkzaam als E-commerce Consultant bij ISM eCompany. In zijn rol is hij verantwoordelijk voor de doorontwikkeling van diverse webshops.
Daniël is werkzaam als E-commerce Consultant bij ISM eCompany. In zijn rol is hij verantwoordelijk voor de doorontwikkeling van diverse webshops.
Online marketing video Magento |
Een goed ingerichte Magento 2 webshop levert je veel voordelen op. Een standaar...
Jurjen Jongejan
19 November 2020
Platform Personalisatie whitepaper Magento |
Welke mogelijkheden biedt Magento Commerce zodat je zelf direct aan de slag kan ...
Jeanine Zomer
2 November 2020
Platform video Magento
Magento Commerce is een platform met eindeloos veel functionaliteiten en mogelij...
Jeanine Zomer
3 September 2020