AMP: Lynhurtige websider til din mobil

14/06/2022

★★★★★Rating: 4.72 (4358 votes)

I den moderne digitale tidsalder er hastighed afgørende, især når det kommer til mobil browsing. Både brugere og søgemaskiner forventer, at websider indlæses lynhurtigt, og det er ingen overraskelse, at sidehastighed er en vigtig rangeringsfaktor i Googles søgealgoritme. Talrige undersøgelser har vist, at sideindlæsningstid også har en betydelig indflydelse på et websteds bundlinje: konvertering og indtjening. En af de metoder, der kan bruges til at fremskynde websider for mobile enheder, er Accelerated Mobile Pages (AMP). Denne teknologi tilbyder ikke kun en hurtigere oplevelse, men kan også give yderligere fordele, såsom at optræde i AMP-karrusellen i Google-søgninger.

What is AMP (Accelerated Mobile page)? — AMP (Accelerated Mobile Page) is an open-source HTML framework which is launched by Google in 2016. It helps to create fast-loading mobile-optimized web pages. The AMP Project aims to "build the future web together". It allows you to create fast, beautiful loading ads and web pages across different platforms.

Hvad er Accelerated Mobile Pages (AMP)?

AMP (Accelerated Mobile Pages) er et open source HTML-rammeværk, der blev lanceret af Google i 2016. Projektets mål er at 'bygge fremtidens web sammen' ved at muliggøre oprettelsen af hurtigt indlæsende, mobiloptimerede websider. Disse sider er designet til at give en næsten øjeblikkelig indlæsningsoplevelse for brugere på mobile enheder.

AMP-projektet blev annonceret i oktober 2015 af Google sammen med store teknologivirksomheder som Twitter, LinkedIn og Pinterest. Initiativet opstod som et svar på behovet for at forbedre ydeevnen af mobile websider og skabe en ramme, der muliggør letvægts- og hurtigtindlæsende sider. Oprindeligt var AMP-løsningen primært tiltænkt mediesider, da Google ønskede at hjælpe nyhedshistorier med at dukke op næsten øjeblikkeligt fra søgeresultaterne. Med tiden har AMP dog spredt sig til andre typer websteder, især annoncører, annonceteknologiplatforme og e-handelswebsteder, såvel som udgivere. I dag drager mange websteder fordel af at implementere AMP, hvor detailhandlere og andre bruger AMP til hurtigt at levere landingssider.

Hvordan forbedrer AMP ydeevnen?

AMP forbedrer ydeevnen ved at anvende en strømlinet version af HTML, CSS og asynkron indlæsning af JavaScript. Den forenklede kodestruktur reducerer unødvendige elementer og prioriterer vigtigt indhold, hvilket fører til markant hurtigere sideindlæsningstider. Derudover anvender AMP et Content Delivery Network (CDN) til at cache og forhåndsgengive sider, hvilket yderligere forbedrer hastigheden. AMP håndhæver også visse bedste praksis for ydeevne, såsom lazy loading af billeder og effektiv ressourcehåndtering. Ved at fokusere på disse optimeringer forbedrer AMP indlæsningshastigheden og den samlede ydeevne af websider markant, især på mobile enheder, og giver brugerne en hurtigere og mere smidig browsingoplevelse.

Kernen i AMP-teknologien er tre hovedkomponenter:

AMP HTML: Dette er en almindelig HTML-fil med visse begrænsninger. De fleste tags, der bruges i normale HTML-filer, forbliver de samme i AMP HTML, men nogle HTML-tags konverteres til AMP-specifikke tags (f.eks. <html amp> eller <amp-selector>).
AMP JavaScript: AMP JS-biblioteket er primært ansvarligt for den hurtige indlæsning af AMP-sider. Det implementerer alle de bedste praksis som inline CSS, font-triggering og brugerdefinerede HTML-komponenter. Det tillader ikke indlæsning af tredjeparts JavaScript, men indlæser alt asynkront for at sikre optimal hastighed.
AMP Cache: AMP-sider leveres via Google AMP Cache, som er et proxy-baseret Content Delivery Network. Dette giver dit websted mulighed for at indlæse flere dele fra forskellige servere samtidigt og lader brugere indlæse dit websted fra den nærmeste server. For at opretholde maksimal effektivitet bruger det HTTP 2.0 til at indlæse dokumenter, billeder og JS-filer fra samme oprindelse.

Disse tre komponenter arbejder sammen for hurtigt at indlæse sider og give den bedste brugeroplevelse. Google AMP har sit eget valideringsværktøj, som giver adgang til at teste AMP-sider under udvikling. Kun hvis en webside består AMP-testen, vil den blive overvejet af Google til højere rangering i søgeresultaterne.

How do I implement accelerated mobile pages? — To implement Accelerated Mobile Pages for your website and track results, there are three basic steps: Create the AMP page template. Roll out the AMP pages. Track with analytics. We’ll look at each step in detail below, and I’ll also link to AMP documentation for more info.

Er AMP den rette løsning for dit websted?

Mens AMP kan forbedre ydeevnen af din side og brugeroplevelsen, er det vigtigt at vurdere, om det er den rigtige løsning for dig. Hvis dine websider allerede er responsive og hurtige nok, har du muligvis slet ikke brug for AMP. Googles Gary Illyes har offentligt udtalt dette. AMP-løsningen giver mest mening i lande/regioner med langsomme netværkshastigheder, hvor et par millisekunder kan gøre en stor forskel for brugeroplevelsen. Et eksempel er Bruce Clay Indias kontor, som har hjulpet med at implementere AMP for nogle klienter der med gode resultater.

Et konkret eksempel fra en amerikansk virksomhed, der konverterede flere tusinde af deres websider til AMP, illustrerer dette. Fire medarbejdere arbejdede i fem uger på at gennemføre projektet. Resultatet? Deres AMP-sider blev vist en smule hurtigere for mobile søgere, men webstedets rangeringer og trafik blev upåvirket. Set i bakspejlet ville deres tid og indsats have været bedre brugt på at skabe nyt indhold. Dette understreger vigtigheden af at vurdere behovet, før man investerer i en omfattende AMP-implementering.

Alternativer til implementering af AMP

AMP er ikke den eneste vej til en hurtig mobiloplevelse. Der findes flere effektive alternativer, som kan være mere passende afhængigt af dit websteds specifikke behov og målgruppe:

Content Delivery Network (CDN): CDN'er fungerer ved at bringe de tungeste ressourcefiler på et websted tættere på slutbrugeren. Mindre afstand at rejse betyder hurtigere levering, så dine sider vises hurtigere på en mobil enhed. Dette er en grundlæggende, men effektiv måde at forbedre indlæsningstider på.
Fuldt implementeret HTTP/2: HTTP/2-protokollen fremskynder datatransporten på internettet. Hvis dit marked har 4G- eller 5G-internethastigheder, og dit websted er HTTP/2-aktiveret, så har du sandsynligvis slet ikke brug for AMP. HTTP/2 tilbyder mange af de ydeevnefordele, som AMP søger at opnå, uden at kræve en separat version af dine sider.
Progressive Web Apps (PWA'er): PWA-teknologi kan få dit websted til at opføre sig som en indbygget mobilapp. PWA'er tilbyder offline funktionalitet, push-notifikationer og hurtige indlæsningstider, hvilket giver en fremragende brugeroplevelse. De er en mere omfattende løsning for at forbedre mobiloplevelsen, end blot sidehastighed.

Sådan implementeres Accelerated Mobile Pages

Hvis du har vurderet, at AMP er den rigtige løsning for dig, er der tre grundlæggende trin til at implementere Accelerated Mobile Pages for dit websted og spore resultaterne:

1. Opret AMP-sideskabelonen

Det første skridt i implementeringen af AMP er at oprette en websideskabelon. AMP integreres med mange forskellige udgivelsesplatforme, herunder populære CMS'er som WordPress, Drupal og Joomla. Du kan enten bygge AMP-skabeloner fra bunden eller konvertere eksisterende HTML-sider til AMP-format. Dokumentationen giver information om alle mulighederne.

Vigtige overvejelser ved oprettelse af en AMP-skabelon:

Sørg for, at skabelonen overholder AMP-specifikationerne for HTML-format og mere.
Ved styling af siden har du ikke JavaScript til rådighed; brug i stedet så mange brugerdefinerede <amp*> tags som nødvendigt for at få layoutet til at se godt ud. Dette inkluderer brug af responsive billeder, video og lyd.
Hold det enkelt. Hele pointen med AMP er at have en ren, nedstrippet webside.
Inkluder en form for navigation til dit domæne på hver side. Dette kan være et link fra et logo, et billede eller tekst. Da AMP-sider serveres fra en Google-cache, er det afgørende at give søgere et link for at forsøge at holde dem på dit websted.
Hvis du har brug for at beholde annoncer på dine websider, skal du migrere dem ved hjælp af amp-ad-komponenten. Hvis du ikke kan bruge <amp-ad>, skal du ikke inkludere annoncer i dine AMP-skabeloner.
Valider AMP-siden: Dette er et afgørende skridt. Blot én fejl eller advarsel vil holde siden ude af AMP-cachen. Der findes valideringsværktøjer, der kan hjælpe dig med at identificere og rette almindelige valideringsfejl.

En grundlæggende AMP HTML-side indeholder specifikke elementer:

<!doctype html> <html amp lang="da"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Min AMP Side</title> <link rel="canonical" href="https://ditdomæne.dk/din-original-side.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom> h1 { color: forestgreen; } body { background-color: #f0f0f0; } </style> </head> <body> <p><strong>Velkommen til en lynhurtig mobiloplevelse!</strong></p> </body> </html>

2. Udrul AMP-siderne

Det anbefales at teste én eller to typer sider fra dit websted på AMP først. Ideelt set bør du inkludere sider, der allerede rangerer, så du kan se, om Google leverer AMP-versionen i mobile søgeresultater. Afhængigt af dit websteds crawlhastighed kan det tage et par dage, før Google finder, kontrollerer og indekserer AMP-versionen af siden. Lad udrulningen køre i mindst en måned (længere, hvis muligt). Så længe dine sider får trafik, vil du opbygge nok data til at sikre, at en sitewide udrulning af AMP er rentabel.

3. Spor med analyse

Du vil naturligvis spore ydeevnen af dine AMP-sider. Da AMP-analyse vil være anderledes end normal Google Analytics, er det vigtigt at forstå, hvordan det fungerer. Du kan spore sider via interne eller tredjepartsanalyseværktøjer; mange analyseleverandører har indbyggede konfigurationer for amp-analytics. Du kan bruge amp-pixel til simpel sporing og amp-analytics til alt andet.

How to create Accelerated Mobile Pages on WordPress? — After activating the plugin on WordPress, you can begin creating your Accelerated Mobile Pages. Start by adding a new page or new post. Then click “ Start the AMP Page Builder.” You can choose to use pre-built layouts or build your own using drag-and-drop elements. Then click the gear icon to edit the elements of your page.

Tekniske anbefalinger ved opsætning af sporing:

Sørg for at bruge den kanoniske URL og andre variabler til at definere, hvad der skal registreres. Dette er afgørende for at forstå eventuelle trafikstigninger eller -fald på grund af AMP.
Brug extraUrlParams-attributten i amp-analytics til at tilføje en forespørgselsstrengparameter til den kanoniske URL, f.eks. "type=amp" eller noget lignende. Dette vil gøre det nemt at differentiere AMP-sider fra normale websider i analyse eller at oprette et brugerdefineret segment, hvis nødvendigt. På denne måde kan du sammenligne den samlede trafik på sider før og efter AMP-lanceringen.

Fordele ved at bruge AMP-sider med Google Ads

Accelerated Mobile Pages (AMP) giver betydelige fordele, når de bruges sammen med Google Ads. AMP-sider indlæses hurtigere end de fleste stærkt optimerede HTML-sider. Dette reducerer den tid, der går, fra nogen klikker på din annonce, til de ser din landingsside. Generelt reducerer hurtigere indlæsningstider afbrydelser og afvisningsprocenter, hvilket kan øge konverteringer og forbedre din samlede annonceydelse. For at sende annoncetrafik til din AMP-landingsside skal du blot indtaste AMP-sidens URL i feltet 'Mobil-URL' for dine annoncer eller i feltet 'Mobil-URL' for dine søgeord. Når en mobilbruger klikker på din annonce, sendes de derefter til din AMP-landingsside. Det er vigtigt at sikre, at URL'en peger på dit eget domæne (f.eks. https://example.com) og ikke på kopien i Google AMP Cache (f.eks. https://cdn.ampproject.org/c/s/example.com).

Fordele og begrænsninger ved AMP-sider

Mens AMP kan forbedre din sides ydeevne og brugeroplevelse, har det også visse ulemper. Her er en oversigt over fordele og ulemper ved AMP-sider:

Fordele:

Sideindlæsning er næsten øjeblikkelig, hvilket forbedrer brugeroplevelsen markant.
Sider er relativt nemme at bygge, især med CMS-plugins.
Forbedrer brugeroplevelsen på mobil, da indholdet er let og hurtigt tilgængeligt.
Tillader brugerdefinerede designs inden for AMP-rammerne.
Understøttes af flere platforme, herunder Google og Bing.

Begrænsninger:

Google viser ikke længere AMP-badgeikonet for at indikere AMP-indhold, hvilket kan mindske den visuelle fordel i søgeresultaterne.
Designelementer er meget begrænsede, da AMP fokuserer på ydeevne frem for kompleks æstetik.
AMP-sider tillader kun ét annoncetag per side, hvilket kan være en begrænsning for annoncetunge websteder.
Tredjeparts JavaScript er stærkt begrænset eller helt forbudt, hvilket kan begrænse funktionalitet.

Sammenligning: AMP-webside vs. Standard HTML-webside

Funktion	AMP-webside	Standard HTML-webside
Indlæsningshastighed	Ekstremt hurtig, ofte næsten øjeblikkelig, takket være optimeringer og caching.	Varierer meget; kan være hurtig eller langsom afhængigt af optimering og indhold.
Kodestruktur	Begrænset HTML med specifikke AMP-tags og begrænset CSS.	Standard HTML med fuld fleksibilitet i tags og CSS.
JavaScript	AMP JS-bibliotek, ingen tredjeparts JS, asynkron indlæsning.	Fuld JavaScript-fleksibilitet, kan indlæse tredjepartsbiblioteker.
Caching	Leveres via Google AMP Cache (CDN), forhåndsgengivet indhold.	Standard browser-caching; valgfri brug af ekstern CDN.
Designfleksibilitet	Begrænset; fokus på ren, nedstrippet side.	Fuld fleksibilitet; kan skabe komplekse og interaktive designs.
Annonceintegration	Kræver specifikke `amp-ad`-komponenter, ofte begrænset til én annonce.	Fleksibel integration af forskellige annonceformater og -netværk.
Udviklingskompleksitet	Kræver overholdelse af AMP-specifikationer; kan være en ekstra arbejdsgang.	Standard webudvikling; fokus på responsivitet og ydeevne.

Ofte Stillede Spørgsmål om AMP

Her er svar på nogle af de mest almindelige spørgsmål om Accelerated Mobile Pages:

Hvad er AMP helt grundlæggende?
AMP er et open source HTML-rammeværk skabt af Google for at hjælpe med at bygge hurtigt indlæsende, mobiloptimerede websider. Det er designet til at levere indhold næsten øjeblikkeligt til mobilbrugere.

Er AMP stadig relevant i 2024?
Mens AMP's fremtrædende placering i Googles søgeresultater (f.eks. fraværet af AMP-badge) er mindsket, er det stadig relevant for specifikke scenarier, især for websteder, der kæmper med mobilhastighed i regioner med langsomme netværk. Hvis dit websted allerede er hurtigt og responsivt, er fordelene dog mindre.

Hjælper AMP min SEO?
Indirekte. Selvom AMP ikke længere er en direkte rangeringsfaktor i sig selv, er sidehastighed og brugeroplevelse afgørende for SEO. Hurtige sider har lavere afvisningsprocenter og højere engagement, hvilket kan have en positiv indvirkning på dine placeringer. AMP kan også stadig optræde i Topnyheder-karrusellen for udgivere.

Kan jeg bruge AMP med WordPress?
Ja, absolut. Der findes flere plugins, såsom 'AMP for WP', der gør det nemt at implementere AMP på WordPress-websteder uden at skulle skrive kode fra bunden. Disse plugins hjælper med at generere AMP-kompatible versioner af dine indlæg og sider.

What are the benefits of using AMP pages with Google Ads? — Benefits of using AMP pages with Google Ads AMP pages load faster than all but the most highly optimized HTML pages. This reduces the amount of time between when someone clicks your ad and when they see your landing page.

Hvad er de vigtigste alternativer til AMP for mobiloptimering?
De mest populære alternativer inkluderer brug af et Content Delivery Network (CDN) for at levere indhold hurtigere, fuld implementering af HTTP/2-protokollen for optimeret datatransport og udvikling af Progressive Web Apps (PWA'er), der tilbyder en app-lignende oplevelse i en browser.

Er det værd at investere tid i at implementere AMP?
For de fleste websteder er svaret: genovervej. Medmindre det er absolut kritisk for din forretning at have ekstremt hurtige, nedstrippede mobilversioner af dine sider (f.eks. for nyhedsmedier i udviklingslande), kan den tid, du investerer i at konvertere dine websider til et andet format, sandsynligvis bruges bedre på at skabe godt indhold, der vil tjene alle dine brugere, uanset enhed eller netværkshastighed.

Afsluttende tanker

AMP er utvivlsomt en måde at fremskynde dine websider og tilbyde en bedre oplevelse til mobilbrugere. Hvis du er klar til at 'booste' dine websider med AMP, kan du følge de grundlæggende trin i denne artikel og AMP-dokumentationen for at komme i gang. Du kan endda overveje at deltage i en af Googles AMP Roadshow-workshops for at få mere dybdegående viden.

Men som nævnt tidligere, er mit råd til de fleste websteder at genoverveje. Medmindre det er afgørende for din forretning, skal du ikke implementere AMP. Den tid, du investerer i at konvertere dine websider til et andet format, kunne være bedre brugt på at skabe godt indhold, der vil tjene alle dine brugere. Mobiloptimering handler om mere end bare AMP; det handler om en helhedsstrategi, der omfatter responsivt design, effektiv billedoptimering, minimal brug af ressourcer og en generel forståelse af, hvordan mobile enheder interagerer med dit indhold. Fokusér på en robust mobiloplevelse, der er hurtig og funktionel for alle, og du vil sandsynligvis opnå bedre og mere bæredygtige resultater.

Hvis du vil læse andre artikler, der ligner AMP: Lynhurtige websider til din mobil, kan du besøge kategorien Teknologi.