&w=3840&q=75)
TL;DR
AMP är en open-source teknik (utvecklad av Google) för att bygga snabba mobilanpassade webbsidor. För ändamålet används standardiserade komponenter med skräddarsydd funktionalitet som utökar eller ersätter HTML-taggar. AMP kommer med begränsningar avseende CSS och 'custom' Javascript med syfte att standardisera samt begränsa filernas storlek. En AMP-validerad sida cachas på Google:s servrar vilket innebär mycket snabba laddningstider oavsett klientens uppkopplingsprestanda eller geografiska läge.
Vad är AMP?
Accelerated Mobile Page
AMP är en akronym för Accelerated Mobile Pages. När man går in på AMP:s egen sida hittar man följande beskrivning:
AMP is a web component framework to easily create user-first websites. stories./ads./emails.
Optimerad för Mobiler
AMP är utvecklad och supportad av Google och släpptes officiellt 2015. Tekniken är open-source och optimerad för mobiltrafik på internet. Google identifierar AMP-validerade sidor och cachar dessa på sina egna servrar. Resultatet blir att klienter som surfar på AMP-sidor får snabba laddningstider oavsett uppkoppling och geografisk avstånd.
AMP Boilerplate
Alla AMP-sidor har en identisk boilerplate som inkluderar en <html> tag med en symbol. Alternativt kan man ersätta denna med text, *amp*. Bland övriga AMP-specifika attribut har vi bl a amp-custom och amp-boilerplate. Den förstnämnda är avsedd för den CSS som läggs till av utvecklaren/na medan den sistnämnda är avsedd för den 'custom' CSS som alltid följer med AMP-boilerplate.
Html<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</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>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
AMP Components
Som ett led i att standardisera och banta markup och kod använder sig AMP av ett stort antal färdigskräddade komponenter som utökar eller ersätter befintlig HTML markup. I regel kommer de med tillhörande funktionalitet som läggs till via ett externt script. Den javascript som kommer med AMP-boilerplate täcker endast de grundläggande funktionerna, all extra funktionalitet, t ex för ett formulär eller ett bildspel tillförs endast vid behov och då i form av standardiserade komponenter med tillhörande script. Dokumentationen för AMP-komponenter beskriver varje komponents funktionalitet (behaviour), custom attributs samt nödvändig script. Se mer här. Antalet tillgängliga komponenter är mer än tillräckligt för de flesta situationer men viss anpassning kan krävas när det kommer till att integrera interaktivitet och styling.
Exempel: amp-img komponent
Html<amp-img
alt="A view of the sea"
src="/static/inline-examples/images/sea.jpg"
width="900"
height="675"
layout="responsive"
>
</amp-img>
Varför AMP?
Talar För
Med stöd av Google:s teknik för cachning av sidor blir AMP sidor tillgängliga för alla oavsett geografiskt läge med mycket snabba uppladdningstider. Med AMP säkerställs en standardiserad och semantisk HTML markup vilket innebär ökad 'accessibility' för de som är beroende av tillgänglighetsanpassade hjälpmedel. Med AMP så har man ingen onödig kod då extra funktionalitet läggs till mha standardiserade komponenter med 'custom' scripts som endast läggs till vid behov. Samma princip gäller för CSS där 'custom' styles följer med den boilerplate som alla AMP-sidor använder. Egenkomponerad CSS är begränsad till 50kb. Ytterligare en fördel är att AMP sidor i regel får en högre SEO ranking av Google på sin sökmotor.
Potentiella Nackdelar
Förutom att AMP kan ses som ett försök av Google att skaffa sig ytterligare dominans över webben finns det också potentiella nackdelar med att använda tekniken. Med AMP så förutsätts bla användandet av en standardiserad och nerskalad javascript kod vid byggandet av en webbsida. Det här gäller även för stylingen där den egen-komponerade CSS:n inte får överstiga 50kb. CSS:n måste också läggas direkt i <style amp-custom> tag:n i HTML dokumentets <head> tag. Det finns med andra ord inte någon möjligheten att länka till ett externt CSS dokument. Att använda sig av AMP kommer mao medföra begränsningar avseende möjligheten att integrera CSS och Javascript.
Utmaningar
Okända marker
Hmm...
I motsats till många andra utvecklingsområden finns det väldigt lite information om hur man ska gå till väga för att AMP:fiera en react/next.js sida. Varför utvecklingsteamet kom att ställas inför en rad cutting-edge situationer under arbetets gång, med omfattande trials and errors, innan det att målet kunde uppnås.
CMS
Att arbeta med ett externt CMS kan komplicera ditt utförande för att få till en validerad AMP sida. Vi kommer inte djupdyka i detta område i det här inlägget men om man arbetar med exempelvis React Markdown, där man konverterar text och bilder till html kod så kan man behöva skriva komplicerade Regex funktioner för att konvertera bilder som kommer från CMS:et till <amp-image> då den vanliga <img> elementet ej stöds i AMP.
Så här kommer du igång!
Genomförandet
AMP Validatorn
Ladda hem och installera AMP-validator extension till Chrome via denna länk:
https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=sv
Bland dina Chrome-extensions uppe till höger kommer det nu dyka upp en cirkel med en blixt.
Det finns 3 lägen i AMP-validatorn:
AMP available
Om man ser en blå cirkel runt blixten så vet man att AMP finns tillgängligt på en sida och om man klickar på blixten så kommer man komma in på AMP versionen av sidan. ("?amp=1" kommer läggas till i URL:en om man arbetar på localhost.)
AMP errors
När det är en röd cirkel runt blixten så är det något som inte är enligt amp-standard och amp-validatorn kommer ge utslag och skriva ut ett fel-meddelande. Fel-meddelanden brukar oftast beskriva kort vad som är fel och man kan trycka på "Debug" för att se mer om vad som kan vara orsaken till felet.
AMP validate
När en sida har en grön cirkel runt blixten så är den en fullfjädrad AMP-sida som går igenom alla valideringar för AMP.
Paired Approach vs. Hybrid
När det kommer till att använda AMP med Next.js så kan man göra det på 2 sätt.
AMP-only
Man gör 2 versioner av sin sida, en AMP sida och en "vanlig" sida.
AMP-hybrid
Man gör 1 version som är en så kallad hybrid sida, AMP sida + "vanlig" sida i ett.
Nackdelen med detta är att man kan behöva underhålla sidan mer och man kan behöva skriva om all css till
<style jsx>(NextJS scoped styling) i sin AMP-version om man använt sig av ett externt stylesheet. Då Next.js har stöd för AMP så kommer<style jsx>bli<style amp-custom>som är den officiella HTML-elementet för AMP styling. Läs mer om amp-custom.
AMP med React/Next.js
Då Next.js har inbyggt stöd för AMP så kan man enkelt välja vilket sätt man vill utföra sin sida på.
AMP-only:
export const config = { amp: true };
Detta är allt som behövs för att göra en AMP-only sida i React Next.js. Se "Testa din AMP sida" nedan för hur du testar din AMP sida.
AMP-hybrid:
Hur du sätter upp din första sida med AMP-hybrid.
I Next.js finns det en hook som heter
useAmp, importera hooken i exempelvis pages/index.
Javascriptimport React from 'react';
import { useAmp } from 'next/amp';
2. Sätt din config variabel till amp: 'hybrid', gör även en variabel som du kan använda för att kolla om du är i AMP läge eller ej.
Javascriptimport React from 'react';
import { useAmp } from 'next/amp';
export const config = { amp: 'hybrid' };
const isAmp = useAmp();
3. Använd din variabel för att göra en koll på om du är i AMP läge eller ej och rendera ut 2 olika texter beroende på vilket läge du är i.
Javascriptimport React from 'react';
import { useAmp } from 'next/amp';
export const config = { amp: 'hybrid' };
const Home = () => {
const isAmp = useAmp();
return isAmp ? (
<p>Det här är en AMP sida</p>
) : (
<p>Det här är den vanliga sidan</p>
);
};
export default Home;
Testa din AMP sida
För att testa att AMP fungerar skriv npm run dev i terminalen (se till att vara i rätt mapp för projektet). Din localhost server kommer nu att starta och den blå cirkeln med en blixt bör nu synas uppe i högra hörnet om du installerat AMP-validator extension till chrome. (OBS, se till att du är på index sidan).
När localhost är igång bör du se texten "Det här är den vanliga sidan".
Klicka på cirklen med blixten eller lägg till /?amp=1 i url:en (ex. http://localhost:3000/?amp=1) för att testa din AMP sida. Du bör nu se texten "Det här är en AMP sida" på din sida. Nu ska det bara vara att bygga vidare på din hybrid sida och du kommer få upp eventuella fel i validatorn om det uppstår några. Var noga med att läsa dokumentationen för AMP för att se vad du får och inte får använda i AMP.
Klicka här för att komma till AMPs officiella hemsida där du kan läsa mer om AMP.
Klicka här för att se den officiella tutorialen på Youtube med AMP.
Om din sida validerar enligt AMP-validatorn och du publicerat din sidan kan du göra en sista extra koll på https://search.google.com/test/amp för att se att allt är i sin ordning.
För vilka projekt passar AMP?
Det är inte utan sina utmaningar att AMP:fiera en befintlig react/next.js sida med CMS-baserat innehåll av varierande slag. Det kan därför finnas skäl att väga in ett antal faktorer innan ett beslut fattas om att påbörja ett sådant arbete.
Om målet är att uppfylla grundläggande semantiska riktlinjer utan att för den skull ha djupgående kunskaper inom området kan AMP vara ett bra val. Kan man anta att de flesta besökarna av sidan använder mobil och att en stor andel av dessa användare kan antas sakna bra uppkopplings-prestanda finns det goda skäl för att välja AMP. Om SEO ranking är av stor vikt kan AMP mycket väl vara rätt val.
Om inga av ovanstående faktorer kan anses vara av avgörande betydelse och det dessutom finns behov av egenkomponerade lösningar avseende interaktivitet och styling kan det finnas bättre lösningar.
Vill du veta mer om AMP?
Har ni funderingar på att implementera AMP? Tveka inte att höra av er till oss för ett förutsättningslöst möte!