10 Tähtis kiirendatud mobiililehekülge (AMP), mida peaksite teadma

Kiirendatud mobiililehed või AMP on Google'i algatus muuta mobiilivõrk kiiremaks. Selle eesmärgi saavutamiseks piiravad AMP standardid, kuidas kasutada HTML-i, CSS-i ja JavaScripti haldab väliste ressursside laadimist, näiteks pildid, videod ja reklaamid oma tööaja jooksul.

See tähendab, et sina ei saa kasutada kas teie kohandatud dokumendid (autori või kolmanda osapoole) JavaScripti või ressursiga seotud HTML-elemendid, näiteks pildid ja videod.

Et ületada lõhet kasutajate vajaduste ja parimate tulemustavade vahel, on AMP-l konkreetseid komponente sa saad nende väljaarvatud elementide asemel.

AMP komponendid on konkreetsed HTML-märgendid. Nad käituvad sarnaselt tavapärastele HTML-koodidele: neil on avamis- ja sulgemismärgid, atribuudid ning enamik neist saab kujundada CSS-iga. Neid saab hõlpsasti ära tunda Alusta alati amp- eesliide.

AMP komponente on kahte tüüpi: sisseehitatud ja laiendatud Komponendid.

Sisseehitatud AMP komponendid

Sisseehitatud on ehitatud AMP JavaScripti runtime'i, nii et sa ei pea neid eraldi lisama.

1. amp-img

asendab silt AMP HTML-dokumentides. Peate lisama src ja alt atribuudid nagu tavalise töötamisega element.

on ka kaks muud nõutavat atribuuti: sa pead alati olema täpsustage laius ja kõrgus atribuudid täisarvuliste pikslite väärtustes, kuna see võimaldab AMP-i käitusaega arvutada paigutus eelnevalt.

Kui sa tahad muutke pilt tundlikuks, lisa layout = "reageeriv" atribuut. The paigutus atribuut kontrollib paigutust AMP-dokumentides ja seda saab lisada mis tahes AMP-komponentidesse (lisateavet selle kohta saate AMP-i paigutussüsteemis).

Võite kasutada ka srcset atribuut on sildile määrake erinevad pildid erinevate vaatepordide ja pikslite tiheduse jaoks. See toimib samamoodi nagu mitte-AMP kujutiste puhul.

2. amp-video

saab kasutada otse HTML-videod AMP HTML-dokumentides. See asendab AMP-failides. The silt laisk laadib videoid tulemuslikkuse optimeerimiseks.

Video allikas tuleb saata HTTPS-protokolli kaudu. Te peate lisama laius ja kõrgus atribuudid, nagu ka komponent.

The sildil on palju valikulisi atribuute, näiteks automaatne esitamine ja plakat mille abil saate täpsustada, kuidas HTML5-videot näidatakse.

toetab mp4, webm, ogg ja kõiki teisi HTML5 poolt toetatud vorminguid

Kui soovite, võite ka lisage varu-videoid kasutajatele, kellel on brauserid, mis ei toeta HTML5 videoid, kasutades varu atribuut ja HTML-silt.

  
 
Teie brauser ei toeta HTML5 videoid.
 
    

3. amp-ad ja amp-embed

pakub teile iframe liivakastid kus saate kuvage oma reklaame. Peate oma reklaame teenima HTTPS-protokolli kaudu.

Sa ei saa käivitada oma reklaamivõrgu pakutavaid skripte. Selle asemel täidab AMP runtime antud võrgu JavaScript liivakastis. Sina vaja ainult täpsustada, millist võrku te kasutate, ja lisage oma andmed.

The komponent nõuab lisage reklaami mõõtmed kasutades laius ja kõrgus atribuudid.

Saate määrata reklaamivõrgu, mida kasutate tüüp atribuut. Vaadake toetatud reklaamivõrkude loendit.

Igal reklaamivõrgul on oma andmete- * atribuudid, mida peate lisama. Et näha, milline on vajalik, klõpsake ülaloleval loendil oma reklaamivõrku.

on alias , dokumentatsioon ei räägi sellest palju, välja arvatud selle asemel, et seda kasutada kui see on semantiliselt täpsem. Kuna Google lubab aja jooksul reklaamiga seotud AMP komponentide arendamist, võib see tulevikus muutuda.

4. amp-piksel

Koos , sa saad lisage jälgimispiksl oma AMP HTML-dokumentidele loe lehekülgede vaateid. Sellel on ainult üks atribuut, nõutav src atribuut, milles pead määrake jälgimispikslile kuuluv URL.

The silt lubab standardsed URL-i asendused, mis tähendab, et saate genereerida juhusliku URL-i väärtuse iga mulje jälgimiseks.

Kui soovite seda komponenti kasutada, vaadake AMP URL-i asendusjuhendit. Pange tähele, et te ei saa kujundada komponent.

Laiendatud AMP komponendid

Laiendatud AMP komponentidena ei kuulu JavaScripti käitusaega, sina alati vaja neid importida Euroopa AMP-lehekülje osa, kus soovite neid kasutada.

Märkus: komponendi versioonid võivad tulevikus muutuda, seega ärge unustage kontrollige praegust versiooni dokumentatsioonis.

5. amp-audio

asendab HTML5-märgend ja võimaldab seda otse HTML5-heli failid AMP lehekülgedel.

Selle kasutamiseks peate täpsustama src, laius ja kõrgus atribuudid ja saate lisada ka kolm valikulist atribuuti: automaatne esitamine, silmus ja vaigistatud.

See võib olla ka hea mõte lisada heli-faile kasutajatele, kes kasutavad HTML5-d mitte toetavaid brausereid. Seda saate teha kasutades varu atribuut ja nagu ülalnimetatud komponent.

The AMP komponent toetab samu helivorminguid nagu HTML5-sild.

  
 
Teie brauser ei toeta HTML5 heli.
 
    

Kasutada , lisada järgmine skript teie AMP dokumendi osa:

6. amp-iframe

kuvab iframe'i AMP dokumentides. on tehtud turvalisemaks kui tavalised HTML iframes. Seepärast nad on vaikimisi liivakast.

Mõned eeskirjad on seotud peate valideerimise läbimiseks järgima.

Peate määrama laius, kõrgus, ja liivakast atribuudid. The liivakast atribuut on vaikimisi tühi, kuid selleks, et iframe käitumise muutmine, näitekssandbox = "lubage skriptid"võimaldab iframe käivitada JavaScripti. Võite kasutada ka standardse iframe'i atribuute.

Kuigi mõõtmed on eelnevalt määratud laius ja kõrgus atribuudid, on olemas võimalus selle kestust muuta. Kasutamiseks komponent, lisage oma AMP lehele järgmine skript:

7. amp-akordion

Akordionid mobiilse disaini puhul on tegemist sagedase kasutajaliidese kujutisega, kuna see säästab ruumi, kuid kuvab sisu siiski kättesaadaval viisil. võimaldab lisage kiiresti akordionid AMP lehekülgedele.

Akordioni sektsioonid peavad kasutama

  
 
1. jagu
 
1. jao sisu
 
 
 
2. jagu
 
2. jao sisu
 
 
 
3. jagu
 
    
 
  

  Laienda