Beginner's Guide to Accelerated Mobile Pages (AMP)

Akselerert mobil sider er Googles initiativ som har til hensikt å løse det største problemet med mobilnett - hastighet. De fantastiske brukeropplevelsene vi designer med stor forsiktighet, er smertefullt sakte på mobilen.

Treghet er ikke bare et UX problem, men også reduserer konverteringsfrekvensen, og skader tilgjengelighet ved å ekskludere brukere med langsommere internettforbindelser. AMP er en innsats i teamet med målet om å tillate utgivere å Lag mobiloptimalisert innhold en gang, og få den til å lastes umiddelbart overalt.

Siden lanseringen har mange utgivere som BBC, The Economist, Guardian News og Financial Times implementert initiativet, så nå kan vi sikkert anta at AMP er en innovasjon som er verdt å vurdere for alle som ønsker å bli konkurransedyktige på mobilen web.

AMP i aksjon

Før du går inn i detaljene, er det her AMP demo, så du kan se det i aksjon. Demoen er tilgjengelig på denne lenken.

For å se AMP i aksjon, må du gjøre to ting:

Se demoen enten på en mobil enhet eller på en mobil simulator, f.eks. Chrome DevTools Mobile Device Simulator.
Kjør søket på søkefeltet. Som Google AMP jobber for tiden hovedsakelig med nyhetssider, er det beste valget en fersk nyhetshistorie.

På skjermbildet nedenfor kan du se hva jeg fikk da jeg brukte søkeordet rio olympics.

Som du kan se, vises AMP-sider som Google Rich Cards, en mobiloptimalisert bilkarusell, som Google utgitt i mai 2016.

Legg merke til hvordan Google differenciates AMP-sider fra andre mobiloptimaliserte sider ved å bruke 2 forskjellige etiketter: AMP og mobil-vennlig. Det er også verdt å klikke på noen av resultatene for å se hvordan en AMP-nettside ser ut og hvor raskt den går på mobil.

Teknisk bakgrunn

AMP er en webstandard bygget på eksisterende webteknologi, og fokuserer på statisk innhold. Det har 3 forskjellige deler:

AMP HTML: endret HTML med (1) begrensningen av visse vanlige HTML / CSS-funksjoner og (2) innføringen av nye tilpassede koder (komponenter)
AMP JS: håndhever beste praksis for å redusere sidelastningstiden
AMP CDN: en cache med et innebygd valideringssystem, som optimaliserer nettstedet ditt ytterligere

Hvis du vil vite mer om den tekniske bakgrunnen til AMP-sider, kan du se videoen nedenfor som Googles Paul Bakaus gir en innledende snakk på AMP.

Hvis du vil dykke dypere, er det også verdt å forstå hvilke optimaliseringsteknikker AMP bruker for å øke ytelsen på mobilen. I videoen nedenfor forklarer Malte Ubl, lederen til AMP Engineering anatomi av AMP i detalj.

AMP HTML

Akselererte mobile sider er Vanlige HTML-sider det må Følg et sett med regler for å få sider til å lastes raskere og gjengi med pålitelig ytelse.

La oss ta en titt på de viktigste tingene du trenger å vite om det. Du kan også se på hele AMP HTML-spesifikasjonen.

Bestem om du vil ha en separat AMP-side

For den samme statiske innholdssiden kan du ha 2 separate versjoner - en for AMP og en for ikke-AMP-versjonen. Du kan også velge å ha bare en versjon - AMP-siden, og bruk den overalt. Angående nettleserstøtte, AMPs Github-side hevder:

Hvis du fortsatt er bekymret for nettleserstøtte, sjekk ut innlegget fra Googles Paul Irish på Stackoverflow.

Hvis du vil ha to sider (AMP og ikke-AMP), må du lenke til hver av dem for å informere søkemotorer om eksistensen av to versjoner.

Legg til følgende kode i delen av ikke-AMP-siden:

Legg også til følgende linje i delen av AMP-siden:

Hvis du bare har en AMP-side, trenger du fortsatt å koble det fra seg selv på følgende måte:

Starte Boilerplate

AMP Project tilbyr forskjellig starter kjeleplater du kan bruke for å komme i gang. Ta en titt på den enkleste AMP HTML-kjeleplaten nedenfor:

          Hei Verden!

Du kan se at boilerplaten kobler den vanlige HTML-siden ved å bruke stikkord. De > tag legger til AMP JS bibliotek.

 De   
Du kan bare ha en innebygd stilark, og det er også mange ugyldige stilregler, for eksempel kan du ikke bruke !viktig kvalifiserer, den @importere regel og pseudoklasser.
 Ikke glem å sjekke stilarkets begrensninger før du begynner å skrive CSS for dine AMP-sider.
 Det er en annen ting som er viktig å vite om AMP-stilregler: deg kan ikke bruke hvilken som helst layout du vil ha - som det er en av AMPs prinsipper for å tillate nettleseren å beregne plassen til hvert element på siden på forhånd.
 Ta en titt på de støttede og ikke-støttede layoutene.
 AMP JS
 AMP-dokumenter kan inkludere verken noen forfatterskrevne eller noen tredjeparts JavaScripts, men dette betyr ikke at Accelerated Mobile Pages ikke bruker JavaScript i det hele tatt. AMPs JavaScript-bibliotek (AMP-kjøretiden) er ansvarlig for lasting og gjengivelse av AMP-sider raskt etter håndheve beste ytelsespraksis.
 AMP-komponenter
 AMP-komponenter er definert av AMP-kjøretiden. De er de nevnte AMP-spesifikke HTML-koder du må bruke i stedet for deres vanlige motpart, for eksempel  i stedet for  stikkord.
 Hver AMP-komponent inneholder en spesiell ekstern ressurs (et bilde, en video, en innlejring, etc.). Eksterne ressurser er tilbøyelige til å bremse nettsteder. Hovedmålet med denne løsningen er å administrere lasting av eksterne ressurser på en fornuftig måte ved å kjøre dem inne i sandkasser.
 AMP gir deg med 2 typer komponenter:
 Innebygde komponenter: De er alltid tilgjengelige i alle AMP-dokumenter, de er bygget rett inn i AMP-kjøretiden. For tiden er det fem av dem:  for å vise annonser
  for bilder blir den brukt i stedet for  stikkord
  for sporing av piksler (brukt til å telle sidevisninger)
  for direkte HTML5 video fil embeds, erstatter  stikkord
  for innebygde elementer (kan brukes i stedet for  i enkelte tilfeller)
 
 Utvidede komponenter: Ekstra komponenter, du må inkludere dem eksplisitt inn i ditt AMP-dokument. Det er mange nyttige, for eksempel  og , se hele listen. Mange av dem kan være vant til legge inn innhold fra tredjepartstjenester, for eksempel fra Twitter eller Instagram.
 
Legg merke til at alle eksternt lastede ressurser, for eksempel  og  må ha en kjent  og  Egenskap for å aktivere nettleseren til beregne oppsettet på forhånd.
 AMP CDN
 De AMP CDN er i utgangspunktet en cache, kalt Google AMP Cache. Den henter gyldige AMP-dokumenter, cacher og laster dem. AMP CDN har også a innebygd valideringssystem.
 Det er verdt tester dine AMP-sider før du lar dem gå online for å trygt passere validatoren. Du kan gjøre det på mange forskjellige måter.
  BILDE: AMP-prosjekt
Det er godt å vite at AMP CDN bruker HTTP / 2-protokollen for å oppnå best mulig ytelse.
 AMP Verktøy
 Det er noen gode verktøy som kan hjelpe deg med å implementere akselererte mobilsider, la oss se på noen av dem.
 Google gir webmastere en hendig AMP status rapport verktøy som viser en rekke vellykkede indekserte AMP-sider, og også AMP-relaterte feil.
 Lullabot s AMP PHP Library lar deg konvertere HTML-sidene dine til AMP HTML, og rapporterer også samsvar med ethvert HTML-dokument med AMP-standardene.
 Hvis du vil bruke AMP på WordPress-siden din, les Yoasts veiledning om hvordan du konfigurerer WordPress for AMP, og hvordan AMP fungerer med Yoast SEO plugin.
 Du kan også sjekke ut Automattic's AMP-plugin som lar deg aktivere akselerert mobil sider på WordPress-siden din.
  BILDE: WordPress.org
Ytterligere hensyn
 Hvis du fortsatt ikke er overbevist, ta en titt på videoen om a rask hastighetstest under.
 
 Jonathan Abrams, grunnleggeren av Nuzzel, gjør enda bedre krav, da han hevder at selv mobiloptimaliserte nettsteder som New York Times laster betydelig raskere - i stedet for å ta tre sekunder for å laste gjennomsnittssiden, lastes en side inn mindre enn et halvt sekund når Googles akselererte mobile sider er aktivert.
 Du kan også lese en interessant artikkel i Verge om konkurransen til Google AMP og Facebook's Instant Articles. Hvis du fortsatt ser etter et svar på "hva er fangsten?", Sjekk ut Yoasts innlegg som nevner frykter at AMP i utgangspunktet bringer oss tilbake til en internettid før 2000, og spørsmålet om det er virkelig en åpen standard.
 .