Ny teknologi gør dit website hurtigere på mobilen

Share Button

Flere og flere bruger deres smartphone eller tablet, når de surfer på nettet, og det er noget Google har stort fokus på. Fungerer dit website ikke optimalt på mobile devices, har det nemlig betydning for, om du bliver fundet i søgeresultaterne. Med den nye teknologi kaldet AMP, kan du få dit website til at loade hurtigere på mobile enheder – læs med her og bliv klogere på, hvordan teknologien fungerer.

AMP optimerer dit website på mobile visninger

Det kommer sikkert ikke som en overraskelse for dig, at en stor del af den trafik der sker på internettet i dag, kommer fra smartphones. Faktisk er over halvdelen af alle søgninger i Google foretaget fra en smartphone eller en tablet. At Google har stort fokus på trafik fra smartphones er næsten forkert at sige – for det er stort set det eneste device Google har fokus på i denne tid.

Det betyder også, at Googles primære fokus er på, at dit website fungerer bedst muligt på en smartphone. Da internettet ofte er langsommere på en smartphone end på en desktop, har Google derfor også stort fokus på load time – altså den tid det tager fra du klikker på et søgeresultat, til siden er åben og klar til brug.

Ifølge Kissmetric, forlader 40% af de besøgende en side der ikke er loadet inden for 3 sekunder, så du risikerer at gå glip af store mængder mobiltrafik, selv om du har skabt kvalitetsindhold og sikret dig, at du bliver fundet i en søgning. Google og en række andre virksomheder har på den baggrund skabt en teknologi, der gør det muligt at lave websites med meget hurtigere load time – de er derfor som skabt til smartphones.

Denne teknologi kaldes AMP!

Hvad er AMP?

AMP står for Accelerated Mobile Pages. AMP er en HTML-side, hvor alt andet end basale HTML-elementer er fjernet for at få siden til at loade hurtigst muligt. Det betyder desværre også, at flere af de mest benyttede elementer på websites i dag, ikke kan benyttes på AMP sider.

Du kan vælge at have to versioner af dit website, så AMP HTML vises på smartphones og så beholde den normale HTML-version til desktop. Hvad du end vælger, skal du fortælle Google det i AMP-sidens canonical tag.

De mest kritiske elementer, der er fjernet, er JavaScript og forms – altså kontaktformularer. JavaScript er fuldstændigt fjernet, hvilket gør, at brugerinteraktion generelt ikke er muligt. Scripts til tracking og annoncenetværk kan heller ikke bruges, men her kan man i stedet benytte <amp-analytics> til tracking – så du kan måle fx trafik, brugerfærd og konverteringer på dit website og <amp-ad> til annoncer.

Specielt annoncering har der været spekuleret meget i, da mange frygtede at Google og de andre virksomheder bag AMP ville fjerne muligheden for annoncering og selv bringe annoncer. Dette er dog ikke tilfældet og annoncering er derfor fortsat muligt.

Kontaktformularer (<form>), hvor man kan indtaste data og trykke send, kan til gengæld ikke benyttes. I stedet kan man indlæse kontaktformularen via <amp-iframe> tagget, der har samme funktion som traditionelle iframes – altså hvor man kan vise en anden sides indhold. Det er dog vigtigt at være opmærksom på at <amp-iframe> kun kan indlæse HTTPS.

CSS, som er en kode du benytter til at style dit website med, kan også benyttes i AMP HTML, men kun i en restriktiv version. De basale CSS-elementer der skal til for at designe et flot og responsive website kan dog benyttes.

Her kan du se et eksempel på en Accelerated Mobile Page

Hvem har gavn af AMP?

AMP er ikke beregnet til sider med brugerinteraktion, men er designet til at vise artikler med fx video og billeder. Derfor er AMP velegnet til nyhedsmedier, blogs og lignende sider. Webshops vil typisk ikke fungere som AMP HTML, men man kan dog med fordel implementere AMP HTML på kategorisider, der ikke indeholder produkter.

Hvis dine sider ikke er afhængige af JavaScript og indholdet primært er statisk, vil du med få ændringer i din CMS template hurtigt blive klar til AMP, og du vil sandsynligvis ikke have brug for både en HTML version og en AMP HTML version.

Hvad gør AMP hurtigt?

AMP har et restriktivt set-up der fx betyder, at elementer som billeder eller video skal have en foruddefineret størrelse og bredde i selve tagget. Dette gør, at AMP præcist ved, hvordan dit website ser ud, inden det er loadet. Derfor kan AMP styre, hvilke elementer der skal loade først for at den besøgende hurtigst muligt kan starte med at bruge websitet.

AMP projektet indeholder også Google AMP Cache, som cacher alle dine gyldige AMP sider. Det betyder, at der gemmes en kopi af dit websites forskellige elementer som eksempelvis billeder og videoer, så de ikke skal hentes, hver gang siden skal vises. Derved forbedres ydeevnen.

Hvad kan man i AMP?

I bund og brug kan du alt det, der er brug for til at kunne lave en kvalitetsartikel. Dvs. at du kan tilføje billeder og video, og der er en indbygget slider, <amp-carousel>, hvor du horisontalt kan slide mellem HTML-elementer som tekst, billeder og video. Derudover er der tags til at vise social media posts og administrative tags som cookie notifikation og implementering af paywall.

Sådan kommer du i gang med AMP

For at komme i gang med AMP HTML skal du først og fremmest sikre dig, at dit website indeholder nedenstående elementer. Nogle er traditionelle, mens obligatoriske HTML-elementer og andre elementer er nye AMP HTML-elementer.

AMP HTML sider SKAL indeholde følgende elementer:

  • ‹!doctype html›
  • ‹html amp lang=”da”›
  • ‹head› og ‹body› tags
  • ‹link rel=”canonical” href=”[HTML versionen, hvis den findes, ellers HTML AMP]” /›

I ‹head› tag:

  • ‹meta charset=”utf-8″›
  • ‹meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″›
  • ‹script async src=”https://cdn.ampproject.org/v0.js”›‹/script›
  • AMP boilerplate kode

Sådan ser en basic AMP HTML side ud

‹!doctype html›

‹html amp lang=”da”›

‹head›

‹meta charset=”utf-8″›

‹link rel=”canonical” href=”[Indsæt link til HTML versionen, hvis den findes, ellers til HTML AMP]”›

‹title›[Indsæt din title]‹/title›

‹meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″›

‹style amp-custom›
[Indsæt din styling]
‹/style›

‹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›
‹script async src=”https://cdn.ampproject.org/v0.js”›‹/script›

‹/head›
‹body›
[Indsæt dit indhold] ‹/body›

‹/html›

For at validere din nye AMP HTML side skal du tilføje ”#development=1” i enden af webadressen og åbne siden i Google Chrome. Her skal du så højreklikke på siden og vælge ”Undersøg” for at åbne consollen.

Hvis der er problemer med dit setup, så skriver validatoren det i consollen:

AMP set-up

Og ellers skriver validatoren: ”AMP validation successful”.

AMP set-up

Så er det bare om at komme i gang med at optimere dit website, så det også loader hurtigt, når det bruges fra en smartphone eller tablet. Det vil også være med til at optimere dine resultater i Google. God fornøjelse!