Czy szybkość strony ma znaczenie?

Czy szybkość strony ma znaczenie?

Spis treści

Czy szybkość strony ma znaczenie?

Tak, im szybsza i wygodniejsza jest nasza strona, tym chętniej zostaną na niej użytkownicy. Z kolei to, co podoba się użytkownikom, ma ogromny wpływ na pozycję domeny w wyszukiwarce Google.

Jest wiele czynników, od których zależy szybkość witryny:

  • technologia wykonania strony (razem z wtyczkami, wykorzystanymi bibliotekami, zintegrowanymi serwisami)
  • szybkość hostingu
  • poprawna implementacja strony
  • format zdjęć (polecam korzystanie z formatów SVG oraz WebP)
  • wymiary zdjęć (ważne jest skalowanie grafiki rastrowej; kompresja grafiki prosto z aparatu o rozmiarach 6000×4000 pikseli na niewiele się przyda bez skalowania)
  • liczba użytkowników korzystających ze strony 
 

Kiedy warto skupić się na szybkości strony?

Osiągnięcie niesamowitych wyników będzie się wiązać z coraz większymi kosztami. 

Strona na WordPressie (na takiej właśnie jest ten blog) jest tania w utrzymaniu i rozwoju. Niestety struktura szablonów, wykorzystany język PHP i powszechne wtyczki znacząco ograniczają szybkość tej platformy. 

Chyba że korzystamy z tzw. headless CMS WordPressa (w  bezpośrednim tłumaczeniu – system zarządzania treścią „bez głowy”), ale ten temat zostawiam na inny artykuł.  

Jak więc znaleźć złoty środek?

Tutaj najlepiej kierować się intuicją i doświadczeniem (albo skonsultować z doświadczonym programistą). 

Obrazek ładuje się zbyt długo? A może wczytanie kolejnej strony trwa tyle, że chcę z niej wyjść i poszukać innego źródła?

Ten znak, tracenie użytkowników, oznacza, że należy poprawić prędkość tej strony.

Najlepiej od początku przygotować stronę pod nasze wymagania. 
Unikniemy problemów z optymalizacją niewydajnego rozwiązania lub, co gorsza, konieczności stworzenia aplikacji internetowej na nowo.

Jak stworzyłem stronę, która ładuje się w 1.2 sekundy?

Wejdź na zrobioną przeze mnie stronę marki masek antysmogowych (link otworzy się w nowej karcie) i policz ile czasu zajmie Ci przejście do bloga, a następnie do konkretnego wpisu.

gatsby aplikacja mobilna i strona internetowa w jednym

Wróciłeś? Zauważyłeś, że podstrony ładują się natychmiastowo?

Jak to możliwe?

Strona została zaprojektowana i oprogramowana od zera.

Nie zostały wykorzystane żadne szablony.

Witryna jest napisana w wiodących technologiach. 

Żeby nie zanudzać wymienianiem ich wszystkich, myślę że wystarczy, gdy powiem, że została wykonana przy użyciu Gatsby w React. Całość opisuję bardziej szczegółowo w kolejnym akapicie. 

Aplikacja jest automatycznie dostępna jako aplikacja na smartfona.

Jakie technologie wykorzystałem?

Chcesz zbudować szybką stronę internetową albo po prostu poznać nowoczesne rozwiązania? W takim zainteresuje Cię jakie technologie wykorzystałem, budując tę stronę. 

Jak wspomniałem wcześniej, strona jest wykonana w Gatsby. Jest to szkielet do budowy stron statycznych oparty na React (React jest wykorzystywany m. in. przez Facebooka).

System zarządzania treścią, czyli coś jak powszechny WordPress został zastąpiony szybszym, również opartym o JavaScript, rozwiązaniem. Backend to CMS o nazwie Strapi. W przeciwieństwie do WP przy jego otwarciu jest niemalże pusty. 

Najlepiej przedstawi Ci to porównanie panelu administracyjnego między WordPressem a Strapi:

wordpress vs strapi admin panel
strapi admin panel

Czym jest Gatsby?

Szybkość Gatsbiego wynika z tego, że strony, które oglądasz, zostały wcześniej utworzone. Co to oznacza?

Gdy łączysz się z tradycyjną witryną, ta wysyła mnóstwo zapytań do serwera. W przypadku strony produktowej wygląda to w wielkim uproszczeniu tak:

  • poproszę o nazwę produktu
  • poproszę o opis
  • jakie zdjęcia ma ten produkt?
 

Pomijając mechanizmy cache’owania, dzięki temu pobierasz aktualne dane o produkcie z bazy danych. Wysyłasz do serwera wiele żądań.

W przypadku Gatsby wygląda to inaczej:

  • poproszę o stronę dla tego produktu
 

Gatsby już na etapie tworzenia produktu wygenerował całą zawartość html strony. Została utworzona statyczna strona, która od tego momentu nie potrzebuje dostępu do bazy danych.

Jednak Gatsby ma jedną sporą wadę. 

Żeby na etapie tworzenia produktu strona z nim została wygenerowana. Cała aplikacja musi zostać ponownie skompilowana. Czy da się rozwiązać ten problem?

Pozostałe narzędzia i platformy

I tu z pomocą przychodzi kolejne wykorzystane narzędzie, a raczej platforma Netlify. Jest to jedna z wielu platform dostarczających rozwiązania do automatycznego budowania strony (CI/CD) po otrzymaniu informacji o zmianach (niezależnie, czy zmiany są w kodzie, czy w produkcie, czy w artykule).

Backend stoi na serwerze Heroku. Nie wybrałem Netlify, ponieważ nie obsługuje Strapi.

Potrzebowałem także miejsca do przechowywania zdjęć, a także bazy danych. Tu kolejno wykorzystałem CloudinaryMongoDb Atlas

Wartością dodaną jest to, że wszystkie rozwiązania mieszczą się w darmowych planach. Zatem cały hosting strony wychodzi 0 zł. 

Jedynym naszym kosztem są wykupienie nazwy domeny i godziny spędzone na integracji platform.

Pierwotnie strona Vaire działała na moim serwerze wirtualnym (VPS) korzystając z silnika internetowego Apache. Dzięki przeniesieniu strony Vaire na platformę  Netlify poprawiłem wynik, który już wcześniej był znakomity.

Poniżej wynik z testu GTMetrix:
(lewa – Netlify, prawa VPS)

szybkość strony po przeniesieniu na Netlify

Wybrać SaaS czy CMS?

Jeżeli chcesz zaoszczędzić, to najlepszym rozwiązaniem może okazać się strona z szablonem na gotowym CMS. 

Drugim dobrym rozwiązaniem będzie skorzystanie z rozwiązań abonamentowych (SaaS). Często okazuje się, że 3 lata opłacania abonamentu, wciąż będą tańsze niż koszt budowy oprogramowania od zera.

Zlecając stworzenie strony polecam porównanie różnych opcji. 

W zależności od wybranego języka i platformy będzie zmieniał się czas potrzebny na stworzenie strony i jej całkowity koszt. Różna jest także dostępność firm tworzących w konkretnych technologiach. 

Skomentuj wpis

Polub mój profil na Facebooku

Powiązane wpisy

czy szybkość strony ma znaczenie gatsby react vue angular

Czy szybkość strony ma znaczenie?

Tworząc nowy sklep internetowy, bloga, czy landing page zastanawiamy się czy szybkość strony ma znaczenie. Jak stworzyć szybką witrynę internetową?

ciasteczka na stronie szymon bubała

Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.