AMP är ett open source-projekt av Google som bidrar till snabbare webbsidor. Initiativet startade när publicister och teknikföretag ville ta ett krafttag mot långsamma webbsidor, främst för att förbättra prestandan i mobila enheter.
Inom kort kommer AMP antagligen att påverka en webbplats ranking och det kan det löna sig att redan nu amp-ifiera åtminstone delar av innehållet för att förbättra din sökmotoroptimering.
AMP som är en metod för att visa innehåll på webbsidor snabbare består av tre delar: AMP HTML; AMP JS och Google AMP Cache.
AMP ställer hårda krav på html-koden
AMP HTML är en variant av html med hårda krav på koden. Exempelvis måste alla bilder på sidan ha en fast bredd och höjd som är utskriven i koden. Det gör att bilderna laddas in snabbare på sidan och innehållet hoppar inte runt på skärmen såsom det gör när en bild med okänd storlek läses in i webbläsaren. För att ytterligare optimera nedladdningen av sidor har AMP dessutom förbjudit ett antal html-taggar såsom <frame>, <object> och <embed>.
AMP laddar in JavaScript i bakgrunden
AMP JS tillåter endast asynkront JavaScript. Asynkron programmering innebär att delar av sidan laddas in i bakgrunden medan resten av innehållet laddas ner och visas upp för användaren. Ett exempel. Om du ska använda dig av en Google Maps-karta på en webbsida måste det ske via ett JavaScript. Enligt AMP JS ska kartan visas i en <amp-iframe> som har en fast bredd och höjd för den plats den ska ta upp på webbsidan. Kartan laddas klart i bakgrunden och eftersom den redan har en fast bredd och höjd slipper sidan hoppa till när kartan har lästs in. Det upplevs som det går fortare att ladda in hela sidan helt enkelt.
Google AMP Cache samlar ihop alla korrekta AMP-sidor och cachar dem. Google AMP Cache kontrollerar också att koden är korrekt och att sidan inte är beroende av några tredjepartsscript.
En annan sak som är viktig för AMP är att alla CSS (Cascading Style Sheets) måste finnas i <style>-taggen i html-koden. Och det får endast finnas en <style>-tagg på sidan. Alltså kan man inte använda sig av ett externt style sheet. CSS:en som finns i <style> får dessutom max vara 50 kilobytes stor. Det har ställer krav på att den som utvecklar lever efter DRY (Don’t repeat yourself).
SVT har anpassat vissa sidor till AMP
SVT verkar redan ha byggt om en del av sina sidor och anpassat dem efter AMP. Men än så länge är det enbart nya nyheter som är AMP-ifierade, äldre nyheter (se första nyheten till vänster) är inte AMP-anpassade. Inte heller deras startsidan är anpassad efter AMP.
Måste vi bygga om webbplatsen på grund av AMP?
Nej, ni behöver inte bygga om hela webbplatsen. Däremot rekommenderar vi att en del av innehållet AMP-ifieras exempelvis artiklar på en nyhetssida, produktbeskrivningar och blogginlägg eller annat innehåll som är extra viktigt för sökmotoroptimeringen. Tanken med AMP är att besökaren ska hamna direkt på innehållet via sin Google-sökning.
Finns det några nackdelar med AMP?
AMP är ett open source-projekt, och inte en del av W3C:s standard för html. Det betyder att det inte är säkert att AMP-sidor kommer att kunna visas korrekt i framtiden eller att koden måste skrivas om på grund av ändringar och tillägg i AMP.
AMP ökar prestandan för webbsidor i mobilen, men påverkar inte prestandan för desktop-versioner av samma webbsida. Att Google via AMP-projektet valt att dela upp webben i mobilt och icke mobilt är lite olyckligt. Det hade varit bättre att främja all prestanda.
För användare visas AMP-sidor enbart via en Google-sökning i mobilen. Om samma användare besöker webbsidan via ett bokmärke eller en länk från en annan sida kommer AMP-sidan inte att visas.
Webbplatser är dessutom ofta utvecklade med hjälp av JavaScript för att ladda in komponenter utvecklade av tredjepartsleverantörer. Och eftersom AMP-sidor inte tillåter JavaScript från tredjepart, om inte Google har godkänt scripten, är det en god idé att utvärdera vilket innehåll på webbplatsen som är möjligt att AMP-anspassas.
Kontakta Frida Hallén om du vill veta mer om AMP och förslag på hur ni ska göra på just er webbplats.
Ta reda på mer: