Beginnersgids voor Accelerated Mobile Pages (AMP)

Versnelde mobiele pagina's is het initiatief van Google dat het grootste probleem van mobiel internet probeert op te lossen - snelheid. De geweldige gebruikerservaringen die we met grote zorg ontwerpen, zijn pijnlijk traag op mobiel.

Traagheid is niet alleen een UX-probleem, maar ook verlaagt conversie, en schaadt de toegankelijkheid door gebruikers uit te sluiten met langzamere internetverbindingen. AMP is een teaminspanning gestart met als doel uitgevers toe te laten maak éénmaal mobiel geoptimaliseerde inhoud aan, en laat het overal ogenblikkelijk laden.

Sinds de lancering hebben veel uitgevers zoals de BBC, The Economist, Guardian News en de Financial Times het initiatief geïmplementeerd, dus we kunnen nu veilig aannemen dat AMP een innovatie is die het overwegen waard is voor iedereen die competitief wil blijven op de mobiel web.

AMP in actie

Voordat je de details induikt, is hier de AMP-demo, dus je kunt het zie het in actie. De demo is toegankelijk via deze link.

Als u AMP in actie wilt zien, moet u twee dingen doen:

1. Bekijk de demo op een mobiel apparaat of op een mobiele simulator, bijvoorbeeld Chrome DevTools 'Mobile Device Simulator.
2. Voer een zoekopdracht uit op de zoekbalk. Omdat Google AMP momenteel voornamelijk met nieuwssites werkt, is de beste keuze een nieuw nieuwsbericht.

Op de onderstaande schermafbeelding kun je zien wat ik kreeg toen ik de zoekterm gebruikte rio olympics.

Zoals u ziet, worden AMP-pagina's weergegeven als Google Rich Cards, een voor mobiel geoptimaliseerde beeldcarrousel, die Google in mei 2016 uitbracht.

Let op hoe Google AMP-pagina's onderscheidt van andere voor mobiel geoptimaliseerde pagina's door 2 verschillende labels te gebruiken: AMP en mobielvriendelijk. Het is ook de moeite waard om op een aantal resultaten te klikken om te zien hoe een AMP-webpagina er uitziet en hoe snel deze op mobiel werkt.

Technische achtergrond

AMP is een web standaard gebouwd op bestaande webtechnologieën en gericht op statische inhoud. Het heeft 3 verschillende delen:

1. AMP HTML: aangepaste HTML met (1) de beperking van bepaalde reguliere HTML / CSS-functies en (2) de introductie van nieuwe aangepaste tags (componenten)
2. AMP JS: dwingt best practices af om de laadtijd van de pagina te verminderen
3. AMP CDN: een cache met een ingebouwd validatiesysteem dat uw site verder optimaliseert

Als je meer wilt weten over de technische achtergrond van AMP-pagina's, bekijk dan de onderstaande video waarin Google Paul Bakaus een geeft inleidend gesprek op AMP.

Als u dieper wilt duiken, is het ook de moeite waard om te begrijpen welke optimalisatietechnieken AMP gebruikt om de prestaties op mobiele apparaten te versnellen. In de onderstaande video legt Malte Ubl, de leider van AMP Engineering, de anatomie van AMP in detail.

AMP HTML

Versnelde mobiele pagina's zijn dat wel normale HTML-pagina's dat moet volg een aantal regels om pagina's sneller te laten laden en te renderen met betrouwbare prestaties.

Laten we eens kijken naar de belangrijkste dingen die je moet weten. U kunt ook de volledige AMP HTML-specificatie bekijken.

Bepaal of u een aparte AMP-pagina wilt

Voor dezelfde statische inhoudspagina kunt u 2 afzonderlijke versies - één voor de AMP en één voor de niet-AMP-versie. Je kunt er ook voor kiezen om te hebben slechts één versie - de AMP-pagina en gebruik deze overal. Met betrekking tot ondersteuning voor browsers, De Github-pagina van AMP claimt:

Als je je nog steeds zorgen maakt over browserondersteuning, bekijk dan het bericht van Paul Irish van Google op StackOverflow.

Als u twee pagina's wilt hebben (AMP en niet-AMP), moet u dit doen link naar elk van hen om te zoekmachines te informeren over het bestaan ​​van de twee versies.

Voeg de volgende code toe aan de sectie van de niet-AMP-pagina:

Voeg ook de volgende regel toe aan de sectie van de AMP-pagina:

Als u slechts één AMP-pagina heeft, moet u dit nog steeds doen link het op de volgende manier van zichzelf:

Starten van de ketelplaat

AMP-project biedt verschillende beginnende verwarmingsplaten je kunt gebruiken om te beginnen. Bekijk de eenvoudigste AMP HTML-boilerplaat hieronder:

          Hallo Wereld!  

U kunt zien dat de boilerplate de normale HTML-pagina linkt door de label. De > tag voegt de AMP JS-bibliotheek.

De

Je kunt alleen hebben een ingesloten stylesheet, en er zijn er ook veel niet-toegestane stijlregels, u kunt bijvoorbeeld de !belangrijk kwalificatie, de @importeren regel en pseudo-klassen.

Vergeet niet de stylesheet-beperkingen te controleren voordat u begint met het schrijven van CSS voor uw AMP-pagina's.

Er is nog iets dat belangrijk is om te weten over AMP-stijlregels: jij kan de gewenste lay-out niet gebruiken - omdat het een van de principes van AMP is om de browser toe te staan bereken de ruimte van elk element op de pagina Alvast.

Bekijk de ondersteunde en niet-ondersteunde lay-outs.

AMP JS

AMP-documenten kunnen omvatten noch door een auteur geschreven JavaScript van derden noch JavaScript van derden, Dit betekent echter niet dat Accelerated Mobile Pages helemaal geen JavaScript gebruiken. De JavaScript-bibliotheek van AMP (de AMP-runtime) is verantwoordelijk voor het snel laden en weergeven van AMP-pagina's handhaving van de beste uitvoeringspraktijken.

AMP-componenten

AMP-componenten zijn gedefinieerd door de AMP-runtime. Ze zijn de eerder genoemde AMP-specifieke HTML-tags je moet gebruiken in plaats van hun reguliere tegenhanger, zoals in plaats van de label.

Elke AMP-component bevat een externe bron (een afbeelding, een video, een insluiting, enz.). Externe bronnen zijn geneigd om websites te vertragen. Het belangrijkste doel van deze oplossing is om het laden van externe bronnen beheren op een redelijke manier door ze uit te voeren in zandbakken.

AMP biedt u 2 soorten componenten:

1. Ingebouwde componenten: ze zijn altijd beschikbaar in elk AMP-document, dat zijn ze ingebouwd in de AMP-runtime. Momenteel zijn er vijf van hen:
   1. voor het weergeven van advertenties
   2. voor afbeeldingen wordt deze gebruikt in plaats van de label
   3. voor tracking-pixels (gebruikt voor het tellen van paginaweergaven)
   4. voor direct ingesloten HTML5-videobestanden, wordt de label
   5. voor ingesloten elementen (kan worden gebruikt in plaats van in bepaalde gevallen)
2. Uitgebreide componenten: Extra componenten, dat moet expliciet opnemen in uw AMP-document. Er zijn veel nuttige, zoals en , zie de volledige lijst. Velen van hen kunnen eraan gewend zijn inhoud van services van derden insluiten, zoals van Twitter of Instagram.

Merk op dat alle extern geladen bronnen, zoals en moet een bekend hebben en attribuut om de browser in te schakelen bereken de lay-out van tevoren.

AMP CDN

De AMP CDN is eigenlijk een cache, genaamd de Google AMP Cache. Het haalt geldige AMP-documenten op, cachet en laadt ze. AMP CDN heeft ook een ingebouwd validatiesysteem.

Het is waard uw AMP-pagina's testen alvorens ze online te laten gaan om veilig te zijn de validator passeren. Je kunt het op veel verschillende manieren doen.

Het is goed om te weten dat het AMP CDN het HTTP / 2-protocol gebruikt om de best mogelijke prestaties te bereiken.

AMP Tools

Er zijn enkele geweldige tools die u kunnen helpen bij het implementeren van Accelerated Mobile Pages, laten we een paar daarvan bekijken.

Google biedt webmasters een handige functie AMP-statusrapporttool die een telling toont van met succes geïndexeerde AMP-pagina's en ook AMP-gerelateerde fouten.

Lullabot's AMP PHP Library stelt u in staat uw HTML-pagina's naar AMP HTML om te zetten en rapporteert ook de overeenstemming van elk HTML-document met de AMP-normen.

Als u AMP op uw WordPress-site wilt gebruiken, leest u de zelfstudie van Yoast over het instellen van WordPress voor AMP en hoe AMP werkt met de Yoast SEO-plug-in.

Je kunt ook Automattic's bekijken AMP-plug-in waarmee u Accelerated Mobile Pages op uw WordPress-site kunt inschakelen.

Verdere overwegingen

Als je nog steeds niet overtuigd bent, bekijk de video over a snelle snelheidstest beneden.

Jonathan Abrams, de oprichter van de Nuzzel maakt nog betere claims, omdat hij beweert dat zelfs voor mobiel geoptimaliseerde sites zoals de New York Times aanzienlijk sneller laden - in plaats van drie seconden te nemen om de gemiddelde pagina te laden, wordt een pagina geladen minder dan een halve seconde wanneer Google's Accelerated Mobile Pages is ingeschakeld.

Je kunt ook een interessant artikel in Verge lezen over de concurrentie van Google AMP en Instant Articles van Facebook. Als je nog steeds op zoek bent naar een antwoord voor "wat is de vangst?", Bekijk dan Yoast's bericht waarin wordt vermeld dat AMP ons in principe terugbrengt naar een internettijd vóór 2000, en vraagt ​​zich af of het echt een open standaard is.

.