AMP (Accelerated Mobile Pages) – co to? Jaką rolę odgrywa taka technologia?

AMP, czyli Accelerated Mobile Pages, tłumaczymy jako przyspieszone strony mobilne. Chyba każdy zgodzi się z tym, że witryny przeglądane za pomocą smartfonów i tabletów powinny ładować się błyskawicznie – nawet sekunda opóźnienia może poskutkować utratą klienta. AMP to projekt wspierany przez Google, technologia mająca wpływ na szybkość stron mobilnych. Jak działa? Czym wyróżniają się strony AMP?

Czym jest AMP?

AMP to skrót pochodzący od Accelerated Mobile Pages, co tłumaczymy jako przyspieszone strony mobilne. Jest to otwartoźródłowy framework HTML, technologia pozwalająca na tworzenie szybko działających stron mobilnych. Strony AMP działają szybciej, ponieważ zapisywane są w pamięci podręcznej (cache) w sposób automatyczny. AMP związane jest z dość dużymi ograniczeniami w zakresie kodu HTML, CSS i Javascript, a to sprawia, że kod witryn AMP jest lżejszy.

Omawiane rozwiązanie dostępne jest od 7 października 2015 roku i jest wspierane przez Google.

HTML a AMP 

Kod HTML AMP to standardowy HTML, jednak nieco uproszczony. Na część z tagów, nazwanych komponentami AMP HTML, nałożone zostały ograniczenia – tagi dostosowano do wymagań AMP. Nie są jednak wymagane odrębne mechanizmy renderujące. AMP HTML renderowany jest w taki sam sposób, jak standardowy HTML. Proces przesyłania na serwer także wygląda tak, jak w standardowych przypadkach.

Tagi AMP HTML mogą zastąpić tradycyjne znaczniki i skrypty, np.:

• <amp-img> zamiast <img> – obsługuje responsywne obrazy,
• <amp-video> zamiast <video> – zoptymalizowane wideo,
• <amp-carousel> – umożliwia tworzenie sliderów,
• <amp-analytics> pozwala na weryfikację statystyk strony.

W zależności od preferencji, właściciel witryny może zdecydować się na korzystanie z duetu w postaci standardowego HTML i AMP lub wyłącznie na korzystanie z AMP HTML.

AMP JavaScript

AMP JavaScript to zoptymalizowany framework JavaScript, który wykorzystywany jest w technologii Accelerated Mobile Pages (AMP). Biblioteka AMP JavaScript, dzięki udostępnieniu własnych znaczników HTML i innym rozwiązaniom, umożliwia szybkie renderowanie witryny na różnych urządzeniach.

Ważne funkcjonalności

• Wyłączenie blokującego renderowanie kodu i ograniczenie skomplikowanych selektorów CSS – AMP wymusza użycie lekkich, wydajnych stylów, eliminując elementy spowalniające ładowanie.
• Asynchroniczne ładowanie treści – takie rozwiązanie umożliwia jednoczesne wykonywanie różnych działań, na przykład ładowania zasobów. Minimalizuje to opóźnienia wynikające z kolejności wczytywania elementów strony.
• Zarządzanie pamięcią podręczną – integracja z AMP cache to sposób, by zwiększyć szybkość ładowania witryny, podczas kolejnych odwiedzin użytkownika.
• Eliminacja zbędnych fragmentów kodu – takie działanie pozwala na redukcję obciążenia przeglądarki i skutkuje większą prędkością ładowania.

AMP Cache

AMP Cache, czyli Accelerated Mobile Pages Cache, to system proxy, rozwiązanie Google umożliwiające tymczasowe przechowywanie danych w pamięci przeglądarki. Pamięć cache sprawia, że zasoby wczytywane są szybciej.

W przypadku AMP Cache zoptymalizowane kopie stron AMP przechowywane są na serwerach Google. Gdy użytkownik chce otworzyć stronę AMP, zasoby nie są pobierane bezpośrednio z oryginalnego serwera. Przeglądarka łączy się z najbliższym serwerem Google, który dostarcza stronę z pamięci podręcznej (cache).

Jak zacząć korzystać z AMP?

Aby zacząć korzystać z AMP, należy zapoznać się z dokumentacją, która jest dostępna na oficjalnej stronie internetowej AMP. Kolejny krok to dostosowanie swojej strony internetowej do wymogów technologii AMP, w tym zastosowanie specjalnej wersji HTML, zoptymalizowanie zdjęć i multimediów. Można także skorzystać z gotowych szablonów, które są dostępne w internecie i dostosować je do swoich potrzeb.

AMP – dlaczego jest ważne?

Użytkownicy wyłączają strony, które ładują się dłużej niż 3 sekundy. W momencie wyłączenia witryny przez użytkownika, tracisz szansę na konwersję. Co więcej, prędkość ładowania stanowi czynnik rankingowy Google. Strony, które nie działają wydajnie, zajmują niższe pozycje w organicznych wynikach wyszukiwania.

AMP a wrażenia użytkownika

Użytkownicy, zwłaszcza jeśli chodzi o mobilne wersje strony, oczekują błyskawicznej prędkości ładowania. Czas oczekiwania na odpowiedź, wynoszący powyżej 3 sekund, zwiększa szansę na to, że odbiorca zniechęci się i zrezygnuje z odwiedzin. Przyczyni się to do zwiększenia współczynnika odrzuceń, negatywnie wpłynie na wrażenia odbiorcy i sprawi, że Twoja firma straci szansę na konwersję.

AMP a SEO

Google skupia się na tym, by wyświetlać użytkownikom przydatne, mające wysoką jakość strony internetowe. Potwierdzeniem jakości i przydatności są między innymi czynniki behawioralne, w tym długie sesje i niski współczynnik odrzuceń. Problemy z prędkością ładowania skutkują negatywnymi sygnałami behawioralnymi i zmniejszeniem widoczności strony w organicznych wynikach wyszukiwania.

AMP a serwer

Kolejną zaletą stron www w technologii AMP jest to, że w mniejszym stopniu obciążają one serwer. Ma to pozytywny wpływ na wydajność witryny. 

AMP a RWD

Jeśli chodzi o mobilne wersje stron www, to ważna jest nie tylko wysoka prędkość ładowania. Należy też uwzględnić dopasowanie witryny do ekranów o różnej rozdzielczości, poprawne wyświetlanie grafik, tekstów, przycisków. W tym kontekście ważne jest pojęcie RWD, czyli Responsive Web Design. Jakie różnice występują pomiędzy AMP i RWD?

AMP podsumowanie

AMP to technologia skupiająca się na przyspieszeniu działania mobilnych wersji stron internetowych. To rozwiązanie open-source, które zostało wprowadzone przez Google w 2015 roku. Strony AMP, dzięki uproszczonemu kodowi HTML, CSS i JavaScript, są  lżejsze i lepiej zoptymalizowane pod kątem urządzeń mobilnych. Dodatkowo, strony AMP przechowywane są w pamięci podręcznej Google (AMP Cache), co umożliwia ich błyskawiczne ładowanie, pobieranie zasobów z najbliższego serwera.