Pierwsze podejście do tematu wdrożenia AMP.

Wszelkie zmiany zacząłem robić ręcznie, a więc modyfikując krok po kroku kod szablonu. Później zabrałem się za zmiany w WordPress’ie samym w sobie. Im bardziej analizowałem dokumentację i pojmowałem ile pracy będzie mnie to kosztowało, tym mniejszą miałem na tę pracę ochotę. Chwilę później … jak łatwo się domyśleć … utraciłem ją całkowicie :(

W sieci znalazłem wtyczkę (https://wordpress.org/plugins/amp/), która załatwi całą sprawę za mnie. Opinie o tej wtyczce nie były porażające a wręcz zniechęcające do jej użycia. Nie mniej jednak na potrzeby testu zdecydowałem się ją zainstalować na jednej z administrowanych przez siebie stron. Wybór padł na sklep wkladki.net, który jest już zoptymalizowany wydajnościowo. Dlaczego testuję szybszą wersję a nie podstawową. Powód jest prosty … zależy mi na tym, żeby strona szybko działała nie tylko na urządzeniach mobilnych ale również na komputerach stacjonarnych. Wszystkie analizy jakie znalazłem w sieci bazują na porównaniu niezoptymalizowanej strony i AMP. Wyniki są znakomite ale według mnie, nieobiektywne.

Lecimy. Instalacja przebiegła pomyślnie. Nic się nie konfiguruje. Prościzna.

Strona posiada normalne adresowanie ale żeby była dostępna w wersji amp należy dodać końcówkę ?amp=1. Strona również odpali się zakończona /amp/ ale trzeba wejść w Ustawienia > Bezpośrednie odnośniki i kliknąć zapisz. Zresetuje to ustawienia.

 

Działa! Ale chyba nie do końca.

Strona odpaliła się w zmienionej formie. Zniknęło tło, menu, stopka itp. Pojawił się natomiast nagłówek WordPress (ten można zmienić na swój w templatce AMP). Znów mnie to troszkę rozczarowało ale może tak ma być. W Chrome Developer Console wyskoczyło kilka błędów. Pewnie to niedociągnięcie wtyczki oznaczonej v.0.1. Jest też problem ze stroną główną główną (na wkładkach wyświetliła się strona blogowa, na secureglass nie ma jej wcale). Nie wpadam w panikę, pewnie da się to ustawić tylko jeszcze nie wiem jak. Formularze znikają i według autorów, nie będą dostępne pola input (zobacz). Nie działa też wiele elementów Javascript (w zasadzie wszystkie).

Zobacz ten artykuł w wersji AMP

 

AMP porównanie layout'u stron

 

Analiza.

Przyszedł czas na analizę pod względem prędkości. Różnica czasu wczytywania nie była aż tak widoczna. Zakładam, że krótszy czas po stronie AMP wynikał z faktu, że nie została wczytana masa rzeczy. Liczba odwołań do serwera to miła niespodzianka. Wartość zmalała o połowę. Poprawiła się ocena GTmetrix.

AMP - Analiza GTmetrix

Pełen opis w pdf wraz z czasem wczytywania poszczególnych składników (Waterfall) można ściągnąć i przeanalizować dla wersji normalnej i wersji AMP. Duża zmiana jest w przypadku secureglass ale można się takiej spodziewać biorąc pod uwagę fakt, że wersja AMP pozbawiona jest wszystkich „przygwizdów” i wygląda niemal jak SMS ;)

 

Czy warto?

Nie będę ukrywał, że oczekiwałem czegoś innego … większych szybkości, niezmiennego wyglądu strony itd. Może moja ocena jest krzywdząca bo oparta na analizie zbyt małej stronki (albo zbyt dobrze zoptymalizowanej, heh)? Nie wiem. Co Google wykombinuje żeby jednak ludzi nakłonić do wdrożenia tego rozwiązania? Zapewne szczyt SERP’ów w wersji mobilnej zostanie obsadzony stronami wykorzystującymi AMP. To by zmotywowało wiele firm do zaimplementowania tego rozwiązania, zwłaszcza tych, które czerpią ogromne korzyści finansowe z oblegania szczytowych pozycji. Te mniejsze nie prędko się za zmiany zabiorą ze względu na spory nakład pracy a więc środków. Lawinowy wzrost pojawi się zapewne w chwili gdy WordPress i inne cmsy z automatu będą temat ogarniały. W dużo gorszej sytuacji są firmy bazujące na autorskich systemach.

Co Ty sądzisz o projekcie?

Projekt AMP – analiza wydajności 4.91/5 (32 głosów)

5 Komentarzy

  1. Tomek pisze:

    Ciekawe podsumowanie i fajne efekty:) Tym wpisem zachęciłeś mnie do testowania tej wtyczki. Swoją drogą, ładnie przerobiony szablon vantage, choć chromowy auditor wskazuje: „1725 rules (86%) of CSS not used by the current page”. Kiedyś też robiłem testy z Gtmetrix + P3 dla jednej z witryn na WP i zamiennie za minify, użyłem autoptimize, aby wycisnąć więcej. Do tego WP Smush, by jeszcze obrazki nieźle skompresować. Czasochłonna sprawa, ale zawsze mnie requestów i krótszy czas ładowania strony cieszy:)

  2. Bartek pisze:

    Popraw link do wkładek bo po takim linku jak teraz nic ciekawego się nie wydarzy ; ) Wracając do tematu – zakasam rękawy i także biorę się do roboty.

  3. Tomek pisze:

    Hej Irek, co do narzędzia do optymalizacji CSS, to natknąłem się jedynie na: https://github.com/geuis/helium-css

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *