10 komponentov dôležitých zrýchlených mobilných stránok (AMP), ktoré by ste mali vedieť

Zrýchlené mobilné stránky alebo AMP je iniciatíva spoločnosti Google mobilný web rýchlejšie. Na dosiahnutie tohto cieľa normy AMP obmedzujú, ako môžete používať HTML, CSS a JavaScript a spravuje načítanie externých zdrojov, ako sú obrázky, videá a reklamy cez vlastnú dobu prevádzky.

To znamená, že vy nemôže používať buď akýkoľvek vlastný JavaScript (písaný autormi alebo treťou stranou) alebo ľubovoľné prvky HTML súvisiace s prostriedkami, ako sú obrázky a videá vo vašich dokumentoch AMP.

Aby sa preklenula medzera medzi potrebami používateľov a najlepšou praxou v oblasti výkonnosti, spoločnosť AMP špecifických komponentov môžeš namiesto týchto vylúčených prvkov.

Komponenty AMP sú konkrétne značky HTML. Chová sa podobne ako bežné HTML značky: majú otváracie a zatváracie značky, atribúty a väčšina z nich môže byť štylizovaná pomocou CSS. Môžu byť ľahko rozpoznateľné, pretože vždy začínajte s amp- prefix.

Existujú dva typy komponentov AMP: vstavaný a predĺžený súčasti.

Zabudované komponenty AMP

vstavby sú zabudované do runtime programu AMP, takže nemusíte ich samostatne zahrnúť.

1. amp-img

nahrádza štítok v dokumentoch AMP HTML. Musíte pridať src a alt atribúty rovnako ako pri práci s bežným element.

má tiež dva ďalšie požadované atribúty: vždy musíte špecifikujte šírka a výška atribúty v celých hodnotách pixelov, pretože to dovoľuje dobu behu AMP vypočítať rozloženie vopred.

Ak chceš aby bol obraz citlivý, pridajte layout = "citlivé" atribútov. dispozície atribút ovládanie rozloženia v dokumentoch AMP a môže byť pridaná do všetkých komponentov AMP (viac informácií o tomto systéme AMP Layout System).

Môžete tiež použiť srcset atribút na značku na zadajte rôzne obrázky pre rôzne výhľady a hustoty pixelov. Funguje to isté ako pri obrázkoch iných ako AMP.

2. amp-video

možno použiť na priamo vložiť videá vo formáte HTML v dokumentoch AMP HTML. Nahrádza v súboroch AMP. štítok lenivé načítanie videí aby sa optimalizoval výkon.

Zdroj videa sa musí doručiť prostredníctvom protokolu HTTPS. Musíte pridať šírka a výška atribúty, rovnako ako komponentov.

značka má mnoho voliteľných atribútov, napríklad autoplay a plagát ktoré môžete špecifikovať na jemné vyladenie spôsobu zobrazenia videa vo formáte HTML5.

podporuje mp4, webm, ogg a všetky ostatné formáty podporované formátom HTML5

Ak chcete, môžete tiež pridať záložné videá pre používateľov s prehliadačmi, ktoré nepodporujú videá vo formáte HTML5 fallback atribút a Značku HTML.

  
 
Váš prehliadač nepodporuje videá vo formáte HTML5.
 
    

3. amp-ad a amp-embed

vám poskytuje iframe sandboxes v ktorom môžete zobrazovať svoje reklamy. Musíte zobrazovať svoje reklamy cez protokol HTTPS.

Nemôžete spustiť skripty dodávané vašou reklamnou sieťou sami. Namiesto toho bežiaci program AMP spúšťa JavaScript v danej sieti vo vnútri karantény. vy stačí zadať, ktorú sieť používate, a pridajte svoje údaje.

komponent vyžaduje, aby ste pridajte rozmery reklamy pomocou šírka a výška atribúty.

Môžete definovať reklamnú sieť, ktorú používate s typ atribútov. Pozrite si zoznam podporovaných reklamných sietí.

Každá reklamná sieť má svoju vlastnú data- * atribúty, ktoré musíte pridať. Ak chcete zistiť, ktorý z nich potrebujete, kliknite na reklamnú sieť v zozname uvedenom vyššie.

je alias , dokumentácia o ňom nehovorí inak, ako je možné použiť namiesto toho keď je to sémanticky presnejšie. Spoločnosť Google sľubuje, že v priebehu času vyvíja komponenty AMP súvisiace s reklamou, čo sa v budúcnosti môže zmeniť.

4. amp-pixel

s , môžeš pridajte sledovací pixel do vašich dokumentov AMP HTML do počet zobrazení stránky. Má len jeden atribút, požadované src atribút, v ktorom musíte zadajte adresu URL patriacu sledovaciemu pixelu.

značka umožňuje štandardné substitúcie URL, čo znamená, že môžete generovať hodnotu náhodnej adresy URL na sledovanie každého zobrazenia.

Ak chcete použiť túto komponentu, pozrite si Sprievodcu náhradou adries URL spoločnosti AMP. Všimnite si, že nemôžete štýlovať komponentov.

Rozšírené komponenty AMP

Ako rozšírené komponenty AMP nie sú súčasťou runtime kódu JavaScript, vy vždy je treba importovať v na stránke AMP, na ktorej ich chcete použiť.

Poznámka: Verzie komponentov sa môžu v budúcnosti zmeniť, takže nezabudnite skontrolujte aktuálnu verziu v dokumentácii.

5. amp-audio

nahrádza HTML5 a umožňuje priamo vložiť zvukové súbory HTML5 na stránkach AMP.

Ak ho chcete použiť, musíte zadať src, šírka a výška atribúty a môžete tiež pridať tri nepovinné atribúty: autoplay, slučka a stlmený.

Môže to byť tiež dobrý nápad pridať záložné zvukové súbory pre používateľov s prehliadačmi, ktoré nepodporujú formát HTML5. Môžete to urobiť pomocou fallback atribút a tag, rovnako ako s vyššie uvedeným komponentov.

Zložka AMP podporuje rovnaké zvukové formáty ako Značku HTML5.

  
 
Váš prehliadač nepodporuje zvuk HTML5.
 
    

Použit , zahrňte do skriptu nasledujúci skript časti dokumentu AMP:

6. amp-iframe

zobrazí iframe v dokumentoch AMP. bol urobený ako bezpečnejší ako bežné rámce HTML. Preto sú sandboxed štandardne.

Existujú určité pravidlá týkajúce sa musíte prejsť validáciou.

Musíte zadať šírka, výška, a pieskovisko atribúty. pieskovisko atribút je predvolene prázdny, ale môžete mu dať rôzne hodnoty upraviť správanie iframe, napríkladpieskovisko = "allow-scripts"umožňuje iframe spustiť JavaScript. Môžete tiež použiť atribúty štandardných iframe.

Zatiaľ čo rozmery sú preddefinované šírka a výška atribúty, existuje spôsob, ako zmeniť veľkosť počas behu. Použitie , pridajte nasledujúci skript do svojej stránky AMP:

7. amp-akordeón

harmoniky predstavujú častý vzor UI v mobilnom dizajne, pretože šetria miesto, ale stále zobrazujú obsah prístupným spôsobom. umožňuje to rýchlo pridať akordeóny na stránky AMP.

Sekcie akordeónu musia používať

  
 
Sekcia 1
 
Obsah oddielu 1
 
 
 
Oddiel 2
 
Obsah časti 2
 
 
 
Oddiel 3
 
    
 
  

  zväčšiť