O standardzie AMP lubię mówić, że jest to krok dalej niż responsywność. O ile w Responsive Web Design chodzi o to aby strona dobrze się wyświetlała na urządzeniach mobilnych, o tyle projekt AMP jest do nich specjalnie przygotowywany.

Założenie stron AMP jest bardzo proste: strona ma działać szybko nawet przy korzystaniu z sieci komórkowej. Wodotryski nie mogą spowalniać ładowania się tekstu i innych istotnych treści. Co za tym idzie, można np. zacząć czytać jakiś artykuł a dołączone zdjęcia dyskretnie ściągną się w tle.

Projekt AMP (w skrócie Accelerated Mobile Pages) to inicjatywa głównie Google i Twittera. Ma ona na celu zwiększyć wygodę korzystania z internetu, która najprościej mówiąc polega na przyspieszeniu działania stron. Strona nie dość, że szybko się wczytuje, kiedy klikamy na nią w wyszukiwarce to jeszcze błyskawicznie można się przełączać pomiędzy jej podstronami.

Skąd bierze się ta szybkość?

Rozwiązanie problemu dłużej ładujących się stron jest bardzo proste. Po pierwsze: niektóre elementy, które wpływały na opóźnienia w renderowaniu się stron w przeglądarce zostały całkowicie zabronione. Stosując niedozwolony element nasza strona po prostu nie przejdzie walidacji i nie będzie zgodna z AMP.

Druga sprawa dotyczy ograniczenia stosowania można by powiedzieć „złych manier” twórców stron. Można do nich zaliczyć nadmierne stosowanie arkuszy CSS (które często mają dodatkowe odwołania HTTP) i kodu JavaScript.

Po trzecie: specjalny skrypt AMP powoduje, że ściągane zdjęcia ładują się wtedy kiedy trzeba, tzn, jeżeli przewiniemy widok w miejsce gdzie faktycznie występują. To wszystko jest fajnie przemyślane, bo z góry zarezerwowane miejsce dla tych zdjęć zapobiega „skakaniu” widoku, co po dziś dzień czasem widać na źle zoptymalizowanych stronach.

Po czwarte: strony te są przechowywane bezpośrednio na serwerach Google (coś w rodzaju pamięci podręcznej i CDN).

Google w Narzędziach dla Webmasterów (GWT) pokazuje które strony zdały poprawnie test jakościowy i są już indeksowane:

Pozycjonowanie

Nie dość, że strony mają lekko polepszone pozycje w wyszukiwarce to jeszcze strony AMP są dodatkowo oznaczone w wynikach wyszukiwania:

amp zrzut ekranu

Dzięki temu strony ze znaczkiem AMP są częściej klikalne i na zasadzie pozytywnych wzmocnień będą w przyszłości jeszcze częściej klikalne. W skrócie: wyższe pozycje, wyższy CTR (czyli znowu wyższe pozycje), większa oglądalność, większa sprzedaż.

Zalety stron AMP

  • Szybkie działanie powoduje, że ze stron „chce się korzystać”. Strony przełączają się błyskawicznie co powoduje większe zaangażowanie użytkowników,
  • Strony wykonane w standardzie AMP są bardziej czytelne z powodu ograniczeń nałożonych na twórców stron,
  • Oszczędność transferu (korzyść dla użytkownika korzystającego z płatnej lub limitowanej transmisji danych) strony AMP zawierają mniej dodatków, które nie stanowią bezpośrednio treści strony internetowej,
  • Obciążenie łącz serwerów spada dokładnie z tego samego powodu co wyżej,
  • Zwiększa świadomość twórców jak ważne jest budowanie zoptymalizowanych i użytecznych stron internetowych,
  • Przeglądanie stron na telefonie ze stosunkowo słabym łączem jest łatwiejsze niż kiedykolwiek,
  • Oszczędność baterii dla urządzeń mobilnych. Brak niestandardowych skryptów powoduje, że strona ma mniejsze wymagania od jednostki obliczeniowej.

Wady stron AMP

  • brak możliwości wykorzystania niestandardowego kodu JavaScript (przecież nie każda linijka opóźnia lub zmniejsza wydajność strony internetowej) a tym samym zaawansowanej analityki lub testów A/B,
  • utrudniona integracja z usługami zewnętrznymi – skrypt PHP musi zwracać odpowiedni nagłówek i wysyłać informację w formacie JSON,
  • uproszczone i zbyt surowe UI z powodu limitu objętości plików CSS,
  • utrata tzw. spójności identyfikacji marki – strona AMP ma zazwyczaj inny wygląd to może wprawiać w zakłopotanie użytkowników którzy korzystali ze stron AMP i standardowej,
  • widoczny adres google.com w pasku adresu,
  • opóźnienie w aktualizacji wersji AMP przechowywanej w pamięci cache.

Mity odnośnie stron AMP

  • strony AMP osiągają wyższy współczynnik konwersji – przecież jest zupełnie przeciwnie co pokazałem w teście i na wykresach (po usunięciu AMP współczynnik odrzuceń zmalał a współczynnik konwersji wzrósł )
  • na stronach AMP nie można wykorzystywać formularzy – przecież z łatwością można, jest do tego gotowy komponent amp-form i zrobiłem przewodnik jak stworzyć obsługę formularzy na stronach AMP
  • AMP jest tylko do stron statycznych – przecież AMP dotyczy front-endu a nie back-endu – istnieją nawet gotowe wtyczki do WordPressa – blog to idealny przykład strony dynamicznej (czytaj: czym się różni strona statyczna od strony dynamicznej).
  • AMP polepsza / pogarsza wyniki wyszukiwania – nieprawda, usunąłem AMP ze strony po dwóch latach używania i pozycje nawet nie drgnęły a mam ruch na tyle duży że mogę to uznać zasadność testu empirycznego,
  • Wdrożenie AMP to duży koszt i duża ilość pracy – wdrożenie AMP w WordPressie to kwestia kilku kliknięć – chyba że celem jest stworzenie od postaw – sklepu internetowego AMP – czego dokonałem ponad rok temu.

Testowanie stron AMP

Testowałem na blogu (którego właśnie czytasz) strony AMP przez 2 lata (dokładnie od 1 lipca 2017 do 17 maja 2019) z wykorzystaniem systemu WordPress. Wykorzystałem gotową wtyczkę AMP for WordPress.

Testowanie przyspieszonych stron mobilnych AMP - wykres ruchu

Faktycznie, szybkość pojawiania się strony niemal w chwili dotknięcia wyniku wyszukiwania dawała pewnie wszystkim wiele satysfakcji a moje artykuły były czytane na urządzeniach mobilnych. Tak jak widać na powyższym wykresie wdrożenie wersji AMP nie zaszkodziło ruchowi i rozwojowi mojego bloga. Problem w tym, że zajmuję się stronami internetowymi a ta wtyczka nie pozwalała na stu procentowe dostosowanie wyglądu i funkcjonalności dokładnie tak jak chcę. Nie lubię iść na żadne kompromisy a tym bardziej jeśli w grę wchodzi moja strona i moi czytelnicy.

Przykład strony AMP

Z wiadomych przyczyn nie mogłem dostosować strony tak jak chcę. Po drugie, tak jak wspomniałem, wygląd tej strony i dostępnych gotowych szablonów jak i tych dostępnych we wtyczce… szału nie robi. Chciałem dostosować stronę do brutalistycznych trendów w web designie:

Nowa strona miała paradoksalnie lepszy wynik – 100 procent w PageSpeed Insights niż ta wersja AMP 😉 (pełna stówa) – postanowiłem ostatecznie zrezygnować z AMP.

Wdrożenie strony AMP

Pierwszą techniką jest stworzenie strony AMP od podstaw. Jest to stosunkowo łatwe z wykorzystaniem oficjalnej dokumentacji, wszak samo założenie prostoty stron AMP nie zmusza do nadmiernego wydziwiania zarówno w UI i jak po stronie back-endu. Podejście to pozwala dostosować wygląd strony do nowych trendów unikając gotowych szablonów z wtyczek i kreatorów.

Drugą techniką jest wykorzystanie wtyczki do popularnego CMSa. Zaletą jest szybkie wdrożenie niemal darmowe, wadą jest to że strona wygląda jak zaplecze. Jeżeli posiadamy stronę z newsami to jakoś obejdzie natomiast na stronach firmowych jest to według mnie nie do przyjęcia. Godzi w honor i wizerunek firmy.

Trzecią techniką może być stworzenie strony AMP za pomocą kreatora stron AMP. Strona taka powstanie szybko natomiast wadą jest ograniczenie do możliwości kreatora.

Rozwój projektu AMP na przestrzeni lat

Przez 6 lat rozwój projektu AMP wyglądał następująco:

  • Październik 2015:
    Google zapowiada projekt AMP,
  • Luty 2016:
    Pierwsze wyniki stron AMP pojawiają się w TOP Stories.
  • Wrzesień 2016:
    Strony AMP pojawiają się w wynikach wyszukiwania z charakterystyczną błyskawicą.
  • Sierpień 2017:
    Korzyści związane z szybkością są przenoszone na reklamy.
  • Luty 2018:
    Wprowadzenie AMP Stories i AMP Email.
  • Grudzień 2018:
    Wydanie oficjalnej wtyczki AMP dla WordPressa,
  • Kwiecień 2019:
    Umożliwiono korzystanie z niestandardowego JavaScript
  • Maj 2021:
    Strony AMP przestają być promowane w wynikach wyszukiwania – od tej pory każda strona z dobrym wynikiem Core Web Vitals może być wyświetlona w Top News. W wynikach znika także znak błyskawicy AMP.

Wdrożyłeś AMP i chcesz usunąć ją z wyników wyszukiwania

Czytaj mój poradnik jak usunąć wersję AMP zgodnie z SEO, aby nie stracić pozycji ruchu i dobrego user experience.

Podsumowanie

Nie ważne jak wspaniały tekst napiszemy. Jeżeli będziemy zmuszać użytkowników korzystających z telefonu do dłuższego oczekiwania na załadowanie się naszych stron w porównaniu do stron konkurencji to raczej będziemy na tym tracić.

Cieszę się, że taka inicjatywa powstała. Zawsze przy projektowaniu stron liczę kilobajty i wierzę w to, że strony lekkie i zoptymalizowane dają dużo więcej frajdy z przeglądania niż te, w których nacisk położono na ciężkie pokazy slajdów, filmik w tle i przeróżne animacje przy przewijaniu. W przypadku AMP nie musimy całkowicie rezygnować z „efektów”. Można na dzień dzisiejszy stworzyć automatycznie generowaną, alternatywną wersję strony dla użytkowników mobilnych.

Z drugiej strony biorąc pod uwagę moje potrzeby po dwóch latach zrezygnowałem z AMP. Na prostych stronach informacyjnych i blogach AMP może być fajną szansą do wybicia się – zresztą tak jak to zrobiłem dwa lata temu. Obecnie nie ma sensownego powodu aby w jakiejkolwiek sytuacji tworzyć stronę AMP.

Przykładowe strony w AMP:

Źródła:

Oceń artykuł na temat: Projektowanie stron w standardzie AMP
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 60