Google AMP: een korte introductie

google amp

Als je geregeld ons blog bezoekt, dan hoeven we je waarschijnlijk niet te vertellen over het belang van een snelle WordPress website. Lange laadtijden hebben een negatieve impact op je bounce rate, en zijn één van de belangrijkste oorzaken van gefrustreerde bezoekers. Er zijn honderden trucs en tools die je kunt toepassen om de laadtijden voor je mobiele website te optimaliseren. In dit artikel bespreken we het Google AMP Project, één van de meest veelbelovende methodes om de laadtijd van je WordPress website te verbeteren.

Wat is het Google AMP Project?

AMP is een afkorting voor Accelerated Mobile Pages. Het AMP Project is een open souce initiatief van Google, dat in oktober 2015 gelanceerd werd, met als doel om de algehele performance van mobiele websites te verbeteren.

Hosting en Webhosting bij Combell

Het project draait op haar eigen framework – AMP HTML – en is ontworpen om super lichte webpagina’s te ontwerpen die de laadtijden aanzienlijk moeten reduceren.
Hoewel het AMP Project zeker niet het enige framework is dat specifiek voor dit doel is ontwikkeld, kun je gerust stellen dat het zich met de steun van Google in een uitstekende positie bevind; sites die met behulp van het AMP framework worden ontwikkeld worden direct door Google gecached, zonder dat ontwikkelaars hiervoor hoeven te betalen. Daarbij profiteren AMP webpagina’s ook van een flinke boost in Google’s mobiele zoekresultaten. Het project wordt tevens ondersteund door andere grote bedrijven, waaronder Twitter, Pinterest, Adobe Analytics, LinkedIn en WordPress.com.

Zitten er eigenlijk nadelen aan het AMP Project? Wel, om je webpagina’s AMP-vriendelijk te maken, moeten ze aan een aantal strikte richtlijnen voldoen die wellicht niet voor iedereen haalbaar zijn. Gelukkig zijn de richtlijnen goed gedocumenteerd en is het niet al te lastig om over te stappen – zeker niet voor WordPress gebruikers, dankzij de magie van plugins!

Hoe werkt Google AMP?

Laten we nu eens kijken hoe AMP pagina’s precies werken. Zoals we al eerder vermeldden, maakt het AMP Project gebruik van haar eigen framework. Dat betekent dat je slechts een beperkte hoeveelheid technische functionaliteiten kunt toepassen, om die razendsnelle laadtijden te kunnen realiseren.

Wat de styling van je WordPress site betreft, AMP pagina’s werken volledig op CSS, zonder externe stylesheets. Dat betekent dat je geen inline style attributen kunt gebruiken. Daarbij zijn sommige animaties ook niet toegestaan, om performance problemen te voorkomen.

Geen externe stylesheets, is dat niet lastig? vraag je je wellicht af. De specificaties leggen uit dat de verbeterde performance die behaalt wordt door je CSS in detag te zetten erg belangrijk is. En met AMP telt elke milliseconde.

Om stijlen toe te voegen moet je gebruik maken van de <style amp-custom> tag. Hieronder een voorbeeld.

<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-custom>
 /*Hier komt je CSS */
 body {
 background-color: white;
 }
 </style>
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Groetjes van het WP handleiding team!</body>
 </html>

Hoewel het niet heel lastig is om het AMP framework onder de knie te krijgen, hebben een aantal WordPress ontwikkelaars al plugins ontwikkeld die in staat zijn om je huidige WordPress website automatisch te converteren naar het AMP format. Morgen gaan we hiermee verder en leggen we uit hoe je Google AMP met WordPress kunt integreren!

Korting op WordPress handleiding

Eén reactie op “Google AMP: een korte introductie”

  1. Kees schreef:

    Ik had nog niet eerder van Google AMP gehoord, het heeft mij perfect opweg geholpen met het versnellen van het laden van mijn website. Bedankt!

Geef een reactie