Web Design Blog / Web:

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).

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

projektowanie stron amp gwt

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,
  • Polepszenie pozycji strony w wyszukiwarce. Google nagradza strony, które przyczyniają się do rozwoju projektu, lekko podnosząc je w wynikach wyszukiwania.

 

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.

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
4.56 (91.18%) głosów: 34

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail