Jak poprawić wydajność stron internetowych: Wszystko, co musisz wiedzieć.

Posłuchaj artykułu w wersji audio.

Według badania przeprowadzonego przez Eggplant, 80% użytkowników potwierdziło, że wolno ładująca się strona jest bardziej frustrująca niż chwilowo niedziałająca strona.

Badanie Akamai wykazało 103% wzrost bounce rate w witrynach, w których czas ładowania strony przekracza 2 sekundy.

Statista odnotował, że do końca 2021 roku było 2,14 mld kupujących online, ale tylko 2,17% wszystkich wizyt online konwertowało na sprzedaż.

1. Konwersja

Wprost mówiąc oznacza, że odwiedzający wykonują to, co chcesz, aby zrobili. Może to być dokonanie zakupu, zapisanie się na newsletter, rejestracja (na webinar lub wydarzenie) lub pobranie innego poradnika. Według ostatnich badań przeprowadzonych przez Portnet, strona, która ładuje się w 1 sekundę ma 3x wyższy współczynnik konwersji niż strona, która ładuje się w 5 sekund. 

Choć wydaje się, że 1 sekunda to niewiele w sieci, to jednak jest to cała wieczność. Biorąc za przykład jednego z najbardziej znaczących graczy na rynku: 

1-sekundowe spowolnienie strony może kosztować Amazon 1,6 mld dolarów sprzedaży rocznie. W Internecie każda milisekunda ma znaczenie.

2. Widoczność

Chodzi tu o szybkie znalezienie strony internetowej na stronach wyników wyszukiwania, takich jak Google. Szybkość strony jest jednym z czynników rankingowych dla Google. Dobrze zoptymalizowana strona internetowa zapewnia dobre doświadczenie użytkownika, a w konsekwencji zyskuje lepsze wyniki wyszukiwania. 

Od grudnia 2017 roku wyszukiwarka Google bierze pod uwagę również strony mobilne. Optymalizacja nie dotyczy tylko desktop, ale responsywności na wszystkie rodzaje i rozmiary ekranów, zwłaszcza urządzeń mobilnych. 

3. Usability

Czas ładowania strony bezpośrednio wpływa na budowanie lojalności klientów. Im lepiej działa Twoja strona, tym mniejsze ryzyko niezadowolonych użytkowników i słabego doświadczenia klienta. W badaniach Ericson (jeszcze w 2016 roku) stwierdzili, że poziom stresu użytkowników mobilnych wzrósł o 33% zawsze, gdy ładowanie treści przekraczało 6 sekund. Poziom stresu był równy oglądaniu horroru lub zdawaniu testu z matematyki. 

Badania Google wykazały, że bounce rate wzrósł o 90%, gdy czas ładowania strony wzrósł z 1 do 5 sekund. Jeśli ładowanie strony trwa do 10 sekund, szansa na odbicie wzrasta do 123%.

Jest wiele wyzwań, ale jak osiągnąć zoptymalizowaną i wydajną stronę internetową?

Kluczowe wskaźniki wydajności

Chociaż prędkość jest instynktowna, inne metryki wydajności składają się z drobniejszych ułamków, które kształtują ogólny obraz wydajności strony internetowej. Twórcy stron internetowych (i Google) używają kilku wskaźników, aby określić, jak wydajna jest dana strona.

Largest Contentful Paint (LCP)

Ocena Largest Contentful Paint (LCP) jest pierwszym Core Web Vital. Jeśli ten termin wydaje się zastraszający, nie przejmuj się. Wskazuje on po prostu średni czas ładowania najważniejszych treści na stronie internetowej.

Zarówno media, jak i tekst zaliczane są do głównych formatów treści. Google oceni jak szybko ładuje się pierwsza istotna informacja (czyli LCP) wykorzystując LCP. To coś więcej niż tylko to, jak szybko ładuje się Twoja strona.

Jeśli chcesz zapewnić swoim klientom najlepsze możliwe doświadczenia użytkownika, wysoki wynik LCP jest kluczowy.

Poszczególne witryny są oceniane na poziomie strony. Aby spełnić standardy doświadczenia użytkownika Google, zawartość pojedynczej strony musi się załadować w ciągu 2,5 sekundy. Jeśli czas ładowania przekroczy 2,5 sekundy, otrzymasz słaby wynik LCP. LCP może się różnić w zależności od rodzaju strony. Zdjęcie produktu jest niewątpliwie istotną informacją na stronie produktowej, ale nagłówek H1 jest ważniejszy dla bloga.

Jeśli chcesz zapewnić swoim klientom jak najlepsze doświadczenie użytkownika, wysoki wynik LCP jest kluczowy. Zwiększasz prawdopodobieństwo, że ludzie pozostaną na stronie i wejdą w interakcję z Twoim materiałem, jeśli będą mieli do niego szybszy dostęp.

Opóźnienie pierwszego wejścia (FID)

Druga metryka CWV nazywa się First Input Delay (FID). Mierzy ona czas potrzebny użytkownikowi na wprowadzenie akcji lub polecenia i wykonanie go na stronie. Mówiąc wprost, mierzy ona interaktywność Twojej strony. Pierwsze wejścia obejmują klikanie na linki i przyciski lub naciskanie klawiszy, próbę otwarcia menu lub dodanie elementu do koszyka. 

Według Google, wynik FID mniejszy niż 100 milisekund jest idealny. Jeśli jednak czas FID przekracza 300 ms, wydajność strony internetowej będzie miała negatywny wpływ.

Zmniejszenie wpływu kodu stron trzecich jest jednym z podejść do poprawy FID. Możesz również:

• Używać lazy loading dla treści, które nie są krytyczne do wyświetlenia od razu. 

• Rozbić rozbudowane operacje skryptów java na mniejsze zadania.

• Pozbyć się nieużywanych skryptów firm trzecich. 

Możesz znacznie poprawić wynik FID swojej witryny, rozwiązując takie problemy.

Cumulative Layout Shift (CLS)

Na koniec, jest jeszcze CLS (Cumulative Layout Shift). Ta statystyka określa jak stabilna jest Twoja strona podczas ładowania.

Czy kiedykolwiek zauważyłeś, że podczas ładowania strony, obrazki i linki wydają się przesuwać w dół? Sugerowałoby to wysoki wynik CLS, dając wrażenie, że elementy strony są wizualnie niestabilne.

Użytkownicy nie będą wykonywać niezamierzonych kliknięć ani nie będą sfrustrowani, ponieważ zostaną odesłani na inną stronę niż zamierzali zobaczyć, jeśli zoptymalizujesz stronę pod kątem tego Core Web Vital. Stabilność wizualna poprawia ogólną wydajność poprzez zwiększenie doświadczenia użytkownika i zmniejszenie zamieszania.

Wskaźnik odrzuceń

Bounce Rate (BR) to procent odwiedzających, którzy opuszczają stronę bez podejmowania akcji. Nie klikają w link, nie wypełniają formularza, ani nie dokonują zakupu. Jeśli strona ładuje się wolno, większa liczba odwiedzających porzuci ją bez interakcji. Jednak bounce rate może być spowodowany wieloma czynnikami. Stąd czas ładowania może, ale nie musi mieć na to wpływu.

Czas przebywania na stronie

Czas przebywania na stronie lub czas trwania sesji może również wskazywać na wolne strony. Ponownie, zły wynik może oznaczać, że wielu użytkowników nie przebrnęło przez pierwsze załadowanie strony

Współczynnik konwersji

Conversion Rate (CR) to liczba konwersji podzielona przez całkowitą liczbę odwiedzających. Konwersje są ściśle powiązane z wydajnością witryny - zadowoleni użytkownicy są bardziej skłonni do pozostania na stronie i wykonania pożądanej akcji. Podobnie jak w przypadku bounce rate, wiele czynników może wpływać na współczynnik konwersji, ale warto sprawdzić, czy wydajność jest jednym z nich.

Error Rate

Error Rate (ER) to procent żądań HTTP, które zwracają kody błędów wśród wszystkich żądań HTTP w krótkim okresie czasu. Wysoki wskazuje, że coś jest nie tak z infrastrukturą sieciową, która uniemożliwia dostarczenie zasobów, spowalnia lub zatrzymuje działanie stron i odpycha odwiedzających.

Google Pagespeed Insights

Darmowe narzędzie Google przeprowadza test wydajności na Twojej stronie i dostarcza rekomendacje dotyczące poprawy wydajności. Jest ono dedykowane dla urządzeń mobilnych i desktopów. Pagespeed wskazuje również CrUX. Chrome UX Report (zwany CrUX) to publiczny zbiór danych o rzeczywistych doświadczeniach użytkowników na milionach stron internetowych.

GTmetrix

GTmetrix jest narzędziem do analizy wydajności stron internetowych, które ocenia prędkość strony i zapewnia actionable zalecenia dotyczące jej naprawy. Został on stworzony przez GT.net, kanadyjską firmę hostingową, w 2009 roku. Oprócz pomiaru czasu ładowania strony, GTmetrix ocenia również zgodność strony z najlepszymi praktykami dotyczącymi wydajności stron internetowych. Obejmują one korzystanie z CDN, optymalizację obrazów oraz minifikację CSS i JavaScript. 

Stosując się do zaleceń GTmetrixa, możesz poprawić szybkość działania swojej strony, co może również pozytywnie wpłynąć na Twoje SEO. Ponadto, GTmetrix może być używany do monitorowania wydajności strony w czasie i śledzenia wpływu wprowadzanych zmian. To sprawia, że jest to niezbędne narzędzie dla każdego właściciela strony lub twórcy stron internetowych, który poważnie myśli o optymalizacji swojej strony pod kątem SEO i wydajności sieci.

WebPageTest

działa dobrze dla ekspertów internetowych, którzy szukają optymalnego rozwiązania zamiast szybkich sukcesów lub krótkiego, przyjaznego dla użytkownika podsumowania. Badanie wydajności WebPageTest jest bardzo szczegółowe, a jego przygotowanie może trwać dłużej niż raporty z innych narzędzi. Niedawno dodali również sprytną funkcję o nazwie "Możliwości i eksperymenty", która pomaga zidentyfikować problemy i daje wskazówki, jak je rozwiązać.

Serwuj statyczne zasoby z efektywną polityką cache'owania

Cache to przechowywanie danych w miejscu, w którym będą one łatwiej dostępne w przyszłości. W buforowaniu przeglądarki dane strony internetowej, takie jak pliki HTML i obrazy, są tymczasowo przechowywane na urządzeniu użytkownika. Kiedy użytkownik wraca do zbuforowanej strony internetowej, przeglądarka ładuje te pliki z lokalnej pamięci podręcznej zamiast żądać ich od serwera internetowego, oszczędzając w ten sposób czas i przepustowość. 

Włączając buforowanie w przeglądarce, możesz przechowywać zbuforowaną wersję swojej witryny w przeglądarce odwiedzającego. Zapewnia to szybszy czas ładowania, gdy użytkownik ponownie odwiedzi Twoją stronę. 

Buforowanie w przeglądarce jest konieczne dla statycznych treści na stronie przez dłuższy czas (treści, które często się zmieniają nie powinny być buforowane). Sposób włączenia buforowania zależy od usługi, której używasz do budowy i hostingu witryny, ale każdy dostawca powinien poinstruować i wyjaśnić, jak ustawić limity czasowe dla buforowanej zawartości.

Użyj CDN

Hosting strony na jednym serwerze nie jest wydajny. Kiedy wszystkie żądania użytkownika są wysyłane do tego samego sprzętu, czas potrzebny na przetworzenie każdego żądania wydłuża się. Dodatkowo, czas ładowania zwiększa się im dalej użytkownik znajduje się od serwera. Korzystanie z sieci CDN może rozwiązać ten problem.

Sieć CDN (Content Delivery Network) to zestaw serwerów internetowych rozmieszczonych w różnych lokalizacjach geograficznych, które dostarczają treści internetowe użytkownikom końcowym w zależności od ich lokalizacji. 

CDN przekierowuje żądania użytkowników do najbliższego serwera. W rezultacie treść jest dostarczana do użytkownika szybciej, a strona internetowa działa wydajnie. Jest to bardzo skuteczny sposób na optymalizację czasu ładowania, przede wszystkim gdy Twoja strona obsługuje wielu użytkowników.

Sprawdzaj czas ładowania strony

Algorytmy wyszukiwarek biorą pod uwagę czas ładowania strony przy ustalaniu rankingów wyszukiwarek. Czas ładowania strony ma znaczenie dla SEO, ale także dla Twoich odwiedzających. Mała zmiana może skrócić czas i pomóc poprawić ranking i doświadczenie użytkownika. Optymalizacja czasu ładowania strony to świetny sposób na pozyskanie odwiedzających poprzez doskonałe doświadczenie online i przekształcenie ich w zakupy.

Podobnie jak w przypadku optymalizacji wydajności, wiele czynników przyczynia się do czasu ładowania strony, od obrazów po zależności i pliki CSS.

Miej oko na pliki JavaScript i CSS

Posiadanie wielu plików JavaScript i CSS powoduje wiele żądań HTTP, gdy odwiedzający uzyskują dostęp do poszczególnych plików. Wszystkie żądania są traktowane przez przeglądarkę osobno i spowalniają działanie Twojej strony. Zmniejszenie liczby i rozmiaru plików JavaScript i CSS przyspieszy działanie Twojej strony.

Dzięki HTTP 2 nie musisz grupować wszystkich plików JavaScript i CSS w jeden, aby zmniejszyć ogólną liczbę dodatkowych żądań HTTP. Wręcz przeciwnie, robienie tego uniemożliwia korzystanie z techniki Critical Rendering Path i zmusza przeglądarkę do pobierania wielu rzeczy, których nie potrzebuje. 

Ważniejsze jest, aby pliki były jak najmniejsze i zmniejszały nieużywany kod (JS i CSS).

Ważniejsze jest, aby mieć tak małe jak to możliwe pliki i zredukować nieużywany kod (JS i CSS). CSS dla treści ponadplanowych może być nawet podkreślony, aby przyspieszyć ładowanie strony. 

Nie przesadzaj z zasobami stron trzecich

Narzędzia firm trzecich są integralnymi elementami każdej witryny. Zapewniają one przydatne funkcje sugerowane przez strony trzecie. Niestety, im więcej zasobów zewnętrznych jest zainstalowanych, tym więcej zasobów jest wymaganych do ich uruchomienia. W konsekwencji strona zwalnia i pojawiają się problemy z bezpieczeństwem. Dobrze jest zrobić przegląd wszystkich zainstalowanych wtyczek i usunąć te niepotrzebne. 

Jak poradzić sobie z wtyczkami? Zacznij od testów wydajnościowych na swojej stronie, aby dowiedzieć się, które wtyczki powodują przestoje w działaniu strony. Szybkość działania Twojej strony zależy nie tylko od ilości zainstalowanych wtyczek, ale także od ich jakości. Najrozsądniejszym rozwiązaniem jest zachowanie tylko tych podstawowych i upewnienie się, że są one regularnie aktualizowane.

Rozważ serwery dedykowane

Serwer dedykowany to typ hostingu, w którym klient ma wyłączność na cały serwer. Oczywiście, to podejście jest bardziej kosztowne, ale zapewnia więcej możliwości dla właściciela. Serwery współdzielone są odpowiednie dla stron o małym natężeniu ruchu. Dla zakupów online, serwer dedykowany jest najlepszym wyborem. Ciężkie ruchy, i zapewnienie bezpieczeństwa nie powinny być współdzielone.  

Serwer dedykowany zapewnia elastyczność w komponowaniu programów, aby dać witrynie optymalną wydajność operacyjną. Cała przepustowość i moc przetwarzania na serwerze dedykowanym należy do Twojej witryny wyłącznie.

Przeanalizuj ponownie dostawcę usług hostingowych

Lub, bardziej precyzyjnie, opcje hostingowe. Powyżej wspomniane - serwery dedykowane - mogą być jednym z najlepszych rozwiązań, jednak istnieją również inne opcje:

• Shared hosting: Najbardziej ulubiony rodzaj hostingu na całym świecie. To dlatego, że jest to najtańsza opcja, aby uzyskać swoją stronę online w krótkim czasie i przy niskich opłatach. Wybór szybkiego hosta jest kluczowy dla zabezpieczenia bardziej zadowalającej optymalizacji. Z hostingiem współdzielonym, dzielisz CPU (Central Processing Unit), przestrzeń dyskową i RAM z innymi stronami internetowymi, które korzystają z tego serwera. Wspólny hosting jest głównym powodem, że ta opcja nie jest tak szybka jak VPS lub serwery dedykowane, ale tania i doskonale nadaje się do stron o mniejszym ruchu online. 

• Hosting Virtual Private Servers (VPS): Znacznie szybszy niż współdzielony. VPS wykorzystuje wiele serwerów do dystrybucji treści. Z VPS, dzielisz serwer z innymi użytkownikami i jesteś właścicielem części wirtualnego serwera. Dzięki temu konfiguracje użytkownika nie mają wpływu na innych klientów i odwrotnie. Inni klienci nie mają wpływu na Twoją stronę. Wirtualne serwery prywatne najlepiej pasują do stron internetowych o średnim ruchu lub witryn eCommerce z okazjonalnymi skokami ruchu. 

• Serwery dedykowane: Serwer dedykowany to najdroższa i najbardziej wydajna opcja hostingowa. Z serwerów dedykowanych, wszystkie zasoby należą tylko do właściciela, i tylko właściciel dostaje całkowitą kontrolę nad nimi. W tym scenariuszu, jako właściciel serwera, płacisz za dzierżawę serwera, a także za administratora systemu odpowiedzialnego za utrzymanie. 

Albo postaw na chmurę

Alternatywą dla hostingu jest wynajem dedykowanych zasobów chmurowych od AWS, Microsoft Azure, Google lub innych dostawców chmury publicznej. Można połączyć obie strategie w chmurę hybrydową. Infrastruktury chmurowe mogą również dodawać nieograniczoną skalowalność na żądanie w ramach kilku pakietów.

Minifikacja plików HTML, CSS i JS

Aby zoptymalizować prędkość strony internetowej, konieczne jest zminifikowanie plików HTML, CSS, JS i innych w Google Page Speed insights. Minifikacja to jedno z zaleceń z Google Page Speed insights. 

Kompaktowanie kodu może zaoszczędzić wiele bajtów danych i przyspieszyć czas pobierania i parsowania. Korzyści są nieskończone, więc nie ma na co czekać. Dzięki konkretnym narzędziom deweloperskim lub wtyczkom możesz łatwo usunąć wszystkie dodatkowe białe spacje, nowe linie, komentarze itp. Takie narzędzia zapewniają również dodatkowe wsparcie dla minifikacji CSS i javascript pomiędzy znacznikami stylu i skryptu.

Nie zaniedbuj optymalizacji obrazów

Jak być może stało się już jasne, wiele małych kroków wpływa na ogólną wydajność strony internetowej. Powściągliwość jest kluczem do sukcesu, a optymalizacja wizualnych aktywów jest nieodzownym towarzyszem. Optymalizacja obrazów poprawia szybkość ładowania strony, zwiększa doświadczenie użytkownika i podnosi pozycję w rankingu SEO.

Kompresja obrazów jest Twoim sprzymierzeńcem

I jest to proste! Jednym z najlepszych sposobów na zmniejszenie rozmiaru obrazu bez utraty jakości jest kompresja obrazów za pomocą narzędzi takich jak JPEG `Optimizer, Kraken, Optimizila, ImageOptim i JPEGmini (wersja pro obsługuje również wideo), lub coś bardziej wyrafinowanego, jak Cloudinary lub WebP Converter. Można również użyć narzędzi, takich jak Squoosh, aby porównać korzyści z rozmiaru obrazu i jakości optymalizacji po. Po prostu upuszczasz obraz w narzędziu i przesuwasz suwaki.

WebP to nowoczesny format obrazu, który oferuje ulepszoną bezstratną i stratną kompresję dla obrazów online. Twórcy stron internetowych i administratorzy mogą używać WebP do tworzenia mniejszych, bardziej szczegółowych obrazów, które sprawiają, że internet jest szybszy. W porównaniu z PNG, obrazy bezstratne WebP mają o 26% mniejszy rozmiar. A następnie możesz zautomatyzować za pomocą nuxt-image .

Rozważ lazy load

Lazy load to praktyka opóźniania ładowania lub inicjalizacji zasobów lub obiektów do momentu, gdy jest to potrzebne. Jest to doskonała opcja, aby poprawić wydajność sieci i utrzymać zaangażowanie odwiedzających. Istnieje wiele bibliotek open-source dedykowanych do implementacji lazy loading.

Lazy loading wzmocniony dodatkowo przez Content Delivery Network (CDN, o którym była mowa wcześniej w tym artykule) jest jeszcze lepszą opcją. Implementując lazy loading podczas serwowania zasobów przez CDN, zapewniasz, że tylko potrzebne zasoby są pobierane, a kiedy użytkownik potrzebuje zasobu, jest on buforowany i dostarczany szybko.

Wybieraj pliki statyczne, kiedy to możliwe

Pliki statyczne to pliki, które nie zmieniają się podczas działania Twojej aplikacji. Każdy plik może być serwowany jako statyczna zawartość, o ile nie zmienia się w odpowiedzi na działania lub wejścia użytkownika. 

Obejmuje to obrazy, pliki JavaScript, pliki CSS i filmy. Statyczna zawartość jest łatwiejsza do buforowania i bardziej wydajna. Jest mało prawdopodobne, że powrócimy do statycznych stron internetowych, ale możemy wykorzystać szybkość i prostotę statycznych treści, aby ulepszyć nowoczesną sieć.

Zabezpiecz prędkość swojej strony internetowej

Wydajność to ciągła walka dla wielu profesjonalistów. Każdy biznes internetowy stosuje inne podejście do swojego projektu. Opiera się ono na jego unikalnych celach, branży i odbiorcach. Więc chociaż ścieżki do optymalizacji prędkości strony mogą się różnić, dobra wydajność strony jest ostatecznym celem dla wszystkich witryn, bez względu na usługę, treść lub podejście.

Dlatego zalecamy przyjęcie prostego, ale skutecznego podejścia do optymalizacji szybkości witryny:

1. Przejrzyj i oceń krytyczne czynniki sukcesu swojej witryny, biorąc pod uwagę konwersję, widoczność i użyteczność.

2. Zawsze staraj się dokładnie poznać zachowania użytkowników. Z jakich urządzeń korzystają? Jakiego typu połączeń używają i z jakich krajów pochodzą. Pomoże Ci to w optymalizacji witryny pod kątem grupy docelowej.

3. Przetestuj aktualną prędkość witryny i ustal priorytety stron i funkcji, które wymagają najwięcej uwagi w odniesieniu do wyżej wymienionych trzech czynników. 

4. Sprawdź lub skonsultuj, czy któryś z nich może być zautomatyzowany. Zastanów się, jaki wpływ ma Twój stary tech stack na możliwości kompozycyjne dostępne na rynku.

5. Rozpocznij optymalizację od ostatecznego rozwiązania i skup się na stronach, które najbardziej przyczyniają się do sukcesu konwersji.

SpeedCurve

pozwala ocenić wydajność witryny i przekazać szczegółowe informacje zwrotne, w tym rozmiar strony i czas ładowania strony. Pulpity SpeedCurve zapewniają kilka różnych punktów widzenia i wyborów.

Pingdom

wspomniany wcześniej w tym artykule, jest również najlepszym wyborem wśród narzędzi do monitorowania stron internetowych. Oferuje monitorowanie rzeczywistego użytkownika oraz monitorowanie syntetyczne. Jest ceniony za swoją niezawodność i terminowe alerty wydawane, gdy strona ulega awarii lub działa poniżej standardów.

Uptrends

to popularne narzędzie do monitorowania, które zapewnia proaktywne i reaktywne rozwiązania do monitorowania stron internetowych. Zapewnia wysoce intuicyjne i wizualnie wciągające raporty i plany dostosowane do potrzeb mniejszych i większych graczy rynkowych.