Prędkość strony- jak poprawić tę metrykę?

19 stycznia, 2023 Autor pawel 0

Istnieje wiele narzędzi do testowania szybkości strony i wiele różnych metryk, na które można zwrócić uwagę. Ale czy rozumiesz, jak działają te optymalizacje i czy rzeczywiście sprawią, że Twoja strona będzie szybsza? Prędkość strony to złożony temat. Napisano na ten temat wiele artykułów, w których znajdziesz listę działań do podjęcia lub wtyczek do zainstalowania, aby pomóc w różnych aspektach prędkości. Takie artykuły są pomocne, ale nie wszystkie witryny są takie same. W tym artykule pomogę Ci zrozumieć, czym jest prędkość strony i jakie działania należy podjąć dla Twojej konkretnej witryny.

Jeśli nie jesteś najlepszy w kwestiach technicznych oto kilka wtyczek, modułów, które pomogą Ci przyspieszyć witrynę:

WordPress:

WP Rocket (płatny) + wtyczka optymalizacji obrazu, lub:

Autoptimize + wtyczka do obsługi cache’u

Drupal

AdvAgg + moduł optymalizacji obrazu

Wracając do tematu. Oto co zamierzam wyjaśnić:

Czym jest prędkość strony?

Dlaczego powinieneś dbać o szybkość strony

Jak szybko powinna ładować się moja strona?

Jak zbudowana jest strona

Testowanie prędkości strony i narzędzia

Oszacowanie wpływu zmian

Czym jest prędkość strony?

Prędkość strony to pomiar czasu potrzebnego na załadowanie strony internetowej po tym, jak została ona zażądana przez przeglądarkę. Trudno jest przypisać jedną liczbę do szybkości strony, ponieważ wiele metryk rejestruje elementy ładowania strony na różne sposoby, dla różnych celów i w różnych warunkach testowych.

Dlaczego powinieneś dbać o szybkość strony?

-Szybkość na urządzeniach mobilnych stała się czynnikiem rankingowym. Już od 2010 roku szybkość strony stała się dla Google czynnikiem rankingowym.

-Wpływ na User Experience

Zależy Ci na tym, aby odwiedzający mieli szybkie i płynne doświadczenie. Każde opóźnienie lub zwłoka w działaniach jest zauważalna.

-Wpływ Analytics

Ogólnie rzecz biorąc, szybsza strona zarejestruje więcej odwiedzających, ponieważ tag analityczny załaduje się wcześniej. Jeśli osoba opuści stronę przed odpaleniem tagu, nie zostanie zarejestrowana w systemie analytics.

Istnieje wiele badań pokazujących, że jeśli zwiększysz prędkość strony, zobaczysz wzrost takich kwestii jak ruch organiczny, współczynnik kliknięć w stosunku do odwiedzin na reklamach, więcej odwiedzających ogólnie i wiele innych korzyści.

Jak szybko powinna ładować się moja strona?

Nie ma oficjalnego progu. Jednym z powszechnych zaleceń jest to, że Twoja strona powinna ładować się w czasie krótszym niż trzy sekundy. To prawdopodobnie pochodzi z badania Google, które mówi, że 53% użytkowników mobilnych opuszcza stronę, której ładowanie trwa dłużej niż trzy sekundy. Zazwyczaj zalecenia przedstawicieli Google są ogólne, takie jak „spraw, aby strony były szybkie dla użytkowników” lub „spraw, aby strony były tak szybkie, jak to możliwe”.

Nawiązywanie połączeń

Zielony, pomarańczowy i fioletowy kolor reprezentują czas potrzebny do ustanowienia połączenia ze stroną. Poniżej omówię każdy kolor i co on reprezentuje.

DNS (Zielony)

Domain Name System (DNS) jest uważany za książkę telefoniczną w sieci. Podajesz przeglądarce nazwę strony, a ona sprawdza na serwerze DNS, gdzie znajduje się adres IP. Co ważne, nie wszyscy dostawcy DNS są równi. Jeśli każda milisekunda ma dla Ciebie znaczenie, możesz rozważyć użycie innego dostawcy DNS. Jednak te liczby nie są całkowicie dokładną reprezentacją, ponieważ DNS może być buforowany (przechowywany tymczasowo) w przeglądarce, gdy użytkownik już odwiedził stronę internetową. Czas, przez który DNS jest buforowany jest określany jako TTL (Time to Live). Gdy pamięć podręczna jest wciąż aktywna, przeglądarka nie będzie musiała łączyć się z serwerem DNS, by wiedzieć, gdzie się udać, by wejść na stronę.

Connect (pomarańczowy)

W tym miejscu przeglądarka nawiązuje połączenie z serwerem hostingowym. Transmission Control Protocol / Internet Protocol (TCP/IP) jest skomplikowany. Jeśli czas oczekiwania na połączenie jest długi, może to być jeden z wielu problemów. W przypadku niestabilnych połączeń może dojść do utraty pakietów, które będą musiały zostać ponownie wysłane. Wiele z tych problemów rozwiązuje się poprzez skrócenie odległości do serwera i zastosowanie bardziej inteligentnego routingu – co potrafi zrobić wiele sieci CDN. Dzięki sieci serwerów na całym świecie, odwiedzający mogą zazwyczaj połączyć się z najbliższym z nich.

Secure Sockets Layer (SSL) (fioletowy)

Protokół HTTPS jest obecnie podstawą. Dzięki niemu Twoje strony będą bezpieczniejsze. Obecnie Google kara strony bez takiego protokołu i umieszcza na niższych pozycjach w wynikach wyszukiwania. Przeglądarki nie pozwalają używać HTTP/2 (H2) bez HTTPS. H2 ma pewne zalety, takie jak trwałe połączenia, więc nie musi ciągle otwierać nowego połączenia dla plików na tym samym serwerze. Nagłówki wewnątrz tych żądań są również mniejsze niż w HTTP/1.1, a wiele plików może być przesyłanych jednocześnie. W większości przypadków strony korzystające z HTTPS i H2 będą szybsze niż strony z HTTP.

Pobieranie i przetwarzanie HTML

Kod HTML strony jest tym, co jest początkowo pobierane przez przeglądarkę. Jest to informacja, którą widzisz, gdy klikniesz prawym przyciskiem myszy na stronie i przejdziesz do opcji „Wyświetl źródło strony”. Gdy połączenie zostanie nawiązane, a przeglądarka otrzyma pierwszy bit informacji z powrotem z serwera, osiągamy Time To First Byte (TTFB), który jest typową miarą dla początkowego czasu odpowiedzi. Jeśli występuje opóźnienie dla TTFB, może to być spowodowane zapytaniami do bazy danych, zasobami serwera, oczekiwaniem na zakończenie Server Side Render (SSR) lub innymi kwestiami typowo związanymi z tworzeniem dynamicznej zawartości. Czas pobierania będzie zależał od takich kwestii jak połączenie i rozmiar pliku. Kiedy HTML zostanie pobrany, przeglądarka przetwarza go na obiektowy model dokumentu. Ten proces wykorzystuje główny wątek przeglądarki do przetwarzania akcji użytkownika, uruchamiania skryptów JavaScript oraz wykonywania układów graficznych. Dla HTML i innych typów plików, takich jak CSS i JavaScript, możesz skrócić czas, używając mniej kodu, minifikacji, aby usunąć niepotrzebne znaki, takie jak komentarze i białe spacje z kodu, oraz kompresji, aby zmniejszyć rozmiar plików.

Metryki obciążenia wizualnego:

First Paint (FP) – przeglądarka renderuje coś po raz pierwszy.

First Contentful Paint (FCP) – przeglądarka renderuje coś z DOM (Document Object Model), co może być tekstem, obrazem, itp.

First Meaningful Paint (FMP) – najważniejsze elementy ładowane wizualnie.

Largest Contentful Paint (LCP) – załadowany największy element powyżej fałdy.

Visually Complete – strona jest załadowana wizualnie.

Speed Index – obliczony wynik dla obciążenia wizualnego, który uwzględnia wiele punktów w czasie.

Cumulative Layout Shift (CLS) – mierzy jak bardzo elementy poruszają się w rzutni podczas ładowania, lub jak stabilny jest układ.

Świetnym narzędziem do sprawdzania prędkości strony jest Page Speed Insights.

Responsywność

Responsywność jest zwykle mierzona przez First Input Delay (FID), czyli czas od momentu, gdy użytkownik wejdzie w interakcję z Twoją stroną do momentu, gdy będzie ona mogła odpowiedzieć. Maksymalny potencjalny FID to najgorszy przypadek FID, jakiego mogą doświadczyć użytkownicy. Używaj mniejszej ilości trackingów/skryptów. To może być trudna decyzja, ponieważ marketerzy lubią dane, ale czasami ilość zbieranych danych jest po prostu absurdalna.

Obrazy typu filetype

Głównym problemem z obrazami jest ich rozmiar. Dąż do zoptymalizowanych obrazów, które ładują się w odpowiednim rozmiarze dla odpowiedniego urządzenia i z odpowiednią jakością. Obrazy są ładowane asynchronicznie, więc nie blokują ładowania strony, ale mogą zwiększać wagę i ogólny czas interakcji. Mogą również wystąpić warunki, w których wiele obrazów ładuje się, maksymalizując zasoby, takie jak przepustowość i spowalniając ogólne ładowanie strony. Zasadą numer jeden jest, aby nie używać wielu obrazów lub dużych obrazów powyżej fałdy w swoim motywie. Nie musisz pokazywać gigantycznych obrazów tła na urządzeniach mobilnych.

Zmiana formatów obrazu

Różne formaty, takie jak webp, mogą być lepsze, ale są problematyczne ze względu na wsparcie przeglądarki. Musisz albo zrobić wiele wykrywania i zamiany lub użyć usługi, która zrobi to za Ciebie.

Rozmiar strony

Jest to rozmiar wszystkich zasobów razem wziętych. Mniejsze strony są szybsze. Mówiliśmy już o wielu usprawnieniach takich jak minifikacja, kompresja i po prostu pozbycie się wszystkiego co nie jest używane. Celem powinna być minimalna ilość danych, aby treść załadowała się jak najszybciej. Następnie można załadować resztę informacji potrzebnych na stronie, a wszystko przy zachowaniu jak najmniejszych rozmiarów. Problemy zazwyczaj pochodzą z niewykorzystanego kodu, obrazów i ogólnego wzdęcia strony związanego z funkcjonalnością lub narzędziami. Powodem, dla którego poświęcam temu zagadnieniu osobną sekcję jest fakt, że powinieneś zwracać uwagę na ogólną ilość danych, które wykorzystuje Twoja strona.

Inne możliwości na zwiększenie wydajności stron internetowych

Istnieje wiele opcji, które możesz zrobić, aby poprawić szybkość strony. Omówię kilka ważniejszych, ale możliwości jest znacznie więcej, ponieważ szybkość strony to złożony temat.

Caching

Cache to po prostu przechowywana kopia pliku. Buforowane pliki mogą być ponownie wykorzystane na następnej stronie bez konieczności ponownego ich pobierania.

Pamięć podręczna serwera

To miejsce, z którego pochodzą pliki, gdy przeglądarka ich zażąda. Idealnie byłoby, gdybyś chciał trafić do najbliższego użytkownikowi cache’u. Chodzi o to, że cache może być przechowywany na wielu różnych poziomach z różnymi TTL ustawionymi dla każdego z nich, które powodują wygaśnięcie cache. Istnieje równowaga między buforowaniem przez dłuższy czas, a szybką aktualizacją treści wraz ze zmianami.

Cache przeglądarki

Nawet jeśli masz dużą witrynę, która wypada słabo w testach prędkości strony, może być znaczna różnica pomiędzy pierwszym a drugim ładowaniem strony lub nawigacją pomiędzy stronami. Wiele z tego, o czym mówiliśmy do tej pory, koncentrowało się na przyspieszeniu początkowego ładowania. To jest to, co widzi większość narzędzi testujących i jest to pierwsze wrażenie użytkownika na temat Twojej strony. Kiedy użytkownik odwiedza stronę, przeglądarka może buforować wiele plików lokalnie na komputerze danej osoby, które mogą być ponownie wykorzystane przy kolejnych odsłonach strony. Większość plików, które musiały być pobrane przy pierwszym ładowaniu są buforowane po stronie użytkownika (przeglądarki), co oznacza, że drugie ładowanie może po prostu ponownie wykorzystać te, które już zostały pobrane. Wyeliminowanie czasu połączenia i pobierania plików oznacza, że strona ładuje się znacznie szybciej. W tym przypadku, First Paint pojawia się mniej więcej dwa razy szybciej w drugim załadowaniu.

Ładowanie adaptacyjne

Ładowanie adaptacyjne dostosowuje, co i kiedy jest ładowane, aby strony były bardziej progresywne w sposobie ładowania. Priorytetowe cechy i funkcjonalności są ładowane w pierwszej kolejności, a reszta jest ładowana później w oparciu o takie kwestie jak procesor, pamięć czy prędkość sieci. Tak więc, przy mniejszej ilości dostępnych zasobów, może zostać dostarczona okrojona wersja strony, ale ludzie z większą ilością dostępnych zasobów otrzymają całość doświadczenia. Jedną z części tego jest Network Information API, który daje informacje o połączeniu użytkownika. Możesz zmienić swoje obrazy / treści lub zrobić rzeczy takie jak wyłączenie filmów na podstawie informacji o sieci przychodzącego żądania. Wiele z CDN-ów obrazkowych robi to za pomocą Network Information API.

Prefetch

Prefetch to wskazówka dotycząca zasobów, która pobiera plik zanim będzie on potrzebny. Może to dotyczyć całych stron, skryptów lub plików CSS. Jednym z najlepszych sposobów na wykorzystanie tego jest Guess.js, który używa predykcyjnego prefetowania. Guess łączy się z Twoim Analytics i pobiera najbardziej prawdopodobną następną stronę w oparciu o aktualne zachowanie użytkownika.

Testowanie prędkości strony i narzędzia

Dane laboratoryjne vs. dane terenowe

Dane laboratoryjne: Cechy charakterystyczne to kontrolowane środowisko, powtarzalny proces i kontrola ustawień. PageSpeed Insights jest świetnym przykładem. Test przebiega w tym samym środowisku z tymi samymi ustawieniami, a wyniki będą mniej więcej takie same przy każdym przebiegu.

Dane terenowe: Real User Monitoring (RUM) to jak użytkownicy doświadczają strony. Bierze pod uwagę wszystko, takie jak buforowanie, urządzenia, sieci itp. ale jest ograniczony na metryki i zdolność do debugowania.

Uważaj na to, jak długo używasz narzędzi Real User Monitoring (RUM), które pozwalają na zbieranie danych terenowych. Chociaż te narzędzia są świetne, aby zobaczyć, jak strony są ładowane dla użytkowników, mogą również zwiększyć czas ładowania. Twoim celem jest uczynienie witryny szybszą, a te mogą być pomocne w diagnozowaniu problemów, ale pozostawienie ich włączonych może spowodować, że strony będą ładować się wolniej.

Narzędzia do pomiaru prędkości strony

Narzędzia Google

TestMySite – Zawiera kartę wyników prędkości, gdzie można ocenić swoją prędkość w porównaniu z konkurencją, ma kalkulator wpływu, więc można oszacować wpływ prędkości na swój biznes, i pozwala zbudować raport, który zawiera te i niektóre zalecenia.

Lighthouse (w Chrome Dev Tools) – Umożliwia testowanie wydajności stron i aplikacji

PageSpeed Insights – Narzędzie dostarczające rekomendacji. PageSpeed Insights pozwala na dość stabilne środowisko testowe.

Chrome Dev Tools – Posiada wiele przydatnych funkcji, by zobaczyć, co i jak ładuje się na stronie, np. zakładki Sieć i Wydajność.

Raport o doświadczeniach użytkowników w Chrome (CrUX) – publiczny zbiór danych o rzeczywistych doświadczeniach użytkowników, które obejmują miliony stron internetowych.

Web.dev – Kolejne narzędzie testowe Google wspierane przez Lighthouse. Ma również sekcję, aby dowiedzieć się więcej o prędkości strony.

Inne popularne narzędzia do badania prędkości

WebPageTest

Sitespeed.io

SpeedCurve

Calibre

Rigor

New Relic

Boomerang

Batch Speed

GTmetrix

Pingdom

SpeedMonitor.io

Jakich danych używa Google do badania szybkości strony?

Według Google Webmaster Trends Analyst, Google używa teoretycznej prędkości strony (używając danych laboratoryjnych) i rzeczywistych danych terenowych od użytkowników, którzy próbowali użyć tych stron. Mówi, że jest to podobne do danych w raporcie Chrome User Experience Report. W rzeczywistości nie było żadnego publicznego potwierdzenia źródła danych, z których korzystają. Chociaż Google nie podało, że używają danych PageSpeed Insights i CrUX, dane z nich są prawdopodobnie reprezentatywne dla danych używanych przez Google.

Końcowe przemyślenia

Powinieneś uczynić swoją stronę tak szybką, jak to tylko możliwe dla użytkowników. Wybierz metryki, które reprezentują to, jak użytkownik doświadcza obciążenia i interaktywności strony i popraw je. Tak naprawdę nie ma progu, przy którym przestałbym poprawiać szybkość strony, ale często istnieje etap, na którym korzyści mogą nie być warte czasu, wysiłku, kosztów lub potencjalnych kompromisów (takich jak utrata danych z narzędzia). Ogólnie rzecz biorąc, starałbym się być nieco szybszy od konkurencji.