Google heeft zojuist een nieuwe variant op HTML gepresenteerd. Het heet AMP HTML en staat voor Accelerated Mobile Page HTML. Zoals de naam al zegt, is het bedoeld om mobiele websites nog sneller te maken.
Nu is in de wereld van web development alles veranderd sinds CSS een stormachtige ontwikkeling doormaakte en hierdoor “responsive websites” als paddestoelen uit de grond schoten. Prima natuurlijk, maar dit zegt niets over de snelheid van je website. Met AMP HTML verwacht Google dat mobiele websites op zijn minst 15% tot maar liefst 85% sneller geladen zullen worden. Dit alleen door het implementeren van een JavaScript library dat door Google zelf wordt aangeleverd. Hierna is het aan de developer om het zich eigen te maken en de website te optimaliseren voor de beste prestaties.
AMP HTML is overigens vooral bedoeld om statische webpagina’s sneller te maken. Denk hierbij aan nieuwspagina’s en blogs, die hier heel veel profijt van kunnen hebben.
Hoe werkt AMP HTML?
AMP HTML is volledig gebouwd op de bestaande webtechnologieën. Het bereikt haar doel door het beperken van sommige delen van HTML, CSS en JavaScript. Deze beperkingen worden opgelegd via een validator die in het standaardpakket zit. Het uitgangspunt is dat JavaScript zoveel mogelijk wordt vermeden. Significant detail daarbij is dat daarvoor, zoals gezegd, wel eerst een Javascript library ingeladen moet worden. Hiermee worden ook advertenties op de website, die vaak via Javascript worden ingeladen, geblokkeerd. Dit omdat deze dingen gevoelig zijn voor nare injecties van buiten en bovenal: de website vertragen. Mocht je toch advertenties willen tonen, dan kan dat door middel van de speciale AMP HTML iframe, die pas wordt ingeladen nadat de content al op het scherm staat.
Hoe pas je het toe op je website?
De code voor het opzetten van AMP HTML ziet er als volgt uit:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style>body {opacity: 0}</style>
<noscript>
<style>body {opacity: 1}</style>
</noscript>
</head>
Dit stukje code is de basis en zorgt ervoor dat:
- AMP JS Library wordt ingeladen. Hiermee wordt de content op de pagina sneller geladen.
- AMP HTML validator. Hiermee kunnen developers direct zien of hun code valide is of niet.
- AMP HTML Components. Maakt de HTML nog sneller door deze te verrijken met componenten en bepaalde HTML5 elementen te vervangen.
AMP HTML Components
Er zijn 4 componenten die standaard worden meegeleverd met AMP HTML. Dit zijn:
- amp-ad De container om ads te tonen.
- amp-img Vervanger van de img tag van HTML.
- amp-pixel Gebruikt als “tracking-pixel” om het aantal page views te tracken.
- amp-video Vervanger van de HTML5 video tag.
Amp-video kan bijvoorbeeld worden aangevuld c.q. uitgebreid met de component amp-youtube om een Youtube video binnen te halen. Hetzelfde kan gedaan worden met bijvoorbeeld Twitterberichten. Hiervoor kan de component amp-twitter gebruikt worden.
Tevens is het mogelijk om bijvoorbeeld een lightbox te genereren, die je dan naar hartenlust kunt stijlen met CSS. Dit ziet er dan ongeveer zo uit:
<button on=”tap:my-lightbox”>Open lightbox</button>
<amp-lightbox id=”my-lightbox” layout=”nodisplay”>
<div class=”lightbox”>
<amp-img src=”my-full-image.jpg” width=300 height=800>
<div close>Close</div>
</div>
</amp-lightbox>
SEO
Niet lang geleden heeft Google haar algoritme voor zoekresultaten aangepast. Dit resulteert nu in het feit dat voor mobiel geoptimaliseerde websites, automatisch hoger op de ranglijst komen dan websites die dat niet zijn. En ja, je voelt hem natuurlijk al aankomen… met AMP HTML verrijk je niet alleen je code, maar ook de snelheid en dus de SEO van je website. Een win-win situatie voor elke webmaster en bedrijf die nóg hoger in de Google resultaten wil komen.
Wat kunnen we nog meer verwachten?
We kunnen nog een hoop verwachten, maar tijd zal leren wat precies. Google geeft zelf aan dat het nog niet af is, maar verrijkt moet worden met best practices die vanuit de community moeten gaan komen. Hier en daar zal er nog het een en ander veranderen, maar het principe is duidelijk en zeer vooruitstrevend.
Zelf zie ik AMP HTML als een combinatie van HTML5, Bootstrap en een uitgeklede versie van Angular, waar enorm veel potentie in zit. Laten we hopen dat het concept ontwikkeld wordt en een echt succes wordt.
Het project zelf staat overigens in Github en je kunt er dus al mee spelen en natuurlijk feedback geven.
Mocht je nog meer informatie willen, dan kun je de blogpost van de makers van AMP HTML doornemen.
Bron afbeelding: splitshire.com
The post Snellere mobiele websites met AMP HTML appeared first on Now Digital.