Projektowanie stron w standardzie AMP

Web Design Blog

Kategoria:
Web

Data publikacji:
1 lipca 2017

Ostatnia aktualizacja:
12 czerwca 2019

Autor:
Paweł Mansfeld

Projektowanie stron w standardzie AMP

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, kreatora lub skorzystanie z szablonu. 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. Adres google.com po wejściu na taką stronę też może wprawiać użytkowników w małe zakłopotanie.

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.

Jeżeli chcesz stworzyć stronę internetową lub sklep zgodny ze standardem AMP zapraszam do kontaktu.

Przykładowe strony w AMP:

https://www.ampstart.com/

Źródła:

https://www.ampproject.org/

Projektowanie stron w standardzie AMP Projektowanie stron w standardzie AMP 4.7 na 5 na podstawie 59 ocen Projektowanie stron w standardzie AMP