Jak stworzyć stronę internetową - poradnik 2024

 

• Dlaczego warto stworzyć nową stronę internetową?
• Jak zacząć tworzenie nowej strony?
• Aktualne trendy w projektowaniu stron
• Jak zrobić projekt strony na przykładzie Heuristic.pl?
• Co wpływa na szybkość strony i Google Page Speed?
• Jak nie stracić pozycji w Google?
• Dlaczego uruchomiliśmy nieskończoną stronę?

Z tego wpisu dowiesz się jak stworzyć nową stronę internetową (dla firmy ale nie tylko) jeśli obecnie masz już stronę ale nie spełnia obecnych wymagań.

Jeśli Twoja obecna strona:

• przestała wyglądać atrakcyjnie - trendy się zmieniają, strony się starzeją
• strona nie jest responsywna
• strona nie spełnia wymogów Google, ma niski Page Speed
• strona działa wolno na telefonach
• strona ma słabą konwersję - stawki kampanii poszły w górę i chcesz mniej wydawać na reklamy w Google

to ten wpis jest dla Ciebie.

Jeśli nie masz jeszcze strony to z tego wpisu dowiesz się:

• jak wygląda proces tworzenia strony z indywidualnym projektem graficznym
• jakie cele można stawiać stronie www przed przystąpieniem do prac projektowych
• na co zwrócić uwagę aby strona się pozycjonowała w Google

Wpis powstał jako studium przypadku - procesu tworzenia naszej nowej strony heuristic.pl na której czytasz ten artykuł. Dowiesz się też dlaczego zmieniliśmy stroną dopiero po 7 latach i dlaczego uruchomiliśmy stronę, które nie była skończona.

No to zaczynamy :)

Dlaczego warto stworzyć nową stronę?

Czy czasem też masz tak, że odwiedzasz strony swojej konkurencji? Albo po prostu strony z Twojej branży? Wpisujesz jakąś frazę na którą się pozycjonujesz i odwiedzasz strony z TOP10.

Ja co jakiś czas tak robię. Lubię poklikać po stronach z naszej branży, nie tylko z nudy.

Można to nazwać benchmarkiem, albo zwyczajną ludzką potrzebą porównywania się z innymi. Tak już mamy i koniec. I tak długo jak służący to naszemu rozwojowi, lub rozwoju naszej firmy, to myślę że ma to sens i nie ma co się tego wstydzić.

A po co odwiedzam te strony? Głównie po to, aby upewnić się czy nasza strona wciąż może z nimi konkurować pod względem designu, szybkości, funkcjonalności, treści itd.

Pewnie powiesz, że można to łatwo sprawdzić w Google Analytics i innych narzędziach SEO. Można, ale ja chce się poczuć jak użytkownik, nie robot, skrypt czy wskaźnik. Zresztą design'u czy użyteczności layout'u można poczuć tylko oceniając go w ten sposób.

Strona firmowa to najważniejsze narzędzie w aktywnym pozyskiwaniu nowych klientów praktycznie w każdej branży, również dla firmy takiej jak nasza zajmującej się tworzeniem stron internetowych i marketingiem. I powinna być najlepsza na jaką nas stać. Takie jest moje zdanie.

Odwiedzanie stron z tej samej branży to szybki sposób na weryfikację, czy nasza strona wciąż trzyma poziom, czy aby nie nadszedł czas na zmiany.

Strona www jak każde narzędzie z czasem traci swój blask, zwyczajnie przestaje konwertować, jej skuteczność spada.

Może być też tak, że w procesie aktualizacji algorytmów Google strona spada na niższe pozycji w rankingu, co przekłada się na mniejszą ilość zapytań, a Ty żeby utrzymać ilość leadów na tym samym poziomie musisz zwiększać budżety na kampanie w Google czy na Facebooku. A wiadomo, stawki nie maleją.

Niektóre firmy w takiej sytuacji postanawiają przeznaczyć budżet na pozycjonowanie, SEO czy kampanie w Google. Wydatki rosną a efektów brak. Google Analytics pokazuje wzrost wizyt, a telefony wciąż nie dzwonią, zapytania nie spływają.

Okazuje się, że problem nie leży w ilości wizyt, a w samej stronie, która z jakiegoś powodu (będzie o tym poniżej) nie konwertuje użytkowników w prospecty.

I to jest ten moment, kiedy zdajesz sobie sprawę, że aby firma mogła dalej się rozwijać trzeba stworzyć nową stronę.

Reasumując, najważniejsze powody biznesowe stworzenia nowej strony to:

1. stara strona jest już stara, brzydka, mało atrakcyjna co sprawia, że słabo konwertuje - klienci nie wysyłają zapytań, nie dzwonią, szybko wychodzą ze strony
2. stara strona nie działa na telefonach albo działa wolno, albo sprawia inne problemy na urządzeniach mobilnych, a to powoduje problemy jak wyżej.

 

Inne powody dlaczego co kilka lat warto zrobić nową wersję strony to:

1. zmienia się technologia tworzenia stron - pojawiają się nowe, bardziej wydajne technologie

2. zmieniają się możliwości i dostępność urządzeń - np. wydajne smartfony, które świetnie radzą sobie z nową technologią, ale ze starą już gorzej

3. zmieniają się oczekiwania i przyzwyczajenia użytkowników - kształtowane przez największych graczy na rynku np. Allegro

4. zmieniają się trendy graficzne - to co było fajne kilka lat temu obecnie może być passe

5. zmieniają się wytyczne i wymagania wyszukiwarek w obszarze SEO - np. w Google zaczyna obowiązywać "mobile first index" czyli w trakcie indeksowania strony sprawdzane jest jej działanie na urządzeniach mobilnych i jej wyniki decydują o pozycji strony w rankingu

6. strona nie jest zgodna z WCAG 2.1 AA - strony urzędów, OPP, fundacji - ustawowo muszą spełniać wymagania dostępności strony zgodnej z WCAG 2.1.

I tak na przykład naszą poprzednią stronę heuristic.pl uruchomiliśmy w grudniu 2015 roku. Na początku 2016 roku strona została zindeksowana przez stronę Wayback Machine - serwis, który co jakiś czas indeksuje wersję strony w danym momencie, dzięki czemu można "cofnąć się w czasie" i zobaczyć jak wyglądało np. allegro w 2005 roku.

I teraz nasuwa się pytanie. Dlaczego dopiero po 7 latach postanowiliśmy stworzyć nową stronę. 7 lat to szmat czasu, a dla strony www to niemal wieczność.

Najprościej można by powiedzieć, że .. szewc w dziurawych kaloszach chodzi .. nie było czasu bo były inne ważniejsze sprawy.

A tak naprawdę ..

• nie mieliśmy pomysłu / koncepcji jak powinna wyglądać nowa strona - bardzo trudno się na coś zdecydować, kiedy można wdrożyć dowolny układ czy design.
• mając świadomość jak duży nakład energii będzie potrzebny aby stworzyć nową stronę (o czym więcej dalej) zwyczajnie przekładaliśmy to na "lepsze czasy".

I tak minęło 7 lat, aż w końcu musieliśmy się za to zabrać i stworzyć nową wersję naszej firmowej strony www.

Ktoś mógłby powiedzieć, że strona firmy z branży deweloperskiej powinna obronić się (wciąż dobrze działać) nawet po 7 lat.

To, że strona względnie dobrze wygląda i jest responsywna nie znaczy że należy czekać aż 7 lat ze stworzeniem nowej. Bez względu na to jak nowoczesna była strona w momencie uruchamiania, po 3-4 latach widać, że strona jest z innej epoki. Zatem - nie bądź jak my, nie odkładaj tego przez 7 lat bo nie warto.

Dlaczego tak trudno zdecydować się na stworzenie nowej strony?

Ostatnio pojawiła mi się reklama na Facebook'u - "Strona w 4 godziny! Z tego kursu za 56 zł dowiesz się jak stworzyć nowoczesną stronę w 4 godziny."

Jeśli ktoś widzi taką reklamę, a nigdy nie tworzył żadnej strony, pierwsze co sobie myśli to że tworzenie stron jest proste i szybkie. Skoro można w 4 godziny :)

Skoro ktoś oferuje taki kurs to pewnie się da. Trudno się wypowiadać bez przerobienia kursu. Może my jeszcze czegoś nie zrozumieliśmy przez te 16 lat. Tak czy inaczej nam schodzi z tym dłużej, nawet w przypadku strony tworzonej pierwszy raz, bez migracji starej struktury, treści itd.

A utworzenie nowej wersji istniejącej strony to już zupełnie dłuższy proces. Zwłaszcza jeśli strona posiada rozbudowaną strukturę i chce się to zrobić dobrze.

A co znaczy dobrze? Albo, czy można to zrobić źle?

Oj można i to bardzo źle. Ale zanim do tego przejdę pozwól, że skończę wątek dlaczego tak trudno stworzyć nową wersję strony, zwłaszcza firmowej.


Firmy z innych branż mają trochę ułatwione zadanie, bo mogą zlecić ten proces agencji, jakiejś zewnętrznej firmie. Taka firma popatrzy na to co jest chłodnym okiem, zdefiniuje z klientem potrzeby, przygotuje projekt, zakoduje, przeniesie treści i .. klient powinien być zadowolony. Dla takiej firmy to chleb powszedni. Nie jest emocjonalnie związana z biznesem klienta więc jest mu łatwiej. Robimy to więc faktycznie tak to działa.

Inaczej wygląda sytuacja kiedy projektujemy nową stronę sami dla siebie. Tworzenie czegoś dla siebie to wyjątkowo mozolna robota. Ciągle coś się nie podoba, coś jest nie tak.

Trudno wymyślić nową koncepcję. A jak już na coś wpadniemy i zatracimy się w projektowaniu w jakiś niewiadomy sposób dzieje się tak, że po kilku godzinach pracy nagle odkrywamy, że nowy layout wygląda jak poprawiona szminką kopia starej strony. No i zonk. Zaczynamy od nowa.

Przy okazji zaobserwowaliśmy, że część klientów ma podobny problem. Zlecają stworzenie nowej wersji strony, a później odrzucają nowy projekt i chcą żeby nowa strona wyglądała jak stara. I nie pomagają żadne argumenty. W końcu dochodzi do tego że się poddajemy i robimy tak jak chce klient, w końcu to jego strona i on decyduje.

Od czego zacząć tworzenie nowej strony?

Jak ułatwić sobie proces tworzenia nowej wersji strony, żeby poszło to względnie gładko? 

Polecam zacząć od przygotowania założeń - celów jakie chcemy postawić nowej stronie. Wystarczy spisać w punktach nasze oczekiwania względem nowej strony, a mocno ułatwi to dalsze działania.

W przypadku tworzenia nowej strony heuristic.pl wyglądało to następująco:

1. Czym nowy serwis ma się różnić od starego:
   1. szybkość - znaczący wzrost szybkości działania strony
   2. Google Page Speed - znacząco lepsze wyniki
   3. kompatybilność z urządzeniami - poprawny wygląd i działanie na urządzeniach mobilnych
   4. poprawa widoczności w Google - wzrost pozycji obecnych stron
2. Layout:
   • podejście mobile first - koncentracja na urządzeniach mobilnych
   • użyteczność - prostota i czytelność, zwłaszcza na urządzeniach mobilnych
3. Grafika - design:
   • projekt powinien się mocno różnić od obecnego
   • wysoki kontrast, duża czytelność
4. Funkcjonalność - na start koncentracja na niezbędnych funkcjonalnościach
5. Administracja w CMS:
   • maksymalne uproszczenie dodawania nowych treści
   • uproszczenie tworzenia i zarządzania landingami
6. SEO
   • zachowanie obecnych pozycji w indeksie Google
   • poprawa widoczności w Google dla obecnych treści
7. Inne:
   • lepsza struktura kategorii serwisu
   • analityka i pomiar konwersji - GA4
   • optymalizacja kodów w GTM

 

Aktualne trendy w projektowaniu stron

Oczywiście nową stronę można uruchomić w oparciu o  kupiony gotowy szablon. Przy mniejszym budżecie może to być optymalne rozwiązanie. Oczywiście są też minusy - ten sam szablon będą wykorzystywać też inne firmy oraz nie będzie on tak zoptymalizowana pod względem szybkości jak dedykowany szablon. Gotowy szablon to również większa trudność rozwoju i wprowadzania modyfikacji.

Jeśli zatem masz budżet, zależy Ci na wydajnej i szybkiej stronie którą chcesz rozwijać - postaw na stronę z indywidualnym projektem i szablonami.

Zalety strony z indywidualną grafiką i szablonem:

• lepiej wyróżnia się wśród innych stron przez co jest lepiej zapamiętana przez użytkownika
• osiąga lepsze wyniki w testach Google przez co osiąga wyższe pozycje w Google
• lepiej angażuje użytkowników i generuje konwersje
• pozwala na szybszą i tańszą rozbudowę, zwłaszcza o niestandardowe funkcjonalności.

Wracając do grafiki, aktualne trendy w projektowaniu to:

• minimalizm
• koncentracja na mobile
• duże kontrasty
• odejście od idealnej symetrii

 

Minimalizm

Minimalizm to zwyczajne odejście od przeładowanych interfejsów, wypchanych niepotrzebnymi funkcjonalnościami i ozdobnikami  graficznymi. Jednym słowem dążenie do skupienia uwagi użytkownika na tym co jest ważne bez rozpraszania go nieistotnymi elementami.

Mobile

Koncentracja na mobile jest trendem od co najmniej kilku lat i tylko się nasila. Ruch mobilny wciąż rośnie. Może nie tak bardzo jak jeszcze kilka lat temu ale wystarczy popatrzeć w statystyki aby dowiedzieć się ile użytkowników ogląda stronę w telefonie.

Duże kontrasty

Duże kontrasty to nowość. Jeszcze kilka lat temu modne były strony ze stonowaną grafiką, dużo białego i szarego koloru. Były to trendy podpatrzone w Apple. Obecnie stawia się na dużą kontrastowość elementów używając przy tym często mocnych, nasyconych kolorów, które wcześniej były rzadkością - czerwienie, turkusy czy róże łączone z bielą i odcieniami czarnego. Takich kolorów trudno szukać na stronach sprzed kilku lat, a obecnie są często spotykane.

Brak symetrii, niestandardowe układy

Odejście od klasycznej symetrii to projektowanie layoutu w taki sposób aby był on niesymetryczny. Niesymetryczny układ sprawia, że layout nie jest nudny, a użytkownik naturalnie skupia uwagę na poszczególnych elementach podkreślonych dodatkowo zastosowaniem kontrastów.

Jak zrobić projekt strony na przykładzie Heuristic.pl

Przed przystąpieniem do prac projektowych warto poklikać po różnych stronach i poszukać inspiracji.

Stworzenie nowego layoutu i nowej grafiki to najtrudniejsza część całego projektu i warto poświęcić temu odpowiednio dużo czasu. Przy obecnej ilości stron w internecie trudno wymyślić coś zupełnie oryginalnego. Niektórzy próbują burzyć przyjęte standardy ale nie zawsze wychodzi to na plus.

Nam zależało na zupełnie całkowitym odejściu od poprzedniego wyglądu strony. To miała być totalna rewolucja, żadnego nawiązywania do poprzedniego layoutu.

Zanim zaczęliśmy projektowanie przeglądnęliśmy nasze założenia, które chcemy osiągnąć w nowym serwisie.

Na szczycie naszej listy celów były:

1. szybkość strony, zwłaszcza w urządzeniach mobilnych - jest to wartość dla użytkownika której nie trzeba tłumaczyć
2. wysokie wyniki w Google Page Speed - może to przełożyć się na lepsze pozycje strony w Google

Chcąc pogodzić obydwa punkty przeanalizowaliśmy wytyczne zgłaszane przez Google Page Speed na różnych stronach, aby jeszcze lepiej poznać ten temat.

Aby zdobyć wysoką punktację w Google Page Speed potrzeba:

1. posiadać stronę zgodną z wytycznymi Google, tak dla rozdzielczości mobilnych jak i desktop
2. posiadać szybki hosting, który sprosta wymaganiom stawianym przez Google.

 

O hosting się nie martwiłem, bo tyle co przesiedliśmy się na nowe, bardziej wydajne serwery z dyskami SSD. Pozostała kwestia szablonów strony.

Analiza Google Page Speed testuje stronę bardzo dokładnie i czepia się wszystkiego. Na szczęście podaje szczegółowe informacje co należy poprawić i dlaczego.

Google Page Speed dostępny jest od lat, ale warto do niego regularnie zaglądać, ponieważ cały czas wprowadzane są nowe wytyczne, a poprzeczka podnoszona jest coraz wyżej.

Zadaliśmy sobie pytanie - co najbardziej wpływa na szybkość strony, na co musimy zwrócić uwagę.

I taką listę otrzymaliśmy:

1. zdjęcia - ilość, rozmiar, format oraz rozmieszczenie
2. ilość kodu JavaScript
3. ilość i format fontów oraz sposób ich ładowania
4. ilość i rodzaj kodów zewnętrznych spoza witryny.

 

Zdjęcia, slidery, karuzele na nowej stronie

Wagę zdjęć można zmniejszyć poprzez zastosowaniem zalecanych formatów (WEBP, JPG) i optymalizację wielkości plików np. w TinyJPG oraz generowanie różnej wielkości miniatur dla różnych rozdzielczości. To już od lat robimy. 

Pojawiło się pytanie czy da się zaprojektować ciekawie wyglądający serwis bez używania dużej ilości zdjęć w wysokiej rozdzielczości?

Był to nasz pierwszy cel jaki sobie postawiliśmy  przy projektowaniu.

Od lat przyjęło się, że strona główna musi, ale to musi mieć slider z dużymi zdjęciami, napisami i buttonem CTA, najlepiej w animowanej karuzeli, w której co kilka sekund pojawia się inne zdjęcie i teksty.

A jakie jest zadanie graficznego slidera?

Oczywiście takie, żeby przykuć uwagę użytkownika po wejściu na stronę, żeby chciał pozostać na niej dłużej. Kilka pierwszych sekund decyduje czy użytkownik zostanie na stronie czy kliknie "wstecz" zwiększając przy tym współczynnik odrzuceń, mający znaczenie przy pozycjonowaniu. 

No i padło pytanie - czy da się zaprojektować stronę główną, która będzie angażować użytkowników bez slidera i karuzeli z wielkimi zdjęciami?

Kilka lat temu czytałem artykuł, w którym autor przeprowadził testy A/B w serwisie testując skuteczność strony z i bez slidera.

Wyniki badań wykazały, że klikalność kolejnych slajdów w karuzeli drastycznie spada. Nie pamiętam gdzie czytałem ten artykuł ale poklikałem po sieci i znalazłem inny, w którym Adobe przeprowadziło testy dla klienta z branży finansowej które wykazały, że np. strona bez slidera sprzedawała lepiej o 23% niż strona ze sliderem. Podobnie z oglądalnością slajdów - od 2 slajdu oglądalność drastycznie spada.
 

Nie ma jednoznacznej odpowiedzi czy posiadanie graficznego slidera z karuzelą na stronie głównej (lub landingu na podstronie) bardziej pomaga czy szkodzi. Jest to sprawa indywidualna i bez przeprowadzenia testów A/B się tego nie dowiemy.

Czego można być pewnym, to że duże zdjęcia prawie zawsze dużo ważą, przez co będą negatywnie wpływać na wynik Page Speed jeśli umieścimy je w pierwszym widoku jako karuzela. I nie bardzo można to obejść poprzez np. lazy loading gdyż Google nie zaleca stosowanie tego rozwiązania przy ładowaniu widocznej części serwisu, czyli powyżej linii załamania.

Ponieważ wysoki wynik Page Speed był naszym celem - postanowiliśmy zaprojektować stronę bez wielkiego zdjęcia ładowanego w pierwszym widoku serwisu.

Tylko czy to w ogóle ma sens? Przecież wszędzie przeczytamy, że stajemy się społeczeństwem obrazkowym, które nie chce już czytać tylko oglądać - zdjęcia i video.

Dobrej jakości zdjęcia mają jeszcze jedną zaletę - mocno upraszczają projektowanie - wstawiasz ładne zdjęcie, napisy ładną czcionką, logo i już całkiem nieźle to wygląda. Jak nie ma zdjęcia sprawy się komplikują bo masz przestrzeń, którą chciałoby się wypełnić ... zdjęciem, a jeśli nie zdjęciem to czym?

Dlatego nie mówię, że rezygnacja z dużych zdjęć jest jedyną drogą aby zrobić nowoczesny projekt.

Zwyczajnie, obserwując jak obecnie projektuje się zagraniczne serwisy zauważam, że coraz więcej designerów nie używa wielkich zdjęć w pierwszym widoku. Potrafią zaprojektować fajny design bez "wspomagania" się pięknymi zdjęciami. I tą drogą postanowiłem, że i my pójdziemy przy projektowaniu grafiki do nowej wersji naszego serwisu.


Ponieważ zdecydowaliśmy się nie dawać zdjęcia w pierwszym widoku postanowiliśmy je zastąpić innym rodzajem grafiki - plikami SVG.

SVG to pliki graficzne - wektory, które są lekkie jak piórko. Użycie wektorów SVG na stronie ma wiele plusów - można je skalować do dowolnie dużego rozmiaru bez straty jakości oraz bez zwiększania ich wagi. W przypadku standardowych zdjęć JPG chcąc mieć większe zdjęcie na stronie musimy użyć pliku o większej rozdzielczości, co przekłada się na większą wagę pliku.

Ale co z logo?

Ponieważ postanowiliśmy, że nowy projekt ma całkowicie różnić się od poprzedniego postanowiliśmy, że zaprezentujemy logo w innej formie.

Wykorzystaliśmy znak logo jako element graficzny w formie wektora SVG, który zastąpił duże zdjęcie slidera. W ten sposób otrzymaliśmy , będąc elementem ocieplającym pierwszy widok strony głównej i niektórych podstron.

JavaScript - nowa strona z Bootstrap 5

To, że nadmierna ilość kodu JavaScript spowalnia ładowanie strony nie jest żadnym odkryciem.

Czym więcej funkcjonalności w serwisie tym więcej kodu i tym działa ona wolniej. Zwłaszcza jeśli używa się do tego dużych bibliotek jak jQuerry, która w najnowszej wersji waży ponad 240kb. Wprawdzie na na pomoc przychodzi znany GZIPi minifikacja ale wciąż jest to kilkadziesiąt kilobajtów które muszą zostać pobrane przez przeglądarkę aby mógł zostać przetworzony.

Najgorzej jest przy pierwszym otworzeniu strony bo wtedy wszystkie biblioteki muszą zostać pobrane. Przy kolejnej wizycie przeglądarka może korzystać z bibliotek znajdujących się w pamięci podręcznej co mocno przyspiesza ładowanie strony.

I tutaj mała dygresja. Można znacząco zmniejszyć wagę kodu poprzez spakowanie go i wysyłanie w wersji spakowanej. Jeśli masz już stronę tutaj możesz sprawdzić czy Twoja strona korzysta z kompresji GZIP - wystarczy wpisać adres strony. Jeśli tego nie robi - warto o to zadbać.

I pojawiło się pytanie - czy można stworzyć stronę bez kodu JavaScript, albo stanowczo go ograniczyć?

Okazał się, że nie sposób zrezygnować z JS ale można go ograniczyć.

W chwili kiedy zaczęliśmy się interesować stworzeniem nowej strony została opublikowana nowa wersja najbardziej popularnego frameworku CSS - Bootstrap, z którego od lat korzystamy.

Okazało się, że nowa wersja 5, wciąż jeszcze w wersji Alpha w tamtym czasie, pozwala na zupełne pominięcie biblioteki jQuery pozwalając używać czystego JavaScript (Vanilla) oraz ograniczenie kodu JavaScript. Poprzednie wersje Bootstrapa bazowały na jQuery, jednym słowem zmuszały do ładowania tej biblioteki.

Jedyną słuszną decyzją było .. stworzenie szablonów strony od nowa w oparciu o najnowszą wersję Bootstrap 5.

Wiedzieliśmy, że stworzenie szablonów od zera na nowym silniku będzie pracochłonne ale .. nigdzie nam się nie spieszyło. Teoretycznie, bo tak naprawdę presja była duża żeby starą stronę jak najszybciej wymienić, ale ważniejsze było żeby zrobić to dobrze.

Korzystanie z nowej technologii po raz pierwszy zawsze wymaga nakładu pracy i czasu. Użycie go przy tworzeniu strony dla siebie miało ten plus, że nie nikt nas nie poganiał. Mogliśmy na spokojnie poznać nowe możliwości frameworka tak, żeby wycisnąć z niego jak najwięcej.

W bardziej skomplikowanych projektach czy sklepach, w których wiele funkcjonalności obsługiwane jest przez JavaScript nie da się wyeliminować jQuery, ale w prostszych projektach z Bootstrap 5 jest to całkowicie możliwe.

Bootstrap 5 to również:

• wygodniejsze pozycjonowanie elementów
• lepsza obsługa tabelek
• wiele gotowych komponentów
• lepsza obsługa formularzy, pop-up'ów, modali
• domyślny podział grida na 6 kolumn
• bogata biblioteka ikonek svg

Zalet pewnie jest i więcej ale te w zupełności wystarczyły. Są też minusy - m.in. brak zgodności z przeglądarkami IE 10 i 11. Tylko kto by chciał wspierać te archaizmy.

Co jeszcze wpływa na szybkość strony i Google Page Speed?

Przy projektowaniu strony staraliśmy się wyeliminować wszystko za co Google "karze" w teście Page Speed.

Jedną z takich rzeczy jest, która spowalnia działanie strony i za co Google odbiera punkty jest format fontów i ładowanie bibliotek z zewnętrznych serwerów.

Niestandardowe fonty

Niestandardowe fonty mogą być ładowane na wiele sposobów. Najbardziej popularne są fonty Google Fonts. Jest to darmowa baza fontów, które można wykorzystać za darmo na stronie i innych projektach. Czcionki można pobrać na dysk a w przypadku stron mogą być ładowane bezpośrednio z serwerów Google, wystarczy umieścić odpowiedni kod.

Mimo, że Google daje taką możliwość, w teście Page Speed Google zgłasza fonty ładowane z zewnętrznych serwerów jako zła praktyka. Jednym słowem fonty powinny być ładowane z naszego serwera.

Ostatnio czytałem, że w Niemczech znalazły się kancelarie, które pozywają właścicieli stron za to, że .. uwaga .. czcionki ładowane są z zewnętrznych serwerów np. Google Fonts, a oni jako użytkownicy strony nie wyrażają na to zgody w ustawieniach cookies. Dlatego najbezpieczniej jest przerzucić czcionki na nasz serwer.

Warto zwrócić uwagę na format jak używamy. Czcionki pobrane z Google Fonts dostaniemy w formacie TTF, natomiast na stronie optymalnym wydajnościowo formatem jest woff i woff2 i tych formatów powinniśmy używać. Czcionki TTF bez problemu przekonwertujemy na woff i woff2 korzystając z darmowych konwerterów online jak np. ten konwerter fontów albo ten konwerter fontów. Po osadzeniu czcionek warto sprawdzić czy wyglądają tak jak TTF, czasami konwertery robią różne psikusy i wtedy warto użyć innego.

Analityka i inne kody zewnętrzne

Oprócz fontów z zewnętrznych serwerów ładowane są inny kody jak np. biblioteki JavaScript np. Bootstrap, kody śledzące Google Analytics, Google Ads, Facebook Pixel, różnego rodzaju chaty, ankiety, wyskakujące popupy newslettera itd.

Zgodnie z wytycznymi Google optymalnie jest kiedy kod ładowany jest z jednego serwera, tam gdzie hostujemy stronę. Tylko jak to zrobić chociażby w przypadku kodów śledzących, kodów konwersji itp.

To co byliśmy w stanie przenieśliśmy na nasz serwer czyli fonty, biblioteki JS, a całą resztę .. wstawiliśmy w kontenery Google Tag Manager, licząc że na tak osadzony kod Google popatrzy przyjaźniejszym okiem. No i się przeliczyliśmy.

Bez zewnętrznych kodów w teście Google Page Speed udało nam się osiągnąć 97/100 odpowiednio mobile / desktop. Niestety po dodaniu kodów śledzących punktacja dla wydajności mocno spadła do 67/95 mobile / desktop.

Page Speed zgłasza je jako kody spoza witryny, które spowalniają wczytywanie strony. Na chwilę obecną nie znamy sposobu żeby sobie z tym poradzić, a Google Analytics czy Facebook Pixel są zdecydowanie ważniejsze niż punkty w Page Speedzie i na ten moment nie widzimy sensu dalej z tym walczyć.

Nowa strona - jak nie stracić pozycji w Google

Jednym z powodów zmiany strony na nową jest strach przed spadkami w Google.

Stara strona jaka by nie była, na pewno generuje ruch z naturalnych wyników wyszukiwania. Nawet jeśli kiepsko konwertuje to może generować całkiem spory ruch.

I pojawia się, całkiem uzasadniona obawa, że po zmianie na nową strona spadnie w wynikach wyszukiwania a wraz z tym ruch jaki generuje. Czasami faktycznie strona spada, a w skrajnych przypadkach nawet usuwana z wyników wyszukiwania jeśli migracja strony zostanie wykonana bez przestrzegania wymogów SEO.

Dlaczego tak się dzieje?
 

Struktura kategorii i URL

Tworząc nową stronę często zmienia się struktura linków URL, o czym się często zapomina.

Na naszej stronie również postanowiliśmy zmienić strukturę - z niektórych podstron zrezygnowaliśmy, a dla niektórych stworzyliśmy inną strukturę np. zakładkę usługi zmieniliśmy na oferta oraz przebudowaliśmy jej podkategorie.

W nowej stronie najlepiej odwzorować strukturę kategorii oraz adresów URL ze starej strony, aby wszystkie linki były identyczne. Jeśli zmieniasz strukturę strony a tym samym linki musisz pamiętać aby wykonać przekierowania ze starych linków - tzw. redirect 301, który ustawia się w pliku htaccess.

Spowoduje to, że użytkownicy klikający w stary link w wynikach Google zostaną przekierowani na nowy, istniejący adres URL.
Dodatkowo wszystkie moc linków zewnętrznych do danego adresu URL zostanie przez Google przeniesiony na nowy adres URL do którego kieruje przekierowanie.

Przekierowania można przygotować nawet dla dużej ilości podstron jak artykuły. Wystarczy ściągnąć pełną mapę strony korzystając z dostępnych narzędzi a następnie w edytorze jak Notepad czy Sublime Text wykonać masowe operacje poprzez znajdź i zamień.

Przykładowe przekierowania na naszej stronie:

• Redirect 301 /uslugi/hosting-vps-dedykowany https://www.heuristic.pl/oferta/pozostale-uslugi/hosting-stron-i-sklepow

 

Meta dane

Drugą bardzo ważną rzeczą, o której należy pamiętać to informacje zawarte w META TITLE i META DESCRIPTION. Są to bardzo ważne informacje po których Google klasyfikuje strony w swoim rankingu. Ważne aby te informacje zostały przeniesione ze starej strony - nie tylko dla strony ale dla wszystkich podstron.

Treści

Standardowe podejście do tworzenia nowej strony jest takie - wybieramy zestaw funkcjonalności, które zakładamy że strona powinna mieć, następnie projektujemy grafikę, kodujemy szablony, tworzymy kategorie, menu i ... tutaj pojawia się kilka opcji.

1. Uruchamiamy stronę, która ma praktycznie wszystko oprócz .. treści, które są szczątkowe i na niektórych podstronach witają użytkowników tekstem "w przygotowaniu"
2. Nie uruchamiamy strony do czasu kiedy wszystkie treści nie zostaną wprowadzone - potrafi to trwać bardzo długo, mamy projekty które czekają już kilka miesięcy na uruchomienie bo treści nadal się tworzą.

I teraz postawmy pytanie - jaki jest nadrzędny cel strony? To oczywiste - dostarczanie informacji. Jeśli ich nie ma cała idea "strony" traci sens. Strona to tylko opakowanie do treści, graficzna prezentacja w możliwie najbardziej użyteczny, czytelny dla użytkownika sposób.

Jeśli zrobisz nową stronę i zapomnisz o treściach to możesz być pewien, że strona spadnie w rankingu Google.

Google wciąż bazuje głównie na tekście. Jeśli na nowej stronie zmienią się teksty i będą one gorzej zoptymalizowane (dopasowane) do danych META, to jest duża szansa, że strona spadnie w rankingu Google nawet na dalekie pozycje.

Dlatego najważniejszym elementem nowej strony i którym nie możesz zapomnieć jest treść ze starej strony - musisz ją przenieść. Możesz to zrobić dosłownie, te same teksty tylko inaczej zaprezentowane (np. aktualności, blog) oraz te same treści przepisane na nowo, np. w ciekawszy, lepszy sposób - np. strona główna, podstrony oferty.

My zdecydowaliśmy się napisać treści od nowa dla strony głównej oraz podstron ofertowych, pamiętając przy tym o ich optymalizacji, tak aby były dopasowane do fraz kluczowych. Przy takiej zmianie warto pamiętać aby w tekstach pojawiał się nagłówek H1 zawierający frazę kluczową, nagłówki H2 i H3 oraz aby frazy kluczowe znajdowały się wysoko w kodzie. Strona też nie może być przeładowana frazami kluczowymi, które powinny występować naturalnie i w różnych odmianach językowych. Nie można przesadzić.

Jeśli na starej stronie posiadasz wpisy na blogu, aktualności to warto je również przenieść na nową stronę. Można wykonać import tych treści lub jeśli jest ich nie wiele przenieść je ręcznie - teksty i zdjęcia. Pamiętaj również o opisach ALT i TITLE dla zdjęć aby również pozostały przeniesione lub dodane.

Przenoszenie oraz wypełnianie strony treściami jest najbardziej pracochłonnym i czasochłonnym zadaniem w całym procesie tworzenia nowej strony. Zwłaszcza kiedy treści tworzone są od nowa.

Linkowanie wewnętrzne

Jedną z rzeczy o której często się zapomina przy tworzeniu nowej strony jest linkowanie wewnętrzne, czyli linki wewnątrz serwisu odsyłające z jednej strony do drugiej. Chodzi mi tutaj o linki umieszczone w artykułach typu aktualności czy wpisy na blogu, ponieważ inne linki będące częścią architektury strony jak menu czy stopka będą działać prawidłowo. Linki w artykułach są niezwykle ważnym elementem pozycjonowania strony i nie można o nich zapomnieć.

Nowa strona to nowe adresy URL. Po imporcie aktualności i wpisów na blogu należy wykonać modyfikację linków wewnętrznych, aby linkowały do nowych miejsc w serwisie - głównie chodzi tu o podstrony oferty. Przy mniejszej ilości wpisów można to zrobić ręcznie edytując każdy wpis i poprawiając linki. Jeśli wpisów jest dużo warto sięgnąć po narzędzia - używając odpowiednich zapytań w phpMyAdminie można wykonać masowe operacje zastąpienia starych adresów do nowych. Należy wcześniej przeanalizować jak wyglądały stare adres, dopasować dla nich nowe podstrony i wykonać operację zastępowania.

Jeśli operację naprawy linków wewnętrznych oraz przekierowań 301 wykonamy w prawidłowy sposób ryzyko spadku pozycji serwisu w Google będzie dużo mniejsze.

Nowa strona - szybsze tworzenie podstron

Jednym z naszych założeń było uproszczenie tworzenia nowych treści. Nie chodzi mi tutaj o wpisy na blogu bo to akurat jest proste. Chodzi o rozbudowane podstrony ofertowe zawierające wiele sekcji informacyjnych.

Podstrony ofertowe to po stronie głównej najważniejsze podstrony serwisu. Można je obsługiwać na zasadzie strony tekstowej jak wpis na blogu, ale taka podstrona będzie nudna bo trudno o bardziej zaawansowany układ. Dlatego podstrony ofertowe stworzyliśmy jako kategorie obsługiwane przez nas moduł Layout Composer.

Layout Composer to taki moduł, który pozwala składać stronę główną lub podstronę z widgetów. Każdy widget to osobna sekcja która prezentuje treści w zdefiniowany sposób, zgodnie z przygotowanym szablonem. Dodatkowo widgety pozwalają również na indywidualną parametryzację, czyli mogą wyglądać różnie oraz mieć różną kolorystykę. 

Dzięki temu modułowi tworząc nową podstronę składamy ją z dostępnych widgetów jak z klocków, a następnie dodajemy treści.

W przypadku bardziej rozbudowanych podstron z dużą ilością widgetów nawet składanie z klocków również zajmuje sporo czasu. Postanowiliśmy skrócić ten proces.

Ponieważ  na różnych podstronach w wielu sekcjach wykorzystujemy te same treści. Tworząc nowe podstrony część treści jest wspólna a część nowa.

Aby przyspieszyć proces tworzenia dodaliśmy możliwość duplikowania całych kategorii ofertowych z możliwością zdefiniowania które sekcje mają zostać zduplikowane jako nowe treści, a które z tą samą treścią co na duplikowanej stronie. W ten sposób w kilka sekund otrzymujemy gotową podstronę ofertową którą wystarczy tylko dopasować do konkretnej frazy kluczowej.

Teraz możemy w szybki sposób tworzyć podstrony zoptymalizowane do konkretnych zapytań w Google dzięki czemu mogą one trafić na wysokie pozycje dla danego zapytania oraz osiągać lepszy wynik jakości dla reklam Google Ads kierowanych dla zapytań na te słowa kluczowe.

 

Dlaczego uruchomiliśmy nieskończoną stronę

Postanowiliśmy uruchomić stronę mimo tego że nie była skończona. W niektórych miejscach szablony wymagały poprawy, strona nie miała wszystkich funkcjonalności jakie zakładamy że będzie miała, a treści .. no cóż, przed nimi jeszcze długa droga.

Dlaczego więc postanowiliśmy uruchomić taką nie w pełni idealną stronę?

Z prostego powodu.

Strona nigdy nie jest skończona. Może być skończony jakiś etap, ale zawsze znajdzie się coś co można poprawić, zoptymalizować czy dodać.

Dlatego uruchomiliśmy stronę nie wtedy kiedy była idealna pod każdym względem, tylko w momencie kiedy spełniała minimalne kryteria jakie jej stawialiśmy:

1. działała prawidłowo w desktop i mobile
2. działała szybko w desktop i mobile
3. osiągała powyżej 90 pkt w Google Page Speed
4. miała przeniesione wszystkie teksty na blogu
5. miała przeniesione istotne treści - referencje, portfolio
6. miała stworzoną docelową strukturę - architekturę
7. strona główna i istotne podstrony zostały wypełnione nowymi treściami
8. linkowanie wewnętrzne we wpisach na blogu zostało naprawione
9. miała przeniesione lub zoptymalizowane meta tagi title / description
10. zostały przygotowane wszystkie potrzebne przekierowania 301

W momencie kiedy powyższe punkty zostały spełnione uruchomiliśmy stronę.

Moglibyśmy poczekać z uruchomieniem tydzień lub kilka - wdrożyć brakujące funkcjonalności, poprawić teksty czy zdjęcia ale zawsze można to zrobić już na działającej stronie.

Obecnie wszystkie strony tworzone są na bazie systemów zarządzania treścią. Nie wyobrażam sobie żeby w obecnym czasie ktoś edytował treści w edytorze HTML mając do dyspozycji systemy CMS jak Wordpress, Joomla itd. Więc nie do końca idealne treści nie powinny blokować uruchomienie strony, bo można je w każdej chwili poprawić - tak teksty jak i wszystkie zdjęcia czy ikony.

System Wirtualizer w którym tworzymy strony pozwala w prosty sposób zarządzać wszystkimi treściami. Pozwala też na płynny rozwój serwisu o dowolne funkcjonalności bez potrzeby zatrzymywania serwisu. Dotyczy to modyfikacji i ulepszeń w layoucie strony czy dodawania nowych funkcjonalności.

Layout zawsze można jeszcze lepiej zoptymalizować pod kątem SEO czy szybkości. Zawsze można wymyślić nowe, przydatne dla użytkownika funkcjonalności. I zawsze znajdą się nowe pomysły na treści, dzięki którym strona będzie zdobywać nowy ruch z wyszukiwarek.

Dlatego tworząc nową stronę lepiej postawić na to co jest naprawdę ważne rezygnując z funkcjonalności, które można dodać później.

My na starcie zrezygnowaliśmy z funkcjonalności, które posiadała stara strona - wyszukiwarki treści, tagów, chmury tagów, newslettera, komentarzy czy rekomendacji wpisów blogowych, ale nie one były najważniejsze. Ważniejsze było to żeby nowa strona wystartowała jak najszybciej, żeby jak najszybciej rozpoczął się proces jej indeksacji przez Google. Braku wyszukiwarki czy tagów mało kto zauważy, ale każdy doceni szybkość, czytelność czy wygodę użytkowania na urządzeniach mobilnych.

Ten wpis również nie jest jeszcze w pełni skończony, ale jest wystarczająco skończony aby go opublikować, co też czynię :) 

Wkrótce dodatkowe przemyślenia i ilustracje.