Jak przyspieszyć wordpressa na telefonach komórkowych – AMP

26 października 2017

W dzisiejszych czasach w szczególności na telefonach komórkowych strony internetowe są przeładowane informacjami nawet RWD (Responsive Web Design) nie bardzo pomaga.

Zobacz co można z tym zrobić

Włączając stronę na telefonie komórkowym w 80% przypadków, poszukuję rozwiązania mojego konkretnego problemu. Pozostałe 20% to cel typowo rozrywkowy, który w tym artykule pominę. Pewnie tak jak Ciebie, tak i mnie denerwują wyskakujące popupy, informacje o zapisach do newsletterów i wszędobylskie reklamy. Masa niepotrzebnych informacji, która jest ładowana do pamięci telefonu i spowalnia działanie przeglądarki.

AMP (Accelerated Mobile Pages) – jako rozwiązanie Twojego problemu

A teraz wyobraź sobie, że Google w październiku 2015 roku przedstawiło technologię o nazwie AMP (Accelerated Mobile Pages). W skrócie technologia AMP poprawia wydajność ładowania zawartości stron i reklam na nich zamieszczonych, a do tego standaryzuje jednostki reklamowe na stronach tego typu. Wiesz, że już rok po wydaniu, technologia generowała 7% całego ruchu internetowego dla największych wydawców w USA (dane na postawie badania firmy Adobe z lutego 2017 roku). Dodatkowo Google promuje strony wykonane w tej technologii podczas wyszukiwania na urządzeniach mobilnych.

Potrzebujesz niecałe 87 sekund, aby wdrożyć AMP

  1. Pierwszą czynnością jest zainstalowanie wtyczki do AMP. W WordPressie mamy do wyboru kilka różnych, ale na potrzeby artykułu wybierzemy najpopularniejszą. Klikamy Wtyczki i później Dodaj nową
  2. Następnie w okienku wyszukiwania wpisujemy AMP wybieramy wtyczkę AMP for WordPress
     

Klikamy Zainstaluj i Włącz. I w zasadzie to prawie wszystko Twoja strona na WordPressie korzysta z technologii AMP prawda, że proste? Jeśli korzystasz z wtyczki YOAST polecam zainstalować wtyczkę Glue for Yoast SEO & AMP autorstwa Joost de Valk. Wtyczka poza tym, że pozwala zoptymalizować SEO na stronie, to umożliwia także ustawienie kolorystyki na stronach typu AMP.

 Przykład strony opartej o AMP

Autor Damian Ślimak

Technologiami internetowymi zajmuję się już ponad 14 lat. Przez te kilkanaście lat pracowałem jako project manager, analityk biznesowy w korporacji. Od 6 lat jestem właścicielem agencji content marketingowej Mediapilot.pl, a od 2017 roku jestem wykładowcą na Uniwersytecie Jana Długosza w Częstochowie.

10 komentarzy

  1. Avatar

    Dobry cache z systemem minify, optymalizacją obrazków i CDN 😉

    Odpowiedz
    • Avatar

      Tak zgadza się, ale zagadnienia które opisujesz to trochę bardziej zaawansowany sposób, będzie o tym artykuł albo nawet wideo i pułapkach czekających przy tych działaniach. Tutaj pokazuje mały pokazuje tylko mały trik który pomaga osiągnąć lepsze pozycje.

      Odpowiedz
      • Avatar

        To jest rozwiązanie, ale niestety wymaga opracowania unikatowego layoutu, żeby strona wyglądała atrakcyjnie i spójnie. Włączenie AMP przez wtyczkę pakuję wszystkie treści do jednego wora. W mojej opinii lepiej skorzystać z dobrze przygotowanej strony RWD ze zoptymalizowanymi treściami i sensownym cache.

        Odpowiedz
        • Avatar

          Tak RWD jak najbardziej, ale AMP ma przewagę bo google takie strony promuje, nawet dając pioruna w wynikach wyszukiwania.

          Odpowiedz
          • Avatar

            Oczywiście masz rację. AMP zasadniczo się nie ładuje – AMP się po prostu wyświetla 😉 Ciężko jest mi sobie jednak wyobrazić uruchomienie AMP dla klienta, który ma problem ze zrozumieniem responsywnej natury www i konsekwencji wynikającej z tego faktu przy podejmowaniu decyzji związanych z formatowaniem, obrazami i tekstami. Jeśli dla urządzeń mobilnych wyświetla się najważniejsze informacje wsadzone w jedną kolumnę to AMP idzie znacznie dalej i bezlitośnie wywala wszystko co tylko możliwe.

            Da się to zrobić rozsądnie. Ale niestety nie z automatu – wdrożenie takiego rozwiązania zgodnie z identyfikacją wizualną marki oznacza zbudowanie osobnej architektury treści, szablonu styli, etc.

            Mam wątpliwości czy ten standard się upowszechni. Z jednej strony strategia Google jest dla mnie zrozumiała, z drugiej jednak wiem, że mając swoje zasoby mogliby opracować np. jakiś sprytny mechanizm keszujący strony RWD zamiast pchać na siłę kastrata w postaci AMP.

          • Avatar

            Jak jest i działa to trzeba korzystać :D. Oczywiście nie na wszystkich stronach a tylko na postach choć widziałem szaleńców co wdrażali na całych serwisach. Dla klienta spokojnie można uruchamiać tylko trzeba dobrze wytłumaczyć po co to jest i dlaczego. O przyszłość technologi się nie boje ostatnio nawet czytałem o ALP (Ad Landing Pages)

          • Avatar

            Niech będzie, że nie jestem uparty – w przyszłym tygodniu przetestuję na sobie 😉

          • Avatar

            Dobra, uruchomione, Google je widzi. Z Yoastem można popchać też własny CSS, co jest bardzo przydatne. Do wpisów powinno wystarczyć, ale niestety żeby dobrze dopasować layout trzeba się na dzień dzisiejszy mocno nagimnastykować. Docelowo pewnie podsystem szablonów WP będzie wspierał osobne templatki w źródłach odpowiedzialne za renderowanie AMP – na dzień dzisiejszy to trochę proteza wspierana protezą Glue for Yoast. No ale fakt – działa.

            Są jakieś mierzalne zyski z tego formatu pod kątem SERP?

  2. Avatar

    Niestety, nie takie proste 🙁 Test Google podaje błędy, a co najgorsze – nie mam pojęcia gdzie, w jakich plikach to poprawić 🙁 Konkretnie: Zabronione lub nieprawidłowe użycie tagu HTML, Nieprawidłowy arkusz stylów CSS oraz Nieprawidłowe wykorzystanie tagów AMP. Chyba jakieś działające wtyczki coś „mieszają” 🙁 Na pewno 1 błąd dotyczy fontów z Jetpack…

    Odpowiedz
    • Avatar

      Pokaż stronę zobaczymy co można zrobić. Pewnie kilka poprawek kodu i wszystko będzie ok

      Odpowiedz

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *