Co to jest AMP (Accelerated Mobile Pages)? Podstawy przyspieszonych stron mobilnych

Co to jest AMP?

AMP (Przyspieszone Strony Mobilne) to projekt Open Source wspierany przez Google. Jego celem jest promowanie tworzenia stron internetowych, których szybkość działania jest maksymalnie zoptymalizowana na urządzeniach mobilnych. Z tego powodu inicjatywa opracowała określone standardy projektowania stron, dzięki czemu mogą one być atrakcyjne oraz szybko działać na wszystkich urządzeniach przenośnych. Podczas tworzenia AMP Google wspierało duże grono developerów, wydawców, projektantów stron internetowych oraz firm technologicznych. W 2017 roku istniało już 900 000 domen internetowych, które stosowały się do zaleceń AMP.

Accelerated Mobile Pages – najważniejsze elementy

W przypadku stron AMP możemy wyróżnić kilka kluczowych elementów:

AMP HTML

AMP HTML to zasadniczo standardowy HTML, na którego nałożono pewne ograniczenia. Większość z występujących w nim znaczników jest typowych dla zwykłego HTML, jednak niektóre z nich są dostosowane specjalnie pod AMP. Takie niestandardowe tagi są nazywane komponentami AMP HTML – dzięki nim wspólne wzory tagów są łatwe do zaimplementowania w wydajny sposób. Same zaś strony AMP są odkrywane przez wyszukiwarki i inne platformy za pomocą tagów HTML. Podczas tworzenia witryny możesz ustalić, czy chcesz korzystać jednocześnie z wersji zwykłej i AMP lub tylko AMP.

AMP JavaScript

Biblioteka AMP JavaScript zapewnia szybkie renderowanie stron AMP HTML. Implementuje ona wszystkie najlepsze praktyki AMP oraz zarządza ładowaniem zasobów i udostępnia własne znaczniki HTML w celu zapewnienia szybkiego renderingu stron. AMP JavaScript działa asynchronicznie na podstawie zewnętrznych zasobów, dzięki czemu funkcjonowanie biblioteki nie wpływa negatywnie na renderowanie samej strony. JavaScript korzysta także z innych technik zapewniających wydajność jak wstępne obliczanie układu każdego elementu strony przed załadowaniem zasobów oraz wyłączanie powolnych selektorów CSS.

AMP Cache

Pamięć podręczna Google AMP Cache służy do obsługi cachowanych stron AMP HTML. Z technicznego punktu widzenia jest to sieć oparta o protokół proxy, która dostarcza wszystkie potrzebne dokumenty AMP. Pamięć podręczna pobiera strony AMP HTML, cachuje je, aby automatycznie poprawiać wydajność strony. W celu zachowania maksymalnej wydajności pamięć podręczna AMP Cache ładuje dokument, pliki JS i wszystkie obrazy z tego samego źródła, które korzysta z HTTP 2.0.

Jak dokładnie działają przyspieszone strony mobilne?

Powodem, dla którego strony AMP ładują się tak szybko, jest fakt, że AMP nakłada ograniczenia na HTML/CSS i JavaScript, co pozwala na lepsze renderowanie stron mobilnych. W przeciwieństwie do zwykłych witryn, strony AMP są automatycznie cachowane przez pamięć podręczną Google AMP Cache, co pozwala na szybsze ładowanie się w wynikach wyszukiwania Google.

Same strony AMP działają zaś w następujący sposób:

1. Bot crawlujący odwiedza stronę, aby ją przeskanować.
2. Znajduje on specjalny link kierujący do wersji AMP analizowanej strony. Dzięki temu wie, że statyczna wersja witryny przeznaczona na urządzenia mobilne znajduje się pod innym adresem URL.
3. Następnie Google skanuje wariant AMP strony i zapisuje jej statyczny stan na serwerze.

Accelerated Mobile Pages – korzyści

Dlaczego warto zainteresować się przyspieszonymi stronami mobilnymi? Oto kilka powodów:

• SEO i większy ruch – prędkość strony to jeden z kluczowych czynników w SEO. Google nagradza witryny, które są w stanie załadować się szybko, gdyż sprzyja to dobremu doświadczeniu użytkownika. Jak już wspomnieliśmy, AMP kładzie duży nacisk na tę kwestię, gdyż standardy promowane przez omawianą inicjatywę promują efektywniejszą obsługę zasobów strony.
• Mniejszy współczynnik odbicia i wydłużony czas przebywania na stronie – czas ładowania ma oprócz tego duży wpływ na współczynnik odbicia. 53% osób opuści daną witrynę, jeśli jej załadowanie zajmuje więcej niż 3 sekundy. Szybszy czas ładowania sprawi też, że odwiedzający spędzą więcej czasu, korzystając z witryny. O jakiej poprawie mówimy? Jedno z badań autorstwa Forrester Consulting Total Economic Impact (zrealizowane na polecenie Google) wykazało, że AMP prowadzi nawet do dwukrotnego wzrostu czasu spędzonego na stronie!
• Obecność w karuzeli Google – jedną z większych zalet stron AMP jest to, że są one promowane w karuzeli Google, która prezentuje najbardziej trafne wyniki wyszukiwania na samej górze SERP-ów. Zawarte tam odnośniki są szczególnie atrakcyjne dla użytkowników urządzeń mobilnych.

AMP vs. RWD (Responsive Web Design) – różnice

Jeśli mowa o dostosowywaniu stron pod urządzenia mobilne, zapewne spotkałeś się z terminem RWD, czyli tzw. responsywnymi stronami. Tworzenie witryn zgodnie z tą techniką także od wielu lat jest już priorytetowe. Jego celem jest takie dostosowywanie stron, aby z powodzeniem wyświetlały się na każdym rodzaju urządzenia niezależnie od jego rozdzielczości i rozmiarów.

Jakie są główne różnice między przyspieszonymi stronami mobilnymi a RWD? Przyjrzyjmy się im bliżej:

• RWD skupia się na elastyczności – responsywne strony mają być przede wszystkim elastyczne. Oczywiście cecha ta ma szczególne zastosowanie w przypadku urządzeń mobilnych, ale nie ogranicza się tylko do nich – w końcu obecnie przeglądamy Internet na monitorach czy nawet telewizorach o różnej rozdzielczości i przekątnej. RWD polepsza user experience we wszystkich przypadkach.
• AMP skupia się na szybkości – jak już wspomnieliśmy, inicjatywa AMP skupia się na szybkości w kontekście stron mobilnych, wykorzystując w tym celu różne techniki jak style inline, leniwe ładowanie czy wstępne ładowanie zasobów.
• AMP działa ze stroną, RWD zastępuje stronę – chociaż da się korzystać wyłącznie z AMP na swojej stronie, to możliwe jest także dodanie wariantu AMP do już istniejącej, nieresponsywnej witryny bez konieczności jej redesignu. Jeśli jednak chcesz wprowadzić RWD, potrzebny jest całościowy redesign już istniejącej strony.
• Na AMP nałożone są restrykcje dotyczące JavaScript – Responsive Web Design akceptuje wszystkie zewnętrzne skrypty i biblioteki. Tego samego nie można z kolei powiedzieć o stronach AMP. Aby spełnić swój cel (szybkie ładowanie stron), omawiany framework nakłada bardzo duże ograniczenia dotyczące JavaScript oraz CSS.

Strony AMP – podsumowanie

AMP to inicjatywa, która jest bardzo pomocna w kontekście tworzenia stron internetowych, szczególnie tych kładących bardzo duży nacisk na mobile. Implementacja AMP lub RWD to świetna inwestycja, która może znacznie pomóc w dotarciu do nowych użytkowników.