Hur man använder amp-img och amp-video för att påskynda din webbplats

AMP, i ett nötskal, är en metod för att optimera webbplatser för att bli snabbare och mer prestanda.

AMP står för "Accelerated Mobile Pages", och samtidigt som det angivna fokuset är prestanda på mobila enheter, kan de snabbare vinsterna som är lika bra på icke-mobila enheter. AMP innehåller en rad optimeringsmetoder som erbjuder olika typer av förmåner, men kraften att skapa webbplatser snabbare är förmodligen mest signifikant på bild- och videosvåra webbplatser.

Med tanke på snabbare webbplatser gör det möjligt för mer engagerade besökare, potentiellt högre rankningar för sökmotorer (och därmed större exponering), är det definitivt värt att tänka på AMP när du skapar nästa webbaserade showcase av ditt arbete.

AMP är ett open source-projekt med Google bakom det och har nu utvecklats sedan omkring september 2015, med AMP-versioner av webbplatser som visas i Googles sökresultat sedan 24 februari i år. Vi har täckt AMP sedan den offentliga lanseringen tidigare i år, så det är en bra idé att läsa av "AMP Project: Kommer det att göra dina webbplatser snabbare" om du vill ha lite bakgrund innan vi går vidare.

I den artikeln hittar du mycket information om det totala värdet av att arbeta med AMP, men vi kommer att se lite mer direkt på de två mest relevanta aspekterna för att arbeta med bilder och video: AMPs anpassade  och element.

Vad är  och ?

När du skapar en sida enligt AMP-krav använder du en serie anpassade element istället för några av de standard HTML-elementen du kanske brukar använda.

• I stället för att använda en vanlig element du ska använda
• I stället för att använda en  element du ska använda

När du använder dessa anpassade element kommer du automatiskt att använda vissa av de fördelar som är förknippade med AMP. Låt oss titta på vad de är och varför de är värdiga för din övervägande.

Varför använda och ?

Du vet redan att AMP ska hjälpa till att göra dina webbplatser snabbare, men vad gör det specifikt och element har att erbjuda? De fördelar som är mest relevanta är som följer.

Lazy Loading

Som standard, om du har en sida med flera bilder på den, måste varje bild laddas i en träff. Detta kan mycket enkelt dra din webbplats totala belastningstid ut till ganska lång tid. Ju högre din initiala belastningstid, desto mer sannolikt är det att besökarna överger din webbplats, och ju värre du kan göra i sökmotorer.

Men med en teknik som kallas "Lazy Loading" kan du istället bara ha de första bilderna som laddades med resten som kommer senare. Tillräckligt innehåll laddas för att besökaren börjar visa sidan och de återstående bilderna är "lata laddade" när besökaren rullar ner. Detta kan göra betydande förbättringar av din lasthastighet.

Till exempel, i testen som jag sprang som en del av min artikel "AMP Project: Kommer det att göra dina webbplatser snabbare" fann jag att på en simulerad mobilanslutning tog det 26 sekunder att ladda en sida med fem 500kb bilder. Med en AMP-version av samma sajt sänktes laddningstiden till 16 sekunder.

Ingen Layout Reflow

En av de stora fördelarna med att använda AMP är att undvika problemet med att sidlayouten "reflow" flera gånger. 

Medan en sida serveras, har elementet i lossat media ursprungligen ingen höjd eller bredd. Därför lägger webbläsaren ut saker som om nämnda media inte var en del av sidan. Sedan när en bild slutar laddar layouten måste räknas om, med andra element flyttas och ändras för att passa runt bilden - något som kallas reflowing. Om andra media också ska laddas måste sidan återflöde om och om igen för varje objekt.

På mobila enheter i synnerhet kan besökare möta frustration om de redan är förlovade och vad de fokuserar på plötsligt hoppar ur sikte på grund av återflöde. Detta kan mycket enkelt leda till minskad uppmärksamhet på besökaren eller nedläggning av webbplatsen, särskilt om det händer flera gånger.

Med AMP uppstår aldrig återflöde. Detta beror på att varje bit av media har en korrekt storlek placerad läggs till i layouten från ordsteg. När media har laddats ersätter det platshållaren, ingen återflöde behövs.

Gratis CDN-åtkomst

Lagring och bandbredd för stora mängder media kan bli dyrt ganska snabbt och det är inte alltid lätt att välja en värd som kan leverera snabbt till tittare över hela världen..

När du använder AMP får du dock tillgång till en CDN som tillhandahålls av Google kostnadsfritt. Så länge du skapar en sida som passerar AMP-valideringen, cachar Google automatiskt dina HTML-dokument, JS-filer och bilder i AMP CDN.

Relativt Hands Free

Sanningen är det mesta som AMP gör för dig kan också göras på andra sätt via olika skript och metoder. Men en av de enorma uppgångarna att använda AMP är att du inte behöver lära känna de tekniska egenskaperna som går in på att skapa motsvarande optimeringar.

Genom att använda AMP kan du undvika att manuellt välja, konfigurera och behålla flera skript och processer. Istället använder du bara AMP som föreskrivet och allt händer i bakgrunden utan att behöva ditt praktiska engagemang.

Komma igång med AMP

Innan vi kommer in i specifika användningsområden och du behöver veta hur man skapar en AMP-sida med den nödvändiga boilerplate-koden. Vi omfattade hur man gör det i en annan handledning så att få bollen att rulla du kan gå över till "Hur man gör en grundläggande AMP-sida från början".

Det finns inget behov av att göra hela handledningen, så om du bara arbetar igenom till slutet av avsnittet "Handla med Inline CSS" kommer du att vara redo att komma tillbaka och hämta igen här.

Hur man använder

På en AMP-sida kommer du att använda att ladda varje enskild bild. Låt oss gå igenom hur man använder sin kod korrekt och vad varje av dess associerade attribut gör.

(Du hittar fullständig dokumentation för på AMP-projektets referenswebbplats).

Viktiga inkluderingar

När du lägger till en  element finns det några viktiga attribut som du måste inkludera. Som med en vanlig element måste du använda en src attribut att ange platsen för din bild och en alt attribut för att ange en textåtergång.

Det är också en krav i AMP som du anger höjd och bredd varje gång. Detta beror på att AMP använder höjd- och breddattributen för att ställa in storleken på platshållare innan bilden laddas.

Om du är oroad över hur man gör bilder på ett uppriktigt sätt med tanke på att du ställer in fasta dimensioner, oroa dig inte för att AMP har funktionalitet som ingår för att hantera responsiva anpassningar som vi kommer att kontakta senare.

Ett grundläggande exempel på element med dessa väsentliga ingrepp är:

Använda srcset

De elementet ger a srcset attribut som kan användas för att ange alternativa bilder som ska visas antingen vid olika bredder eller pixeldensiteter. 

Den används på samma sätt som i en vanlig  element så att du kan få en fullständig körning på attributet på: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

Till exempel, för att ge olika bilder vid olika pixeldensiteter kan du använda:

Eller för att ladda olika bilder beroende på visningsbredd du kan använda:

Obs, om du använder värden som innehåller w de src attribut ignoreras i webbläsare som stöder srcset.

Lägga till tillskrivning

Om du behöver ge kredit för en bild du kan använda attribution, till exempel:

Styling Placeholders

Om du vill styra utseendet på platshållare som visas på din sida medan bilder laddas kan du göra det med CSS riktad mot amp-img element, till exempel:

amp-img bakgrundsfärg: grå; 

Hur man använder

På en AMP-sida kommer du använda när du vill bädda in en video från din egen källa. Om du vill bädda in videoklipp från tredje part, t.ex. från YouTube eller via en iFrame, kan du istället använda andra element som eller .

(Återigen hittar du fullständig dokumentation för på AMP-projektets referenswebbplats).

Viktiga inkluderingar

Som med , Det finns några viktiga inclusions när du använder . Igen src krävs för att ange platsen för videon och båda höjd och bredd krävs så AMP kan korrekt lägga ut sidan medan du laddar.

Ett grundläggande exempel med nödvändiga attribut kan vara:

Lägga till en fallback

Om videon inte laddas eller visas av någon anledning, är det möjligt att ställa in en återgång genom att nästa en

 
 
Videon kunde inte laddas. Kontrollera att din webbläsare stöder HTML5-video.
 
 

 
 
Videon kunde inte laddas. Kontrollera att din webbläsare stöder HTML5-video.