Produkt Boring Owl: witryna z najwyższymi wskaźnikami performance i SEO (Headless CMS + TypeScript + React.js + Next.js)
W tym case study opisałem proces tworzenia produkt IT sprzedawanego przez naszą spółkę. Jest to między innymi witryna, którą właśnie czytasz, a także kilka innych projektów wdrożonych przez nas zespół w tym samym stacku technologicznym dla naszych Klientów. Realizacje prowadzimy kompleksowo, od stworzenia makiet UX, przez wdrożenie, podłączenie narzędzi analitycznych i mierzenie efektów. Oferując ten produkt gwarantujemy osiągnięcie najwyższych z możliwych parametrów dotyczących szybkości ładowania strony czy prawidłowej optymalizacji pod kątem SEO. Efekty naszej pracy opisałem w dalszej części artykułu.
Najlepszy stack pod SEO?
Nie ma chyba na to pytanie jednoznacznej odpowiedzi, jednak według mnie w kilku przypadkach konfiguracja Headless CMS + React.js + Next.js sprawdza się idealnie - zarówno pod kątem parametrów SEO, jak i zarządzania treścią czy dalszego developmentu aplikacji. Piszę tę opinię z perspektywy wykonawcy, ale również content edytora podobnych projektów.
Przypadki, w których szczególnie warto zwrócić uwagę na nasz produkt:
- Strony wizytówki, w których moduł blogowy jest zarządzany przez system zarządzania treścią, a pozostałe podstrony ładują się statycznie.
- Serwisy z dużą ilością contentu, wymagające pełnej customizacji aplikacji na poziomie dodawania treści do serwisu, tworzenia uprawnień dla użytkowników, ustawienia danych strukturalnych itd.
- Aplikacje współpracujące z innymi systemami np. sklepami internetowymi, które wymagają zaawansowanej konfiguracji na poziomie API oraz wysokich wskaźników pod kątem wygody użytkowania.
Na pewno ten produkt dedykowany jest dla wszystkich, którzy chcą poprawić parametry swojej witryny brane pod uwagę przez roboty wyszukiwarek, a także poprawić wygodę korzystania z serwisu przez użytkowników.
Sam React nie wystarczy
Framework React.js ma wiele zalet, wśród których można wymienić szybkość, stosunkowo niski próg wejścia dla programisty czy dużą społeczność nieustannie rozwijającą tę technologię. Do największych wad Reacta z poziomu pozycjonowania należy renderowanie po stronie klienta (CSR). Nie chcę się rozpisywać na temat niuansów technicznych tego zagadnienia, ale w skrócie można to podsumować stwierdzeniem, że React bardzo utrudnia robotom wyszukiwarek czytanie treści dodanych w aplikacji.
Z pomocą w takich przypadkach przychodzą frameworki współpracujące z Reactem, czyli Next.js czy Gatsby.js. Zmieniają one sposób serwowania treści na renderowanie po stronie serwera (SSR). Dzięki temu bot otrzymuje pełen dostęp do contentu i może go poprawnie indeksować.
Zmiana z WordPressa - trudna, ale konieczna decyzja
W przypadku naszej firmowej witryny bardzo długo borykałem się ze standardowymi problemami, na które narzeka wielu administratorów stron opartych o ten CMS.
Dlaczego w końcu zdecydowaliśmy się na zmianę?
- WordPress jest zazwyczaj po prostu wolny i tak było też w naszym przypadku. Dotyczy to pierwszego wejścia na stronę i później poruszania się po niej. Teoretycznie Google zapewnia, że prędkość ładowania nie ma wielkiego wpływu na miejsce strony w rankingu. Jednak moim zdaniem ma duży wpływ, a nawet jeżeli wykluczyć boty to performance aplikacji jest kluczowy dla użytkowników.
- Korzystaliśmy z komercyjnego szablonu. Mimo dużej elastyczności nie zapewniał on możliwości zmian, na których nam zależało.
- Korzystaliśmy z kilkudziesięciu wtyczek - od optymalizacyjnych po generujące elementy takie, jak menu.
Headless CMS + React.js + Next.js i poprawa wszystkich parametrów
Nową stronę wdrożyliśmy pod koniec 2021 r., tuż przed Świętami Bożego Narodzenia. Już po kilku dniach widać było pozytywne efekty zmiany. Pagespeed witryny wskazywał 98 punktów na desktop i 87 na mobile. Takie parametry udało się osiągnąć już po implementacji skryptów narzędzi analitycznych. Przejścia między stronami są obecnie dużo płynniejsze, współczynnik odrzuceń spadł poniżej 50%, z wcześniejszych 85%.
Poniżej screen z narzędzia GTmetrix, które w mojej opinii jest jednym z bardziej wiarygodnych przy pomiarach szybkości ładowania strony.
Dalej screeny z GoogleSearchConsole pokazujące jakość witryny przed wdrożeniem i po wdrożeniu. Jak widać po przeskanowaniu wszystkich adresów GSC wskazuje, że wszystkie urle są dobrej jakości.
Większość działań optymalizacyjnych związanych z witryną, przeprowadziliśmy jeszcze przed przeniesieniem na produkcyjną domenę. Jednak nie obyło się bez błędów na poziomie linkowania wewnętrznego. Na szczęście z pomocą narzędzia Ahrefs udało się je szybko wykryć i po kolejnym crowlowaniu parametry osiągnęły niemal idealną wartość.
Wszystkie zawarte powyżej parametry gwarantujemy też naszym Klientom zainteresowanym tym produktem.
Czy ten produkt to dalej “custom development”?
Zdecydowanie tak. Headless CMS połączony z Reactem i Nextem daje ogromne możliwości w zakresie różnych konfiguracji. W naszym przypadku wdrożyliśmy rozwiązanie Headless CMS Prismic działające w modelu Saas.
Nasz projekt zaczęliśmy od stworzenia architektury informacji i planu przeniesienia starych adresów, które generowały już ruch. Struktura linków została przeniesiona 1:1, content zmienił się na większości stron statycznych, a na blogu ograniczyliśmy zmiany do rozbudowy lub sformatowania treści. Makiety widoków stworzyliśmy w aplikacji Figma, dodając do projektu niestandardowe elementy, jak zmiana trybów light/dark czy konsole z oknem czatu z botem. Na życzenie w podobnych projektach już na tym etapie możemy zaplanować, jakie testy napiszemy w projekcie i jakie zdarzenia w aplikacji będą badać.
Z poziomu CMS edytorzy mogą zmieniać wszystkie podstawowe parametry SEO, jak metatagi, atrybuty alt oraz tagować wpisy. Ciekawą opcją jest również możliwość edycji danych strukturalnych w formacie json-ld dla każdej podstron. Structured data odpowiadają za wygląd linków do strony w wyszukiwarce, więc dzięki temu w każdym wpisie niezależnie istnieje możliwość ustawienia formatu i poprawy CTR.
Podsumowanie
Moim zdaniem nie ma lepszej rekomendacji produkty/usługi, niż pokazanie efektów na przykładzie realizacji dla własnej firmy. Mam nadzieję, że opisane case study było z dla Czytelników interesujące. W razie uwag, pytań lub chęci współpracy w zakresie stworzenia takiego produktu zachęcam do kontaktu bezpośredniego.
Moje dane kontaktowe:
email: tomasz.kozon@boringowl.io
telefon: 509280539