Príručka pre začiatočníkov na zrýchlené mobilné stránky (AMP)

Zrýchlené mobilné stránky je iniciatívou spoločnosti Google, ktorá má v úmysle vyriešiť najväčší problém mobilného webu - rýchlosť. Úžasné používateľské skúsenosti, ktoré navrhujeme s veľkou starostlivosťou, sú pre mobilné zariadenia pomalé.

Pomalosť nie je len problém UX, ale aj znižuje mieru konverzie, a poškodzuje prístupnosť vylúčením používateľov s pomalším pripojením na internet. AMP je tímové úsilie spustené s cieľom umožniť vydavateľom vytvoriť mobilný optimalizovaný obsah raz a nechajte ho načítať okamžite všade.

Od uvedenia do prevádzky mnohí vydavatelia, ako napríklad BBC, The Economist, Guardian News a Financial Times implementovali iniciatívu, takže teraz môžeme bezpečne predpokladať, že AMP je inovácia, ktorá stojí za zváženie pre každého, kto chce zostať konkurencieschopný na mobilnom telefóne web.

AMP v akcii

Pred ponorom do podrobností, tu je AMP demo, Takže môžeš vidieť to v akcii. Demo je k dispozícii na tomto odkazu.

Ak chcete vidieť AMP v akcii, musíte urobiť dve veci:

Zobrazenie ukážky buď na mobilnom zariadení alebo na mobilnom simulátore, napr. Simulátor mobilných zariadení Chrome DevTools.
Na vyhľadávacom paneli spustite vyhľadávací dopyt. Keďže služba Google AMP momentálne pracuje hlavne so spravodajskými stránkami, najlepšou voľbou je novinka.

Na snímke nižšie môžete vidieť, čo som získal pri používaní hľadaného výrazu rio olympiády.

Ako vidíte, stránky AMP sa zobrazujú ako Karty bohaté na službu Google, mobilný optimalizovaný obrazový kolotoč, ktoré Google vydal v máji 2016.

Všimnite si, ako spoločnosť Google rozlišuje stránky AMP od iných stránok optimalizovaných pre mobilné zariadenia pomocou dvoch rôznych štítkov: AMP a mobilný telefón. Je tiež potrebné kliknúť na niektoré z výsledkov, aby ste zistili, ako stránka AMP vyzerá a ako rýchlo to funguje na mobilnom telefóne.

Technické pozadie

AMP je a webový štandard budovať na existujúcich webových technológiách a zamerať sa na statický obsah. Má 3 rôzne časti:

AMP HTML: modifikovaný HTML s (1) - obmedzenie určitých bežných funkcií HTML / CSS a - (2) zavedenie nových vlastných značiek (komponenty)
AMP JS: presadzuje osvedčené postupy na zníženie času načítania stránky
AMP CDN: cache s vstavaným overovacím systémom, ktorý ďalej optimalizuje vaše stránky

Ak sa chcete dozvedieť viac o technickom pozadí stránok AMP, pozrite si video nižšie, v ktorom Paul Bakaus od spoločnosti Google úvodná diskusia na AMP.

Ak sa chcete ponoriť hlbšie, stojí za to pochopiť, aké optimalizačné techniky používa AMP na urýchlenie výkonu v mobilných zariadeniach. Vo videu nižšie vysvetľuje Malte Ubl, vedúci spoločnosti AMP Engineering anatómia AMP podrobne.

AMP HTML

Zrýchlené mobilné stránky sú bežné HTML stránky ktoré potrebujú postupujte podľa súboru pravidiel aby sa stránky načítavali rýchlejšie a vykresľovali so spoľahlivým výkonom.

Pozrime sa na najdôležitejšie veci, ktoré potrebujete vedieť. Môžete sa tiež pozrieť na úplnú špecifikáciu AMP HTML.

Rozhodnite sa, či chcete samostatnú stránku AMP

Na tej istej statickej stránke môžete mať 2 samostatné verzie - jeden pre AMP a druhý pre AMP verziu. Môžete si tiež vybrať iba jedna verzia - stránky AMP a používajte ho všade. pokiaľ ide o podpora prehliadača, Stránka Github spoločnosti AMP tvrdí:

Ak sa stále obávate o podporu prehliadača, pozrite si príspevok spoločnosti Paul Irish od spoločnosti Google o stackoverflow.

V prípade, že chcete mať dve stránky (AMP a non-AMP), musíte odkaz na každú z nich aby informovať vyhľadávače o existencii dva verzia.

Pridajte nasledujúci kód do priečinka časti stránky, ktorá nie je súčasťou AMP:

Tiež pridajte nasledujúci riadok časti AMP stránky:

Ak máte len jednu stránku AMP, musíte to ešte urobiť prepojte ju sama nasledujúcim spôsobom:

Spúšťanie štítku

Projekt AMP ponúka rôzne štartovacie kotúče môžete začať používať. Pozrite sa na najjednoduchšiu krabicu AMP HTML nižšie:

          Dobrý deň svet!

Môžete vidieť, že boilerplate spája bežnú HTML stránku pomocou tag. > tag pridáva Knižnica AMP JS.

    
Môžete to mať len jeden vstavaný štýl a existuje aj veľa nepovolené pravidlá štýlu, napríklad nemôžete použiť !dôležitý kvalifikáciu, @import pravidlo a pseudotriedy.
 Nezabudnite skontrolovať obmedzenia šablón štýlov skôr, ako začnete písať CSS pre vaše stránky AMP.
 Je tu ešte jedna vec, o ktorej je dôležité vedieť o pravidlách štýlu AMP: vy nemôže použiť žiadne rozloženie, ktoré chcete - pretože je to jeden z princípov AMP, ktorý umožňuje prehliadaču vypočítajte priestor každého prvku na stránke Vopred.
 Pozrite sa na podporované a nepodporované rozloženia.
 AMP JS
 Dokumenty AMP môžu obsahovať ani žiadne písomne napísané autorom ani žiadne javy tretích strán, to však neznamená, že akcelerované mobilné stránky vôbec nepoužívajú JavaScript. Knižnica jazyka JavaScript (AMP runtime) je zodpovedná za rýchle načítanie a vykresľovanie stránok AMP presadzovanie najlepších postupov v oblasti výkonu.
 Komponenty AMP
 Komponenty AMP sú definované časom spracovania AMP. Sú to vyššie uvedené Tagy HTML špecifické pre AMP musíte použiť namiesto svojho pravidelného náprotivku, napríklad  namiesto  štítok.
 Každý komponent AMP obsahuje a konkrétny externý zdroj (obrázok, video, vloženie atď.). Externé zdroje sú náchylné na spomalenie webových stránok. Hlavným cieľom tohto riešenia je riadiť načítanie externých zdrojov rozumným spôsobom ich spustením vo vnútri pieskoviek.
 AMP vám poskytuje 2 druhy komponentov:
 Vstavané súčasti: sú vždy k dispozícii v každom dokumente AMP, sú postavený priamo do prevádzky AMP. V súčasnosti je ich päť:  na zobrazovanie reklám
  pre obrázky sa používa miesto  štítok
  pre sledovacie pixely (používané na počítanie zobrazení stránok)
  pre priame HTML5 vloženie video súborov, nahrádza  štítok
  pre vložené prvky (možno použiť namiesto  v niektorých prípadoch)
 
 Rozšírené komponenty: Ďalšie komponenty, musíte výslovne ich zahrnúť do dokumentu AMP. Existuje mnoho užitočných, ako napríklad  a , pozri celý zoznam. Mnohé z nich si môžu zvyknúť vložiť obsah zo služieb tretích strán, napríklad z Twitteru alebo Instagramu.
 
Všimnite si, že všetky externe načítané zdroje, ako napr  a  musí mať známy  a  atribút aby sa umožnil prehliadač vypočítať rozloženie vopred.
 AMP CDN
  AMP CDN je v podstate cache, tzv Cache Google AMP. Preberá platné dokumenty AMP, ukladá do vyrovnávacej pamäte a načíta ich. AMP CDN má tiež a zabudovaný overovací systém.
 Stojí to za to testovanie stránok AMP predtým, než ich necháme ísť online, aby mohli bezpečne prejsť validátorom. Môžete to robiť mnohými rôznymi spôsobmi.
  IMAGE: Projekt AMP
Je dobré vedieť, že AMP CDN používa protokol HTTP / 2 na dosiahnutie čo najlepšieho výkonu.
 Nástroje AMP
 Existujú niektoré skvelé nástroje, ktoré vám môžu pomôcť implementovať zrýchlené mobilné stránky, pozrite sa na niektoré z nich.
 Google poskytuje správcom webových stránok praktický Nástroj na správu stavu AMP ktorý zobrazuje počet úspešne indexovaných stránok AMP a tiež chyby súvisiace s AMP.
 Lullabot je AMP PHP knižnica umožňuje konvertovať vaše stránky HTML do formátu AMP HTML a tiež oznamuje súlad akéhokoľvek dokumentu HTML s normami AMP.
 Ak chcete používať AMP na vašom webe WordPress, prečítajte si návod Yoast o tom, ako nastaviť WordPress pre AMP a ako funguje AMP s pluginom Yoast SEO.
 Môžete sa tiež pozrieť na Automattic's AMP plugin ktorý vám umožňuje povoliť zrýchlené mobilné stránky na vašom webe WordPress.
  IMAGE: WordPress.org
Ďalšie úvahy
 Ak stále nie ste presvedčený, pozrite si video o a test rýchlej rýchlosti nižšie.
 
 Jonathan Abrams, zakladateľ spoločnosti Nuzzel, robí ešte lepšie tvrdenia, pretože tvrdí, že dokonca aj stránky optimalizované pre mobilné zariadenia, ako napríklad New York Times, sa výrazne rýchlejšie - namiesto toho, aby sa nahradila priemerná stránka o tri sekundy, načíta sa stránka menej ako pol sekundy keď je povolená mobilná stránka Google pre zrýchlené mobilné zariadenia.
 Môžete si tiež prečítať zaujímavý článok v Verge o súťaži Google AMP a Facebook Instant článkov. Ak stále hľadáte odpoveď na otázku "Čo je to úlovok?", Pozrite sa na príspevok Yoast, ktorý spomína, že AMP v podstate prináša späť na internetový čas pred rokom 2000 a kladie otázku, či je to naozaj otvorený štandard.
 .