SEO och AMP (Accelerated Mobile Pages): Hur man använder denna teknik för att förbättra laddningshastigheten

Inledning

I den digitala eran där allt finns nära till hands har en högpresterande webbplats blivit avgörande för alla företag. Sökmotoroptimering (SEO) och Accelerated Mobile Pages (AMP) är två nyckeltekniker som avsevärt kan förbättra din webbplats prestanda.

Begreppet SEO är allmänt erkänt inom online-marknadsföring. Det är en praxis som gör det möjligt att optimera olika aspekter av din webbplats så att den blir lättare att hitta för sökmotorer. Detta kan öka din webbplats synlighet och locka mer trafik.

Å andra sidan är AMP en relativt ny teknik som är utformad för att förbättra laddningshastigheten för webbsidor, särskilt på mobila enheter. Denna teknik främjar en smidigare och snabbare användarupplevelse, vilket kan uppmuntra besökare att stanna längre på din webbplats och interagera mer med ditt innehåll.

Vad är AMP och varför är det viktigt?

Accelerated Mobile Pages (AMP) är ett open source-projekt som lanserades av Google i syfte att förbättra hastigheten och prestandan för webbsidor på mobila enheter. Genom att använda en förenklad version av HTML eliminerar AMP de icke nödvändiga elementen som saktar ned sidladdningen, vilket möjliggör en nästan omedelbar laddning.

Även om AMP ofta förknippas med optimering för mobila enheter kan det också förbättra prestandan för dina sidor på stationära datorer. En snabb sida att ladda är nämligen en nyckelfaktor för en bra användarupplevelse, oavsett vilken plattform som används.

Hur man använder AMP för att förbättra laddningshastigheten

För att implementera AMP på din webbplats behöver du skapa en AMP-version av var och en av dina sidor. Detta innebär att använda en förenklad HTML-kod och att ta bort vissa element såsom formulär eller anpassade JavaScript-skript, som kan sakta ned laddningen av dina sidor.

Det rekommenderas också att använda Googles AMP-valideringsverktyg för att kontrollera att dina AMP-sidor är korrekt formaterade och att de följer riktlinjerna för AMP-projektet. Dessutom, glöm inte att lägga till en länk till AMP-versionen av varje sida i koden för originalsidan, så att Google kan upptäcka och indexera ditt AMP-innehåll korrekt.

Slutligen är det viktigt att notera att AMP bara är ett av många verktyg du kan använda för att förbättra din webbplats laddningshastighet. Andra strategier, som bildoptimering, minskning av CSS- och JavaScript-kod samt användning av ett innehållsleveransnätverk (CDN), kan också bidra till att snabba upp din webbplats.

html

Mobile-first-kontext: varför hastigheten har blivit avgörande

Under det senaste decenniet har mobil surfning överträffat surfning på dator i de flesta länder,
vilket har tvingat fram en fullständig omarbetning av SEO-strategier. År 2018 formaliserade Google ”mobile-first indexing”, det vill säga
att man i första hand tar hänsyn till mobilversionen av en webbplats för rankning. Denna omställning har gjort laddningshastigheten till
ett avgörande kriterium, inte bara för sökmotoroptimering, utan också för användarupplevelsen,
konvertering och lojalitet. Studier från Deloitte har visat att en förbättring med bara en sekund i laddningstid
på mobil kan öka konverteringsgraden med 8 % inom retail och med 10 % inom travel. I detta sammanhang har AMP
snabbt vuxit fram som en svarsteknik, som integrerar en uppsättning regler som begränsar koden för att garantera
en nästan omedelbar visning.

De tekniska grunderna i AMP: förenklad HTML, asynkron JavaScript och integrerat CDN

AMP-projektet bygger på tre pelare som kan minska latensen drastiskt. Först, en delmängd av HTML
kallad AMP HTML, som eliminerar eller ersätter element som kan blockera renderingen (till exempel, img ersätts
av amp-img). Andra pelaren: ett proprietärt JavaScript-bibliotek, som uppges vara icke-blockerande, som hanterar
asynkron inläsning av resurser och neutraliserar document.write() och andra anrop som kan låsa
huvudtråden. Slutligen utnyttjar Google konceptet AMP-cache, ett globalt CDN som levererar validerade sidor från
underdomäner https://cdn.ampproject.org, vilket minskar det fysiska och logiska avståndet mellan servern och användaren.

Begränsad HTML och strikta valideringar

AMP-validering är inte en enkel rekommendation: det är ett krav. Varje förbjuden tagg – till exempel
eller – kommer att ge ett felmeddelande « AMP validation failed och utesluta sidan från
dedikerade karuseller i SERP:en. Genom att drastiskt begränsa variationen av taggar säkrar AMP en blockfri rendering,
men kräver ofta att man tänker om funktioner (menyer, sliders, flerstegsformulär) i form av komponenter
AMP tillåtna (amp-carousel, amp-form, etc.). Utvecklaren är alltså inte bara begränsad, han är
stödd av ett ekosystem av fördefinierade webbkomponenter optimerade förprestanda.

AMP-cachets roll i den upplevda latensen

När en internetanvändare klickar på ett AMP-resultat i Google, levereras det direkt från Googles cache, vilket
eliminerar TCP-routningssökningen till ursprungsservern, minskar time to first byte och eliminerar den inledande
DNS lookup. I skalan av en mediesajt med global publik kan AMP-CDN:et innebära flera hundra
millisekunder sparade, särskilt på 3G-nät som fortfarande används i stora geografiska områden. Loggarna
från « El País har därmed visat att i Latinamerika har den mediana tiden innan visning delats med tre efter utrullning
av AMP, från 2,9 s till 1,0 s.

Mätbar påverkan av AMP på Core Web Vitals

Sedan 2021 införlivar Google officiellt Core Web Vitals (LCP, FID, CLS) i sin algoritm. AMP utformades
just för att uppfylla dessa indikatorer redan innan de fanns: skriptet amp-boilerplate tvingar innehållet att
att inte förskjutas, vilket förbättrar Cumulative Layout Shift (CLS), medan asynkront JavaScript minimerar First
Input Delay (FID). När det gäller Largest Contentful Paint (LCP) minskar förbudet mot blockerande skript och användningen av CDN
typiskt dess tröskel till under 2,5 s. Den brittiska utgivaren The Guardian rapporterar ett genomsnittligt CLS på 0,02 på AMP-sidor
mot 0,09 på traditionella mobila sidor, en skillnad som räcker för att gå från betyget « Needs Improvement till
« Good enligt Search Console.

AMP:s påverkan på crawl budget och indexering

Varje SEO-team med hög trafik känner till begränsningen i crawl budget. Varje extra URL är en kandidat mindre
för robotens besök, särskilt på stora e-handelswebbplatser. AMP påverkar denna budget på två sätt. För det första,
den potentiella dupliceringen mellan icke-AMP- och AMP-versioner ökar den totala volymen, men tack vare användningen av taggarna
rel="canonical" och rel="amphtml", kan Googlebot i stor utsträckning ignorera redundanser. För det andra svarar AMP-sidor
snabbare; och Google har bekräftat att serverns svarstid är en parameter för reglering av crawl rate.
En server som kan leverera sidorna på 100 ms kommer att uppmuntra Googlebot att konsumera fler URL:er, vilket förbättrar täckningen av
den globala indexeringen.

SEO-bästa praxis specifika för AMP-sidor

Canonical-tagg: undvik kannibalisering och utspädning av PageRank

Varje AMP-sida måste innehålla en tagg som pekar mot den icke-AMP-versionen (eller mot sig själv om
ingen annan version finns). Dessutom lägger den icke-AMP-sidan till till AMP-versionen. Denna korslänkning
garanterar för Google att det rör sig om en och samma resurs, konsoliderar popularitetssignalerna och förhindrar
kannibalisering. År 2016 tappade flera e-handlare placeringar efter att ha utelämnat canonical, vilket orsakade en
intern konkurrens mellan de två varianterna och delade deras netlinking i två.

Strukturerade data: förstärkare av synlighet i SERP

AMP upphäver inte vikten av märkning structured data. Tvärtom kräver vissa karuseller « Top stories att
närvaro av Article, NewsArticle eller VideoObject. Receptutgivaren Marmiton såg andelen « rich results
öka med +18 % i Search Console efter att ha kombinerat AMP och Recipe JSON-LD, vilket skapade en synergi mellan hastighet
upplevd och visuell attraktionskraft i SERP. För en teknisk blogg kan införandet av ’FAQ-sida eller HowTo kan också
låsa upp utökade snippets, som tar upp mer organiskt utrymme.

Fallstudier: medier, e-handel och bloggar

The Washington Post: 23 % ökning av återkommande besök

En av de första AMP-partnerna, Washington Post, migrerade över tusen artiklar redan 2016. Tidningen
observerade en minskning med 88 % av den medianmässiga laddningstiden och, framför allt, en snöbollseffekt: efter sex månader,
23 % av läsarna läste minst tre artiklar per session, jämfört med 14 % före AMP. Hastighet fungerar alltså som en
möjliggörare av innehållskonsumtion – en nyckelparameter för medier som är beroende av programmatisk annonsering.

AliExpress och e-handelsproblematiken

Även om AliExpress är känt för sin PWA, testade de AMP på sina produktsidlistningar för vissa tillväxtmarknader där
uppkopplingen är begränsad. Produktdetaljsidorna i AMP visade ett klickfrekvens högre med 10,5 % på SERP
mobilt, men checkoutens komplexitet (inkompatibel med amp-form vid den tiden) ledde teamet till en hybridmodell:
AMP för upptäckt, sedan omdirigering till PWA för konvertering. Denna erfarenhet påminner om att AMP ibland är en
första länk i en större tratt och måste tänkas som sådan.

Oberoende bloggande: fallet Backlinko

Brian Dean från Backlinko konverterade sin blogg till AMP 2020. Resultat: +13 % organisk trafik på 90 dagar, huvudsakligen
tack vare bättre rankning på sökfrågor « how to . Den avskalade strukturen minskade dom-storleken från 65 %, därav en
Largest Contentful Paint på 1,1 s. Dean understryker dock behovet av en väl genomtänkt AMP-design; en alltför
minimalistisk version kan minska tiden som spenderas på sidan, en kvalitetsindikator som indirekt korrelerar med SEO.

Innehållsstrategi, intäktsgenerering och begränsningar med AMP

Implementeringen av AMP väcker frågor kring annonsering och analytics. Många adserving-nätverk har behövt skapa
specifika format (amp-ad). Om Google Ad Manager snabbt blev kompatibel, har andra, som Amazon Transparent Ad
Marketplace, släpat efter, vilket lett till en tillfällig minskning av eCPM. För att kompensera för detta intäktsbortfall har vissa
utgivare valt direktförsäljning av ”native” inbäddade i amp-iframe. På analytics-sidan kräver AMP dubbel taggning:
analytics.js på den klassiska versionen och amp-analytics via en JSON-konfiguration. Skillnader i sessioner (ofta
3-5 % förlust) måste förutses i prestandarapporterna.

AMP vs PWA, SSR och CSR: välja eller kombinera?

Frågan är inte alltid AMP eller PWA (Progressive Web App); det kan handla om en kombination. Twitter Lite integrerar
AMP för extern länkning medan PWA tar över när användaren är autentiserad. På samma sätt, ramverk
moderna (Next.js, Nuxt, Astro) erbjuder AMP-first- eller AMP-hybridlägen, som kombinerar server-side rendering (SSR) för
botar och client-side hydration för avancerad interaktivitet. Vissa företag, såsom Booking.com, har
föredragit att optimera sin SSR-pipeline snarare än att underhålla två källor till sanning (AMP/icke-AMP). De förlitar sig på
samma prestandaprinciper som AMP (lazy-loading, föranslutning, uppdelning av bundlen) utan formatets rigiditet.

Stegvis implementering: från revision till driftsättning

En AMP-migrering börjar med en Lighthouse-audit och en fullständig crawl (Screaming Frog, Sitebulb) för att identifiera de
prioriterade mallarna: artikel-, produkt- och kategorisidor. Därefter kommer skapandet av AMP-prototypen validerad av
https://validator.ampproject.org. Den vanligaste strategin växlar en driftsättning side-by-side, vilket lämnar valet
till användaren (switch, header-länk) och observerar prestandan på ett A/B-urval. Den franska byrån Wexperience
har använt detta tillvägagångssätt för La Redoute, och testat 10 % av trafiken innan generalisering. KPI:er som följs inkluderar LCP, avvisningsfrekvens, intäkt per session och robotars genomsökningskvot.
Checklista för AMP-driftsättning med SEO-fokus

• Generera en separat URL (suffixe

/amp/ eller parameter ?amp • Lägg till taggen)
• Lägg till taggen <html ⚡> för att signalera AMP-läget
• Implementera och
• Ladda amp-boilerplate.css och skriptet https://cdn.ampproject.org/v0.js
• Kontrollera valideringen via JavaScript-konsolen : AMP.printState()
• Uppdatera sitemap.xml om AMP-versionen är självkanonisk
• Skicka in AMP-URL:erna i Search Console (rapporten « Förbättringar )
• Övervaka specifika strukturerade fel (icke-överensstämmelse i JSON-LD, bilder 1200×800 px)
• Konfigurera amp-analytics och koppla View IDs till Google Analytics 4
• Testa påverkan på Ads via separata rapporter (eCPM, viewability, CLS)

Mäta och iterera : diagnostikverktyg och KPI:er

Utrullningen är bara det första steget ; den kontinuerliga optimeringsfasen är avgörande.
Verktyg : PageSpeed Insights tillhandahåller CrUX-fältdata, WebPageTest gör det möjligt att filma inläsningen
bild för bild, Lighthouse CI underlättar övervakning i CI/CD.
KPI:er: bortom LCP <2,5 s, on fixera un First Contentful Paint <1,8 s, un Total Blocking Time <200 ms, un CLS <0,1. En SEO, on suivra la couverture d’indexation AMP, le trafic organique mobile pur, le CTR sur carrousel Top Stories, et bien sûr, les micro-conversions (inscriptions, ajout au panier). Pour un média, la combinaison « Pages par session + « Ad viewability est pertinente : si AMP fait fuir l’internaute après la lecture unique, l’objectif n’est pas atteint.

Avancerad optimering: förinläsning, föranslutning och next-gen-bilder

AMP möjliggör attributet preload via amp-script för att förutse den kritiska resursen.
Föranslutning () till ett tredjeparts-API, till exempel Stripe eller Algolia,
minskar tiden för handshake, men se upp med kvoter; för många föranslutningar tynger DNS-cachen.
När det gäller bilder, stöder formatet WebP och, sedan 2022, AVIF, förutsatt att erbjuda en fallback jpg.
Tester på en hotellsajt visade en vinst på 35 % i total sidvikt efter migrering jpeg→WebP.
Slutligen, användningen av amp-install-serviceworker kan förvandla en AMP-sida till en ingångspunkt till en PWA,
som kombinerar AMP-hastigheten och PWA-offline.

AMP och röstsökning: en underskattad tillgång

Röstassistenter (Google Assistant, Alexa) utnyttjar snabbt och strukturerat innehåll.
Google Assistant hämtar ofta AMP-versionen av en artikel för funktionen « Read It .
Infoga taggar runt nyckelstycken och berika AMP med Speakable
förbättrar chanserna att väljas som svar. Libération.fr har observerat en ökning på 40 % av röstciteringar
efter implementering av Speakable på sina AMP-sidor.

AMP:s framtid efter uppdateringen Page Experience

År 2021 tog Google bort kravet på AMP för att få tillgång till karusellen « Top stories .
Ändå har AMP inte försvunnit. Dess källkod hanteras nu av OpenJS-stiftelsen, vilket ger en öppnare styrning.
Roadmapen inkluderar den mer tillåtande komponenten « amp-script », integreringen av ES-moduler och avvecklingen
gradvis av attributet ⚡ till förmån för en loading="eager" inbyggd.
För SEO:er innebär detta en konvergens mellan AMP-bästa praxis och moderna webbstandarder.
Webbplatser som behärskar AMP-ekosystemet kommer att ha en naturlig fördel för att migrera till Chrome Fast Pages
eller till framtida prestandakrav från Google. Däremot kommer de som enbart förlitade sig på AMP-cachen
behöva investera i mer hållbara optimeringar på server- och front end-sidan.

Operativ slutsats: besluta, testa, optimera

Att anta AMP för att förbättra hastigheten handlar varken om en magisk plugin eller om en skyldighet dikterad av Google.
Det är ett tvärfunktionellt projekt där UX, SEO, monetisering och den tekniska strategin måste konvergera.
Företaget måste ställa sig tre frågor: (1) Uppfyller mina nuvarande sidor redan Core Web Vitals?
(2) Har jag resurserna att underhålla två versioner eller bör jag sikta på en enda optimerad kodbas?
(3) Vilka är de konkreta, mätta fördelarna (trafik, intäkter, varumärke) som motiverar komplexiteten?
Genom att svara ärligt definierar man en handlingsplan: pilot, övervakning och kontinuerlig iteration.
Oavsett om det handlar om en medieaktör som söker retention, en e-handlare som siktar på konvertering eller en bloggare
som vill öka sin räckvidd, kan AMP utgöra en accelerator – förutsatt att man skriver in det i en process
global prestanda och användarupplevelse.

Du kanske också är intresserad av dessa artiklar:

Så här använder du Google Analytics för att förbättra din strategi för sökmotoroptimering SEO och mobil-först-design : Hur du anpassar din webbplats för mobilanvändare Hur du använder Google Search Console för att analysera din webbplats prestanda SEA-avtal - Google Ads Adwords SEO och nyheter: Hur du optimerar din webbplats för nyhetssökningar