Accelerated Mobile Pages

af Morten Empeño

Skrevet Saturday, November 25, 2017

Accelerated Mobile Pages

Hvad er AMP?

AMP er en forkortelse for Accelerated Mobile Pages. AMP er et open-source initiativ, hvis primære formål er at skabe bedre web oplevelser for alle. AMP gør det muligt at skabe websites og web oplevelser, der er enormt hurtige for brugerne af disse. Brugeren vil med andre ord opleve en rigtig hurtig svar-tid, når de åbner en hjemmeside, der er lavet som AMP. Sider der er lavet som AMP fungerer på diverse devices og på tværs af platforme.

AMP komponenter

AMP sider bygges op af 3 kerne komponenter:

  • APM HTML
  • APM JS
  • APM Cache

AMP HTML

AMP HTML er HTML med en række begrænsninger, der er lavet for at sikre hurtig og stabil performance. Derudover er AMP HTML også udvidet med nogle AMP properties i forhold til almindelig HTML. Den mest simple AMP HTML fil ser således ud:

<!doctype html>
<html ⚡>
 <head>
 <meta charset="utf-8">
 <link rel="canonical" href="hello-world.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>
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Hvis du kender HTML, vil du se, at de fleste tags i AMP HTML er helt almindelige HTML tags. Men du vil også bemærke at nogle HTML tags er erstattet af AMP tags. Disse AMP tags kaldes AMP HTML komponenter og de gør det nemt for udvikleren af et website, at implementere almindelige web elementer på en måde, hvor de performer bedst muligt. Der er rigtig stor fokus på hastighed i AMP projektet.

AMP Pages bliver set af søgemaskinerne via et bestemt HTML tag:

<link rel="">

På dit website kan du vælge at have både en almindelig og en AMP version af en specifik side, eller du kan vælge kun at have en AMP version.

AMP JS

Kontakt EMPENO

Du er naturligvis altid velkommen til at kontakte EMPENO, hvis du har spørgsmål eller kommentarer til vores blogindlæg. Vi er altid glade for at komme i dialog.

Kontakt EMPENO

Nyeste blogindlæg