Hjemmeside » Mobil » 10 viktige akselererte mobile sider (AMP) -komponenter du bør vite
10 viktige akselererte mobile sider (AMP) -komponenter du bør vite
Akselerert mobil sider eller AMP er Googles initiativ til gjør mobilnett raskere. For å oppnå dette målet, begrenser AMP-standardene hvordan du kan bruke HTML, CSS og JavaScript, og styrer lasting av eksterne ressurser, for eksempel bilder, videoer og annonser via egen kjøretid.
Dette innebærer at du kan ikke bruke enten noen tilpassede (forfatter-skrevet eller tredjepart) JavaScript eller noen ressursrelaterte HTML-elementer som bilder og videoer i dine AMP-dokumenter.
For å overvinne gapet mellom brukernes behov og beste ytelsespraksis, har AMP spesifikke komponenter du kan bruk i stedet for disse ekskluderte elementene.
AMP-komponenter er spesifikke HTML-koder. De oppfører seg som vanlig HTML-koder: de har åpnings- og lukkekoder, attributter, og de fleste av dem kan styles med CSS. De kan lett gjenkjennes, som de begynn alltid med amp- prefiks.
Det finnes to typer AMP-komponenter: innebygd og forlenget komponenter.
Innebygd AMP-komponenter
Innebygde moduler er bygget inn i AMPs JavaScript runtime, så du trenger ikke å inkludere dem separat.
1. amp-img
erstatter stikkord i AMP HTML-dokumenter. Du må legge til src og alt attributter akkurat som når du jobber med det vanlige element.
har også to andre nødvendige egenskaper: du trenger alltid å spesifiser bredde og høyde egenskaper i heltall pikselverdier, da dette tillater AMP-kjøretiden til beregne oppsettet på forhånd.
Hvis du vil gjør bildet responsivt, Legg til Oppsettet = "mottakelig" Egenskap. De oppsett Egenskap kontrollerer oppsettet i AMP-dokumenter, og det kan legges til noen AMP-komponenter (lære mer om dette på AMP Layout System).
Du kan også bruke srcset attributt på tag til angi forskjellige bilder for forskjellige visningsporte og pikseldensiteter. Det fungerer på samme måte som med ikke-AMP-bilder.
2. amp-video
kan brukes til legg inn HTML-videoer direkte i AMP HTML-dokumenter. Det erstatter i AMP-filer. De stikkord lat laster videoer for å optimalisere ytelsen.
Kilden til videoen må serveres via HTTPS-protokollen. Du må legge til bredde og høyde attributter, akkurat som med komponent.
De taggen har mange valgfrie attributter, for eksempel Auto spill og plakat som du kan spesifisere for å finjustere hvordan HTML5-videoen din vises.
støtter mp4, webm, ogg, og alle andre formater som støttes av HTML5
Hvis du vil, kan du også Legg til nedlastingsvideoer For brukere med nettlesere som ikke støtter HTML5-videoer, bruker du falle tilbake attributt og HTML-taggen.
Nettleseren din støtter ikke HTML5-videoer.
3. amp-annonse og amp-embed
gir deg med iframe sandkasser der du kan vis annonsene dine. Du må vise annonsene dine via HTTPS-protokollen.
Du kan ikke kjøre skript som leveres av annonsenettet ditt selv. I stedet kjører AMP-kjøretiden JavaScript for det oppgitte nettverket inne i sandkassen. Du trenger bare å spesifisere hvilket nettverk du bruker, og legg til dine data.
De komponenten krever at du legg til dimensjonene til annonsen bruker bredde og høyde egenskaper.
Du kan definere annonsenettverket du bruker med type Egenskap. Se listen over støttede annonsenettverk.
Hvert annonsenettverk har sitt eget data-* attributter du må også legge til. For å se hvilken du trenger, klikker du på annonsenettverket i listen ovenfor.
er aliaset av , dokumentasjonen sier ikke mye om det annet enn det kan brukes i stedet for når det er semantisk mer nøyaktig. Som Google lover å utvikle annonserelaterte AMP-komponenter over tid, kan dette endres i fremtiden.
4. amp-pixel
Med , du kan Legg til en sporingspiksel til dine AMP HTML-dokumenter til telle sidevisninger. Den har bare ett attributt, det nødvendige src attributt, der du trenger spesifiser nettadressen som tilhører sporingspikselet.
De tag tillater det standard URL-substitusjoner, noe som betyr at du kan generere en tilfeldig URL-verdi å spore hvert inntrykk.
Se AMPs URL Substitutions Guide hvis du vil bruke denne komponenten. Legg merke til at du ikke kan stile komponent.
Utvidede AMP-komponenter
Som utvidede AMP komponenter er ikke en del av JavaScript-kjøretiden, du må alltid importere dem i delen av AMP-siden du vil bruke dem på.
Merk: komponentversjoner kan endres i fremtiden, så ikke glem å sjekk den nåværende versjonen i dokumentasjonen.
5. amp-lyd
erstatter HTML5-tag, og gjør det mulig å direkte legge inn HTML5 lydfiler på AMP sider.
For å bruke det, må du angi src, bredde og høyde attributter, og du kan også legge til tre valgfrie attributter: Auto spill, sløyfe og dempet.
Det kan også være en god ide å legg til nedlasting lydfiler for brukere med nettlesere som ikke støtter HTML5. Du kan gjøre dette ved å bruke falle tilbake attributt og tag, akkurat som med det nevnte komponent.
De AMP-komponent støtter de samme lydformatene som HTML5-taggen.
Nettleseren din støtter ikke HTML5-lyd.
Å bruke , inkludere følgende skript i del av ditt AMP-dokument:
6. amp-iframe
viser en iframe i AMP-dokumenter. har blitt gjort for å være sikrere enn vanlige HTML iframes. Derfor er de sandboxed som standard.
Det er noen regler knyttet til Du må følge for å bestå validering.
Du må spesifisere bredde, høyde, og sandkasse egenskaper. De sandkasse Attributtet er tomt som standard, men du kan gi det forskjellige verdier for å endre oppførselen til iframe, for eksempelsandkasse = "Tillat-scripts"Lar iframe kjøre JavaScript. Du kan også bruke attributter av standard iframes.
Mens dimensjonene til er forhåndsdefinert av bredde og høyde attributter, det er en måte å endre størrelsen på i runtime. For å bruke komponent, legg til følgende skript på AMP-siden din:
7. amp-trekkspill
trekkspill utgjør et hyppig brukergrensesnitt i mobildesign, da de sparer plass, men fremdeles viser innholdet på en tilgjengelig måte. gjør det mulig å raskt legg til trekkspill til AMP sider.
Seksjoner av trekkspillet må bruke HTML5-tag, og må være direkte barn av stikkord.
Hver seksjon må ha to direkte barn:
en for overskriften
en for innholdet (innholdet kan også være et bilde)
Bruke utvidet Tilordne på hvilken som helst del du vil utvide som standard.
Seksjon 1
Innhold av Seksjon 1
Seksjon 2
Innhold av § 2
Seksjon 3
Bilde for Seksjon 3
For å bruke komponent i ditt AMP-dokument, inkluderer følgende skript:
8. amp-lysbilde
legger til en lightbox til forskjellige elementer (i de fleste tilfeller bilder) på Accelerated Mobile Pages.
Når brukeren samhandler med elementet, for eksempel kraner på den, lysboksen utvider og fyller hele visningsporten. Du trenger å legg til en knapp eller en annen kontroll som brukeren kan trykke på.
Noter det amp-lysbilde kan bare brukes med nodisplay oppsett.
For å bruke komponent, må du importere den med følgende kode:
9. amp-karusell
Karuseller brukes ofte i mobil design, slik de tillater det vise mange lignende elementer (oftest bilder) langs den horisontale akse. AMP-resultatene presenteres også i et karusellformat i Google Søk.
De komponent gjør det mulig å legge karuseller til nettstedet ditt. De direkte barn av komponent vil bli betraktet som karusellens gjenstander. Du må definere karusellens dimensjoner med bredde og høyde egenskaper.
Du kan bruke tilleggsutstyret type attributt til å bestemme hvordan å vise karusellelementene. Hvis type attributtet tar "Karusell" verdi, vil elementene bli vist som en kontinuerlig strimmel (dette er standard), mens "lysbilder" verdien vil vise elementene i lysbildes format.
De tag har også andre valgfrie attributter som kan hjelpe deg med finjustering av resultatet.
I eksemplet nedenfor merker du at både karusellen og alle dens gjenstander bruk det samme bredde og høyde verdier.
De komponent krever tillegg av følgende skript:
10. amp-analytics
kan brukes til samle analysedata på AMP sider. For tiden, støtter fire typer sporing hendelser, men dette kan endres i fremtiden:
Sidevisning
Anker klikk
Timer
rulle
Å bruke , du trenger å legg til et JSON-konfigurasjonsobjekt inne i a
Legg til følgende skript til delen av AMP HTML-siden din for å importere komponent:
Endelige ord
I dette innlegget hadde vi en titt på alle innebygde AMP-komponenter, og noen av de utvidede. Som akselerert mobilsider er fortsatt nye, kan mange ting endres i fremtiden, så det er verdt å holde øye med dokumentasjonen enten på Github eller på den offisielle AMP-siden.
Siden disse AMP-komponentene er åpen kildekode, kan du også bidra til utviklingen, selv lage din egen komponent. Hvis du vil se hvordan en komplett AMP-side ligner på forskjellige komponenter, kan du sjekke ut disse få eksemplene på Github.
