Share
AMP, i et nøtteskall, er en metode for optimalisering av nettsteder for å være raskere og mer ytelsesfull.
AMP står for "Accelerated Mobile Pages", og mens det angitte fokuset er ytelse på mobile enheter, kan de hastighetsgevinster det gir, være like nyttig på ikke-mobile enheter. AMP inneholder en rekke optimaliseringsmetoder som tilbyr ulike typer fordeler, men kraften til å gjøre nettsteder raskere er uten tvil mest signifikant på bilde- og videotunge nettsteder.
Gitt raskere nettsteder gjør det mulig for mer engasjerte besøkende, potensielt høyere søkemotorrangeringer (og dermed større eksponering), det er definitivt verdt å tenke på AMP når du lager den neste nettbaserte presentasjonen av arbeidet ditt.
AMP er et åpen kildekode-prosjekt med Google bak det, og har nå vært i utvikling siden rundt september 2015, med AMP-versjoner av nettsteder som vises i Googles søkeresultater siden 24. februar i år. Vi har dekket AMP siden offentlig lansering tidligere i år, så det er en god ide å lese om "AMP Project: Vil det gjøre nettstedene dine raskere" hvis du vil ha litt bakgrunn før vi går videre.
I den artikkelen finner du mye informasjon om den samlede verdien av å jobbe med AMP, men vi skal se litt mer direkte på de to mest relevante aspektene for å jobbe med bilder og video: AMPs tilpassede
Fyr av ssuaphoto / PhotoDune. AMP kan hjelpe dine nettsteder til å utføre bedre søk.Når du oppretter en side i henhold til AMP-kravene, bruker du en serie egendefinerte elementer i stedet for noen av de standard HTML-elementene du kan være vant til.
Accentsconagua
![]()
Når du bruker disse egendefinerte elementene, vil du automatisk få tak i noen av fordelene ved AMP. La oss se på hva de er og hvorfor de er verdige til din vurdering.
Du vet allerede at AMP skal bidra til å gjøre nettstedene dine raskere, men hva gjør det spesielt
Som standard, hvis du har en side med flere bilder på den, må hvert enkelt bilde lastes inn i ett treff. Dette kan veldig enkelt trekke nettstedets samlede lastetid til ganske lang tid. Jo høyere innledende belastningstid, desto mer sannsynlig er det å få besøkende til å forlate nettstedet ditt, og det verre du kan gjøre i søkemotorer.
Men med en teknikk som heter "Lazy Loading", kan du i stedet bare ha de første bildene som er lastet sammen med resten som kommer senere. Nok innhold er lastet for den besøkende å begynne å se siden, og de gjenværende bildene er "latete" når den besøkende ruller ned. Dette kan gi betydelige forbedringer på lasthastigheten.
For eksempel, i testene jeg kjørte som en del av artikkelen min "AMP Project: Vil det gjøre nettstedene dine raskere", fant jeg ut at på en simulert mobilforbindelse tok det 26 sekunder å laste inn en side med fem 500 kb bilder. Med en AMP-versjon av samme sted ble lastetiden paret ned til 16 sekunder.
En av de største fordelene med å bruke AMP er det unngår problemet med å ha sidelayout "reflow" flere ganger.
Mens en side blir servert, har elementene i ulastede medier i utgangspunktet ingen høyde eller bredde. Derfor legger nettleseren ting ut som om nevnte medier ikke var en del av siden. Så når et bilde er ferdig, lastes oppsettet på nytt, med andre elementer flyttet og endret for å passe rundt bildet - noe som kalles reflowing. Hvis andre medier også er å laste siden, må de reflektere igjen og igjen for hvert element.
På mobile enheter spesielt kan besøkende møte frustrasjon hvis de allerede er engasjert og det de er fokusert på, hopper plutselig ut av synet på grunn av reflow. Dette kan veldig lett føre til redusert besøksoppmerksomhet eller nedleggelse av nettsteder, spesielt hvis det skjer flere ganger.
Med AMP oppstår reflow aldri. Dette skyldes at hvert stykke medie har en riktig størrelse plassholder lagt til i layouten fra ordre. Når media er lastet, erstatter det plassholderen, ingen reflow er nødvendig.
Lagring og båndbredde for store mengder media kan bli dyrt ganske raskt, og det er ikke alltid lett å velge en vert som kan levere raskt til seere over hele verden..
Når du bruker AMP, får du imidlertid tilgang til en CDN levert av Google gratis. Så lenge du oppretter en side som bestiller AMP-validering, vil Google automatisk cache HTML-dokumentene dine, JS-filer og bilder i AMP CDN.
Sannheten er det meste av det som AMP gjør for deg, kan også gjøres på andre måter via ulike skript og metoder. Men en av de store oppgangene til å bruke AMP er at du ikke trenger å bli godt kjent med de tekniske egenskapene som går inn i å sette opp ekvivalente optimaliseringer.
Ved å bruke AMP kan du unngå å manuelt velge, konfigurere og vedlikeholde flere skript og prosesser. I stedet bruker du bare AMP som foreskrevet og alt skjer i bakgrunnen uten at du trenger din hands-on involvering.
Før vi kommer inn i detaljene ved bruk av
Det er ikke nødvendig å gjøre hele opplæringen, så hvis du bare jobber gjennom til slutten av seksjonen "Dealing with Inline CSS", vil du være klar til å komme tilbake og hente igjen her.
På en AMP-side vil du bruke
(Du finner full dokumentasjon for
Når du legger til en src Tilordne å angi plasseringen av bildet ditt, og en alt attributt til å angi en tekstbackback.
Det er også en krav i AMP som du spesifiserer høyde og bredde hver gang. Dette skyldes at AMP bruker høyde- og breddeattributtene til å angi størrelsen på plassholdere før bildet lastes.
Hvis du er bekymret for hvordan du gjør bilder oppfører seg responsivt da du setter inn faste dimensjoner, ikke bekymre deg fordi AMP har funksjonalitet inkludert for å håndtere responsive justeringer, som vi vil berøre senere.
Et grunnleggende eksempel på
De srcset attributt som kan brukes til å angi alternative bilder som skal vises enten ved forskjellige bredder eller pikseldensiteter.
Den brukes på samme måte som i en vanlig
For eksempel, for å gi forskjellige bilder ved forskjellige pikseldensiteter, kan du bruke:
Eller for å laste forskjellige bilder avhengig av visningsbredde du kanskje bruker:
Merk, hvis du bruker verdier som inneholder w de src Attributtet blir ignorert i nettlesere som støtter srcset.
Hvis du trenger å gi kreditt for et bilde du kan bruke attribusjon, for eksempel:
Hvis du vil kontrollere utseendet til plassholderne som vises på siden din mens bilder lastes, kan du gjøre det med CSS rettet mot amp-img element, for eksempel:
amp-img bakgrunnsfarge: grå;
På en AMP-side vil du bruke
(Igjen kan du finne full dokumentasjon for
Som med src er nødvendig for å spesifisere plasseringen av videoen, og begge deler høyde og bredde er nødvendig, slik at AMP kan legge ut siden på riktig måte under lasting.
Et grunnleggende eksempel med nødvendige egenskaper kan være:
Hvis videoen ikke lastes eller vises av en eller annen grunn, er det mulig å sette opp en tilbakebetaling ved å nest a For eksempel: Videoen kunne ikke lastes inn. Kontroller at nettleseren din støtter HTML5-video. De Dette fungerer på samme måte som i en vanlig HTML5 Som et eksempel: Videoen kunne ikke lastes inn. Kontroller at nettleseren din støtter HTML5-video. Før avspilling på en video har startet, vises den første rammen av videoen som standard. Men hvis du vil tilpasse det som vises, kan du angi et bilde ved hjelp av attributtet For eksempel: I tillegg til det vi har diskutert ovenfor, er det noen ekstra attributter du kan bruke med Som standard spilles ikke videoer automatisk. For å overstyre dette inkluderer attributtet Kontroller på en video vises ikke med mindre du legger til attributtet Hvis du vil gjøre en videooppgave uendelig, inkluderer du attributtet For å slå av lyden på en video, legg til attributtet AMP er La oss ta en rask titt på hva hver enkelt gjør. (Finn komplett layout docs her: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) Din "gå til" layoutinnstilling bør være Evnen til å legge til dette attributtet er hvorfor du ikke trenger å bekymre deg for å sikre responsen til tross for at du er eksplisitt De Bruker en Med Hvis du har brukt CSS De Det dekker alle nødvendigheter for å jobbe med AMPs tilpassede AMP gir en konsolidert, handsfree måte å optimalisere media tunge nettsteder som gir en mye bedre mobil opplevelse, samtidig som du forbedrer desktopopplevelsen på samme tid. For mer informasjon se linkene under.falle tilbake.Legge til flere kilder
element så for detaljer se: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sourceAngi en "plakat"
plakat.Ekstra attributter
Auto spill
Auto spill:kontroller
kontroller:Loop
sløyfe:dempet
dempet:Egenskapen "layout"
oppsett satt til en av seks verdier, som hver gjør elementet oppfører seg annerledes:
mottakelig
mottakelig i de fleste tilfeller - bruk dette hvis du ikke er sikker på hva du skal velge. Det vil føre til at elementet utvides til den maksimale bredden av hovedelementet, samtidig som det opprettholder aspektforholdet.høyde og bredde verdier på elementer.fylle
fylle Innstillingen er nesten den samme som mottakelig, men elementet vil utvide til både maksimal bredde og høyden til foreldrene, uansett størrelsesforhold.fast
fast Oppsettet vil holde elementet i sin angitte høyde og bredde uten å endre størrelsen.med fast høyde
med fast høyde å sette et element vil strekke sin bredde slik at den passer til foreldreelementet, men beholder dens høyde det samme. flex-element
display: flex; til et elements forelder, kan du bruke flex-element layout verdi for å gjøre det fylle all ledig plass inni foreldreelementet. Hvis flere barn av samme foreldre bruker flex-element layout de vil dele plass like mye.nodisplay
nodisplay Innstillingen brukes til å skjule et element. Formålet er å tillate at innhold vises på brukerens handling, for eksempel i forbindelse med Wrapping Up
Relaterte linker:
