Begyndervejledning til accelererede mobilsider (AMP)

Accelererede mobile sider er Googles initiativ, der har til hensigt at løse det største problem med mobilwebben - hastighed. De fantastiske brugeroplevelser, vi designer med stor omhu, er smerteligt langsomme på mobilen.

Langsomhed er ikke kun et UX problem, men også reducerer omregningskurserne, og skader tilgængelighed ved at udelukke brugere med langsommere internetforbindelser. AMP er en holdindsats lanceret med det formål at give udgivere mulighed for at Opret mobiloptimeret indhold én gang og lad det straks læsses overalt.

Siden lanceringen har mange udgivere som BBC, The Economist, Guardian News og Financial Times implementeret initiativet, så nu kan vi sikkert antage, at AMP er en innovation, der er værd at overveje for alle, der ønsker at forblive konkurrencedygtig på mobilen web.

AMP i aktion

Før du dykker ind i detaljerne, her er den AMP demo, så du kan se det i aktion. Demoen er tilgængelig på dette link.

For at se AMP i aktion skal du gøre to ting:

Se demoen enten på en mobil enhed eller på en mobil simulator, f.eks. Chrome DevTools 'mobile enhedsimulator.
Kør søgeforespørgsel på søgefeltet. Da Google AMP i øjeblikket arbejder hovedsagelig med nyhedswebsted, er det bedste valg en frisk nyhedshistorie.

På skærmbilledet nedenfor kan du se, hvad jeg fik, da jeg brugte søgeordet rio olympics.

Som du kan se, vises AMP sider som Google Rich Cards, -en mobiloptimeret billedkarrusel, som Google udgivet i maj 2016.

Bemærk, hvordan Google differentierer AMP-sider fra andre mobiloptimerede sider ved at bruge 2 forskellige etiketter: AMP og mobilvenlig. Det er også værd at klikke på nogle af resultaterne for at se, hvordan en AMP-webside ligner, og hvor hurtigt den kører på mobilen.

Teknisk baggrund

AMP er en webstandard bygget på eksisterende webteknologier og med fokus på statisk indhold. Det har 3 forskellige dele:

AMP HTML: modificeret HTML med (1) begrænsningen af visse almindelige HTML / CSS-funktioner og (2) indførelsen af nye brugerdefinerede tags (komponenter)
AMP JS: håndhæver bedste praksis for at reducere sideindlæsningstiden
AMP CDN: en cache med et indbygget valideringssystem, der yderligere optimerer dit websted

Hvis du vil vide mere om den tekniske baggrund for AMP-sider, kan du se videoen nedenfor, som Googles Paul Bakaus giver en indledende tale på AMP.

Hvis du vil dykke dybere, er det også værd at forstå, hvilke optimeringsteknikker AMP bruger til at fremskynde ydeevnen på mobilen. I videoen nedenfor forklarer Malte Ubl, lederen af AMP Engineering anatomi af AMP i detaljer.

AMP HTML

Accelererede mobile sider er almindelige HTML-sider det skal Følg et sæt regler for at gøre siderne hurtigere og gøre det med pålidelig ydeevne.

Lad os se på de vigtigste ting, du skal vide om det. Du kan også se på hele AMP HTML-specifikationen.

Bestem, hvis du vil have en separat AMP-side

For den samme statiske indholdsside kan du have 2 separate versioner - en til AMP og en til ikke-AMP-versionen. Du kan også vælge at have kun en version - AMP-siden, og brug den overalt. Vedrørende browser support, AMPs Github-side hævder:

Hvis du stadig er bekymret for browsersupport, skal du tjekke posten fra Googles Paul Irish på Stackoverflow.

Hvis du vil have to sider (AMP og ikke-AMP), skal du link til hver af dem for at informere søgemaskiner om eksistensen af to versioner.

Tilføj følgende kode til afsnit af ikke-AMP-siden:

Tilføj også følgende linje til afsnit af AMP-siden:

Hvis du kun har en AMP-side, skal du stadig link det fra sig selv på følgende måde:

Start Boilerplate

AMP Project tilbyder anderledes startkedler du kan bruge til at komme i gang. Se kig på den enkleste AMP HTML kedelplade nedenfor:

          Hej Verden!

Du kan se, at kedepladen forbinder den almindelige HTML-side ved at bruge tag. Det > tag tilføjer AMP JS bibliotek.

 Det   
Du kan kun have en embedded stylesheet, og der er også mange ugyldige stilregler, for eksempel kan du ikke bruge !vigtig kvalifikator, den @importere regel og pseudo-klasser.
 Glem ikke at kontrollere stilarkets begrænsninger, før du begynder at skrive CSS til dine AMP-sider.
 Der er en anden ting, der er vigtigt at vide om AMP stil regler: dig kan ikke bruge et hvilket som helst layout du ønsker - da det er en af AMPs principper, der gør det muligt for browseren at beregne pladsen for hvert element på siden på forhånd.
 Se på de understøttede og ikke-understøttede layouter.
 AMP JS
 AMP-dokumenter kan omfatte hverken forfatterskrevet eller nogen tredjeparts JavaScripts, men det betyder ikke, at accelererede mobile sider ikke bruger javascript. AMPs JavaScript-bibliotek (AMP-runtime) er ansvarlig for at indlæse og gøre AMP-sider hurtigt tilgængelige håndhæve bedste præstationspraksis.
 AMP komponenter
 AMP komponenter er defineret af AMP runtime. De er de førnævnte AMP-specifikke HTML-tags du skal bruge i stedet for deres regelmæssige modstykke, f.eks  i stedet for  tag.
 Hver AMP-komponent indeholder en særlig ekstern ressource (et billede, en video, en indlejring osv.). Eksterne ressourcer er tilbøjelige til at bremse hjemmesider. Hovedformålet med denne løsning er at administrere indlæsningen af eksterne ressourcer på en rimelig måde ved at køre dem inde i sandkasser.
 AMP giver dig med 2 slags komponenter:
 Indbyggede komponenter: de er altid tilgængelige i hvert AMP-dokument, de er bygget lige ind i AMP runtime. I øjeblikket er der fem af dem:  for at vise annoncer
  Til billeder bruges den i stedet for  tag
  til sporing af pixels (bruges til at tælle sidevisninger)
  til direkte HTML5 video fil embeds, erstatter  tag
  for indlejrede elementer (kan bruges i stedet for  i visse tilfælde)
 
 Udvidede komponenter: Yderligere komponenter, du skal udtrykkeligt medtage dem ind i dit AMP-dokument. Der er mange nyttige, som f.eks  og , se den fulde liste. Mange af dem kan bruges til integrere indhold fra tredjepartstjenester, f.eks. fra Twitter eller Instagram.
 
Bemærk at alle eksternt indlæste ressourcer, f.eks  og  skal have en kendt  og  attribut for at aktivere browseren til beregne layoutet på forhånd.
 AMP CDN
 Det AMP CDN er i grunden et cache, kaldet Google AMP Cache. Den henter gyldige AMP-dokumenter, caches og laster dem. AMP CDN har også a indbygget valideringssystem.
 Det er værd teste dine AMP sider før du får dem til at gå online for at sikre dig det videregive validatoren. Du kan gøre det på mange forskellige måder.
  IMAGE: AMP Project
Det er godt at vide, at AMP CDN bruger HTTP / 2-protokollen for at opnå den bedst mulige ydeevne.
 AMP værktøjer
 Der er nogle gode værktøjer, der kan hjælpe dig med at implementere Accelerated Mobile Pages, lad os se på nogle af dem.
 Google giver webmastere en handy AMP status rapport værktøj der viser et antal vellykkede indekserede AMP-sider og AMP-relaterede fejl.
 Lullabot s AMP PHP Bibliotek giver dig mulighed for at konvertere dine HTML-sider til AMP HTML, og rapporterer også overholdelse af ethvert HTML-dokument med AMP-standarderne.
 Hvis du vil bruge AMP på dit WordPress-websted, skal du læse Yoasts vejledning om, hvordan du konfigurerer WordPress til AMP, og hvordan AMP fungerer med Yoast SEO plugin.
 Du kan også tjekke Automattic's AMP plugin der giver dig mulighed for at aktivere accelererede mobilsider på dit WordPress-websted.
  IMAGE: WordPress.org
Yderligere overvejelser
 Hvis du stadig ikke er overbevist om, så tag et kig på videoen om a hurtig hastighedstest under.
 
 Jonathan Abrams, grundlæggeren af Nuzzel gør endnu bedre krav, idet han hævder, at selv mobiloptimerede websteder som New York Times belastes betydeligt hurtigere - i stedet for at tage tre sekunder for at indlæse den gennemsnitlige side, indlæser en side i mindre end et halvt sekund når Googles accelererede mobilsider er aktiveret.
 Du kan også læse en interessant artikel i Verge om konkurrencen fra Google AMP og Facebook's Instant Articles. Hvis du stadig søger efter et svar på "hvad er fangsten?", Skal du tjekke Yoast's indlæg, som nævner frygt for, at AMP i grund og grund bringer os tilbage til en internettet tid før 2000, og spørger, om det virkelig er en åben standard.
 .