10 Vigtige accelererede mobile sider (AMP) komponenter, du bør vide

Accelererede mobile sider eller AMP er Googles initiativ til gøre mobilwebben hurtigere. For at nå dette mål begrænser AMP-standarderne, hvordan du kan bruge HTML, CSS og JavaScript, og styrer indlæsningen af ​​eksterne ressourcer, f.eks. billeder, videoer og annoncer via sin egen runtime.

Dette medfører at du kan ikke bruge enten brugerdefinerede (forfatter-skrevet eller tredjeparts) JavaScript eller andre ressourcerelaterede HTML-elementer som billeder og videoer i dine AMP-dokumenter.

For at overbygge kløften mellem brugernes behov og bedste præstationspraksis har AMP specifikke komponenter du kan brug i stedet for disse udelukket elementer.

AMP komponenter er specifikke HTML-tags. De opfører sig som almindelige HTML-tags: de har åbnings- og lukningskoder, attributter, og de fleste af dem kan styles med CSS. De kan let genkendes, som de start altid med amp- præfiks.

Der er to typer AMP komponenter: indbyggede og udvidet komponenter.

Indbyggede AMP komponenter

Indbygget ins er indbygget i AMPs JavaScript runtime, så du behøver ikke at adskille dem separat.

1. amp-img

erstatter tag i AMP HTML-dokumenter. Du skal tilføje src og alt attributter ligesom når du arbejder med det regelmæssige element.

har også to andre nødvendige attributter: du skal altid angiv venligst bredde og højde egenskaber i integer pixel værdier, da dette tillader AMP runtime til beregne layoutet på forhånd.

Hvis du vil gøre billedet lydhør, tilføj layout = "lydhør" attribut. Det layout attribut styrer layoutet i AMP-dokumenter, og det kan tilføjes til alle AMP-komponenter (læs mere om dette på AMP Layout System).

Du kan også bruge srcset attribut på tag til Angiv forskellige billeder til forskellige visningsporte og pixeldensiteter. Det fungerer på samme måde som med ikke-AMP billeder.

2. amp-video

kan bruges til Indlejre HTML-videoer direkte i AMP HTML-dokumenter. Det erstatter i AMP-filer. Det tag dovne belastninger videoer for at optimere ydeevnen.

Kilden til videoen skal serveres via HTTPS-protokollen. Du skal tilføje bredde og højde attributter, ligesom med komponent.

Det tag har mange valgfrie attributter, f.eks automatisk afspilning og plakat som du kan angive for at finjustere, hvordan din HTML5-video vises.

understøtter mp4, webm, ogg og alle de andre formater understøttet af HTML5

Hvis du vil, kan du også tilføj efterfølgende videoer for brugere med browsere, der ikke understøtter HTML5-videoer, ved hjælp af Falde tilbage attribut og HTML-tag.

  
 
Din browser understøtter ikke HTML5-videoer.
 
    

3. amp-annonce og amp-embed

giver dig med iframe sandkasser hvor du kan Vis dine annoncer. Du skal vise dine annoncer via HTTPS-protokollen.

Du kan ikke køre scripts, der leveres af dit annoncenetværk, selv. I stedet kører AMP runtime JavaScript for det givne netværk inde i sandkassen. Du skal kun angive hvilket netværk du bruger, og tilføj dine data.

Det komponent kræver dig at Tilføj målene i annoncen bruger bredde og højde egenskaber.

Du kan definere det annoncenetværk, du bruger med type attribut. Se listen over understøttede annoncenetværk.

Hvert annoncenetværk har sit eget data-* attributter skal du også tilføje. For at se, hvilken du har brug for, skal du klikke på dit annoncenetværk i ovenstående liste.

er aliaset af , dokumentationen siger ikke meget om det andet end det kan bruges i stedet for når det er semantisk mere præcis. Da Google lover at udvikle annoncerelaterede AMP-komponenter over tid, kan det ændre sig i fremtiden.

4. amp-pixel

Med , du kan Tilføj en sporingspixel til dine AMP HTML-dokumenter til tæller sidevisninger. Den har kun én attribut, det krævede src attribut, som du skal bruge Angiv den webadresse, der tilhører sporingspixel.

Det tag tillader standard URL-substitutioner, hvilket betyder at du kan generer en tilfældig webadresse værdi at spore hvert indtryk.

Se AMPs URL-udskiftningsvejledning, hvis du vil bruge denne komponent. Bemærk at du ikke kan style komponent.

Extended AMP Components

Som udvidede AMP komponenter er ikke en del af JavaScript runtime, du skal altid importere dem i afsnit på AMP-siden, som du vil bruge dem på.

Bemærk: Komponentversioner kan ændre sig i fremtiden, så glem ikke at tjek den aktuelle version i dokumentationen.

5. amp-audio

erstatter HTML5 tag, og gør det muligt at Embed direkte HTML5 lydfiler i AMP sider.

For at bruge det skal du angive src, bredde og højde attributter, og du kan også tilføje tre valgfrie attributter: automatisk afspilning, løkke og dæmpet.

Det kan også være en god idé at Tilføj tilføjede lydfiler for brugere med browsere, der ikke understøtter HTML5. Du kan gøre dette ved at bruge Falde tilbage attribut og tag, ligesom med ovennævnte komponent.

Det AMP komponent understøtter de samme lydformater som HTML5 tag.

  
 
Din browser understøtter ikke HTML5-lyd.
 
    

At bruge , inkludere følgende script i afsnit af dit AMP-dokument:

6. amp-iframe

viser en iframe i AMP dokumenter. er blevet lavet for at være mere sikker end almindelige HTML iframes. Derfor er de sandboxed som standard.

Der er nogle regler relateret til Du skal følge for at bestå validering.

Du skal angive bredde, højde, og sandkasse egenskaber. Det sandkasse Attribut er tom som standard, men du kan give det forskellige værdier for at modificere iframes opførsel, for eksempelsandkasse = "allow-scripts"lader iframe køre JavaScript. Du kan også bruge attributter for standard iframes.

Mens dimensionerne af er foruddefineret af bredde og højde attributter, der er en måde at ændre størrelsen på i løbetid. At bruge komponent, tilføj følgende script til din AMP-side:

7. amp-harmonika

Harmonikaer udgør et hyppigt brugergrænseflademønster i mobildesign, da de sparer plads, men viser stadig indholdet på en tilgængelig måde. gør det muligt at hurtigt tilføje harmonika til AMP sider.

Sektioner af accordeonet skal bruge

  
 
Afsnit 1
 
Indhold af afsnit 1
 
 
 
Afsnit 2
 
Indhold af afsnit 2
 
 
 
Afsnit 3
 
    
 
  

  Udvide