Průvodce pro začátečníky k akcelerovaným mobilním stránkám (AMP)

Zrychlené mobilní stránky je iniciativou společnosti Google, která má v úmyslu vyřešit největší problém mobilního webu - Rychlost. Skvělé uživatelské zkušenosti, které s velkou péčí navrhujeme, jsou na mobilu bolestně pomalé.

Pomalost není pouze problém UX, ale také snižuje míru konverze, a poškozuje přístupnost vyloučením uživatelů s pomalejším internetovým připojením. AMP je týmové úsilí zahájené s cílem umožnit vydavatelům vytvořit mobilní optimalizovaný obsah jednou a načíst okamžitě všude.

Od uvedení na trh iniciativa realizovala řada vydavatelů, jako je BBC, The Economist, Guardian News a Financial Times, takže nyní můžeme bezpečně předpokládat, že AMP je inovace, která stojí za zvážení pro každého, kdo chce zůstat konkurenceschopný na mobilu. web.

AMP v akci

Než se ponoříte do detailů, tady je to Demo na AMP, takže můžeš vidět to v akci. Demo je přístupné na tomto odkazu.

Chcete-li zobrazit AMP v akci, musíte udělat dvě věci:

Zobrazení ukázky na mobilním zařízení nebo na mobilním simulátoru, např. Simulátor mobilního zařízení Chrome DevTools.
Spusťte vyhledávací dotaz na vyhledávacím panelu. Vzhledem k tomu, že služba Google AMP v současné době pracuje hlavně se zpravodajskými servery, nejlepší volbou je novinka.

Na obrázku níže můžete vidět, co jsem dostal, když jsem použil hledaný výraz olympijské hry rio.

Jak vidíte, stránky AMP se zobrazují jako Google Rich Cards, A mobilní optimalizovaný obrazový karusel, že společnost Google vydala v květnu 2016.

Všimněte si, jak společnost Google odlišuje stránky AMP od jiných stránek optimalizovaných pro mobily pomocí 2 různých štítků: AMP a Mobile-friendly. Také stojí za to kliknout na některé výsledky a zjistit, jak webová stránka AMP vypadá a jak rychle běží na mobilu.

Technické zázemí

AMP je a webový standard na stávajících webových technologiích a zaměřuje se na statický obsah. Má to 3 různé části:

HTML kódu AMP: modifikované HTML pomocí (1) omezení některých pravidelných funkcí HTML / CSS a (2) zavedení nových vlastních tagů (komponent)
AMP JS: vynucuje osvědčené postupy s cílem snížit dobu načítání stránky
AMP CDN: cache s vestavěným ověřovacím systémem, který dále optimalizuje vaše stránky

Pokud se chcete dozvědět více o technickém zázemí stránek AMP, podívejte se na video níže, ve kterém Paul Bakaus společnosti Google dává úvodní rozhovor o AMP.

Pokud se chcete ponořit hlouběji, stojí za to pochopit, jaké optimalizační techniky AMP používá k urychlení výkonu v mobilu. Ve videu níže vysvětluje vedoucí týmu AMP Engineering Malte Ubl anatomie AMP podrobně.

AMP HTML

Zrychlené mobilní stránky jsou pravidelné HTML stránky to musí dodržovat soubor pravidel aby se stránky načítaly rychleji a renderovaly se spolehlivým výkonem.

Podívejme se na nejdůležitější věci, které potřebujete vědět. Můžete se také podívat na plnou specifikaci AMP HTML.

Rozhodněte se, zda chcete samostatnou stránku AMP

Pro stejnou stránku se statickým obsahem můžete mít 2 samostatné verze - jeden pro AMP a jeden pro non-AMP verzi. Můžete si také vybrat pouze jedna verze - stránku AMP a pouľijte ji všude. Vztahující se k podporu prohlížeče, Nároky stránky GITubu společnosti AMP:

Pokud se stále obáváte o podporu prohlížeče, podívejte se na post Paula Irishe na webu Stackoverflow.

V případě, že chcete mít dvě stránky (AMP a non-AMP), musíte ke každému z nich v následujících situacích informovat vyhledávače o existenci. \ t dva verze.

Přidejte následující kód sekce non-AMP:

Přidejte také následující řádek sekce AMP:

Pokud máte pouze jednu stránku AMP, stále potřebujete propojit ji následujícím způsobem:

Spuštění kotle

Projekt AMP nabízí jiné možnosti startovací kotelny můžete začít. Podívejte se na nejjednodušší varnou desku AMP HTML níže:

          Ahoj světe!

Můžete vidět, že kotelna spojuje běžnou HTML stránku pomocí štítek. > tag přidává Knihovna AMP JS.

    
Můžete mít jen jeden vložený stylesheet, a tam je také mnoho zakázaná pravidla stylu, například nemůžete použít !Důležité kvalifikátor, @import pravidla a pseudo-třídy.
 Než začnete psát CSS pro vaše stránky AMP, nezapomeňte zkontrolovat omezení stylů.
 Je tu ještě jedna věc, která je důležitá vědět o pravidlech stylu AMP: vy nelze použít žádné rozvržení, které chcete - jako jeden z principů AMP umožňující prohlížeč vypočítat prostor každého prvku na stránce dopředu.
 Podívejte se na podporovaná a nepodporovaná rozvržení.
 AMP JS
 Dokumenty AMP mohou zahrnovat žádné JavaScripty napsané autorem ani žádné třetí strany, to však neznamená, že Accelerated Mobile Pages nepoužívají JavaScript vůbec. Knihovna JavaScriptu AMP (runtime AMP) je zodpovědná za rychlé načítání a zobrazování stránek AMP prosazování osvědčených postupů.
 Komponenty AMP
 Komponenty AMP jsou definován během AMP. Jsou to výše uvedené Značky HTML specifické pro AMP musíte použít namísto jejich běžného protějšku, jako je např  místo  štítek.
 Každá komponenta AMP obsahuje a externích zdrojů (obrázek, video, vložení atd.). Externí zdroje jsou náchylné ke zpomalení webových stránek. Hlavním cílem tohoto řešení je řídit načítání externích zdrojů způsobem uvnitř pískoviště.
 AMP vám poskytuje 2 druhy komponent:
 Vestavěné komponenty: jsou vždy k dispozici v každém dokumentu AMP, jsou postaven přímo do runtime AMP. V současné době jich je pět:  pro zobrazování reklam
  pro obrázky, používá se místo  štítek
  pro sledovací pixely (používá se pro počítání zobrazení stránky)
  pro přímé HTML5 video soubory vloží, nahradí  štítek
  pro vložené prvky (lze použít místo  v některých případech)
 
 Rozšířené komponenty: Další komponenty, musíte výslovně zahrnout do dokumentu AMP. Existuje mnoho užitečných, jako například  a , viz úplný seznam. Mnohé z nich mohou být použity vkládat obsah ze služeb třetích stran, například z Twitteru nebo Instagramu.
 
Všimněte si, že všechny externě načtené zdroje, například  a  musí mít známé  a  atribut aby prohlížeč mohl povolit předem vypočítat rozložení.
 AMP CDN
  AMP CDN je v podstatě cache, nazvaná Mezipaměť Google AMP. To vyvolá platné dokumenty AMP, vyrovnávací paměti a načte je. AMP CDN má také vestavěný validační systém.
 Stojí za to testování vašich stránek AMP před tím, než je necháte jít online, aby se bezpečně projít validátorem. Můžete to udělat mnoha různými způsoby.
  IMAGE: Projekt AMP
Je dobré vědět, že AMP CDN používá protokol HTTP / 2, aby dosáhl co nejlepšího výkonu.
 Nástroje AMP
 Existuje několik skvělých nástrojů, které vám pomohou implementovat Accelerated Mobile Pages, pojďme se podívat na některé z nich.
 Google poskytuje webmasterům užitečný Nástroj pro hlášení stavu programu AMP který ukazuje počet úspěšně indexovaných stránek AMP a také chyby související s AMP.
 Lullabot je Knihovna AMP PHP umožňuje konvertovat stránky HTML na formát AMP HTML a také uvádí soulad jakéhokoli dokumentu HTML se standardy AMP.
 Pokud chcete použít AMP na stránkách WordPressu, přečtěte si Yoastův návod, jak nastavit WordPress pro AMP a jak AMP pracuje s Yoast SEO pluginem.
 Můžete se také podívat na Automattic AMP plugin , které vám umožní povolit Accelerated Mobile Pages na vašem webu WordPress.
  IMAGE: WordPress.org
Další úvahy
 Pokud ještě nejste přesvědčeni, podívejte se na video o rychlá zkouška rychlosti níže.
 
 Jonathan Abrams, zakladatel společnosti Nuzzel, tvrdí, že je ještě lepší, protože tvrdí, že i stránky optimalizované pro mobilní telefony, jako je například New York Times, se výrazně zrychlují - místo načtení průměrné stránky namísto tří sekund se načte stránka méně než půl sekundy je-li aktivována služba Accelerated Mobile Pages společnosti Google.
 Můžete si také přečíst zajímavý článek v soutěži o konkurenci článků Google AMP a Facebook Instant Articles. Pokud stále hledáte odpověď na otázku "co je to úlovek?", Podívejte se na příspěvek společnosti Yoast, který zmiňuje obavy, že AMP nás v podstatě přivedl zpět na internetový čas před rokem 2000 a zpochybňuje, zda se jedná o otevřený standard..
 .