Przyspieszone strony mobilne AMP (Accelerated Mobile Pages)

(Aurelia Sypniewska)Konfiguracja witryny, Pozycjonowanie
Przyspieszone strony mobilne AMP (Accelerated Mobile Pages)
Czas czytania 2 minuty

AMP to skrót od Angielskich słów Accelerated Mobile Pages i odnosi się on do projektu zapoczątkowanego w 2016 roku przez firmę Google.

Głównym celem projektu było dostosowanie statycznych treści stron internetowych w taki sposób by otwierały się szybko i sprawnie na różnych urządzeniach mobilnych. Zgodnie z założeniami metoda ta musiała być przy tym sama w sobie prosta i nie powodować zbytniego obciążająca strony.

Logo AMP
Logo AMP

Przyspieszenie strony internetowej a AMP

Zastanawiacie się zapewne teraz jak w Google rozwiązano ten problem. Otóż podstrony witryny korzystającej z AMP zaczęły być zapisywane w cache Google. Czyli w pamięci podręcznej wyszukiwarki. Technologia Accelerated Mobile Pages jest prowadzona w formie open source (wolnego oprogramowania). Oznacza to, że jest ona bezpłatna a osoby posiadające odpowiednią wiedzę techniczną np. programiści; mogą w niej spowolnienie wprowadzać zmiany.

Przyspieszone strony mobilne (Accelerated Mobile Pages, AMP) to standard tworzenia szybko wczytujących się stron, które się poprawnie wyświetlają na urządzeniach mobilnych. Posiadanie witryny dostosowanej do urządzeń mobilnych jest teraz bardzo ważne dla obecności w Internecie. W wielu krajach ruch ze smartfonów przewyższa ruch z komputerów.

https://support.google.com/webmasters/answer/7320015?hl=pl

Co należy wiedzieć o AMP?

Technologia AMP wykorzystuje w swojej strukturze 3 typy elementów są to:

  • AMP HTML –  to wskazówki i zalecenia przeznaczone dla kodu HTML. Dzięki dostosowaniu się do nich nie tylko możesz przyspieszyć funkcjonowanie strony, ale również poprawić jej wygląd na urządzeniach mobilnych.
  • AMP JS – są to specjalne biblioteki JavaScript, przygotowane w taki sposób by skrócić czas ładowania strony poprzez poprawę obsługi ładowania zasobów strony.
  • AMP CDN – jest dodatkowym opcjonalnym elementem. Opiera się na technologii proxy; pobiera, buforuje i poprawia wydajność strony AMP HTML. Pozwala on na pobieranie plików CSS i JS z jednego źródła.

Przykład struktury AMP HTML:

<!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>
   <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 </head>
<body>
 <amp-geo layout="nodisplay">
 <script type="application/json">
  {
   "AmpBind": true
  }
 </script>
 </amp-geo>
<h1>Hello in <span [text]="country">...</span>!</h1>
<button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

źródło: https://amp.dev/pl/about/websites/

Jakie korzyści wynikają z używania AMP

AMP wyraźnie poprawia szybkość strony internetowej. Strony wczytywane są niemal natychmiast, co w dzisiejszych czasach jest bardzo istotne jeśli chcemy zatrzymać czytelników / klientów. W efekcie ruch pochodzący z urządzeń przenośnych / mobilnych może zacząć rosnąć. Z tego co udało mi się wyczytać stosowanie AMP ma również wpływ na pozycję w wyszukiwaniu w Google. Trudno się jednak temu dziwić, skoro ten projekt jest ich dziełem.

Na chwilę obecną projekt ten wspierają:

  • Twitter
  • LinkedIn
  • WordPress
  • Ghost
  • ChartBear
  • the Guardian
  • The New York Times

Wdrożenie samego AMP dla programisty też nie powinno być trudne. Wymaga jednak odpowiedniego przygotowania.

Jak wdrożyć AMP na swojej witrynie?

Jeżeli nasza strona oparta jest np. o CMS istnieje spore prawdopodobieństwo, że jedyne co musimy zrobić to wdrożyć odpowiednią wtyczkę / moduł. Wspierane typy witryn znajdziecie pod adresem: https://amp.dev/support/faq/platform-and-vendor-partners/?referrer=ampproject.org

W innym przypadku modyfikację będziemy musieli przeprowadzić sami lub z pomocą programisty.

źródła: