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

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.6 (92.86%) głosów: 56

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

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