Korzystanie z Google AMP do szybszego ładowania stron mobilnych w witrynie WordPress

Dlaczego szybkość strony ma znaczenie

Jeśli podobnie jak miliardy z nas ostatnio korzystałeś z treści internetowych na urządzeniu mobilnym, zauważyłeś, że wrażenia mogą być lepsze. Czytanie artykułów z wiadomościami jest często boleśnie powolne , a ładowanie stron zajmuje dużo czasu. Nawet po załadowaniu tekstu na stronie strony wczytują się przez wiele sekund, ponieważ pobierane są reklamy, śledzący kod JavaScript i obrazy.
Aplikacje mobilne przyzwyczaiły nas do szybkiego ładowania treści , przeglądania offline i szybkich interfejsów. Ale witryny mobilne często dosłownie pozostają w tyle. Dotyczy to w szczególności witryn z wiadomościami i blogami, które wykorzystują wiele widżetów do reklam, analiz, udostępniania i komentowania. Możesz to łatwo przetestować, instalując bloker treści na urządzeniu z systemem iOS i zauważając wzrost prędkości.
Oczywiście, możesz użyć motywu responsywnego, aby złagodzić niektóre problemy, ale projektowanie responsywne nie radzi sobie z wydajnością ładowania strony. W większości przypadków źródłem problemu jest responsywność : projektujemy strony internetowe, które zmieszczą się na wyświetlaczach o wielu różnych rozdzielczościach i nie udaje nam się stworzyć wrażenia zoptymalizowanego pod kątem najmniejszych wyświetlaczy, niższej wydajności procesora i najwolniejszych połączeń. Dzięki responsywnemu projektowi wszystkie zasoby i funkcje na komputery będą nadal ładowane, gdy strona jest renderowana na urządzeniach mobilnych, co często skutkuje niską wydajnością. Według Facebooka średni czas ładowania artykułu informacyjnego na telefonie komórkowym wynosi 8 sekund.
Podczas gdy niektórzy z nas mają szczęście, że mają połączenia sieciowe 3G lub 4G na swoich smartfonach, wystarczy opuścić centra miast, aby prędkość sieci spadła drastycznie. I oczywiście jest „następny miliard” ludzi i urządzeń łączących się z krajów rozwijających się, gdzie szybkie połączenia sieciowe po prostu nie są jeszcze dostępne.
Na szczęście wszystko idzie w dobrym kierunku, a wszyscy wielcy gracze pracują nad sposobami przyspieszenia ładowania treści na urządzeniach mobilnych. Facebook uruchomił Instant Artykuły, rozwiązanie do szybkiego ładowania treści internetowych, ale ograniczone do otoczonego murem ogrodu. Firma Apple uruchomiła własną aplikację Wiadomości. Google uruchomił AMP (Accelerated Mobile Pages), inicjatywę mającą podobny cel jak Facebook, ale otwarte podejście standardowe.
WordPress ogłosił niedawno, że dodał obsługę przyspieszonych stron mobilnych Google (AMP) do WordPress.com i witryn WordPress.org w formie darmowej wtyczki.
Zobaczmy więc, jak dodać AMP do swojego bloga WordPress.org lub witryny z wiadomościami i skorzystać z najnowszych technologii, aby przyspieszyć działanie witryny na urządzeniach mobilnych.

Co to jest Google AMP?

Obietnicą Google AMP jest natychmiastowe wczytywanie stron na urządzeniach mobilnych. Naprawia jeden z ostatnich problemów z mobilnym internetem. Mimo że wszyscy z niego korzystają, internet mobilny jest zaskakująco wolny. AMP radzi sobie z tym, ograniczając liczbę funkcji na stronie, usuwając funkcje projektowe w celu zwiększenia szybkości. Google twierdziło, że prędkość ładowania AMP jest o 85 procent szybsza niż w przypadku zwykłych stron internetowych.
AMP tworzy specjalny widok mobilny dla Twojej witryny. Ta nowa witryna mobilna wzbogaca Twoje treści pod kątem obsługiwanych klientów, takich jak wyszukiwarka Google Mobile i Chrome. Ten nowy widok jest dodatkiem do zwykłych i mobilnych witryn, które już masz. W tym widoku Twoje strony wyglądają jak zwykłe strony internetowe, ale z usuniętą całą zawartością. Z tego powodu musisz upewnić się, że Twoja witryna WordPress jest na to gotowa

Jak działa AMP?

AMP HTML jest zasadniczo podzbiorem kodu HTML, w którym dozwolone są tylko określone elementy JavaScript. Nacisk kładziony jest na przyspieszenie ładowania witryn o dużej zawartości treści, takich jak witryny z wiadomościami i blogi. Chociaż mocno ogranicza JavaScript, zezwala na określone elementy Analytics i reklamowe na Twoich stronach, dzięki czemu jest dobrą opcją dla wydawców wiadomości.
Aby utworzyć nowy widok mobilny, AMP wykorzystuje trzy główne elementy:

• AMP HTML — ten podzbiór kodu HTML dodaje kilka niestandardowych tagów i właściwości z wieloma ograniczeniami, które umożliwiają klientom AMP renderowanie treści tak, jak chcesz, bez martwienia się o wydajność. Wtyczka automatycznie dodaje te nowe tagi do stron, ale możesz ich używać we własnych szablonach AMP, jeśli ich potrzebujesz.
• AMP JS — ta struktura JavaScript została stworzona dla stron mobilnych, która zarządza obsługą zasobów i asynchronicznym ładowaniem, które sprawiają, że proces AMP działa. Pamiętaj, że na swoich stronach AMP nie możesz używać skryptów JavaScript innych firm.
• AMP CDN – AMP zapewnia opcjonalną sieć dostarczania treści, która może buforować i dalej optymalizować Twoje strony AMP.

Instalowanie AMP

musisz zainstalować wtyczkę, zanim będziesz mógł używać AMP w swojej witrynie WordPress. Jeśli korzystasz z WordPress.com, jest to już dostępne.

Oficjalna wtyczka

Oficjalną wtyczkę AMP możesz znaleźć w sklepie z wtyczkami WordPress, ale najnowszą wersję znajdziesz tylko na stronie projektu Github . Masz więc wybór.
Instalacja wtyczki przez WordPress jest najszybsza. Wystarczy wyszukać amp-wp w sekcji „Dodaj nowy” panelu administracyjnego wtyczek WordPress. Następnie po prostu kliknij zainstaluj, a następnie aktywuj, aby rozpocząć korzystanie z AMP w swojej witrynie.
Jeśli z jakiegoś powodu potrzebujesz najnowszej wersji, musisz zainstalować wtyczkę ręcznie. Po pobraniu pakietu Github wystarczy kliknąć „Prześlij wtyczkę” w panelu „Dodaj nowe” wtyczki. Po prostu znajdź plik zip zawierający pakiet i pozwól WordPressowi zabrać stamtąd. Po zakończeniu przesyłania możesz po prostu aktywować wtyczkę, aby zacząć z niej korzystać.

PageFrog i inne wtyczki AMP

Oficjalna wtyczka pochodzi bezpośrednio od zespołu projektowego Google AMP, dzięki czemu jest najbardziej aktualną wersją AMP. Tworzy wersję /amp/ każdej strony i posta, który masz. Wystarczy dodać /amp/ na końcu adresów URL, aby samemu je zobaczyć.
Nie możesz jednak edytować tych stron AMP. Jeśli potrzebujesz czegoś więcej niż to, co daje podstawowa wtyczka, będziesz potrzebować jednej z innych wtyczek AMP, takich jak PageFrog.
PageFrog opiera się na podstawowej wtyczce AMP, umożliwiając edycję niektórych wprowadzanych przez nią zmian. Umożliwi nawet dodanie niektórych funkcji stylu i motywów, a także innych protokołów, takich jak błyskawiczne artykuły na Facebooku. Możesz znaleźć PageFrog i kilka innych wtyczek AMP w sklepie z wtyczkami WordPress.

Konfigurowanie witryny WordPress pod kątem AMP

Po aktywacji wtyczki gotowe. W przypadku większości instalacji wystarczy utworzyć zawartość w normalny sposób, a wtyczka zajmie się resztą. Pamiętaj jednak, że takie rzeczy, jak kod Google Analytics, nie będą działać na Twoich stronach AMP po wyjęciu z pudełka. Przeczytaj, jak dodać funkcje Analytics i SEO do nowych stron AMP. .

Dodawanie Google Analytics do stron AMP

Jeśli potrzebujesz tych funkcji również na swoich stronach mobilnych, musisz ręcznie dodać je do szablonu strony single.php wtyczki.
Aby to zrobić, musisz kliknąć opcję edycji obok nazwy wtyczki AMP na liście wtyczek. Stamtąd wystarczy kliknąć link single.php, aby rozpocząć jego edycję. Pamiętaj, że może być konieczne powtórzenie tego za każdym razem, gdy aktualizujesz wtyczkę.

Wtyczki SEO i AMP

Ponieważ Twoje strony AMP nie będą zawierać żadnych funkcji SEO, będziesz potrzebować nowej wtyczki SEO zgodnej z AMP.
Na szczęście większość twórców wtyczek SEO ma lub będzie mieć rozszerzenia AMP, z których możesz korzystać . Będziesz musiał zainstalować je osobno, ale potrzebujesz ich, aby wszystkie Twoje strony działały na rzecz poprawy SEO Twojej witryny.
W tym artykule tylko trzy wtyczki SEO WordPress wydały rozszerzenia lub aktualizacje AMP.

• Klej do Yoast SEO – dodaje obsługę AMP do wtyczki Yoast SEO WordPress
• Schema App Structured Data – wtyczka schematu SEO z AMP ze schema.org
• WP SEO Structured Data Schema – wtyczka schematu SEO z AMP firmy Kansas City SEO

Naprawianie wszelkich błędów

Podobnie jak w przypadku każdego dodatku do Twojej witryny, chcesz przetestować swoje strony AMP pod kątem błędów i niespójności , a następnie je poprawić.
AMP wciąż się rozwija, a wiele funkcji może nadal zawierać błędy. Musisz ręcznie naprawić te błędy w plikach szablonów, zanim upublicznisz strony AMP. Pamiętaj tylko, że może być konieczne ponowne wprowadzenie zmian za każdym razem, gdy aktualizujesz wtyczkę, na wypadek gdyby coś się zmieniło.

Reklama na stronach AMP

AMP HTML nie zezwala na JavaScript, więc reklamy nie mogą być osadzane bezpośrednio – zamiast tego są umieszczane w piaskownicy iframe bez dostępu do głównej treści artykułu.
Google zaprojektował AMP, aby przepuszczać niektóre rodzaje reklam. Potrzebujesz tylko zgodnej z AMP wersji wtyczek reklamowych. Pełną listę zgodnych wtyczek można znaleźć na stronie AMP Github .
Obecnie obsługiwani dostawcy reklam to:

• A9
• AdReactor
• AdSense
• Technologia reklamowa
• Podwójne kliknięcie

AMP czy aplikacja mobilna?

Chociaż AMP może w pewnych warunkach przyspieszyć wyświetlanie stron artykułów w Twojej witrynie, nie będzie działać w każdej sytuacji i na wszystkich urządzeniach. Co więcej, wiąże się to również z dużymi ograniczeniami w zakresie tego, jakiego rodzaju analitykę (bez js!) i reklam można uruchamiać na swoich stronach.
AMP może być skutecznym rozwiązaniem dla ruchu pochodzącego z wyszukiwania, ale co z najbardziej lojalnymi czytelnikami?
Uważam, że dla nich aplikacja nadal ma wiele sensu, w zależności od typu i wielkości odbiorców. Aplikacja może nadal zapewniać wiele korzyści, których nawet AMP lub artykuły błyskawiczne nie zapewniają : dostarczanie treści i ponowna aktywacja za pomocą powiadomień push, buforowanie treści i korzystanie w trybie offline, obecność w sklepach z aplikacjami i, co ważniejsze, ekran główny użytkownika.
Jeśli więc szukasz platformy, która pomoże Ci napędzać rozwój w czasie, jednocześnie zachowując kontrolę nad treściami i opcjami reklamowymi i analitycznymi dla komórek, rozważ opublikowanie własnej aplikacji. Jeśli korzystasz z WordPressa na swojej stronie z wiadomościami lub blogiem, być może mamy dla Ciebie odpowiednie rozwiązanie w MobiLoud .