Szybkość ładowania strony - jak to sprawdzić i zwiększyć

1. Jak sprawdzić szybkość swojej witryny
2. 1 PageSpeed ​​Insights
3. 2 Narzędzia do pingowania
4. 3 GTmetrix
5. Jak przyspieszyć ładowanie strony
6. 1. Strony dużego rozmiaru
7. 2. „Ciężkie” obrazy
8. 3. Wiele żądań z przeglądarki
9. 4. Przeciążony kod javascript i css
10. 5. Duża odległość między serwerem a użytkownikiem
11. 6. Powolny hosting
12. Jak regularnie monitorować prędkość witryny

Materiały do ​​pobrania

Szablon raportu ze wskaźnikami technicznymi wydajności witryny

Nawet teraz, gdy prędkość Internetu u większości dostawców przekracza 100 Mbit / s, a operatorzy komórkowi rozwijają 5G, kwestia szybkości pobierania witryny pozostaje aktualna. Ten parametr znacząco wpływa na konwersję, współczynnik odrzuceń, frekwencję i inne kluczowe wskaźniki efektywności, które są ważne dla biznesu. Ponieważ wszystkie inne rzeczy są równe, osoba wybiera stronę, która ładuje się szybciej i nie pozwala mu czekać. O tym mówi nam logika, osobiste doświadczenia użytkownika i liczne badania na ten temat, które można znaleźć w sieci. Tutaj na przykład wyczerpujący wybór przypadków z numerami jak firmy eksperymentowały z prędkościami pobierania.

Wszyscy badacze zgadzają się, że optymalny czas ładowania wynosi od 1,5 do 3 sekund. Jeśli strona ładuje się dłużej, więcej niż połowa użytkowników opuszcza ją, nie czekając na cud.

W artykule powiemy:

Wymieniamy główne wady powolnej strony, odpowiednie zarówno dla wersji desktopowej, jak i mobilnej:

1. Klienci trafiają do konkurentów - łatwiej im wrócić do wyszukiwarki i wybrać następną stronę.
2. Opóźnienie obciążenia o 0,1 sekundy zmniejsza konwersję o 7% (zgodnie z Badania Akamai ).
3. Zmniejsza prawdopodobieństwo powrotu użytkowników do witryny. Google mówi To, ze względu na negatywne doświadczenia użytkowników, zmniejsza prawdopodobieństwo ponownego zakupu o 60%. To prawda, że ​​mówimy o wersjach mobilnych.
4. Szybkość pobierania wpływa na ranking witryny w wyszukiwarkach. Jeśli witryna jest ładowana przez długi czas, robot wyszukiwarki może nie być w stanie go w pełni indeksować.

Ok, upewniliśmy się, że szybkość strony jest kluczowa. Teraz sprawdźmy, jak to sprawdzić.

Jak sprawdzić szybkość swojej witryny

Istnieje wiele usług online, które pozwalają sprawdzić szybkość ładowania stron - wystarczy wpisać żądany adres URL. Rozważmy trzy najbardziej interesujące, naszym zdaniem. Na przykład będziemy korzystać z witryny https://shop.googlemerchandisestore.com/ .

1 PageSpeed ​​Insights

To bezpłatne narzędzie od Google. Dzięki niemu możesz dowiedzieć się, jak szybko strony są ładowane na komputer lub urządzenia mobilne. Krótko mówiąc, usługa pobiera kluczowe dane dotyczące doświadczenia prawdziwych użytkowników z całego świata Raport o doświadczeniach użytkowników Chrome i porównuje je z twoimi. W rezultacie widzisz średnią prędkość pobierania strony i poziom optymalizacji, a także udział pobrań, które miały miejsce przy niskiej, średniej i wysokiej prędkości.

Jeśli strona nie pokazuje najlepszych wyników (jak w naszym przykładzie), usługa udziela konkretnych porad, jak ją zoptymalizować.

Możesz przeczytać więcej o tym, jak działa usługa i jak obliczane są dane. w przewodniku programisty .

Przy okazji, rekomendacje PageSpeed ​​Insights można zobaczyć w raporcie Google Analytics „Przyspieszenie ładowania”, jeśli klikniesz link w odpowiedniej kolumnie:

Ogólnie grupa raportów „Prędkość ładowania witryny” (Raporty prędkości witryny) w GA to przydatna rzecz. Jeśli wcześniej nie zwracałeś wystarczającej uwagi na te raporty, zalecamy okresowe ich przeglądanie, aby śledzić wydajność w czasie i reagować na problemy.

Na przykład raport „Czas ładowania strony” pomaga zrozumieć, jak szybko witryna ładuje się w różnych krajach lub przeglądarkach i jak szybko reaguje na działania użytkownika.

Powiedzmy, że twoi docelowi odbiorcy są w Niemczech. Jeśli spojrzysz na powyższy raport, zobaczysz, że jedna z ważnych stron witryny w tym kraju ładuje się bardzo powoli (19,24 sekundy), a ma 140 widoków. Aby przyspieszyć pobieranie, musisz zoptymalizować stronę. Jeśli w tym regionie lub u tego dostawcy szybkość połączenia internetowego jest zbyt niska dla Twojej witryny, możesz utworzyć alternatywne strony dostosowane do niskiej przepustowości.

2 Narzędzia do pingowania

Jest to jedna z najbardziej informacyjnych i popularnych usług do sprawdzania prędkości. Ma darmowe i płatne wersje pulpitu, a także aplikację mobilną z 14-dniową wersją próbną.

W darmowej wersji możesz przeprowadzić szybką analizę i zobaczyć wydajność, czas ładowania, rozmiar strony, a także możliwe problemy, które spowalniają pracę. Każdy problem można „wdrożyć”, klikając strzałkę obok i przeczytać szczegóły.

Ponadto w bezpłatnej wersji narzędzi do pingowania możesz:

• Śledzenie historii wydajności witryny po zmianach. Znajdź błędy 404 i 500, aby naprawić je na czas.
• Wyświetl rozmiar zawartości strony według typu treści i domeny, a także liczbę żądań przeglądarki.
• Przetestuj witrynę pobierania w różnych lokalizacjach.
• Udostępniaj wyniki analizy współpracownikom.

3 GTmetrix

W funkcjonalności usługa ta jest bardzo podobna do narzędzi pingowania, z wyjątkiem tego, że dostarcza informacji w wygodniejszej i zorganizowanej formie. Darmowa wersja pokazuje lokalizację przeglądarki i serwera używaną do testowania, wydajność strony (PageSpeed ​​i YSlow), czas ładowania, liczbę żądań i łączny rozmiar strony. Biorąc pod uwagę, że usługa zachowuje historię kontroli, te wskaźniki będą wystarczające do analizy prędkości ładowania witryny w czasie.

Jeśli chcesz bardziej szczegółowo zrozumieć, dlaczego Twoja witryna działa powoli i co można z nią zrobić, możesz skorzystać z rozszerzonej wersji płatnej. Umożliwia wybór lokalizacji serwera i przeglądarki, automatyzację testów i wiele innych.

Po sprawdzeniu witryny możesz oszacować, ile zarabiasz, jeśli przyspieszysz pobieranie. Na przykład, używając kalkulator z google lub Sharpe digital .

Jak przyspieszyć ładowanie strony

Istnieje 5 głównych powodów, które spowalniają witrynę. Zrozumiemy, co zrobić z każdym z nich.

1. Strony dużego rozmiaru

Aby zmniejszyć ilość danych wysyłanych do przeglądarki użytkownika, użyj kompresji GZIP. Zmniejszy to rozmiar plików internetowych o 70% bez pogorszenia ich jakości. Możesz sprawdzić, czy ta metoda kompresji jest dostępna dla Twojej witryny za pomocą usługi GiftOfSpeed lub GTmetrix .

2. „Ciężkie” obrazy

Obrazy o dużym rozmiarze i rozdzielczości znacznie utrudniają ładowanie strony. Aby tego uniknąć, użyj obrazów JPEG zamiast PNG - ważą one 5 razy mniej, nie ustępując jakością. Możesz zmniejszyć rozmiar obrazu za pomocą dowolnego optymalizatora online: Optimizilla , Sprężarka , Wyobraź sobie , TinyPNG i tak dalej Lub, na przykład, możesz prowadzić obraz przez Photoshop i zapisać go w specjalnym formacie przeznaczonym dla stron internetowych. Najważniejsze jest, aby nie przesadzić i znaleźć środek między jakością a rozmiarem pliku.

3. Wiele żądań z przeglądarki

Im większa liczba elementów na stronie, tym więcej żądań do serwera wysyłanego przez przeglądarkę i im wolniejsze jest ładowanie. Aby przerwać to błędne koło i zmniejszyć liczbę żądań, możesz:

• Usuń niepotrzebne obrazy, pliki JS, kody usług innych firm.
• Połącz kilka małych elementów (ikon, przycisków) w jeden sprite CSS Generator Sprites CSS , CssSpritegen , Spritebox lub dowolny inny generator.
• Użyj buforowania. Za każdym razem, gdy ktoś odwiedza witrynę, jego przeglądarka pobiera wszystkie pliki internetowe z serwera. Jeśli włączysz buforowanie, przeglądarka zapisze dane na komputerze użytkownika i przy kolejnych wizytach pobierze je stamtąd. Możesz wybrać wtyczkę pamięci podręcznej, aby przyspieszyć witrynę, w zależności od tego, jaki masz CMS. Na przykład dla WordPress pasuje WP Super Cache , W3 Total Cache , Hyper cache .

4. Przeciążony kod javascript i css

Jeśli kod JavaScript i CSS jest zbyt długi, zawiera wiele niepotrzebnych elementów (spacje, komentarze itp.), Strona może być obciążona opóźnieniami. Aby zoptymalizować kod, możesz:

• Zmniejsz nazwę funkcji i wyczyść kod za pomocą specjalnych usług, na przykład: Kompresor JavaScript / CSS / HTML , Kompresor CSS , JSCompress .
• Umieść pliki CSS na samym początku strony - będzie to wyświetlane stopniowo, według komponentu.
• Wyjmij pliki js na dole strony. Dzięki temu przeglądarka najpierw załaduje zawartość strony, a następnie skrypty.

5. Duża odległość między serwerem a użytkownikiem

Im dalej od komputera znajduje się serwer dostawcy usług hostingowych, tym wolniej ładuje się witryna. Sieć dostarczania treści CDN pomoże zmniejszyć tę odległość: Amazon CloudFront , Incapsula , Akamai i inni. Gdy osoba odwiedza witrynę, CDN pobiera pliki internetowe z serwera najbliższego użytkownikowi. Ten schemat doskonale ilustruje zasadę działania sieci CDN:

6. Powolny hosting

Jeśli wypróbowałeś wszystkie powyższe wskazówki, a szybkość witryny jest niska, sprawdź czas odpowiedzi serwera. Na przykład można to zrobić w raporcie Google Analytics „Szybkość ładowania witryny” → „Przegląd”:

Na zrzucie ekranu widzimy, że średni czas odpowiedzi serwera wynosi 0,8 sekundy. To nie jest zbyt dobre, ponieważ idealnie nie powinno przekraczać 0,2 sekundy. Jeśli masz więcej tego wskaźnika, być może będziesz musiał pomyśleć o zmianie dostawcy hostingu.

Jak regularnie monitorować prędkość witryny

Jak już zrozumiałeś, szybkość witryny jest problemem nie tylko dla dewelopera lub marketera, ale dla całej firmy. Firmy, które nie poświęcają jej wystarczająco dużo uwagi, tracą wiele potencjalnych potencjalnych klientów i klientów. Dlatego regularnie monitoruj i optymalizuj wydajność witryny.

Jeśli zbierasz dane w Google BigQuery za pomocą OWOX BI Pipeline i chcesz śledzić główne wskaźniki techniczne witryny, wypełnij formularz - a my wyślemy Ci szablon pulpitu nawigacyjnego, który można skopiować, a także przewodnik, jak go skonfigurować.

Uzyskaj szablon pulpitu nawigacyjnego

W rezultacie otrzymujesz przydatny raport, który składa się z 5 stron. Na pierwszej stronie możesz zobaczyć wszystkie ważne wskaźniki:

1. Liczba użytkowników.
2. Liczba sesji.
3. Liczba wyświetleń strony.
4. Błędy JavaScript.
5. 404 błędy.
6. Średni czas ładowania strony.
7. Średni czas połączenia z serwerem.

Na drugim arkuszu możesz znaleźć szczegółowe informacje o błędach JavaScript:

• Łączna liczba błędów dla wybranego okresu.
• Liczba błędów na stronie.
• Liczba sesji z błędami.
• Ile procent użytkowników napotkało błędy.
• Na których stronach i typach stron występują błędy (aby śledzić typy stron, musisz osadzić typ strony w witrynie, a także utworzyć niestandardową zmienną dla poziomu trafienia hits.page.pageType ).
• W której przeglądarce występują błędy wersji.

Trzecia strona zawiera szczegółowe informacje o błędach 404:

• Całkowita liczba błędów.
• Liczba błędów na stronie.
• Liczba sesji z błędami.
• Liczba użytkowników, którzy mają błędy.
• Jak również skierowania, po których wystąpiły błędy.

Na dwóch ostatnich arkuszach można zobaczyć, jak szybkość ładowania stron w kontekście różnych typów stron, przeglądarek i urządzeń.

Czwarta strona zawiera informacje o pulpicie:

Na piątej stronie dane na tabletach i urządzeniach mobilnych:

Teraz wiesz, jak sprawić, by Twoja strona internetowa „latała” :) Jeśli masz jakieś pytania lub znasz inne sposoby skrócenia czasu ładowania strony, napisz je w komentarzach.

Użyte narzędzia