Nybörjarens guide till accelererade mobilsidor (AMP)

Accelererade mobil sidor är Googles initiativ som avser att lösa det största problemet med mobilwebben - fart. Den fantastiska användarupplevelsen vi designar med stor omsorg, är smärtsamt långsam på mobilen.

Långsamhet är inte bara ett UX-problem, utan också sänker omvandlingsfrekvensen, och skadar tillgängligheten genom att utesluta användare med långsammare internetanslutningar. AMP är en laginsats som lanserades med målet att tillåta utgivare att skapa mobilt optimerat innehåll en gång och få det att ladda omedelbart överallt.

Sedan lanseringen har många utgivare som BBC, The Economist, Guardian News och Financial Times genomfört initiativet, så nu kan vi säkert anta att AMP är en innovation som är värt att överväga för alla som vill vara konkurrenskraftiga på mobilen webb.

AMP i aktion

Innan du dyker in i detaljerna, här är den AMP-demo, så du kan se det i aktion. Demon kan nås på den här länken.

För att se AMP i åtgärd måste du göra två saker:

Visa demoen antingen på en mobilenhet eller på en mobilsimulator, t.ex. Chrome DevTools Mobile Device Simulator.
Kör sökfråga i sökfältet. Som Google AMP arbetar för närvarande huvudsakligen med nyhetssajt är det bästa valet en ny nyhetsartikel.

På skärmdumpen nedan kan du se vad jag fick när jag använde söktermen rio olympiska spelen.

Som du kan se visas AMP-sidor som Google Rich Cards, en mobiloptimerad bildcarusell, som Google släppte i maj 2016.

Lägg märke till hur Google skiljer AMP-sidor från andra mobiloptimerade sidor genom att använda 2 olika etiketter: AMP och mobilvänlig. Det är också värt att klicka på några av resultaten för att se hur en AMP-webbsida ser ut och hur snabbt den går på mobilen.

Teknisk bakgrund

AMP är en webbstandard byggd på befintlig webbteknologi och med inriktning på statiskt innehåll. Det har 3 olika delar:

AMP HTML: modifierad HTML med (1) begränsningen av vissa vanliga HTML / CSS-funktioner och (2) införandet av nya anpassade taggar (komponenter)
AMP JS: verkställer bästa praxis för att minska sidladdningstiden
AMP CDN: en cache med ett inbyggt valideringssystem, vilket optimerar din webbplats ytterligare

Om du vill veta mer på den tekniska bakgrunden till AMP-sidor, kolla in videon nedan, där Googles Paul Bakaus ger en inledande prat på AMP.

Om du vill dyka djupare, är det också värt att förstå vilka optimeringstekniker AMP använder för att påskynda prestanda på mobilen. I videon nedan förklarar Malte Ubl, ledningen för AMP Engineering anatomi av AMP i detalj.

AMP HTML

Accelererade mobil sidor är vanliga HTML-sidor som behöver följ en uppsättning regler för att göra sidor laddas snabbare och göra med tillförlitlig prestanda.

Låt oss ta en titt på de viktigaste sakerna du behöver veta om det. Du kan också titta på den fullständiga AMP HTML-specifikationen.

Bestäm om du vill ha en separat AMP-sida

För samma statiska innehållssida kan du ha 2 separata versioner - en för AMP och en för icke-AMP-versionen. Du kan också välja att ha bara en version - AMP-sidan, och använd den överallt. Rörande webbläsarsupport, AMPs Github-sida hävdar:

Om du fortfarande är orolig för webbläsarstöd, kolla in inlägget till Googles Paul Irish på Stackoverflow.

Om du vill ha två sidor (AMP och icke-AMP), behöver du länka till var och en av dem för att informera sökmotorer om existensen av två versioner.

Lägg till följande kod till avsnittet av sidan utan AMP:

Lägg även till följande rad i avsnitt på AMP-sidan:

Om du bara har en AMP-sida behöver du fortfarande länka det från sig själv på följande sätt:

Starta Boilerplate

AMP Project erbjuder olika startande pannplattor du kan använda för att komma igång. Ta en titt på den enklaste AMP HTML-kedjan nedan:

          Hej världen!

Du kan se att pannan kopplar den vanliga HTML-sidan med hjälp av märka. De > taggen lägger till AMP JS-bibliotek.

 De   
Du kan bara ha ett inbäddade stylesheet, och det finns också många otillåtna stilregler, till exempel kan du inte använda !Viktig kvalifierare, @importera regel och pseudoklasser.
 Glöm inte att kolla stilbordsbegränsningarna innan du börjar skriva CSS för dina AMP-sidor.
 Det finns en annan sak som är viktigt att veta om AMP-stilregler: du kan inte använda någon layout du vill ha - eftersom det är en av AMP: s principer för att tillåta webbläsaren att beräkna utrymmet för varje element på sidan i förväg.
 Ta en titt på de stödda och icke-stödda layouterna.
 AMP JS
 AMP-dokument kan innehålla varken någon författad skriftlig eller någon annan JavaScripts från tredje part, men det betyder inte att Accelerated Mobile Pages inte använder JavaScript alls. AMPs JavaScript-bibliotek (AMP runtime) ansvarar för att ladda AMP-sidor snabbt och snabbt genomföra bästa prestanda.
 AMP-komponenter
 AMP-komponenter är definierad av AMP runtime. De är de ovan nämnda AMP-specifika HTML-taggar du behöver använda istället för deras vanliga motsvarighet, till exempel  istället för  märka.
 Varje AMP-komponent innehåller en särskild extern resurs (en bild, en video, en inbäddning etc.). Externa resurser är benägna att sakta ner webbplatser. Huvudmålet med denna lösning är att hantera lastningen av externa resurser på ett rimligt sätt genom att köra dem inuti sandlåda.
 AMP ger dig med 2 typer av komponenter:
 Inbyggda komponenter: De är alltid tillgängliga i alla AMP-dokument, de är byggd rätt in i AMP runtime. För närvarande finns fem av dem:  för att visa annonser
  För bilder används den istället för  märka
  för spårning av pixlar (används för att räkna sidvisningar)
  för direkta HTML5-videofiler, ersätter  märka
  för inbyggda element (kan användas istället för  i vissa fall)
 
 Utökade komponenter: Ytterligare komponenter, du måste uttryckligen inkludera dem in i ditt AMP-dokument. Det finns många användbara sådana, till exempel  och , se hela listan. Många av dem kan vara vana vid bädda in innehåll från tredje parts tjänster, som från Twitter eller Instagram.
 
Observera att alla externt belastade resurser, t.ex.  och  måste ha en känd  och  attribut för att aktivera webbläsaren till Beräkna layouten i förväg.
 AMP CDN
 De AMP CDN är i princip en cache, kallad Google AMP Cache. Den hämtar giltiga AMP-dokument, cachar och laddar dem. AMP CDN har också a inbyggt valideringssystem.
 Det är värt testa dina AMP-sidor innan du låter dem gå online för att säkert passera valideraren. Du kan göra det på många olika sätt.
  BILD: AMP-projekt
Det är bra att veta att AMP CDN använder HTTP / 2-protokollet för att uppnå bästa möjliga prestanda.
 AMP-verktyg
 Det finns några bra verktyg som kan hjälpa dig att implementera Accelerated Mobile Pages, låt oss titta på några av dem.
 Google ger webbansvariga en praktisk AMP status rapport verktyg som visar ett antal framgångsrikt indexerade AMP-sidor och AMP-relaterade fel också.
 Lullabot s AMP PHP Library tillåter dig att konvertera dina HTML-sidor till AMP HTML, och rapporterar också att alla HTML-dokument uppfylls med AMP-standarderna.
 Om du vill använda AMP på din WordPress-sida, läs Yoasts handledning om hur du ställer in WordPress för AMP, och hur fungerar AMP med Yoast SEO-plugin.
 Du kan också kolla in Automattics AMP-plugin som låter dig aktivera Accelerated Mobile Pages på din WordPress-webbplats.
  BILD: WordPress.org
Ytterligare överväganden
 Om du fortfarande inte är övertygad, ta en titt på videon om a snabb hastighetstest Nedan.
 
 Jonathan Abrams, grundaren av Nuzzel gör ännu bättre påståenden, eftersom han hävdar att även mobiloptimerade webbplatser som New York Times belastar betydligt snabbare - istället för att ta tre sekunder att ladda den genomsnittliga sidan laddas en sida in mindre än en halv sekund när Googles accelererade mobil sidor är aktiverade.
 Du kan också läsa en intressant artikel i Verge om konkurrensen från Google AMP och Facebook: s Instant Articles. Om du fortfarande letar efter ett svar på "vad är fångsten?", Kolla in Yoasts inlägg, som nämner rädsla för att AMP i grund och botten tar oss tillbaka till en internettid före 2000 och frågar om det verkligen är en öppen standard.
 .