10 sposobów na przyspieszenie strony internetowej

Niezależnie od tego, czy prowadzisz bloga, e-sklep czy firmową wizytówkę – aby strona spełniała swoje funkcje, musi ona szybko się ładować. Tak, żeby użytkownik nie stracił cierpliwości i nie opuścił jej przed pełnym załadowaniem. Poznaj 10 prostych sposobów, które pozwolą Ci na przyspieszenie ładowania Twojej strony.

Strona internetowa nie może ładować się zbyt długo. Jest to bardzo ważne zarówno dla doświadczenia użytkownika, jak i dla algorytmów wyszukiwarki oceniających jakość strony internetowej. Jednak zbudowanie – i utrzymanie – szybkiej strony to nie lada wyzwanie. Co zrobić w sytuacji, gdy nawet świeżo postawiona strona ładuje się o kilka sekund za długo?

Dlaczego przyspieszać stronę?

Długo ładująca się strona zawsze wiąże się z pewną irytacją. W końcu użytkownik odwiedza witrynę po to, aby wyciągnąć z niej pewne informacje, których potrzebuje. Jeżeli trwa to zbyt długo – to trudno nie stracić cierpliwości.

Badania internautów na całym świecie tylko potwierdzają te doniesienia. Zauważ, że:

• 50 milisekund wystarczy odwiedzającemu do wypracowania sobie opinii na temat Twojej strony;
• niemal 40% użytkowników przestanie korzystać ze strony, jeżeli zdjęcia ładują się zbyt długo lub nie ładują się wcale;
• 47% odwiedzających uważa, że strona powinna ładować się krócej niż 2 sekundy.
• 51% polskich użytkowników nie wróci na stronę WWW, która ładuje się długo, a 45% mniej chętnie zrobi zakupy czy skorzysta z usług.

Mniejsza “cierpliwość” internauty może generować realne straty. Giganci wskazują, że:

• Amazon przez opóźnienie ładowania strony na poziomie 100 ms traci 1% obrotu;
• skrócenie czasu ładowania strony o 1 sekundę pozwala Walmartowi na wzrost konwersji o 2%.

Do tego dochodzi kolejny – nie mniej ważny – czynnik, jakim jest widoczność w wyszukiwarkach. Google ocenę jakości strony opiera m.in. na Core Web Vitals, czyli podstawowych wskaźnikach internetowych:

• Largest Contentful Paint (LCP) – to czas potrzebny do załadowania największego elementu na stronie;
• First Input Delay (FID) – to czas potrzebny stronie do uzyskania gotowości do pierwszej interakcji;
• Cumulative Layout Shift (CLS) – czyli wizualna stabilność strony (brak nagłych zmian na stronie, które pojawiają się bez wiedzy i ingerencji użytkownika).

Jak widzisz – 2 z 3 powyższych wskaźników bezpośrednio odnoszą się do czasu ładowania strony.

Jak sprawdzić, czy strona wymaga przyspieszenia?

Jeżeli zauważasz, że Twoja strona ładuje się zbyt długo – to z pewnością jest to informacja, że trzeba nad nią popracować. Jednak nie możesz ograniczać się wyłącznie do własnych odczuć i opinii. Warto przetestować stronę przy użyciu niezależnego narzędzia, aby przekonać się, jak strona ładuje się nie tylko u Ciebie, ale także u innych użytkowników.

Takie narzędzia to m.in.:

• PageSpeed Insights
• GTMetrix
• WebPage Test

Do oceny szybkości strony najczęściej stosuje się narzędzie PageSpeed Insights – przede wszystkim dlatego, że należy ono do Google, czyli właściciela najpopularniejszej wyszukiwarki internetowej. Dzięki temu uzyskane wyniki uwzględniają wyniki przedstawione w kontekście wspomnianych już Core Web Vitals.

Po przeprowadzonym teście otrzymasz wiele przydatnych wskazówek i informacji o zmianach, jakie możesz wprowadzić na stronie, aby przyspieszyć jej ładowanie. Oczywiście warto je wdrożyć – jednak to dopiero początek drogi.

Żeby liczyć na szybsze ładowanie strony do tego tematu należy podejść kompleksowo – wprowadzając zmiany zarówno na stronie internetowej, jak i tych dotyczących hostingu. Jak to wygląda w praktyce? Czytaj dalej aby poznać 10 prostych kroków, które Ci w tym pomogą.

 

1.   Zmniejsz rozmiary i zmień formaty zdjęć

Trudno wyobrazić sobie atrakcyjną stronę bez zdjęć czy grafik w wysokich rozdzielczościach. Prawda jest jednak taka, że jeżeli pliki graficzne zajmują za dużo miejsca, to jest to spory balast dla strony internetowej. W konsekwencji witryna za długo się ładuje, a jeden z Core Web Vitals – LCP – rośnie do zatrważających rozmiarów.

Nie oznacza to jednak, że musisz rezygnować z dobrych zdjęć na swojej stronie internetowej. Jednak, żeby przyspieszyć stronę:

• zapisz zdjęcia z kompresją – im wyższa kompresja, tym niższa waga pliku;
• stosuj odpowiednie formaty – skompresowany *.jpg to najlepszy wybór w przypadku większości zdjęć. Gdy w zdjęciu ważne jest zachowanie przezroczystości, zapisz plik jako *.png. Zastanów się nad wprowadzeniem nowego formatu *.webp, który jest nawet do 35% lżejszy od najpopularniejszych formató A gdy chodzi o kształt lub logotyp – najlepszym rozwiązaniem będzie format *.svg;
• zmniejsz rozdzielczość zdjęcia – zapisuj zdjęcia dopasowane do rozmiarów strony – “zapas” rozdzielczości tylko opóźni jej ładowanie;
• stosuj lazy loading – czyli funkcję, która ładuje zdjęcie dopiero, gdy użytkownik pojawi się na określonym obszarze strony.

Taką optymalizację zdjęć możesz zrobić ręcznie lub wykorzystać do tego gotowe narzędzie (np. plugin do WordPressa).

2.   Zoptymalizuj i zminimalizuj kod źródłowy

Bardzo wiele problemów z ładowaniem strony wynika z problemów w samym kodzie źródłowym witryny. Może to być np.:

• nadmiarowy i niepotrzebny kod, który nie jest wykorzystywany na stronie;
• powielanie komend lub stosowanie komend wykluczających się;
• zbyt rozległe pliki JS czy CSS;
• stosowanie struktury języka z poprzednich wersji HTML czy CSS.

Żeby poradzić sobie z tym problemem, najlepiej skonsultować się z firmą zajmującą się tworzeniem stron internetowych lub optymalizacją. Nie tylko dostaniesz informacje, co jest nie tak z Twoją stroną, ale także możesz liczyć na ich wprowadzenie.

Bardzo cenne mogą okazać się także wskazówki ze wspomnianego wcześniej PageSpeed Insights. W raporcie po przeprowadzony audycie znajdziesz liczne porady i wskazówki, które naprowadzą Cię na obszary, które wymagają poprawy.

Domyślam się jednak, że szukasz rozwiązań, z których możesz skorzystać samodzielnie. W tym wypadku bardzo dobrym rozwiązaniem będzie skorzystanie z rozmaitych wtyczek lub aplikacji. Przykłady takich narzędzi to: WP Rocket, JS Compress czy CSS Minifier.

 

3.   Zrób porządek z pluginami i widgetami

Wspominam Ci o korzystaniu z pluginów w celu przyspieszenia strony, a jednocześnie zachęcam do ich uporządkowania? No cóż – w tym nie ma żadnej sprzeczności. 🙂

Pluginy czy widgety są bardzo potrzebne, jednak gdy jest ich za dużo, generują one liczne opóźnienia. W końcu są one zaprojektowane w ten sposób, aby działały na każdej – nie tylko na Twojej stronie. W związku z tym wykorzystują one mnóstwo kodu, który nie zawsze ma zastosowanie w Twoim przypadku.

Przyjrzyj się zainstalowanym rozszerzeniom. Upewnij się, że nie masz zainstalowanych pluginów, których funkcjonalności na siebie nachodzą. Jeżeli nie korzystasz z plugina czy widgetu – po prostu go odinstaluj. A jeżeli jest on potrzebny do funkcjonowania strony, to upewnij się, że korzystasz z najbardziej aktualnej wersji. Wszelkiego rodzaju update’y są po to, aby zwiększyć ich szybkość czy bezpieczeństwo.

4.   Unikaj zewnętrznych odwołań

Zarówno widgety (np. wyświetlające treści z Facebooka, map Google czy porównywarek cenowych), jak i rozmaite szablony bardzo często linkują do plików umieszczonych na innych serwerach. Musisz mieć na uwadze, że każde takie odwołanie oznacza dodatkowe milisekundy opóźnienia podczas ładowania strony. W końcu Twój serwer musi uzyskać odpowiedź innego serwera, zanim wyświetli Twoją stronę.

Co możesz zrobić? Trzymać takie pliki na swoim serwerze. Odnosi się to przede wszystkim do fontów oraz plików JavaScript. Przyjrzyj się czy stosowane przez Ciebie rozszerzenie nie stosuje tego typu zewnętrznych odwołań. Jeżeli tak – pobierz plik, zamieść go na swoim serwerze i zmień linkowanie.

5.   Zaktualizuj PHP

Większość stron internetowych jest opartych na PHP. To właśnie ten język odpowiada za komunikację z bazą danych strony internetowej – skąd bierze informacje potrzebne do wyświetlenia witryny.

Od szybkości interpretera PHP zależy w dużej mierze czas wyświetlenia strony. Dlatego też jest bardzo ważne, aby korzystać z najbardziej aktualnej wersji tego języka – benchmarki pokazują, że każda nowsza generacja jest znacznie szybsza i bardziej wydajna od poprzednika.

Obecnie mamy do czynienia z 8. generacją tego języka, w związku z tym dobrze, aby Twój hosting umożliwiał korzystanie z niej. Jeżeli administrator serwera w dalszym ciągu stosuje starą wersję PHP, warto się z nim w tej sprawie skontaktować – lub… zmienić dostawcę usługi.

6.   Włącz obsługę HTTP/3

Do wyświetlenia każdej strony internetowej potrzebne jest nawiązanie połączenia pomiędzy przeglądarką a serwerem. Wykorzystuje się do tego protokół HTTP. Różne odmiany tego protokołu stosowane są już od ponad 30 lat. Oczywiście obecnie z Internetu korzysta się w zupełnie inny sposób niż w latach 90-tych, w związku z tym pojawiają się nowe generacje HTTP pozwalające na większą wydajność i bezpieczeństwo połączenia.

Obecnie mamy do czynienia z implementacją HTTP/3, choć standard HTTP/2 został wprowadzony stosunkowo niedawno. Najnowsza generacja cechuje się jednak wyższą wydajnością – połączenie jest nawiązywane szybciej, jest bezpieczniejsze i nie blokuje się w przypadku problemów z pobraniem pakietu danych.

Warto włączyć taką opcję po stronie serwera – dzięki temu użytkownik (który ma włączoną obsługę HTTP/3 w przeglądarce) będzie mógł korzystać z szybszego połączenia. W celu włączenia nowego standardu tego protokołu skontaktuj się ze swoim dostawcą usług hostingowych.

7.   Włącz obsługę pamięci podręcznej

Wyświetlenie strony internetowej wiąże się z koniecznością przetwarzania wielu procesów jednocześnie. Serwer kontaktuje się z bazą danych, aby uzyskać informacje dotyczące wyglądu strony, potrzebne do jej wyświetlenia w przeglądarce odwiedzającego. Każde takie przetworzenie wymaga czasu.

Można jednak to przyspieszyć – korzystając z silników pamięci podręcznej. Dzięki nim wstępnie przetworzone dane przechowywane są w pamięci szybkiego dostępu – w związku z czym wyświetlenie strony jest o wiele szybsze.

Żeby korzystać z pamięci podręcznej, konieczna jest obsługa silników Redis lub Memcached przez Twój serwer. Wystarczy włączyć je w panelu hostingowym, by móc liczyć na spore przyspieszenie ładowania strony. Jednak, żeby było to możliwe, Twój hosting musi obsługiwać takie technologie.

8.   Przejdź na szybszy dysk

Informacje zawarte w bazach danych to jedno, jednak strona internetowa do wyświetlenia potrzebuje także uruchomienia wielu plików (np. zdjęć czy plików z kodem źródłowym). Pliki te przechowywane są na dyskach twardych serwerów.

Odczyt i zapis plików zależy przede wszystkim od rodzaju dysku twardego na serwerze. Jeżeli są to dyski HDD (talerzowe – starej technologii), to są one kilka razy wolniejsze od SATA SSD, a nawet kilkanaście razy wolniejsze od SSD NVMe.

Odczyt lub zapis pliku na SSD NVMe to kwestia 0,03 ms, podczas gdy HDD potrzebuje na to aż 13 ms. Prawda, że widać różnicę?

Jeżeli chcesz przyspieszyć ładowanie swojej strony internetowej, poważnie zastanów się nad przejściem na pakiet wykorzystujący dyski SSD NVMe lub chociaż SSD. Być może taką usługę oferuje nawet Twój dostawca usług hostingowych, dzięki czemu przeniesienie strony może okazać się naprawdę łatwe.

 

9.   Zmień oprogramowanie na inne

Na szybkość wyświetlania strony internetowej bardzo duży wpływ ma także oprogramowanie zainstalowane na serwerze. Standardowo serwer oparty jest na Apache – rozwiązanie cechujące się dużą stabilnością, ale umiarkowaną szybkością.

Decydując się na inne oprogramowanie serwerowe – np. nginx czy LiteSpeed, możesz znacząco zwiększyć możliwości serwera, a w konsekwencji także szybkość wyświetlania strony internetowej.

Jest to szczególnie istotne w przypadku stron opartych na popularnych CMS’ach. Jeżeli masz stronę na WordPressie, to LiteSpeed (zoptymalizowany pod kątem WordPressa) jest w stanie obsłużyć nawet 80 razy więcej zapytań w ciągu sekundy w porównaniu z Apache.

 

 

10.   Wybierz pakiet o innych limitach i przydziałach

Strony internetowe najczęściej umieszcza się na hostingu współdzielonym. To bardzo wygodne rozwiązanie – jedna maszyna serwerowa może obsłużyć wielu klientów jednocześnie. Hosting jest stosunkowo prosty w obsłudze, a przy tym o wiele tańszy od rozwiązań dedykowanych.

Jednocześnie musisz mieć na uwadze, że hosting stosuje rozmaite limity i ograniczenia, które chronią przed “zdominowaniem” mocy obliczeniowej serwera przez stronę czy aplikację jednego klienta.

W samych limitach nie ma nic złego, problem pojawia się, jeżeli są one zbyt uciążliwe. W takiej sytuacji mogą prowadzić do spowolnienia działania strony lub nawet jej zablokowania. W kontekście szybkości strony szczególną uwagę należy zwrócić na:

• limit jednoczesnych procesów PHP – nie powinien być niższy niż 10;
• limit jednoczesnych połączeń HTTP – nie powinien być niższy niż 100;
• maksymalna przepustowość łącza – nie powinno być to mniej niż 200 Mb/s;
• przydział procesora – nie powinien on być niższy niż 1 GHz (lub 1 rdzeń);
• przydział pamięci operacyjnej – nie powinien być mniejszy niż 1 GB RAM.

Przyjrzyj się, jak wyglądają te limity na hostingu, z którego korzystasz. Jeżeli zależy Ci na szybkim funkcjonowaniu strony, to powyższe wartości potraktuj jako absolutne minimum. Jeżeli Twój plan hostingowy jest słabszy, koniecznie zastanów się nad przejściem na wyższy pakiet lub zmień firmę hostingową na lepszą. 🙂

 

Widzisz, że w obliczu panującej obsesji szybkości, wolna strona internetowa po prostu nie spełnia swoich funkcji – nie jest przyjazna ani dla użytkowników, ani dla wyszukiwarek. Jednak przyspieszenie strony internetowej zależy od bardzo wielu czynników.

Jeżeli zależy Ci na faktycznym skróceniu wyświetlania witryny nawet o kilka sekund, musisz zadziałać kompleksowo – dbając zarówno o kod źródłowy, regularne aktualizacje, jak i szybki serwer, na którym umieszczona jest strona.

 

Autorem artykułu jest Mateusz Mazurek, twórca serwisu Jak Wybrać Hosting?, porównującego i testującego usługi hostingowe.