Versnelde mobiele pagina's


AMP of Accelerated Mobile Pages is een open-source webcomponentframework dat door webuitgevers wordt gebruikt om de snelheid en prestaties van hun mobiele site te verbeteren.


gids downloaden
alternatieve tekst

 

Twee seconden is alles wat je krijgt voordat uw lezers wegspringen als uw webpagina niet wordt geladen.

Lijkt onrealistisch? Goed, geef het drie seconden, maar nu ben je aan het gokken...ongeveer 40% van de gebruikers zal vertrekken, en vanaf daar gaat het alleen maar bergafwaarts.

Het verlaten van pagina's is een verschrikkelijk incident voor uitgevers: Het verhoogt het bouncepercentage, verlaagt de advertentie-inkomsten en gooit over het algemeen een natte handdoek over al hun harde werk.

De advertentietechnologiegigant Google besloot deze situatie op te lossen door AMP te lanceren.

Wat betekent het echter voor jou? Hoe kun je het op je website implementeren? En nog belangrijker: zou u dat ook moeten doen? Lees verder en ontdek het in onze gids over Google AMP.

Wat is een versnelde mobiel
Pagina (AMP)?

AMP is een open-sourceproject gebaseerd op AMP HTML, een open raamwerk opgebouwd uit bestaande webtechnologieën, waarmee websites lichtgewicht webpagina's kunnen bouwen.

Het primaire doel van het project is om de levering van inhoud op alle mobiele apparaten te versnellen door al het niet-essentiële weg te halen.

Vandaag kondigen we, na gesprekken met uitgevers en technologiebedrijven over de hele wereld, een nieuw open-sourceinitiatief aan, genaamd Accelerated Mobile Pages, dat tot doel heeft de prestaties van het mobiele internet dramatisch te verbeteren. We willen dat webpagina's met rijke inhoud zoals video, animaties en afbeeldingen naast slimme advertenties werken en onmiddellijk worden geladen. We willen ook dat dezelfde code op meerdere platforms en apparaten werkt, zodat inhoud in een mum van tijd overal kan verschijnen, ongeacht het type telefoon, tablet of mobiele apparaat dat u gebruikt.

Officiële Google-blog

Nu het mobiele verkeer het desktopverkeer overstijgt, kunnen uitgevers, adverteerders en ontwikkelaars het zich niet langer veroorloven de andere kant op te kijken terwijl gebruikers gefrustreerd van de ene pagina naar de andere stuiteren (en wat Google betreft is snelheid veel belangrijker dan functionaliteit).

Enkele grote nieuwspublicaties zoals Time, The Atlantic, Vox, BBC en The Huffington Post en verschillende technologiebedrijven zoals WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn en Pinterest zijn al lid van AMP.

Misschien wel het grootste verkoopargument van Google AMP is dat het open-source is, en daarom kan elke uitgever zich aanmelden en het gaan gebruiken, in tegenstelling tot andere, strenger gecontroleerde projecten zoals Facebook's Instant Articles en Apple News.

Is AMP echt zo snel?

Ja dat is zo.

zegt Jon Parise van Pinterest, “Versnelde mobiele pagina’s laden vier keer sneller en gebruiken acht keer minder data dan traditionele, voor mobiel geoptimaliseerde pagina’s.”

Hé, waarom probeer je het niet zelf? Open Google gewoon op uw mobiele apparaat en typ alles wat op dit moment nieuws maakt. Laten we ter wille van een voorbeeld 'Cardi B' typen, want ze is cool en maakt altijd nieuws.

Net boven de zoekresultaten ziet u een stapel horizontaal scrollbare kaarten met de tag 'AMP'. Als u op een kaart klikt, wordt dat artikel geladen.

AMP - cardib

U merkt het verschil meteen als u een AMP-artikel opent- er is geen vertraging, geen wachttijd tot afzonderlijke elementen zijn geladen, geen zenuwachtige bewegingen op de pagina - de volledige inhoud van de pagina wordt in één vloeiende beweging weergegeven en lijkt ver verwijderd van de reguliere webpagina's op het mobiele internet.

Copyblogger's bericht op AMP legt dit in cijfers uit:

De AMP-versie bereikte "domContentLoaded - een belangrijk punt in het laden van een webpagina waar de HTML volledig is gedownload en bepaalde belangrijke parsering is voltooid" in 0.857 seconden.

Een oogwenk duurt ongeveer 0.33 seconden.

Met andere woorden, knipper twee keer met uw ogen en u, onze metroforens, kunt dankzij AMP vrijwel onmiddellijk beginnen met het lezen van het nuttige deel van de inhoud.

Dat is snelheid.

Wanneer was de laatste keer dat een pagina op uw mobiel werd geladen voordat u zelfs maar twee keer knipperde?

Wat maakt AMP zo snel?

 

Hoewel JavaScript de toverstaf is die de meeste front-end-ontwikkelaars nodig hebben om alles met hun webpagina's te doen, kan het ook de weergave van een pagina vertragen.

Met AMP blokkeren webpagina's de onnodige JS-codes (alleen asynchrone JS is toegestaan) om het laden te versnellen. Hoewel aangepaste JS is toegestaan amp-script, en JS van derden is toegestaan iframes, kan het weergave niet blokkeren.

Alle bronnen hebben een statisch formaat

AMP neemt de grootte van alle bronnen (zoals afbeeldingen, advertenties en iframes) om ze te positioneren voordat ze worden gedownload. Het begint met het laden van de lay-out zonder te wachten tot de bronnen zijn gedownload.

Staat niet toe dat extensies het downloaden vertragen

AMP ondersteunt extensies zoals lightboxes, embeds, tweets, enz. Deze vereisen aanvullende HTTP-verzoeken, maar blokkeren het laden van de pagina niet. Pagina's die aangepaste scripts gebruiken, moeten het AMP-systeem laten weten dat er een amp-iframe-tag zal zijn, bijvoorbeeld:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

CSS moet inline en aan de grootte gebonden zijn

CSS blokkeert alle weergave en heeft de neiging opgeblazen te raken. Op AMP HTML-pagina's zijn alleen inline-stijlen toegestaan. Dit verwijdert veel HTTP-verzoeken uit het kritieke weergavepad in vergelijking met de meeste webpagina's.

Bovendien heeft het inline stylesheet een maximale grootte van 50 kilobytes. Hoewel dit formaat groot genoeg is voor zeer geavanceerde pagina's, vereist het nog steeds dat de auteur van de pagina een goede CSS-hygiëne in praktijk brengt.

Geef dienovereenkomstig prioriteit aan het laden van afbeeldingen

AMP richt zich op de zaken die nodig zijn als/wanneer gebruikers op dat deel van de pagina verschijnen. Dat betekent: het gebruikt luie laadtechnologie om bronnen te downloaden en te laden die zich in de viewport bevinden of op het punt staan ​​in de viewport te komen terwijl gebruikers door de pagina scrollen.

Welke invloed heeft AMP op de zoekresultaten?

Google Zoeken is de grootste zoekmachine en AMP is ontworpen door Google, dus het samen gebruiken ervan zal zeker helpen bij de zoekresultaten, toch?

WRONG!

AMP is voor geen enkele zoekmachine – inclusief Google – een rankingfactor om een ​​pagina te rangschikken. Dit is de reden dat er mogelijk veel niet-AMP-pagina's boven AMP-pagina's op mobiele apparaten verschijnen.

Hoewel AMP zelf geen rankingfactor is, is snelheid wel een rankingfactor voor Google Zoeken. Google Zoeken past dezelfde standaard toe op alle pagina's, ongeacht de technologie die wordt gebruikt om de pagina te bouwen.

Daarnaast kan het inschakelen van AMP ervoor zorgen dat uw webpagina wordt weergegeven op mobiel zoeken als onderdeel van rijke resultaten en carrousels. Dit kunnen zijn:

Basis zoekresultaat: Deze categorie beschrijft reguliere webresultaten. De link van de pagina wordt vaak gevolgd door het bliksemschichtteken (of logo) van AMP.

AMP - basis SERP-resultaat

 

AMP - Carrousel met topverhalen

Carrousel met topverhalen: Sommige artikelen, liveblogs en video's verschijnen in een rechthoekige container. Dit kunt u ook bereiken door uw pagina zo te structureren dat Google de schematypen (nieuwsartikelen, discussieforums, video-objecten, enz.) beter begrijpt.

Rijk resultaat: Dit omvat styling, afbeeldingen en andere functies en wordt gebruikt om restaurants, recepten en andere soortgelijke producten te beoordelen.

AMP - rijke resultaten

 

AMP - visuele verhalen

Webverhalen: Een visuele storytelling-indeling in de zoekresultaten van Google die de gebruiker onderdompelt in een ervaring op volledig scherm. Web Stories kunnen ook verschijnen in Google Afbeeldingen, Discover en de Google-app.

Voordelen van versnelde mobiele pagina's

Gereduceerde laadtijd: De naam spreekt voor zich, AMP is in de eerste plaats ontworpen om de laadsnelheid van mobiele apparaten te verlagen en doet terecht hetzelfde door de laadtijd terug te brengen tot slechts 2-3 seconden.

Lage bouncepercentages: Trage pagina's zijn de belangrijkste reden daarvoor gebruikers om af te stuiteren. Gezien een scherpe daling van de laadtijd zouden uitgevers een laag bouncepercentage moeten ervaren.

Betere SEO: Er is al gezegd dat de laadtijd een rangschikkingsfactor is voor de meeste zoekmachines en met de lagere laadsnelheid van de pagina zou u een verbetering in de rangschikking van uw pagina's moeten zien. Niet te vergeten dat AMP-pagina’s ook de kans vergroten om op de Google-carrousel en andere SERP-functies te verschijnen.

Toename van webverkeer: Met betere SEO mag u beter siteverkeer verwachten. Aangezien AMP uw SEO kan verbeteren en een lage laadsnelheid u kan helpen het bouncepercentage te verlagen als uw inhoud ook uitzonderlijk is, kunt u goede sessienummers krijgen van gebruikers die op de site verschijnen.

Ondersteund door alle browsers: Omdat AMP alle onnodige JS en CSS verwijdert, krijgen browsers een schone HTML-code om te interpreteren en op het scherm weer te geven.

Geoptimaliseerd dataverbruik: Het verwijderen van onnodige JS en CSS betekent ook dat pagina's minder browser- en computerbronnen zullen gebruiken. AMP verkleint bijvoorbeeld de afbeeldingsgrootte tot precies de juiste grootte zodat de browser snel kan laden. Dit betekent ook dat de browser een kleinere bestandsgrootte downloadt – een duidelijke vermindering van het datagebruik.

Dus, wat is de vangst?

Ik weet zeker dat dit tot nu toe allemaal te mooi klinkt om waar te zijn, dus wat is de afweging? Wat is al dat extra spul dat wordt “weggestript” om de pagina toch sneller te laten laden?

Welnu, dit is wat AMP weghaalt: plug-ins voor sociale media, pop-ups, beeldcarrousels, video's, analysesoftware, trackingscripts en vele andere dingen die op de achtergrond worden gevraagd wanneer een pagina wordt geladen.

Het ondersteunt ook geen Javascript van derden. Dat is het geheim van zijn snelheid. Het implementeren ervan voor uw inhoud betekent dus uiteraard dat u de functionaliteit verliest die is gekoppeld aan de hierboven genoemde dingen.

Sommigen zeggen dat AMP alleen goed werkt voor grotere uitgevers die al een klaar publiek hebben. Kleinere uitgevers kunnen geen basiszaken doen, zoals het verzamelen van e-mails, omdat formulieren mogelijk niet door AMP worden ondersteund. Dergelijke zorgen kunnen voor sommige uitgevers heel goed een dealbreaker blijken te zijn.

Deze zorgen kunnen echter tot op zekere hoogte worden weggenomen als u samenwerkt met een ontwikkelaar die ervaring heeft met AMP. Voor het genereren van inkomsten met AMP raden we u aan een partner te overwegen die gespecialiseerd is in de technologie (zoals AdPushup).

Hoe ga ik aan de slag met AMP?

U moet bekend zijn met markeringen om een ​​AMP-pagina te kunnen instellen. Wij raden u aan even de tijd te nemen om de route door te nemen officiële AMP-tutorial en gerelateerde handleidingen Eén keer (als u nog nooit met HTML hebt gewerkt) kunt u hier een ontwikkelaar inhuren OF uw technisch onderlegde vriend of collega vragen om u een beetje te helpen begrijpen hoe dit werkt.

Met een beetje moeite kun je:

  1. Maak een AMP-pagina met behulp van de boilerplate-code.
  2. Zet het in scène.
  3. Garandeer AMP-naleving door de validator van Google te gebruiken.
  4. Publiceren en distribueren.

Als u toevallig op WordPress wordt gepubliceerd, heeft u geluk. Je kunt gebruiken WordPress-plug-in voor AMP dat al uw berichtpagina's dynamisch converteert naar AMP-compatibele versies. Dit is enorm nuttig omdat het u al het voorwerk bespaart. Het enige dat u hoeft te doen, is de plug-in één keer activeren en al uw berichten worden onmiddellijk AMP-ified.

Ondersteunt AMP advertenties?

Dit is een grote vraag voor uitgevers. Dat zou je graag weten AMP ondersteunt inderdaad advertenties; tenminste voor Google is dat eigenlijk het hele punt van deze oefening.

Advertenties helpen bij het financieren van gratis services en inhoud op internet. Met Accelerated Mobile Pages willen we een uitgebreid scala aan advertentieformaten, advertentienetwerken en technologieën ondersteunen. Alle sites die AMP HTML gebruiken, behouden hun keuze aan advertentienetwerken, evenals alle indelingen die geen afbreuk doen aan de gebruikerservaring. Het is ook een kerndoel van het project om abonnementen en betaalmuren te ondersteunen. We werken samen met uitgevers en mensen uit de branche om de parameters te helpen definiëren van een advertentie-ervaring die nog steeds de snelheid biedt waar we met AMP naar streven.

Officiële Google-blog

AdSense ondersteunt niet alleen AMP, maar de volgende advertentienetwerken worden ook ondersteund: Criteo, OpenX, Smart Ad Server, TripleLift, Teads en meer.

Uitgevers zouden een verbetering in de advertentieprestaties en dus ook in de advertentie-inkomsten moeten zien, omdat de ongeveer 40% van de gebruikers die eerder van de pagina afkwamen nu blijven hangen om de advertenties te zien.

Hier ziet u hoe AMP is geëvolueerd om webuitgevers te helpen met hun doelstellingen voor advertentie-inkomsten:

Amp-html-advertenties voor alle pagina's

Amp-html-advertenties zijn sneller, lichter en veiliger dan standaardadvertenties. Ze zijn gebouwd met behulp van AMP-HTML en gebruiken veel van de slimme componenten die AMP-pagina's snel maken.

Amp-html-advertenties zijn ontworpen om te werken op zowel AMP- als niet-AMP-webpagina's, op elk apparaat, in verschillende standaard- en advertentie-indelingen (zoals carrousel, parallax en lightbox).

Ingebouwd toestemmingselement

In april en begin mei 2018 startte AMP Project twee updates uitgebracht waarmee uitgevers gebruikersbedieningen kunnen bouwen en de keuzes kunnen beheren via een nieuwe AMP-component genaamd .

Hierdoor kunnen uitgevers de toestemmingsbeslissing van de gebruiker vastleggen en worden de instellingen van de gebruiker beschikbaar gemaakt voor elementen op de AMP-pagina om het gedrag van de pagina te wijzigen.

Bovendien kunnen elementen door leveranciers verder worden aangepast om geavanceerder gedrag te verkrijgen dat afhankelijk is van de instellingen van de gebruiker.

DFP/AdX- en AdSense-ondersteuning Uitgevers kunnen ervoor kiezen om niet-gepersonaliseerde advertenties aan gebruikers weer te geven, of ze kunnen ervoor kiezen om advertenties selectief weer te geven op basis van toestemming.

Videoadvertenties op AMP-pagina's

Het is bekend dat het enige tijd duurt voordat video's in de browser zijn geladen, dankzij de grote bestandsgrootte. Het gebruik van videoadvertenties met AMP leek in eerste instantie onmogelijk.

Echter, met de opkomst van video-advertentiesAMP kwam met de oplossing om videoadvertenties op AMP-pagina's weer te geven.

AMP maakt zowel InStream- als outstream-videoadvertenties. InStream-videoadvertenties kunnen worden weergegeven met behulp van verlenging. Het heeft alle basisfuncties, waaronder automatisch afspelen, docken op een scroll en analyses.

Hoe kan ik inkomsten genereren met AMP-voorraad?

AMP is snel. Het is het beste wat er met de mobiele sites van de uitgever is gebeurd. Als u echter op dezelfde manier met uw AMP-inventaris omgaat als met de rest van uw inventaris, kunnen de resultaten teleurstellend zijn. 

Gezien de hoge zichtbaarheidsscore van AMP-pagina's zullen de eCPM's stijgen. Maar die voordelen worden tenietgedaan door de technologische tekortkomingen van uitgevers.

Aan de andere kant, als je AMP als een premium-inventaris behandelt, moet je begrijpen dat het alleen werkt voor mobiele apparaten. Dit betekent dat u adverteerders moet vinden die specifiek op zoek zijn naar mobiele AMP-voorraad.

Hier hoe je dat kunt Haal het maximale uit uw AMP-inventaris:

Veiling AMP-inventaris Via Bieden via koptekst

Ja, je leest het goed – AMP-voorraad kan worden verkocht via headerbieden. Er zijn eigenlijk twee manieren om dat te doen:

Schakel uw Google Ad Manager-regelitem in met AMP-advertenties

Google Ad Manager-uitgevers kunnen eenvoudig de amp-html-advertentiefunctie inschakelen om hun advertenties AMP-vriendelijk te maken. U kunt uw bestaande advertentietags updaten of nieuwe maken om kopers (netwerken) te laten weten dat dit een AMP-voorraad is.

Betrek een externe partner voor AMP-vraag

Wanneer u verschillende kanalen toevoegt om AMP-voorraad te verkopen, heeft u voor elk kanaal meer vraag nodig. Als u een externe partner inschakelt om de vraagpartnerschappen te beheren, kunt u zich concentreren op andere belangrijke aspecten van uw uitgeverijbedrijf.



Heeft AMP analyses?

AMP bevat een element dat het meten van gebruikersinteracties mogelijk maakt, en het heeft ingebouwde ondersteuning voor Google Analytics.

Om het te gebruiken met Google Analytics, kunt u deze code kopiëren en vervangen met de accommodatie-ID die u wilt gebruiken:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

AMP vraagt ​​u bekend te maken hoe u gegevens verzamelt om de functie te gebruiken. Dit zijn de gegevenspunten die u kunt verzamelen:

Hier vindt u de complete gids voor het toevoegen van analyses aan AMP-pagina's.

Laatste woorden

AMP is krachtig: maakt uw site echt mobielvriendelijk.

Met nieuwe ontwikkelingen – zoals AMP-advertenties, Real-time configuratie en functies om toestemming van gebruikers te vragen – zorgt u ervoor dat het een toekomst heeft in de digitale uitgeverij. Op dezelfde manier versnelt de adoptiesnelheid – vooral in de nieuwsgemeenschap.

Gebruikt u AMP voor uw site? Hoe zien uw advertentie-inkomsten eruit? Niet zo goed? Sta ons toe u te helpen – boek een gratis adviesgesprek van 30 minuten.

Veelgestelde Vragen / FAQ


Heb je een vraag? We hebben antwoorden.

AMP staat voor Accelerated Mobile Pages. Het is een mobielvriendelijke mobiele pagina die is ontworpen om sneller te laden dan uw normale webpagina's.
AMP wordt gebruikt om de laadsnelheid van webpagina's voor mobiele apparaten te verhogen door onnodige CSS, JS en animaties te verwijderen. AMP is een open-source HTML-framework ontwikkeld door het AMP Open Source Project. Het is door Google gemaakt als concurrent van Facebook Instant Articles en Apple News.
Ja dat is zo. Een snel ladende pagina heeft altijd de voorkeur van zoekmachines boven langzame pagina's. Het AMP maken van uw pagina's mag echter niet uw enige SEO-strategie zijn. De rangschikking van uw pagina is afhankelijk van verschillende factoren en het kan zijn dat niet-AMP-pagina's ook topposities innemen. U moet beginnen met het uitvoeren van een A/B-test op uw webpagina's. Laat ons weten of je hulp nodig hebt met dit onderdeel.
Het hangt af van het type website dat u heeft. Als u de meeste bezoekers via mobiele apparaten haalt, is AMP een goede optie voor u. Als u echter niet op de AMP-technische details wilt ingaan, zou het optimaliseren van uw website om snel te laden ook voor u moeten werken.
AMP werkt door alle onnodige CSS- en JavaScript-code van de webpagina te verwijderen en alleen de codes te behouden die belangrijk zijn voor gebruikers. AMP werkt ook als CDN voor deze pagina's voor een betere serverresponstijd. Meer informatie hier.
AMP is ontworpen voor mobiele apparaten. Als u uw pagina echter zo ontwerpt dat deze alleen voor AMP is, ontvangt u geen boete van Google.

Op zoek naar een downloadbaar exemplaar?