10 Tärkeitä nopeutettuja sivuja (AMP), jotka sinun pitäisi tietää

Nopeutetut mobiilisivut tai AMP on Googlen aloite tee mobiiliverkko nopeammin. Tämän tavoitteen saavuttamiseksi AMP-standardit rajoittavat HTML-, CSS- ja JavaScript-sovellusten käyttöä hallinnoi ulkoisten resurssien lataamista, esimerkiksi kuvia, videoita ja mainoksia kautta oman runtime.

Tämä edellyttää, että sinä ei voi käyttää joko muokattuja (kirjoittajan tai kolmannen osapuolen) JavaScript-tiedostoja tai resursseihin liittyviä HTML-elementtejä, kuten kuvia ja videoita AMP-asiakirjoissasi.

Käyttäjien tarpeiden ja parhaiden toimintatapojen välisen kuilun poistamiseksi AMP: llä on tiettyjä komponentteja sinä pystyt näiden syrjäytettyjen elementtien sijasta.

AMP-komponentit ovat tiettyjä HTML-tunnisteita. Ne toimivat samalla tavoin kuin tavalliset HTML-tunnisteet: niillä on avaus- ja sulkumerkit, attribuutit, ja useimmat niistä voidaan muotoilla CSS: llä. Ne voidaan helposti tunnistaa, kuten ne aloita aina amp- etuliite.

AMP-komponentteja on kahdenlaisia: sisäänrakennettu ja laajennettu komponentit.

Sisäänrakennettu AMP-komponentit

Takkasydämet on rakennettu AMP: n JavaScript-ajonaikaan, joten sinun ei tarvitse erikseen sisällyttää niitä.

1. amp-img

korvaa tag AMP HTML -asiakirjoissa. Sinun täytyy lisätä src ja alt määritteitä aivan kuten silloin, kun työskentelet säännöllisesti elementti.

Lisäksi sillä on kaksi muuta vaadittua ominaisuutta: sinun täytyy aina määritä leveys ja korkeus määritteet kokonaisluvun pikseliarvoina, koska tämä sallii AMP-käyntiajan laskea ulkoasu etukäteen.

Jos haluat tee kuva reagoivaksi, lisää layout = "reagoiva" ominaisuus. layout ominaisuus ohjaa asettelua AMP-asiakirjoissa, ja se voidaan lisätä mihin tahansa AMP-komponenttiin (lisätietoja tästä AMP-asettelujärjestelmästä).

Voit myös käyttää srcset ominaisuus tunniste määritä erilaisia ​​kuvia eri näkymisportteja ja pikselitiheyksiä. Se toimii samalla tavalla kuin muissa kuin AMP-kuvissa.

2. amp-video

voidaan käyttää upottaa HTML-videot suoraan AMP HTML -asiakirjoissa. Se korvaa AMP-tiedostoissa. tag laiska lataa videoita suorituskyvyn optimoimiseksi.

Videon lähde on toimitettava HTTPS-protokollan kautta. Sinun on lisättävä leveys ja korkeus määritteitä, aivan kuten komponentti.

tagissa on monia valinnaisia ​​ominaisuuksia, kuten automaattinen toisto ja juliste jonka voit määrittää hienosäätämään, miten HTML5-video näytetään.

tukee mp4, webm, ogg ja kaikki muut HTML5: n tukemat tiedostomuodot

Jos haluat, voit myös lisää varmuuskuvia käyttäjille, joilla on selaimia, jotka eivät tue HTML5-videoita, käyttämällä perääntyä määrite ja HTML-tunniste.

  
 
Selaimesi ei tue HTML5-videoita.
 
    

3. amp-mainos ja amp-upottaa

tarjoaa sinulle iframe-hiekkalaatikot jossa voit näyttää mainoksesi. Sinun täytyy palvella mainoksiasi HTTPS-protokollan kautta.

Et voi käyttää mainosverkoston toimittamia komentosarjoja itse. Sen sijaan AMP-runtime suorittaa kyseisen verkon JavaScript-sovelluksen hiekkalaatikon sisällä. Sinä sinun tarvitsee vain määrittää, mitä verkkoa käytät, ja lisää tietojasi.

komponentti vaatii sinua lisää mainoksen mitat käyttämällä leveys ja korkeus määritteet.

Voit määrittää mainosverkoston, jota käytät tyyppi ominaisuus. Katso tuettujen mainosverkkojen luettelo.

Jokaisella mainosverkolla on oma data- * määritteet, joita sinun on myös lisättävä. Jos haluat nähdä, mitä tarvitset, napsauta mainosverkostasi yllä olevassa luettelossa.

on alias , asiakirjoissa ei mainita siitä paljon muuta kuin sitä voidaan käyttää kun se on semanttisesti tarkempi. Koska Google lupaa kehittää mainokseen liittyviä AMP-komponentteja ajan myötä, tämä voi muuttua tulevaisuudessa.

4. amp pikselin

Kanssa , sinä pystyt lisää seurantapikseli AMP-HTML-asiakirjoihin laske sivunäkymiä. Siinä on vain yksi ominaisuus, vaadittu src määrite, jossa sinun täytyy määritä seurantapikselin URL-osoite.

tunniste sallii tavalliset URL-substituutiot, mikä tarkoittaa, että voit luoda satunnaisen URL-arvon seurata kutakin näyttökertaa.

Katso AMP: n URL-korvausopas, jos haluat käyttää tätä komponenttia. Huomaa, että et voi suunnitella komponentti.

Laajennettu AMP-komponentit

Laajennettuina AMP-komponentteina eivät kuulu JavaScript-ajonaikaan, sinä täytyy aina tuoda ne vuonna AMP-sivun osa, johon haluat käyttää niitä.

Huomaa: komponenttiversiot saattavat muuttua tulevaisuudessa, joten älä unohda tarkista nykyinen versio dokumentaatiossa.

5. amp-audio

korvaa HTML5-tunniste ja mahdollistaa sen suoraan upottaa HTML5-äänitiedostot AMP-sivuilla.

Jos haluat käyttää sitä, sinun on määritettävä src, leveys ja korkeus määritteitä, ja voit myös lisätä kolme valinnaisia ​​määritteitä: automaattinen toisto, silmukka ja vaimea.

Se voi myös olla hyvä idea lisää varmuuskopiotiedostoja käyttäjille, joilla on selaimia, jotka eivät tue HTML5: tä. Voit tehdä tämän käyttämällä perääntyä määrite ja tunniste, kuten edellä komponentti.

AMP-komponentti tukee samoja äänimuotoja kuin HTML5-tunniste.

  
 
Selaimesi ei tue HTML5-ääntä.
 
    

Käyttää , sisällytä seuraava komentosarja AMP-asiakirjan osio:

6. amp-iframe

näyttää iframen AMP-asiakirjoissa. on tehty turvallisemmaksi kuin tavalliset HTML iframes. Siksi he ovat sandboxed oletuksena.

On joitakin sääntöjä, jotka liittyvät sinun on noudatettava validointia.

Sinun on määritettävä leveys, korkeus, ja hiekkalaatikko attribuutteja. hiekkalaatikko attribuutti on tyhjä oletusarvoisesti, mutta voit antaa sille eri arvoja, jotta muokkaa iframen käyttäytymistä, esimerkiksihiekkalaatikko = "allow-skriptit"antaa iframe-sovellukselle JavaScriptin. Voit käyttää myös standardien iframes-attribuutteja.

Vaikka mitat ovat leveys ja korkeus ominaisuuksia, voit muuttaa sen kokoa ajonaikaisesti. Voit käyttää lisää seuraava komentosarja AMP-sivullesi:

7. amp-haitari

Harmonikat muodostavat usein UI-mallin liikkuvassa suunnittelussa, koska ne säästävät tilaa, mutta näyttävät sisällön edelleen helposti. mahdollistaa nopeasti lisää harmonioita AMP-sivuille.

Harmonion osissa on käytettävä

  
 
1 jakso
 
1 jakson sisältö
 
 
 
Osasto-2
 
2 §: n sisältö
 
 
 
3 jakso
 
    
 
  

  Laajentaa