To będzie szczególny wpis, ponieważ będę recenzował rozwiązanie, które kiedyś planowałem stworzyć samodzielnie. Jest to kreator stron AMP. Dokładnie 3 lata temu opublikowałem tekst, w którym prezentowałem postępy prac nad modułem sklepowym tej platformy: sklepy internetowe AMP. Powinienem go dawno usunąć ale trzymam go sobie na pamiątkę aby nie zabierać się za tworzenie rewolucyjnych projektów, których zalet nikt nie rozumie poza garstką web deweloperów i maniaków stron… Był rok 2017/2018 a strony AMP były całkowicie nowością. Klienci, którzy byli zainteresowani zakupem projektu po kilku momentach zachwytu odeszli jeszcze przed ukończeniem systemu i projekt anulowałem. Z perspektywy czasu, myślę, że dobrze się stało, bo w tamtym momencie nie byłem jeszcze gotowy by samemu stworzyć aplikację/usługę typu SaaS.
Jeżeli czytasz moje artkuły to wiesz doskonale jaki mam stosunek do kreatorów online a nawet gotowych szablonów, które starają się zapewniać taką funkcję. Obecne na rynku usługi takie jak WIX czy Squarespace lub popularne szablony BeTheme czy Divi to kondensacja najgorszych i przestarzałych rozwiązań web deweloperskich. Kiedy przeglądam kod stron stworzonych przez te narzędzia, odnoszę wrażenie, że autorzy z premedytacją i tak jakby „dla żartów” pogarszają ich kod zupełnie tak jakby konkurowali miedzy sobą, „jak zrobić coś jeszcze gorzej?”… no bo jak inaczej wytłumaczyć ładowanie 50 niestandardowych fontów, trzykrotne dodanie wszystkich ikon font-awesome lub ładowanie kodu JavaScript w nagłówku? 🙂
Gotowe systemy CMS już na starcie mają swoje ograniczenia, które uniemożliwiają wykonanie jednocześnie uniwersalnego i wydajnego motywu. Sprawa ma się zupełnie inaczej, kiedy mamy do czynienia z kreatorem stron, który jest tworzony od podstaw aby wygenerowane strony były szybkie. Jeżeli dodamy do tego fakt, że strony spełniają wymagania AMP… BRAK SŁÓW. Musiałem to przetestować.
Najszybsza.pl – kreator stron AMP
Narzędzie, które testujemy to najszybsza.pl. Na stronie głównej projektu zapewnia się nas, że stronę można wykonać samodzielnie, szybko i łatwo. Na razie wybiorę darmowe rozwiązanie, ponieważ subdomena jest OK dla celów testowych i myślę, że poradzę sobie ze stworzeniem strony bez wsparcia autorów.
Rejestracja i logowanie
Po kliknięciu „utwórz witrynę” przechodzimy do galerii szablonów. W sumie… lubię takie postawienie sprawy. Tworzenie projektu od podstaw, podczas kiedy nie mam pojęcia o możliwościach i ograniczeniach edytora jest najbardziej optymalnym rozwiązaniem na tym etapie.
Szablony / motywy
Projekty są przejrzyste, celowo zróżnicowane aby każdy znalazł coś dla siebie choć, nawet w tych minimalistycznych projektach brakuje nieco lekkości i subtelności, która wywoływałaby efekt WOW. Widać, że przy projektowaniu elementów ograniczano do minimum ilość kodu CSS ale ogólnie kolekcja szablonów wypada poprawnie.
Szablony wydają się kompletne, sprawiają wrażenie gotowych stron internetowych. Samych szablonów jest jak na razie kilkanaście. Prawdopodobnie będzie ich przybywać z czasem.
Edycja treści
Po kliknięciu na daną sekcję można edytować tekst a kontrolki rozsiane po interfejsie pozwalają dostosować rozmiary, kolory, obramowanie i inne właściwości prezentacji.
Sporym plusem edytora jest fakt, że elementów nie można przesuwać. Zabezpiecza to projekt przed wprowadzeniem niekontrolowanych zmian i chaosu gdyby kogoś nadmiernie pochłonęło poprawianie dostarczonych szablonów. Dzięki temu strona wygląda spójnie i atrakcyjnie nie tylko w jednym punkcie granicznym ale we wszystkich.
Kreator umożliwia dodać w dowolnym miejscu sekcję, której układ wybieramy z bogatej galerii.
Kreator pozwala dodać i dostosować proste animacje. Autorzy kreatora postarali się dostarczyć wszystkie najpotrzebniejsze elementy jakie zazwyczaj znajdują się na stronach internetowych. Mimo, że strona jest ograniczona wytycznymi AMP, są tutaj nawet takie rzeczy jak: własny HTML, notyfikacja czy formularz. Przy pomocy kreatora stworzymy stronę internetową, która może pełnić bardzo różne funkcje. Przy odrobinie wysiłku myślę, że udało by się poprowadzić bloga lub chociaż prostą sekcję z aktualnościami.
Możliwości konfiguracyjne
Kreator najszybsza.pl ma sporo możliwości konfiguracyjnych.
Globalna konfiguracja strony, pozwala na naprawdę dużo. Możemy między innymi:
- łatwo edytować plik robots.txt,
- włączyć AMP Cache,
- dodać kod śledzący Analytics,
- edytować wygenerowaną losowo subdomenę w darmowej wersji,
- szybko wyłączyć stronę,
- włączyć PWA i dostosować najważniejsze ustawienia takie jak kolor paska nawigacyjnego oraz ikonki,
- łatwo edytować favicon.
Na stronie powitalnej można także stworzyć kopię bezpieczeństwa i przejść na wersję PRO.
Testy jakościowe
Zobaczmy czy stworzona w kreatorze stron internetowych strona jest faktycznie najszybsza i spełnia wymogi AMP.
Test AMP
No, zdziwiłbym się gdyby zabrakło kluczowej cechy na wygenerowanej stronie. Bez najmniejszego problemu kreator spełnia wszystkie punkty AMP.
Oznacza to, że strony wykonane w tym kreatorze spełniają wymogi AMP. Mogą być one zatem ładowane do specjalnego cache Google, który spowoduje, że strona pojawi się niemal równo z kliknięciem lub dotknięciem wyniku wyszukiwania w Google.
PageSpeed Insights / Core Web Vitals
Nasza strona nie powinna mieć problemu w osiągnięciu bardzo dobrego wyniku także w PageSpeed Insights.
Choć technologia AMP tego nie wymaga, konfiguracja serwera oraz sam szablon jest niemal idealnie zoptymalizowany do wyników PageSpeed Insights:
Wynik jest dobry, chociaż czuję lekki niedosyt… Sprawdźmy co wymaga poprawy pod kątem wydajności. FCP i LCP – prawdopodobnie obrazek. Nie jest on automatycznie konwertowany na nowoczesny format. Spróbujmy zatem załadować bezpośrednio obrazek w formacie graficznym nowej generacji WebP. Edytor przyjął obrazek w tym formacie, co nie jest możliwe we wszystkich kreatorach i CMSach. Teraz wynik jest nieco lepszy: 89/100 dla telefonów i 98/100 dla urządzeń typu Desktop.
Narzędzie do badania wydajności podpowiada, że można usunąć nieużywany JavaScript oraz zduplikowane moduły w pakietach JavaScript.
Przypomina to problem jaki często pojawia się na zwykłych stronach, w których ładujemy wszystkie skrypty nawet wtedy kiedy z nich nie korzystamy. Tworząc stronę od podstaw mógłbym wprowadzić te usprawnienia, niestety tutaj muszę pogodzić się z tym, że nie będzie zielonego wyniku w PageSpeed Insights dla komórek i liczyć na to, że będzie to możliwe do osiągnięcia na innych podstronach, które nie będą miały tak wysoko umiejscowionych zdjęć.
Być może twórcy tego kreatora będą w stanie wyeliminować lub chociaż zminimalizować wpływ ładowanych bibliotek AMP na realną prędkość wczytywania strony.
TTFB
TTFB ma spory wpływ na sprawność indeksacji, zobaczmy jaki wynik uzyskamy w narzędziu ByteCheck:
Geolokalizacja
Usługa korzysta z serwerów OVH a lokalizacja wskazuje na polskę:
Optymalizacja zdjęć
Sprawdźmy jeszcze czy narzędzie wspiera użytkownika w dodawaniu obrazków i czy w jakiś sposób optymalizuje zdjęcia do umieszczenia na stronie. To zazwyczaj najtrudniejszy element tworzenia strony, z którego osoby nietechniczne czasem nie zdają sobie sprawy.
Przy ładowaniu zdjęć jesteśmy informowani, że maksymalnym rozmiarem jest 1 MB a twórcy zalecają ładować obrazki o wadze do 100KB.
Na stronie pojawia się domyślnie tag zdjęcia AMP z wieloma wariantami rozmiaru (srcset) w celu uzyskania najlepszej jakości wizualnej na różnych ekranach i to bez jednoczesnego marnowania transferu. W ustawieniach galerii można także dopasować tryb kadrowania miniatur. Ułatwia to stworzenie estetycznego layoutu bez ręcznego kadrowania obrazków. Ilość tego typu ułatwień jest imponująca jak na stronę, która finalnie musi spełniać wymagania AMP.
Można edytować alt obrazka, ale niestety nazwa pliku jest zamieniana na pseudolosowy hash, co może znacząco utrudniać pozycjonowanie obrazków w wyszukiwarce Google Grafika a oryginalna nazwa pliku staje się częścią adresu URL obrazka co ułatwia pozycjonowanie zdjęć w Google Grafika.
Słów kilka o zaletach i wadach AMP
Pamiętaj, że strony AMP mają pewne sztywne ograniczenia, które trzeba poznać jeżeli planujemy stworzyć w tej technologii rozbudowaną stronę o zaawansowanych funkcjach. Zalety i wady tej technologii opisałem w artykule Projektowanie stron AMP.
Do głównych zalet można zaliczyć szybkość działania, obecność strony w specjalnej pamięci podręcznej wyszukiwarki Google, wsparcie w pozycjonowaniu i specjalne odznaczenie w wynikach wyszukiwania.
Choć kreator najszybsza.pl pozwala dodać niestandardowy kod HTML/CSS oraz dodać kod śledzący Google Analytics, sama technologia zabrania używać zewnętrznych skryptów JS a ilość niestandardowego kodu CSS ma sztywny limit.
Zalety kreatora stron AMP
- kreator generuje czysty kod HTML, przyjazny dla robotów i zapewniający łatwe pozycjonowanie,
- kreator optymalizuje stronę pod kątem PageSpeed Insights,
- sam serwer utrzymujący stronę jest idealnie zoptymalizowany do rekomendacji PageSpeed Insights,
- niskie TTFB i lokalizacja IP w Polsce,
- kreator automatycznie skaluje obrazki i tworzy srcset z kilkoma wariantami rozmiaru.
- jedyny lub jeden z nielicznych kreatorów, który generuje strony zgodne ze standardami AMP i PWA,
- łatwa i intuicyjna obsługa,
- duże możliwości konfiguracyjne,
- możliwość edycji danych meta i danych strukturalnych,
- łatwa integracja z Google Analytics,
- możliwość skorzystania z animacji AMP,
- poprawne, nowoczesne, uniwersalne szablony,
- możliwość korzystania i przetestowania kreatora za darmo,
- prosty i niewygórowany cennik,
- brak nachalnej promocji przejścia na wersję PRO.
Wady kreatora
- jak na razie mało szablonów – w dniu testu jest ich tylko 17,
brak możliwości dostosowania nazwy pliku obrazków– poprawione
Podsumowanie
Mam bardzo pozytywne odczucia mimo, że podchodziłem do tego projektu z wielkim dystansem – w końcu to kreator a obecne na rynku popularne rozwiązania traktuję jako produkty – mówiąc wprost – szkodliwe. Ten kreator to całkiem coś innego. Nie można zarzucić mu braku elastyczności bo sama idea AMP nakłada nas pewne ograniczenia. Design i ilość szablonów to coś nad czym autorzy będą pewnie pracowali ale już w tym momencie kreator zapewnia kilka, ładnych motywów, które mogłyby stworzyć stronę, której nie powstydziłby się profesjonalista czy mała firma.
Nie twierdzę, że testowane w tym artykule narzędzie to coś dla każdego, nie wiem też czy istnieją inne konkurencyjne rozwiązania. Serwis umożliwia wykonać stronę AMP o wysokiej jakości technicznej. Jeżeli decydujesz się na stronę w kreatorze i wiesz co to jest AMP, nie widzę powodu by nie przetestować tego rozwiązania. Najszybsza.pl generuje prawdziwy kod, pełnoprawnej i zoptymalizowanej strony AMP oraz PWA. Budowanie strony polega na korzystaniu z łatwego w obsłudze kreatora w którym dosłownie „wyklikamy” jak ma ona wyglądać i jak ma funkcjonować.
Odpowiedz lub skomentuj