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:
- Szybkość ładowania strony,
- Wpływ na ranking indeksowania,
- Odciążenie własnego serwera,
Minusy:
- Ograniczenie wpływów z reklamy na stronie (AMP umożliwia reklamy, jednakże mocno je ogranicza),
- Statystyki odwiedzin są ograniczone,
- 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