Example AMP

AMP

Voordeel

'Zeer hoge laadsnelheid
van deze webpagina's'

Zie verder »

Example AMP

AMP

Voordeel

'100% Responsive én zeer geschikt
voor zwakke online-verbinding'

Zie verder »

Example AMP

AMP

Nadeel

'Extreem strikte codering:
ongeschikt voor beginners'

Zie verder »


Opmerkingen

De naam AMP (= Accelerated Mobile Pages) zegt het al: dit Framework is in eerste instantie gericht op mobiele webpagina's maar kan ook op laptops en pc's worden gebruikt.

Het idee achter AMP is dat alle data van een pagina op één server verzameld worden zodat zo'n webpagina sneller laadt.
Stel dat er Youtube filmpjes op de pagina ge-included staan, dan worden die externe gegevens samen met de data van de pagina zelf op één plek geplaatst vanwaar alle data gelijktijdig worden geladen.
Het voordeel is dat je geen tijd verliest bij het verzamelen van data van meerdere servers: HTML, data van Instagram enzovoorts.

Een AMP-pagina werkt alleen als de code is gevalideerd. En de voorwaarden zijn strikt. Een extern CSS-bestand wordt niet toegestaan, net zo min standaard JS (JavaScript). Anders zou de laadsnelheid van de pagina ernstig belemmerd kunnen worden.


Voorbeeld van AMP HTML met een responsive afbeelding.

Voorbeeld van AMP Stories met meerdere afbeeldingen.

AMP Email: [ hier heb ik geen werkend voorbeeld van ]

Voorbeeld van AMP Ads met een bewegend logo.


Validatie 1. Valideer AMP HTML online door de url in te voegen: 'AMP-pagina is geldig'.

Validatie 2. Valideer AMP HTML online door de broncode te plaatsen: 'Validation Status: PASS'.

Validatie 3. Of valideer een AMP-pagina met Chrome DevTools Console via Ctrl+Shift+i.
Zie voor instructie Validate AMP Pages.
Laad bijvoorbeeld https://joostvanmeeteren.info/amp_html/#development=1 in Chrome en kies Console: 'AMP validation successful.'


Voorwaarden. Een AMP-pagina moet aan strikte regels voldoen om alle data vanaf één webserver te laden.


Combi met andere Frameworks.

Bootstrap is niet geheel te implementeren in AMP HTML.
BS maakt namelijk gebruik van eigen Javascript- en CSS-bestanden die in gevalideerd AMP niet worden toegestaan. Zodra je het JS verwijdert werken allerlei functies niet meer.
Met het verwijderen van alle JS-links kom je wel dichterbij bij een AMP-validatie.
Maar dan zit je nog met het CSS-bestand. De oplossing zou zijn om de inhoud van 'bootstrap.min.css' inline te maken. De omvang van de CSS-code uit dit bestand is echter te groot voor AMP.
Daar is een oplossing voor door in de tool UnCSS Online! | Simply UnCSS your styles online! de Bootstrap-CSS-code te reduceren tot de relevante code en die inline te implementeren in AMP HTML.
Ga naar 'Bootstrap in AMP HTML' naar het voorbeeld van mijn homepage.

W3.CSS kan daarentegen wel helemaal in AMP geïmplementeerd worden. W3.CSS maakt geen gebruik van JS en de inhoud van het CSS-bestand is van een omvang die AMP inline accepteert. Belangrijk is wel dat de zogenaamde '!important' declarations net als bij BS uit de CSS worden verwijderd.
Zie het voorbeeld 'Architect Template'.


Overzicht. Hier vind je een overzicht met mogelijkheden en voorbeelden in AMP, geschreven in AMP HTML.

Opmerking. Aangezien ik geen Social Media meer gebruik, laat ik hier geen eigen voorbeelden van Instagram, Twitter, Facebook en Pinterest in AMP HTML zien.
Voor ingevoegde berichten van Insta, X (Twitter), FB en Pinterest is AMP HTML heel geschikt, omdat de AMP-pagina dergelijke ge-inserte berichten niet meer van aparte servers hoeft in te laden. Alle data worden gezamenlijk vanaf één Google-server geladen = gedownloaded naar de gegevensdrager om vervolgens te worden gecompiled in de browser. Dan pas wordt de AMP-pagina zichtbaar.


Example AMP

AMP

Nadeel

'Afhankelijker van Google: Met de opslag van AMP op Googleservers, word je afhankelijker van de zoekmachine.' 14 mrt 2020

Zie verder »

Example AMP

AMP

Bron: Wikipedia

'Accelerated Mobile Pages (AMP) zijn
webpagina's met statische content,
geoptimaliseerd voor browsen op mobiele apparaten.
'

Zie verder »

Example AMP

AMP

Bron: TEAM F&J

'Wat Is AMP HTML?
HTML pagina's zodanig gedesigned, zo ‘licht’ en ‘uitgekleed’ dat ze bijna direct geladen zijn.
'

Zie verder »