Wat is AMP HTML en hoe past het in framework/tool ​​X?

Ok, dus we hebben waarschijnlijk allemaal wel eens gehoord over AMP HTMLvan Google.

Waar ik benieuwd naar ben, is hoe dit gaat passen in onze bestaande workflows. Als je een React- of Angular-app schrijft, hoe past AMP HTML dan in het ontwikkelingsproces? Elk van deze frameworks heeft al een manier om componenten te definiëren en het lijkt erop dat AMP alleen maar iets aan de stack toevoegt.

De meesten van ons gebruiken ook al andere tools zoals browserify of webpack. Ik zie niet zo snel hoe AMP pastbij de rest. Sommige van deze tools stellen ons al in staat om onze site op een geoptimaliseerde manier te bedienen. In hoeverre gaat AMP HTML dit allemaal veranderen?


Antwoord 1, autoriteit 100%

AMP HTML gaat in feite terug naar de basis en levert de snelst mogelijke HTML. Ik moet denken aan WAPen de Nokia 7110.

Het is een strikte set regels voor het maken van een webpagina, die openstaat voor groei en openstaat voor extensies door andere bedrijven en ontwikkelaars.

Hoe dit werkt met SPA (Single Page Apps) en andere zware Javascript front-end frameworks is op dit moment niet bekend, dat moeten de ontwikkelaars uitzoeken.

In de kern zijn het statische HTML-pagina’s met aangepaste elementen die zijn ontworpen om zo snel mogelijk te laden bij langzame verbindingen en kleine weergaven. Iedereen kan zijn site al voor mobiel optimaliseren en tot een paar KB terugbrengen als ze dat echt willen, AMP-HTML of niet.

Het belangrijkste voordeel is

  1. Google zal het ondersteunen, denk aan Android, Chrome en Google Zoeken, Google CDN.
  2. Pagina’s worden erg snel geladen en kunnen er vrij stil uitzien.

De eerste toepassing, zoals door WordPressen andere uitgevers, kan een afzonderlijke reeks mobielvriendelijke AMP-pagina’s. Dit komt van Google, die wilde dat je al je normale webpagina’s mobielvriendelijk zou maken of SEO-hits zou tegenkomen.

Als je er op de lange termijn over nadenkt, is het een specificatie voor mobiel internet die zich richt op prestaties. Indien aangenomen, kan elke webpagina over 5 jaar in seconden worden geladen op een mobiele verbinding, ongeacht de kwaliteit van die verbinding. Als we niet kunnen wachten tot technologie- en telecombedrijven de snelheid verhogen, kunnen we in ieder geval de grootte van onze pagina’s verkleinen.


Antwoord 2, autoriteit 64%

AMP is ontworpen voor statische pagina’s. Ontwikkelaars moeten twee verschillende pagina’s maken: normale versie en AMP-versie. De AMP-pagina heeft een link naar de normale pagina en vice versa. Telkens wanneer een verzoek vanaf een mobiel naar de normale pagina komt, wordt de AMP-pagina geladen en omgekeerd. Google heeft zijn eigen AMP-cache om het sneller te laden. Bij het ontwikkelen van AMP-pagina’s moeten we alleen rekening houden met de AMP-regels.


Antwoord 3, autoriteit 4%

Dingen zijn nu duidelijker via deze URL

Een van de grootste optimalisaties is het feit dat het alles wat van externe bronnen komt asynchroon maakt, zodat niets op de pagina de weergave kan blokkeren.

Dus geen renderblokkerende CSS meer.

Andere prestatietechnieken zijn onder meer het sandboxen van alle iframes, het vooraf berekenen van de lay-out van elk element op de pagina voordat bronnen worden geladen en het uitschakelen van langzame CSS-kiezers.

Hopelijk helpt deze nieuwe link.

Other episodes