Google, strony mobilne i pozycjonowanie
Upowszechnienie się urządzeń i internetu mobilnego na przestrzeni ostatnich lat sprawiło, że ich rola we współczesnym społeczeństwie znacząco wzrosła. Jako konsumenci coraz częściej korzystamy ze smartfonów i tabletów, żeby wyszukiwać informacje, czerpać rozrywkę, komunikować się i przeglądać oferty handlowe. Wygoda tego rozwiązania i świadomość stałego dostępu do informacji sprawiają, że oglądamy ten wirtualny świat niemal w każdej wolnej chwili.
Z punktu widzenia marek, to niezwykle korzystny trend – dzięki niemu mogą towarzyszyć klientowi niemal w każdym momencie. Jednocześnie zjawisko to pociąga za sobą niezwykle istotną konsekwencję – jeszcze bardziej maleje cierpliwość użytkownika i ilość czasu, jaki chce poświęcać, czekając np. na załadowanie się strony. Przeprowadzone analizy pokazują, że bounce rate (z ang. wskaźnik odrzuceń) rośnie powyżej 58% na stronach, które wczytują się dłużej niż 10-15 sekund.
Paradoksalnie bardzo duża część stron firmowych nie jest dostosowana do urządzeń mobilnych. Treść i grafiki wolno się wczytują, czcionki są relatywnie małe, klikanie przycisków jest niewygodne itd. Ograniczona powierzchnia ekranów urządzeń przenośnych, wymuszają przeprojektowanie i adaptację serwisów www. Niestety zdarza się, że firmy ignorują potrzeby oraz oczekiwania użytkowników.
Od jakiegoś czasu sprawę w swoje ręce wzięło samo Google, stopniowo forsując i niejako wymuszając na właścicielach stron adaptację do „nowej” rzeczywistości. W tym celu wykorzystywane są przede wszystkim algorytmy pozycjonujące. Szybkość ładowania strony czy posiadanie wersji mobilnej (lub RWD) stały się czynnikami wpływającymi na wyniki osiągane w wyszukiwarce. Zdając sobie sprawę z powiązań pomiędzy zachowaniami konsumenckimi a mobilną rzeczywistością, Google uruchomiło projekt – AMP (Accelerated Mobile Pages).
Z tego względu AMP staje się także istotne z punktu widzenia SEO. W ostatnim roku Google wprowadziło sporo zmian w algorytmach pozycjonujących. Spora część z nich dotyczyła wspomnianej już szybkości wczytywania się stron www. Obecnie te, które osiągają słabsze wyniki, mają większe prawdopodobieństwo spadków w pozycjach na wybrane słowa kluczowe. Wdrożenie rozwiązań AMP, może wyraźnie poprawić ich sytuację. Nie zapominajmy też, że jest to rozwiązanie Google – nie można zatem zupełnie wykluczyć tego, że chce promować serwisy, które je stosują.
Wydaje się zatem, że wdrożenie AMP jest bardzo dobrym rozwiązaniem – zarówno pod kątem doświadczeń użytkowników, jak i pozycjonowania. Zanim jednak rzucimy się w wir zmian, pamiętajmy o ważnej rzeczy, która sprawi, że nie zaszkodzimy naszym własnym działaniom SEO. Bez względu na to czy chcemy zachować zarówno stronę AMP, jak i nie-AMP lub będziemy posługiwać się tylko wersją AMP, konieczne jest posłużenie się linkiem kanonicznym.
W pierwszym przypadku na stronie nie-AMP, musimy dodać:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Natomiast na stronie AMP
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
W przypadku posiadania jednej strony dodajemy na niej:
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
Co to jest AMP?
AMP jest projektem, który ma pomóc usprawnić działanie stron www. Trzeba pamiętać, że mimo upowszechnienia internetu mobilnego nie zawsze jego szybkość jest wystarczająca, aby dynamicznie wczytać rozbudowaną i bogatą w treści witrynę. A każda sekunda opóźnienia zwiększa ryzyko, że użytkownik ja opuści.
Aby temu zapobiec, Google wraz ze swoimi partnerami uruchomili AMP. Projekt ma charakter open source’owy, co znaczy, że każdy ma dostęp do kodu źródłowego, może go udoskonalać i modyfikować, a także wykorzystywać za darmo. Sam fakt, że za całością stoi „gigant z Kalifornii”, nakazuje traktować go na poważnie – w połączeniu z obecnymi wytycznymi dotyczącymi SEO, wdrożenie AMP może mieć znaczący wpływ na osiągane wyniki w Google, wzrost ruchu użytkowników mobilnych na stronie czy, w konsekwencji, na ilości konwersji.
W ciągu 2 lat istnienia projektu powstało ponad 4 miliardy stron AMP. Przeprowadzone pod nadzorem Google badania pokazały, że wdrożenie AMP doprowadziło do 10% wzrostu ruchu przy jednoczesnym, 2-krotnym wydłużeniu czasu, jaki użytkownicy spędzali na stronach. Korzyści odniosły także platformy e-commerce, gdzie średni współczynnik konwersji był wyższy o 20% w porównaniu do stron bez AMP. Dlatego wbrew pojawiającej się czasem opinii, projekt nie ma na celu pozbawienia stron indywidualnego charakteru i sprawienia, żeby wyglądały podobnie. Chodzi natomiast o wyeliminowanie elementów, które drastycznie obniżają prędkość ładowania lub zastąpienie ich innymi rozwiązaniami.
Ponadto AMP korzysta z technologii pozwalających na wykorzystanie zasobów serwerów i przeglądarek. Szczególne znaczenie ma tutaj możliwość zapisu danych w chmurze lub w pamięci podręcznej narzędzi zewnętrznych (np. Google Cache), które pozwalają na przyspieszenie renderowania strony.
Wytycznych i zasad jest o wiele więcej. Szczegółowe informacje można znaleźć na oficjalnej stronie https://www.ampproject.org/. My przybliżymy tylko najważniejsze elementy.
Jak działa AMP?
AMP to de facto odrębna alternatywna wersja dokumentu HTML, pozbawionym jednak niektórych, obciążających ją elementów.
Składa się z trzech głównych elementów:
- AMP HTML – czyli wytyczne, wskazówki, a także konkretne linie kodu
- AMP JS – zasady stosowania JavaScript, dopuszczalne biblioteki JS
- AMP Cache – to bazująca na proxy sieć usprawniająca dostarczanie prawidłowo wykonanych dokumentów AMP
Jednym z najważniejszych aspektów AMP jest uregulowanie i nałożenie restrykcji na wykorzystywanie skryptów JS. Faktem jest, że dostarczają ogromnych możliwości w projektowaniu serwisu i mogą wpłynąć niemal na każdy jego element czy sposób wyświetlania.
Jednocześnie są elementem, który znacząco obniża wydajność renderowania wyświetlanej strony. Z tego względu AMP dopuszcza wykorzystanie własnych bibliotek JS, natomiast wszystkie elementy pochodzące z zewnętrznych źródeł muszą mieć charakter asynchroniczny. W ten sposób składowe strony nie mogą blokować się wzajemnie, aby zagwarantować jak najszybsze wczytanie się strony.
Do pozostałych elementów wartych wyróżnienia należą:
- Nadawanie rozmiarów zasobom – zewnętrzne zasoby (obrazy, reklamy, video) muszą zawierać informacje o swoim rozmiarze w kodzie HTML, tak aby AMP miało do nich bezpośredni dostęp i mogło załadować układ strony bez oczekiwania na zasoby.
- Mechanizmy rozszerzeń nie blokują renderowania – AMP obsługuje rozszerzenia dla obiektów takich jak lightboxy, elementy z social media itp., które wysyłają dodatkowe żądania HTTP. Zaprojektowano je jednak w taki sposób, aby nie spowalniały wczytywania strony.
- Brak niezależnych skryptów JS – niezależne skrypty są tym, co mocno ogranicza szybkość strony. Dla przykładu, jeśli założymy, że na stronie mamy 3 obiekty, z których każdy wykonuje po 3 synchroniczne operacje wczytywania a każda z nich trwa ok 1, to łączny czas ich załadowania wynosi 9 sekund. AMP umożliwia wykorzystanie niezależnych skryptów, ale wyłącznie w izolowanych ramkach AMP iframe, które minimalnie wydłużają czas ładowania układu strony i nie posiadają priorytetu wczytywania.
- Ustalanie priorytetów ładowania zasobów – AMP zarządza i optymalizuje pobieranie zasobów, priorytetyzując te najważniejsze z punktu widzenia szybkości strony (i użytkownika). Dla przykładu – obrazy czy reklamy są ładowane dopiero w momencie, kiedy pojawia się szansa, że użytkownik je zobaczy – np. zacznie skrolować stronę do miejsca, w którym powinna znaleźć się reklama. Ponadto system wykorzystuje mechanizm polegający na pobieraniu zasobów z wyprzedzeniem (najszybciej jak to jest możliwe) i wyświetlaniu najpóźniej jak to konieczne.
- Animacje tylko ze sprzętową akceleracją GPU – animacje są popularnym i często wykorzystywanym elementem na stronach. Przyspieszyć można je jedynie wykorzystując zasoby sprzętowe użytkownika. Niestety GPU nie jest w stanie obsłużyć aktualizacji układu strony, dlatego wysyła żądanie z powrotem do przeglądarki, a to nie jest korzystne z punktu widzenia szybkości strony. Aby temu zapobiec AMP łączy reguły dla arkuszy stylów CSS z animacjami, co przyspiesza cały proces.
- Błyskawiczne ładowanie stron – API preconnect jest funkcją, która pozwala na maksymalnie dynamiczne przetwarzanie żądań HTTP, tak aby strona mogła zostać wczytania błyskawicznie. W praktyce oznacza to, że witryna może zostać wczytana zanim użytkownik ostatecznie zadeklaruje chęć jej odwiedzenia, natomiast wyświetlona momentalnie, kiedy już do niej przejdzie.
- Optymalizacja styli i czcionek – zarówno style CSS, jak i internetowe fonty w znaczącym stopniu odpowiadają za rzeczywisty wyląd strony, a jednocześnie z racji na swoje rozmiary należą do elementów, które najbardziej ograniczają jej szybkość. Z tego względu AMP dopuszcza stosowanie jedynie styli wewnętrznych, które minimalizują ilość wysyłanych żądań HTTP, a ponadto blokuje wszystkie żądania serwerowe do momentu rozpoczęcia pobierania czcionek.
- Możliwość stosowania schema.org – schema.org dostarcza słowników meta danych, które można dodawać do poszczególnych elementów strony. W przypadku AMP obejmują one rodzaj treści, nagłówki, opublikowane daty czy powiązane obrazy.
Podsumowanie
Powyższy tekst tylko przybliża temat AMP i nakreśla zakres całej idei. Pokazuje także, że wdrożenie AMP może przynieść korzyści i usprawnić funkcjonowanie stron www. Ponownie, osoby bardziej zainteresowane tematem, po szczegółowe informacje odsyłamy na oficjalną stronę projektu.
Pomimo tego, że AMP jest zalecane i dostępne dla każdego, jego wdrożenie nie obędzie się bez pomocy programisty lub webdevelopera. Przydadzą się także z pewnością narzędzia pozwalające na weryfikację poprawności wykonanej pracy. Możemy posłużyć się walidatorem kodu (https://validator.ampproject.org/#) lub skorzystać z Google Search Console.
Więcej informacji o projekcie znajdziecie tutaj: https://www.ampproject.org.
Ocena artykułu:
Twoja ocena:
Średnia ocen użytkowników 5.0 na podstawie 3 ocen
