AMP jak przyśpieszyć stronę i zyskać w rankingach Google

AMP, czyli przyśpieszone strony mobilne (Accelerated Mobile Pages), jest technologią rozwijaną przez Google. W zamierzeniu strony przygotowane w tej technologii winny ładować się wręcz natychmiastowo, tak żeby wrażenia użytkowników (tzw. user experience) urządzeń mobilnych były jak najlepsze. W ten sposób możemy zwiększyć udział użytkowników powracających na nasze strony i chcących skorzystać z naszych usług.

Efekt ten możemy osiągnąć dzięki restrykcyjnym zasadom, które w sposób drastyczny ograniczają wagę strony i nakazują wyrzucić wszelkie dodatki spowalniające jej ładowanie. Wyrzucamy wszystkie skrypty JS, możemy skorzystać jedynie ze skryptów narzuconych przez Google i standard AMP. Ograniczona jest wielkości bibliotek stylów. Zdjęcia są optymalizowane i ładowane przez lazy loading. Czyli jak dotąd nie odkryto niczego nowego, wszystkim wiadomo, że zbyt duże zdjęcia, przeładowane niepotrzebne/nieużywane biblioteki stylów, liczne skrypty opóźniające załadowanie strony mają negatywny wpływ na prędkość naszej witryny. Jednakże do tego katalogu ograniczeń dochodzi jeszcze jedna kwestia: nasza strona AMP po skatalogowaniu jej przez Google jest zapisywana w na serwerze Cache i gdy użytkownik trafi na naszą stronę AMP przez wyszukiwarkę Google, to jest ona serwowana nie z naszego serwera, a z właśnie z tego Cache, co zapewnia nam naprawdę błyskawiczne działanie.

Właśnie ten Cache najczęściej budzi kontrowersje, ponieważ użytkownik odwiedza nie nasz serwer, a Cache Google. Pamiętajmy jednak, że ma to również swoją pozytywną stronę w postaci mniejszego obciążenia serwera (nie musimy korzystać z płatnego CDN) oraz szybszego ładowania strony.

Powszechnie powoływane plusy AMP to:

  1. Szybkość ładowania strony,
  2. Wpływ na ranking indeksowania,
  3. Odciążenie własnego serwera,

Minusy:

  1. Ograniczenie wpływów z reklamy na stronie (AMP umożliwia reklamy, jednakże mocno je ogranicza),
  2. Statystyki odwiedzin są ograniczone,
  3. Przerzucenie części ruchu na cache Google.

Do listy minusów należy doliczyć również czas niezbędny na przystosowanie strony do standardu AMP. O ile w przypadku niewielkiej strony przygotowanie dla niej wersji AMP może zająć od 4 do 8 godzin pracy, to w przypadku większych serwisów czas ten będzie już wielokrotnie dłuższy. Dostosowanie strony do wersji AMP wymaga między innymi:

  • znacznego obcięcia plików CSS, ponieważ standard AMP narzuca ograniczenie ich wielkości. To oznacza, że trzeba prześledzić, które klasy znajdujące się w plikach CSS są rzeczywiście używane na stronie,
  • wyeliminowania z plików HTML wszystkich stylów inline i zastąpienia ich ostylowaniem poprzez atrybuty class i id
  • wycięcia parametru !important z plików CSS
  • zastąpienia niektórych tagów jak np. img iframe tagami proponowanymi przez standard AMP,
  • usunięcia wszystkich skryptów JS i zastąpienia ich bibliotekami i efektami proponowanymi przez AMP.

Jeżeli na stronie korzystamy z wywołań via AJAX i odpowiedź na zapytanie następuje w formacie HTML czy JS, musimy dla wersji AMP przygotować nowe wywołania (zgodne ze standardem AMP), a odpowiedź na nie winna być w formacie JSON, z którego wyciąć należy prawie wszystkie tagi HTML (jako bezpieczne uznawane są jedynie tagi stylujące jak <b>, <i> <ul> itp.).

To tylko niektóre z ograniczeń wynikających z AMP, dlatego najlepiej przygotowanie wersji AMP wziąć pod uwagę już na etapie tworzenia templatek strony, gdzie możemy od razu zwrócić uwagę na używane w plikach css klasy, czy przemyśleć, które skrypty są nam rzeczywiście potrzebne, ponieważ w wersji AMP będziemy musieli je wyciąć i zastąpić przygotowanymi przez Google.

Z perspektywy przygotowania już kilku stron do standardu AMP, uważam że jest to dobry trend nie tylko z uwagi na wpływ na ranking Google czy prędkość ładowania, ale również pozytywny wpływ na dyscyplinę developera. Obecnie strony są przeładowane zbędnymi efektami, które powodują trudności w nawigacji, jak również w odbiorze treści znajdujących się na stronie. AMP natomiast w znacznym stopniu to ogranicza.

Jeżeli jeszcze macie wątpliwości, to z AMP korzysta eBay, Zalando, AliExpress, Reddit, Pinterest, Twitter, Bing... Jak chwali się Google, serwisy korzystające z wersji AMP odnotowują znaczny wzrost odwiedzin i powracających użytkowników.. Tracking the Accelerated Mobile Pages (AMP) Project