Już niejednokrotnie wspominaliśmy we wpisach na naszym blogu, jak ważne jest dostosowanie stron internetowych do urządzeń mobilnych oraz jak duży nacisk kładzie na tą kwestię firma Google (zobacz nasz Poradnik Marketingowy). Gigant z Mountain View zrobił kolejny krok w celu usprawnienia doświadczeń użytkowników przeglądających zasoby internetowe na smartfonach czy tabletach tworząc projekt przyspieszonych stron mobilnych - AMP.
Co to jest AMP?
AMP (Accelerated Mobile Pages) to projekt open source, który ma za zadanie maksymalnie przyspieszyć wczytywanie oraz przeglądanie mobilnych stron internetowych. Projekt dostarcza opis budowania kodu, dzięki któremu nasze rozwiązania będą optymalne - bez elementów negatywnie wpływających na wydajność. Strony AMP są zbudowane z 3 głównych komponentów:
- AMP HTML - to kod HTML z pewnymi ograniczeniami, które podnoszą szybkość wczytywania, oraz z rozszerzeniami umożliwiającymi zaawansowaną edycję treści, która wykracza poza zwykły kod HTML.
- AMP JS - biblioteki JavaScript, które dostarczają maksymalnie szybkie wczytywanie strony.
- AMP Cache - opcjonalny komponent odpowiedzialny za dostarczanie stron z sieci dystrybucji treści - Google AMP Cache.
Jak budować strony AMP?
Tak jak wcześniej wspomniałem strony AMP to HTML z pewnymi rozszerzeniami oraz ograniczeniami. W tym artykule odniosę się do kilku ciekawych rozszerzeń oraz niezbędnych ograniczeń. Wszystkie wytyczne dotyczące tworzenia przyspieszonych stron mobilnych znajdziecie tutaj.
-
HTML
Zacznijmy od tego jak powinna być stworzona struktura HTML naszego projektu. Strony AMP charakteryzuje piorun w znaczniku head < html ⚡ > dopuszczalny jest również znacznik alternatywny <html amp >. Ponadto wymagane jest, aby kod zaczynał się od deklaracji
<!doctype html>
oraz dokument HTML musi zawierać znaczniki
<head>
i<body>
(w HTML jest to opcjonalne). Przykładowy szablon wraz z informacjami co powinien zawierać znacznik
<head>
zobaczycie TUTAJ.
- CSS
Stylowanie treści odbywa się w sekcji
<head>
w znaczniku<style amp-custom></style>
:Nie możemy użyć własnego kodu CSS poza wyżej wskazanym miejscem. Dodatkowo nie możemy użyć atrybutów CSS, które źle wpływają na wydajność strony. Należy również pamiętać, że nasze style nie mogą zajmować więcej niż 50kB.
Pewnie chodzi wam po głowie pytanie: Czy muszę stylować całą stronę w jednym pliku? Co z preprocesorami? Otóż AMP umożliwia zawarcie zewnętrznego arkusza stylów CSS, który może być wygenerowany przez preprocesory (Less/Sass).
- Rozszerzenia AMP HTML
W projekcie AMP, niektóre tagi HTML są zastąpione aby umożliwić łatwą edycję i optymalizację strony. Dobrym przykładem może być tag <amp-img>, który zastępuję tag <img>
AMP narzuca nam statyczne określenie wymiarów obrazków, co powoduje ładowanie struktury strony bez czekania na pobranie zasobów.
-
Jak sprawdzić czy wszystko działa zgodnie z AMP?
Nasze rozwiązania możemy walidować za pomocą konsoli Chrome DevTools. Wystarczy dodać na końcu adresu URL naszej strony #development=1 i wtedy ewentualne błędy zobaczymy w konsoli.
Drugi sposób walidacji to walidator AMP, gdzie należy podać adres URL swojej strony.
Korzyści
Główną korzyścią płynącą z zastosowania AMP jest oczywiście szybkość wczytywania strony na urządzeniach mobilnych, dzięki czemu użytkownik nie jest zmuszony do oczekiwania na załadowanie wszystkich treści. Dodatkowo możemy spodziewać się zwiększonego ruchu na stronie z urządzeń mobilnych oraz wzrostu liczby użytkowników powracających. Projekt jest stworzony i wspierany przez Google, co automatycznie powoduje, że nie można obok niego przejść obojętnie.
Aby nie być gołosłownym przytoczę study case amerykańskiego portalu informacyjnego www.washingtonpost.com. Washington Post generuje dziennie ponad 1000 artykułów i ponad 55% ruchu generowanego na portalu pochodzi z urządzeń mobilnych. Po wdrożeniu AMP liczba użytkowników powracających w ciągu 7 dni wzrosła o 23%. Dodatkowo strona średnio wczytuje się w 400 milisekund, co oznacza wzrost aż o 88% w porównaniu do poprzedniej wersji mobilnej portalu.
Podsumowanie
Dzięki łatwej implementacji oraz wsparciu Google z pewnością warto zwrócić uwagę na standard AMP. Projekt staje się coraz bardziej popularny i może sprawić, że użytkownicy szybko przywykną do natychmiastowego ładowania treści, co może stać się czynnikiem wyboru odpowiedniej pozycji w wynikach wyszukiwania. AMP jest ciągle rozwijany, więc na pewno warto śledzić postępy.