AMP – co to jest i w czym pomaga?
Standardy podczas tworzenia stron internetowych odnośnie urządzeń mobilnych znacznie wzrastają. Jeśli jesteśmy użytkownikiem smartphone, pragniemy szybko wyszukać potrzebną nam informację. Niestety bardzo często strony ładują się zbyt wolno lub nawigacja jest zbyt przeciążona, co odczuwamy znacznym opóźnieniem przepływu informacji. Są to najczęstsze problemy współczesnych stron mobilnych. Istnieje jednak kilka sposobów by je zmodernizować. Dowiedz się, co to jest AMP!
AMP. Co to jest?
AMP – Accelerated Mobile Pages – stał się standardem kodowania open-source dla wydawców, którzy mogą wprowadzać autorskie modyfikacje oraz udoskonalenia.
AMP pomaga szybko renderować strony www, które posiadają statyczne treści. Wdrożenie standardu Accelerated Mobile Pages umożliwia dopasowywanie zawartości strony do parametrów technicznych narzędzi, takich jak rozdzielczość oraz wielkość ekranu. Dzięki temu użytkownik ma zapewnioną szybkość oraz swobodę w przeglądaniu stron internetowych.
AMP a Google
AMP HTML
- To rozszerzenia oraz wskazówki dla kodu strony. Zapewniają one publikację dotychczas dodanych treści zgodnie z wymogami stron mobilnych.
- Jest to podzbiór HTML, by tworzyć treści na stronie, takie jak artykuły prasowe, oraz zapewnia podstawowe zasady wydajności.
- Nakłada ograniczenia na zestawy tagów oraz ich funkcjonalność, jednak nie wymaga tworzenia nowych silników renderujących, ponieważ istniejące aplikacje użytkownika mogą renderować HTML AMP.
AMP JS
- Biblioteki JavaScript implementują najlepsze zachowania AMP, które dotyczą wydajności. Dzięki temu stają się odpowiedzialne za ładowanie zasobów, a także zapewniają własne tagi, które pomagają skrócić czas ładowania się strony. Ta optymalizacja polega przede wszystkim na zwiększeniu zasobów wczytywanych w sposób asynchroniczny, tak by nie opóźniać renderowania się strony.
Dlaczego Google zwraca uwagę na AMP na stronach?
Jakiś czas temu zauważono, że liczba witryn internetowych, które posiadają dopasowaną wersję mobilną jest bardzo niska. Użytkownicy korzystają z portali, które nie spełniają ich oczekiwań oraz nie są dopasowane do ich wymagań. Taki brak kompatybilności powoduje wiele komplikacji, jak brak możliwości zapoznania się z pełnym przekazem dostępnym na stronie, konieczność powiększania strony i wytężania wzroku.
Wszystkie te problemy składają się na dużą skalę odrzuceń. AMP w Google ma rozwiązać ten problem i zapewnić e-commerce szybkie strony, które spełnią oczekiwania użytkowników.
Jak działa AMP?
AMP oraz przyspieszenie ładowania stron jest możliwe dzięki kolekcjonowaniu całej podstrony przez cache Google. To właśnie dlatego AMP działa wyłącznie w przypadku stron statycznych. Gdy otwieramy link kierujący do strony, która posiada już wdrożone rozszerzenia AMP zostajemy przekierowani do witryny znajdującej się pod adresem Google.
By skorzystać z Accelerated Mobile Pages należy zweryfikować swoją witrynę w Google Search Console a także ściśle przestrzegać reguł, które ściśle określa Google odnośnie witryn AMP. Technologia działa we wszystkich najnowocześniejszych przeglądarkach oraz jest wspierana przez serwisy takie jak:
- Twitter,
- Linkedin,
- Yahoo,
- Pinterest.
SEO a AMP
Podczas wdrażania na witrynie internetowej Google AMP musimy pamiętać o komforcie oraz wygodzie użytkowników, którzy korzystają z naszego serwisu. Google uważa, że AMP nie ma wpływu na SEO, jednak wydaje się nie być to do końca prawdą.
Samo AMP nie musi mieć wpływu na SEO – ale poprawienie szybkości wczytywania stron internetowych już tak. Dodatkową zaletą stosowania AMP jest możliwość wyświetlania wszystkich naszych artykułów w karuzeli Google News, co jest uzupełnieniem promocji naszych wpisów w sieci oraz możliwość pozyskiwania większej ilości nowych klientów.
Wdrożenie AMP na stronie: na co zwrócić uwagę?
Podczas wdrażania AMP na swoją stronę należy pamiętać by zachować co najmniej dwie wersje Twojej strony, oryginalną, czyli tą, którą zobaczą użytkownicy, oraz wersję AMP strony.
AMP nie pozwala na takie składowe jak elementy formularzy czy JavaScript stron trzecich. Również multimedia powinny być traktowane specjalnie: obrazy muszą wykorzystywać elementy niestandardowe jak amp-img oraz zawierać bardzo wysoką jakość. Powinniśmy także pamiętać, że jeśli posiadamy obrazy animowane gify musimy dodać specjalne rozszerzenie amp-anim.
Istnieje niestandardowy tag, który powinniśmy wdrażać do osadzania lokalnych, hostowanych filmów wideo poprzez HTML5, nazywany jest wzmacniaczem video. Wprowadzono również wsparcie dla pokazów slajdów za pomocą amp-karuzeli oraz lightboksów obrazu.
By Google wykrył wersję AMP, powinieneś zmodyfikować oryginalną wersję i wprowadzić odpowiedni tag.
<link rel="amphtml" href="http://www.przyklad.com/blog-post/amp/">
Zalety korzystania z AMP
- Więcej konwersji – nikt z nas nie lubi czekać na treści, które są nam dostarczane przez internet. Nawet minimalne opóźnienie negatywnie wpływa na odbiorcę. AMP zmniejsza czas, który jest nam potrzebny do wyświetlania strony, co znacznie wpływa na doświadczenie użytkownika (UX). Dzięki temu staje się on bardziej zachęcony do przeprowadzania większej ilości działań na stronie.
- Oznaczenia specjalne – podczas korzystania z przeglądarki Google na urządzeniu mobilnym, możemy natknąć się na znak pioruna przy niektórych wynikach. Jest to informacja dla użytkownika o stosowaniu danej strony pod kątem wydajności oraz weryfikacji. Właśnie takie wyniki przyciągają uwagę użytkowników oraz są przez nich chętniej klikane. Podsumowując, dzięki temu strony będą na wyższych pozycjach, uzyskają większe CTR oraz zwiększy się ich oglądalność oraz sprzedaż.
- Zwiększona widoczność – wszystkie strony dbają o to by SEO było na jak najwyższym poziomie. Gdy prowadzimy na przykład serwis z wiadomościami, stajemy się nagradzani, jeśli używamy technologii AMP. Wtedy Google umieszcza nasz artykuł w specjalnej karuzeli, nad organicznymi wynikami. Taki układ daje znaczną przewagę w walce o użytkowników.
AMP. Podsumowanie
Technologia AMP w bardzo łatwy sposób umożliwia przyspieszenie wczytywania się stron mobilnych. Często jednak ze względu na jego specyfikę, pomyślne wdrożenie w przypadku większości może okazać się zbyt kosztowne i dokładać dużej ilości pracy. Może z kolei okazać się przydatne dla właścicieli małych portali internetowych, dla których wdrożenie standardu AMP nie powinno wymagać zbyt dużej ilości dodatkowej pracy.
Wady AMP | Zalety AMP |
Ograniczenia JavaScript | Więcej konwersji |
Duży koszt | Specjalne oznaczenia |
Duża ilość pracy | Większa widoczność |
Ten wpis jest aktualizacją treści z 23 maja 2019 roku.
Wprowadziłem AMP u siebie. Dodatkowo wprowadziłem również Yandex Turbo Pages. Zdecydowanie wpłynęło to na UX, szybkość wyczytywania strony jest 2x lepsza. Moim zdaniem wersja AMP strony jest łatwiejsza w obsłudze, niż wersja bez AMP (możecie sprawdzić u mnie na stronie). Pozdrawiam. 🙂
A czy adresy amp, powinno być dodatkowo wdrożone w sitemapie? Czy wystarczy link: rel=”amphtml” ?
Póściłem screaming froga na mojej stronie, która ma AMP i on nie widzi tych linków.
To jest chyba przykład z ciekawym wdrożeniem witryny z AMP, Widać więc że sprawdza się na przykładzie blogów tematycznych http://e-pogrzeby.pl/amp/
Moje doświadczenia z AMP są takie, że strony mobile są tylko wtedy szybsze, bo bardziej ubogi w rozbudowania elementów. Jak wyłączyć reklamy google na stronie to czy jest tam AMP czy go nie ma prędkość jest ta sama. Tylko pomaga to w przypadku reklam jeśli też mają kody zgodne z AMP. Natomiast tworzy to licznie niezgodności strony z dodatkami, problemy w wizualizacji. Testowałem AMP przez około 5 miesięcy, nie miało to żadnego przekładu na pozycję strony tylko na problematykę jej działania – zwiększając ją. Dlatego sądzę że strony responsywne to lepsze rozwiązanie niż AMP.