Przewodnik dla początkujących po przyspieszonych stronach mobilnych (AMP)

Przyspieszone strony mobilne jest inicjatywą Google, która ma na celu rozwiązanie największego problemu mobilnej sieci - prędkość. Niesamowite wrażenia użytkowników, które projektujemy z wielką starannością, są bardzo powolne na urządzeniach mobilnych.

Powolność to nie tylko problem UX, ale także zmniejsza współczynniki konwersji, i szkodzi dostępności wykluczając użytkowników z wolniejszymi połączeniami internetowymi. AMP to wysiłek zespołu, którego celem jest umożliwienie wydawcom utwórz zoptymalizowaną treść mobilną raz i ładuj go natychmiast.

Od momentu premiery wielu wydawców, takich jak BBC, The Economist, Guardian News i Financial Times, wdrożyło tę inicjatywę, więc teraz możemy bezpiecznie założyć, że AMP jest innowacją wartą rozważenia dla wszystkich, którzy chcą pozostać konkurencyjni na telefonach komórkowych sieć.

AMP w akcji

Przed zanurzeniem się w szczegóły, oto jest Demo AMP, więc możesz zobacz to w akcji. Dostęp do dema można uzyskać za pomocą tego linku.

Aby zobaczyć AMP w akcji, musisz zrobić dwie rzeczy:

Wyświetl prezentację na urządzeniu mobilnym lub na mobilnym symulatorze, np. Symulator urządzenia mobilnego DevTools Chrome.
Uruchom zapytanie wyszukiwania na pasku wyszukiwania. Ponieważ Google AMP działa obecnie głównie z witryną z wiadomościami, najlepszym wyborem jest nowa wiadomość.

Na poniższym zrzucie ekranu możesz zobaczyć, co otrzymałem, gdy użyłem wyszukiwanego terminu Igrzyska Olimpijskie Rio.

Przyspieszone demo stron mobilnych w IPad

Jak widać, strony AMP pojawiają się jako Bogate karty Google, za karuzela obrazkowa zoptymalizowana pod kątem urządzeń mobilnych, Google wydał w maju 2016 r.

Zwróć uwagę, jak Google odróżnia strony AMP od innych stron zoptymalizowanych pod kątem telefonów komórkowych używając 2 różnych etykiet: AMP i mobilne. Warto również kliknąć niektóre wyniki, aby zobaczyć, jak wygląda strona internetowa AMP i jak szybko działa na urządzeniach mobilnych.

Zaplecze techniczne

AMP to a standard internetowy zbudowany na istniejących technologiach internetowych i skupiający się na zawartości statycznej. To ma 3 różne części:

AMP HTML: zmodyfikowany HTML z (1) ograniczenie niektórych zwykłych funkcji HTML / CSS i (2) wprowadzenie nowych niestandardowych znaczników (komponentów)
AMP JS: wymusza najlepsze praktyki w celu skrócenia czasu ładowania strony
AMP CDN: pamięć podręczna z wbudowanym systemem walidacji, który dodatkowo optymalizuje witrynę

Jeśli chcesz dowiedzieć się więcej na temat zaplecza technicznego stron AMP, zapoznaj się z filmem poniżej, w którym Paul Bakaus z Google daje wykład wprowadzający na AMP.

Jeśli chcesz głębiej nurkować, warto również zrozumieć, jakie techniki optymalizacji wykorzystuje AMP, aby przyspieszyć działanie na urządzeniach mobilnych. W filmie poniżej, Malte Ubl, lider AMP Engineering wyjaśnia anatomia AMP szczegółowo.

AMP HTML

Przyspieszone strony mobilne to zwykłe strony HTML to musi postępuj zgodnie z zasadami aby strony ładowały się szybciej i wyświetlały się z niezawodną wydajnością.

Przyjrzyjmy się najważniejszym rzeczom, które musisz o tym wiedzieć. Możesz również spojrzeć na pełną specyfikację AMP HTML.

Zdecyduj, czy chcesz mieć oddzielną stronę AMP

Dla tej samej statycznej strony treści możesz mieć 2 oddzielne wersje - jeden dla AMP i jeden dla wersji bez AMP. Możesz także wybrać tylko jedna wersja - stronę AMP i używaj jej wszędzie. O obsługa przeglądarki, Oświadczenia strony Github AMP:

Jeśli nadal martwisz się o obsługę przeglądarki, sprawdź post Google'a Paula Irish on Stackoverflow.

Jeśli chcesz mieć dwie strony (AMP i non-AMP), musisz link do każdego z nich w celu informować wyszukiwarki o istnieniu dwa wersje.

Dodaj następujący kod do sekcja strony innej niż AMP:

Dodaj również następujący wiersz do sekcja strony AMP:

Jeśli masz tylko jedną stronę AMP, nadal musisz połącz go z sobą w następujący sposób:

Początkowa płyta grzewcza

Projekt AMP oferuje inne początkowe kotły możesz użyć, aby zacząć. Spójrz na najprostszy szablon AMP HTML poniżej:

          Witaj świecie!

Widać, że szablon łączy zwykłą stronę HTML za pomocą etykietka. The > tag dodaje Biblioteka AMP JS.

 The   
Możesz mieć tylko jeden osadzony arkusz stylów, a jest ich także wiele niedozwolone zasady stylu, na przykład nie możesz użyć !ważny kwalifikator, @import reguła i pseudoklasy.
 Nie zapomnij sprawdzić ograniczeń arkusza stylów przed rozpoczęciem pisania CSS dla stron AMP.
 Jest jeszcze jedna ważna informacja o zasadach stylu AMP: ty nie można użyć dowolnego układu - ponieważ jest to jedna z zasad AMP, aby umożliwić przeglądarce przeglądanie obliczyć przestrzeń każdego elementu na stronie z góry.
 Spójrz na obsługiwane i nieobsługiwane układy.
 AMP JS
 Dokumenty AMP mogą zawierać ani żadnych skryptów JavaScript napisanych przez autorów, ani żadnych skryptów JavaScript innych firm, nie oznacza to jednak, że Accelerated Mobile Pages w ogóle nie używa JavaScript. Biblioteka JavaScript AMP (środowisko wykonawcze AMP) odpowiada za szybkie ładowanie i renderowanie stron AMP egzekwowanie najlepszych praktyk wydajności.
 Komponenty AMP
 Komponenty AMP są zdefiniowane przez środowisko wykonawcze AMP. Są to wyżej wymienione Znaczniki HTML specyficzne dla AMP musisz użyć zamiast ich zwykłego odpowiednika, takiego jak  zamiast tego  etykietka.
 Każdy komponent AMP zawiera szczególny zasób zewnętrzny (obraz, wideo, osadzenie itp.). Zasoby zewnętrzne mają tendencję do spowalniania stron internetowych. Głównym celem tego rozwiązania jest zarządzaj ładowaniem zasobów zewnętrznych w rozsądny sposób, uruchamiając je wewnątrz piaskownic.
 AMP zapewnia ci 2 rodzaje komponentów:
 Elementy wbudowane: są zawsze dostępne w każdym dokumencie AMP, są wbudowany w środowisko wykonawcze AMP. Obecnie jest ich pięć:  do wyświetlania reklam
  dla obrazów jest używany zamiast  etykietka
  do śledzenia pikseli (używanych do zliczania odsłon)
  w przypadku bezpośredniego osadzenia pliku wideo HTML5 zastępuje  etykietka
  dla elementów osadzonych (można użyć zamiast  w szczególnych przypadkach)
 
 Rozszerzone komponenty: Dodatkowe elementy, musisz wyraźnie je włączyć do twojego dokumentu AMP. Jest wiele przydatnych, takich jak  i , zobacz pełną listę. Wiele z nich można wykorzystać osadzać treści z usług stron trzecich, takie jak z Twittera lub Instagram.
 
Zauważ, że wszystkie zasoby ładowane zewnętrznie, takie jak  i  musi mieć znany  i  atrybut w celu umożliwienia przeglądarki oblicz układ z wyprzedzeniem.
 AMP CDN
 The AMP CDN jest w zasadzie cache, zwany Pamięć podręczna Google AMP. Pobiera prawidłowe dokumenty AMP, buforuje je i ładuje. AMP CDN ma również wbudowany system walidacji.
 To jest warte testowanie stron AMP zanim pozwolą im przejść do trybu online, aby bezpiecznie przekazać walidator. Możesz to zrobić na wiele różnych sposobów.
  OBRAZ: Projekt AMP
Dobrze wiedzieć, że AMP CDN używa protokołu HTTP / 2, aby osiągnąć najlepszą możliwą wydajność.
 Narzędzia AMP
 Istnieje kilka świetnych narzędzi, które pomogą Ci wdrożyć przyspieszone strony mobilne, rzućmy okiem na niektóre z nich.
 Google zapewnia webmasterom poręczne Narzędzie raportujące status AMP pokazuje liczbę pomyślnie zaindeksowanych stron AMP oraz błędy związane z AMP.
 Lullabota Biblioteka PHP AMP pozwala konwertować strony HTML na AMP HTML, a także zgłasza zgodność dowolnego dokumentu HTML ze standardami AMP.
 Jeśli chcesz używać AMP na swojej stronie WordPress, przeczytaj samouczek Yoasta, jak skonfigurować WordPress dla AMP i jak AMP współpracuje z wtyczką Yoast SEO.
 Możesz także sprawdzić Automattic Wtyczka AMP co pozwala włączyć przyspieszone strony mobilne w witrynie WordPress.
  IMAGE: WordPress.org
Dalsze uwagi
 Jeśli nadal nie jesteś przekonany, spójrz na film o a szybki test prędkości poniżej.
 
 Jonathan Abrams, założyciel Nuzzela, twierdzi jeszcze lepiej, ponieważ twierdzi, że nawet witryny zoptymalizowane pod kątem urządzeń mobilnych, takie jak New York Times, ładują się znacznie szybciej - zamiast trzech sekund załadować średnią stronę, ładuje się strona mniej niż pół sekundy po włączeniu przyspieszonych stron mobilnych Google.
 Możesz także przeczytać interesujący artykuł w Verge o konkursie Google AMP i Facebook's Instant Articles. Jeśli nadal szukasz odpowiedzi na pytanie „co to za haczyk?”, Sprawdź post Yoasta, w którym wspomina się o obawach, że AMP w zasadzie przywraca nas do Internetu przed 2000 r. I zastanawia się, czy jest to naprawdę otwarty standard.
 .