Przyspieszone strony mobilne: AMP do mobilnej optymalizacji witryny WordPress

1. Czym jest AMP?
2. Które witryny powinny używać AMP?
3. Jakie są różnice AMP?
4. Dlaczego blogi i wydawcy powinni włączyć AMP
5. Jaka optymalizacja jest potrzebna dla stron AMP?
6. Jak dodać AMP do witryny WordPress
7. Wtyczka AMP WordPress firmy Automattic
8. AMP for WP - Accelerated Mobile Pages
9. Inne sposoby dodania AMP do witryny WordPress
10. Potrzebujesz strony AMP w swojej witrynie WordPress?

Korzystanie z Internetu powinno być proste i szybkie, więc webmasterzy nieustannie pracują nad optymalizacją wydajności witryny i przyspieszeniem ładowania strony, a WordPress AMP jest doskonałym narzędziem do pomocy w tej pracy.

Większość stron internetowych została zaprojektowana dla dużych ekranów. Ale małe ekrany stają się coraz bardziej i ilościowo określają tablety i komputery. Urządzenia mobilne teraz się uzupełniają 65% całej przestrzeni medialnej . Urządzenia przenośne potrzebują stron, które ładują się tak szybko, jak na dużych ekranach.

Aby sprostać zwiększonemu zapotrzebowaniu na treści do szybkiego ładowania, aplikacje opracowane na platformy mobilne są dostępne w Apple (News), Facebook (Instant Articles) i Snapchat (Discover). Google wprowadził technologię Accelerated Mobile Page (AMP), która umożliwiła przyspieszenie dostarczania treści mobilnych.

Czym jest AMP?

Projekt AMP Project Został ogłoszony przez Google w październiku 2015 r. I uruchomiony w lutym 2016 r. Ten projekt open source daje wydawcom możliwość tworzenia treści zoptymalizowanych pod kątem urządzeń mobilnych, które można natychmiast pobrać z dowolnego miejsca w mobilnym Internecie.

W sierpniu 2016 r. W indeksie Google Search było już ponad 150 milionów stacji dokujących AMP, a liczba ta wzrasta co tydzień o 4 miliony tygodniowo. Następny został przedstawiony Wszczepiam wyszukiwarkę Google zawartość wzmacniacza, która będzie później wdrażana szerzej.

Które witryny powinny używać AMP?

W lutym projekt został zainicjowany dla wydawców. Ale później, AMP został również przystosowany do takich branż, jak rozrywka, turystyka, e-commerce itp.

Wkrótce zaczęły pojawiać się entuzjastyczne raporty o adapterach, co oznaczało 88% poprawę czasów ładowania, które towarzyszyły wszystkim dokumentom AMP. Na przykład eBay, jeden z największych sklepów internetowych, przechodzący na AMP, otrzymał 15 milionów stron produktów opartych na technologii AMP.

W związku z tym AMP powinien wykorzystywać wszystkie witryny, które korzystają z urządzeń mobilnych do odbierania ruchu. Warto również pamiętać, że coraz więcej użytkowników korzysta z Internetu z urządzeń mobilnych, więc AMP może być dobrym dodatkiem do dowolnej witryny WordPress.

Jakie są różnice AMP?

Ten system dostarczania treści oparty jest na frameworku HTML AMP, dzięki czemu jest szybszy niż zwykły HTML, ponieważ:

• Jest to ekonomiczna wersja zwykłego środowiska HTML, z którego usunięto wszystkie treści JavaScript. W przypadku dostarczania JavaScript framework używa biblioteki współdzielonej AMP JS.
• Treść jest przechwytywana i przechowywana w chmurze udostępnionej, więc czas potrzebny na żądanie i dostarczenie zawartości z serwera jest wykluczony.

Istnieje znacznie więcej różnic, ale te dwie dają najszybsze zrozumienie tej technologii.

Dlaczego blogi i wydawcy powinni włączyć AMP

Ponieważ czytanie stron o niskim obciążeniu jest nierealistycznie frustrujące dla użytkowników, wydawcy tracą możliwość zarabiania na reklamach. Technologia AMP pomaga opóźnić odwiedzającego witrynę na dłuższy czas, co potencjalnie przyczynia się do zwiększenia liczby kliknięć reklam.

Na stronach AMP pojawia się ikona błyskawicy, która wyróżnia je na tle zwykłej zawartości. Osoba, która kliknie tę opcję, zostanie przeniesiona bezpośrednio na strony AMP, które są otwierane za pomocą przeglądarki AMP. Ponadto zawartość będzie natychmiast dostępna dla ek tylko w wyszukiwarce Google, ale także na platformach takich jak Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel i Pinterest.

Ponadto wydawcy będą mieli dostęp do Google Analytics, aby śledzić wydajność swoich stron. Mogą korzystać z lepszej zawartości AMP, aby zoptymalizować wydajność witryny i poprawić wrażenia użytkownika.

Jaka optymalizacja jest potrzebna dla stron AMP?

AMP jest w rzeczywistości cały zestaw optymalizacji które muszą być wyprodukowane na stronie zgodnie z wymaganiami google. Aby strona była zgodna z wymaganiami AMP, musisz przestrzegać następującej listy reguł:

• Zezwalaj tylko na asynchroniczny JavaScript - jest to konieczne, aby nie opóźniać renderowania strony. Oznacza to, że nie możesz używać żadnego kodu JavaScript, który został utworzony, i musisz polegać na elementach AMP, jeśli chodzi o interaktywną zawartość na swoich stronach. JS w ramce iframe jest dozwolone, ale tylko wtedy, gdy nie powoduje opóźnienia renderowania.
• Określony rozmiar wszystkich zasobów jest zawsze statyczny - AMP ładuje stronę bez czekania na pobranie zasobów, takich jak obrazy i ramki. Rozmiar tych zasobów musi być ustalony w HTTP, więc rozmiar i lokalizacja tych zasobów jest znana przed rozpoczęciem pobierania.
• Nie zezwalasz mechanizmom rozszerzeń na blokowanie renderowania - jeśli na stronie znajduje się rozszerzenie, skrypt niestandardowy powinien poinformować o tym system. W ten sposób zostanie utworzona przestrzeń do rozbudowy, nawet zanim AMP dowie się, co należy umieścić na stronie. Rozszerzenia dla lightboxów, wstawek na Instagramie i tweetów są akceptowane, jeśli nie blokują renderowania strony, nawet jeśli wymaga to dodatkowych żądań HTTP.
• Nie dopuszczaj JavaScript do ścieżki krytycznej innych firm - niestandardowy JavaScript jest dozwolony tylko w ramkach iFrame, które znajdują się w piaskownicy. W tym przypadku nie blokują ładowania strony głównej.
• Wszystkie CSS powinny być liniowe i powiązane z wielkością - pomaga to zmniejszyć liczbę żądań HTTP na ścieżce krytycznej.
• Uruchamianie czcionek powinno być wydajne - AMP nie zezwala na żądania HTTP, dopóki czcionki nie zaczną się pobierać.
• Zminimalizuj rozmiar przeliczeń - ponowne obliczenia prowadzą do opóźnienia renderowania, więc powinny być minimalne.
• Uruchom animację tylko na GPU - wszystkie animacje powinny być uruchamiane tylko na GPU (Graphical Processing Unit).
• Twórz priorytetowe zasoby pobierania - najpierw załaduj tylko niezbędną zawartość, a reklamy i obrazy są ładowane tak szybko, jak to możliwe. W tym przypadku obciążenie procesora (jednostki centralnej) jest zminimalizowane.
• Jednorazowe ładowanie stron - wstępne renderowanie zużywa zbyt wiele przepustowości i zasobów procesora. Wstępne renderowanie AMP najpierw ładuje tylko niezbędną zawartość i ładuje i-ramki innych firm i inne zasoby tylko wtedy, gdy są wymagane.

Wszystkie standardowe formaty, sieci bannerów reklamowych i technologie będą również dostępne. Ponadto wydawcy mogą korzystać z własnych formatów, jeśli nie wpływają na szybkość pobierania.

Jak dodać AMP do witryny WordPress

Google zapewnia samouczek, który mówi, jak tworzyć podstawowe strony HTML AMP, jak przechowywać i weryfikować je jako treści istotne dla AMP, a także dostarcza informacji o tym, jak je publikować i rozpowszechniać. Bardzo ważne jest sprawdzenie stron AMP, ponieważ pozwala to stronom trzecim, takim jak Twitter i Instagram, upewnić się, że strony pojawiają się na ich platformach w razie potrzeby.

Witryny, które są hostowane na WordPress.com, automatycznie obsługują tę technologię, ale jeśli Twoja witryna znajduje się na innym hostingu, musisz zainstalować odpowiednią wtyczkę.

Wtyczka AMP WordPress firmy Automattic

Po instalacji i aktywacji Wtyczka AMP na Twojej stronie WordPress Twoje posty będą automatycznie otrzymywać dynamicznie generowane wersje AMP. Możesz uzyskać dostęp do tej strony, dodając wzmacniacz po adresie URL (example.com / my-post / amp). Jeśli nie masz przyjaznych permalinków, dodaj link „Amp = 1” (przykład. Com /? P = 100 i amp = 1). Teraz musisz tylko przetestować i zweryfikować swoje strony jak powyżej.

Nie zauważysz żadnych ustawień ani funkcji dodanych przez wtyczkę. Do panelu administracyjnego dodawana jest tylko jedna opcja dla AMP Analytics, w której można wkleić kod własnej konfiguracji JSON i to wszystko.

Jest to oficjalna wtyczka od Automattic, a teraz nie obsługuje stron i archiwów, a także nie pozwala na dostosowanie generowanej treści. Ale jest to bardzo łatwa w użyciu opcja i możesz przeglądać dokumentację na Github, jeśli potrzebujesz umiejętności dostosowywania tego typu treści.

AMP for WP - Accelerated Mobile Pages

Kolejną świetną opcją jest AMP dla WP . Jest to darmowa wtyczka WordPress oferująca szybkie i łatwe rozpoczęcie pracy - wystarczy zainstalować wtyczkę, włączyć ustawienia i rozpocząć automatyczne tworzenie AMP na swojej stronie. Dodatkową zaletą jest kompatybilność z instalacjami milt-site.

Istnieją już wbudowane ustawienia umożliwiające włączanie AMP (posty, strony, archiwa), możliwość dodawania obszarów reklamowych dla urządzeń mobilnych, dane strukturalne (ważna część optymalizacji SEO), integracja metatagów Yoast SEO, indeks opcji zaawansowanych / brak indeksu, push - powiadomienia, natywne komentarze AMP, niestandardowe tłumaczenia AMP (dla tych, którzy nie używają angielskiego na swoich stronach) i wiele więcej. Taka obfitość opcji jest po prostu niesamowita dla darmowej wtyczki.

A najfajniejszą rzeczą jest to, że możesz dostosować wygląd swojej zawartości AMP za pomocą tej wtyczki. Użyj dołączonych domyślnych motywów AMP lub skorzystaj z ich AMP Theme Framework, aby stworzyć własny projekt.

AMP for WP oferuje również płatne rozszerzenia, aby dodać dodatkowe funkcje (takie jak wywołanie do działania lub buforowanie AMP) oraz wsparcie dla popularnych wtyczek, takich jak WooCommerce, Advanced Custom Fields i Contact Form 7.

Inne sposoby dodania AMP do witryny WordPress

Dodatkowe wtyczki, które pomogą Ci z zawartością AMP na twojej stronie WordPress.

• WP AMP - potrzebne do stworzenia niestandardowego projektu AMP bez pracy z kodem i poprawy SEO.
• Przyspieszone strony mobilne (AMP) dla WordPress - potrzebne do stworzenia motywu AMP dla Twojej witryny
• Niestandardowe AMP - potrzebne, aby lepiej dostosować zawartość AMP.
• Artykuły Instant Facebook i strony Google AMP - potrzebował opublikować swoje treści i zarządzać nimi bezpośrednio z WordPress do Google AMP Pages z obsługą reklam i analiz.
• Klej do Yoast SEO i AMP - musisz się upewnić, że wtyczka WordPress AMP używa poprawnych metadanych Yoast SEO. Ponadto wtyczka umożliwia modyfikowanie projektu stron AMP.

Potrzebujesz strony AMP w swojej witrynie WordPress?

Chociaż technologia AMP nie jest konieczna dla stron internetowych, które znajdzie Google, jest całkiem oczywiste, że Google będzie dążyć do kompleksowej realizacji swojego projektu. Teraz kompatybilność z AMP nie jest jednym z czynników wpływających na ranking witryny w wynikach wyszukiwania Google. Chociaż rozsądne jest założenie, że w przyszłości taki wpływ pojawi się.

Jeśli pamiętasz, że szybkość ładowania strony jest ważnym czynnikiem wpływającym na ranking witryny, nie masz szczególnego wyboru, jeśli chcesz stać się częścią mobilnego Internetu. Jeśli ranking według wyszukiwarek jest dla Ciebie ważny, nie będziesz musiał długo myśleć o wprowadzeniu treści AMP.

Ale jeśli chcesz zostać częścią tego projektu, musisz wyraźnie przestrzegać formatowania wymaganego przez Google, ale nie jest to odpowiednie dla wszystkich. Przecież takie formatowanie ogranicza wybór tego, co możesz umieścić w swojej witrynie, z kolei Twoja witryna może stracić swoją indywidualność. Nie można używać niektórych rodzajów animacji, a formularze nie są w ogóle obsługiwane. A jeśli wszyscy potrzebują stron docelowych, nie można nazwać AMP dobrą historią dla wszystkich. Ponadto istnieją witryny, dla których autentyczność i branding są ważniejsze niż szybkość, dlatego dla nich AMP to raczej zły wybór.

Niezależnie od tego, jeśli chcesz stworzyć użytkownikom możliwość szybkiego i przyjemnego korzystania z witryny i utrzymania ich dłużej na swojej stronie, powinieneś poważnie rozważyć rozpoczęcie korzystania z AMP dla Twojej witryny WordPress (lub dowolnej innej witryny). ).