Twój pierwszy budżet wydajności

Gdy ustalisz budżet osobisty, firmowy lub rodzinny, określasz limit wydatków i pilnujesz, by się w nim zmieścić. Budżety skuteczności działają w ten sam sposób, ale w przypadku danych, które wpływają na skuteczność witryny.

Mając ustalony i egzekwowany budżet wydajności, możesz mieć pewność, że Twoja witryna wyrenderuje się najszybciej, jak to możliwe. Zwiększy to wygodę użytkowników i wpłynie pozytywnie na wyniki biznesowe.

Zobacz, jak w kilku prostych krokach zdefiniować pierwszy budżet skuteczności.

Analiza wstępna

Jeśli chcesz zwiększyć skuteczność istniejącej witryny, zacznij od zidentyfikowania najważniejszych stron. Mogą to być na przykład strony o największym ruchu lub strona docelowa produktu.

Po zidentyfikowaniu kluczowych stron przychodzi czas na ich przeanalizowanie. Najpierw skoncentrujemy się na momentach, które pozwalają najlepiej ocenić wrażenia użytkownika.

W panelu Audyty w Narzędziach deweloperskich w Chrome znajdziesz Lighthouse. Przeprowadź kontrole każdej strony w oknie gościa, aby zarejestrować te 2 razy:

Panel Lighthouse w Chrome DevTools

Weźmy za przykład wysoce wyspecjalizowaną wyszukiwarkę o nazwie Doggos.com. Doggos.com ma indeksować wszystkie treści związane z psami w internecie, a najważniejsze strony to strona główna i strony z wynikami wyszukiwania. Oto wartości FCP i ITI zmierzone dla witryny w wersji na komputery i urządzenia mobilne.

Komputer FCP TTI
Strona główna 1680 ms 5550 ms
Strona wyników 2060 ms 6690 ms
Analiza witryny Doggos.com na komputerach
Urządzenia mobilne FCP TTI
Strona główna 1800 ms 6150 ms
Strona wyników 1100 ms 7870 ms
Analiza mobilna Doggos.com

Analiza konkurencji

Po przeprowadzeniu analizy własnej witryny należy przejść do analizy witryn konkurencji. Porównanie wyników z witryn podobnych do Twojej to świetny sposób na ustalenie budżetu skuteczności. Jest to ważny krok niezależnie od tego, czy pracujesz nad istniejącym projektem, czy też zaczynasz od zera. Przewaga nad konkurencją otrzymujesz, gdy Twoja firma działa szybciej od konkurencji.

Jeśli nie masz pewności, które witryny sprawdzić, poniższe narzędzia mogą Ci pomóc:

  1. Słowo kluczowe "related:" w wyszukiwarce Google
  2. Funkcja podobnych witryn Alexy
  3. SimilarWeb

Zrzut ekranu przedstawiający wyszukiwarkę Google z powiązanym słowem kluczowym

Aby uzyskać realistyczny obraz, spróbuj znaleźć około 10 konkurentów.

Budżet na etapy czasowe

W tym przykładzie nasza niszowa wyszukiwarka ma kilku konkurentów, dlatego skupimy się na optymalizacji strony głównej pod kątem urządzeń mobilnych. Obecnie ponad połowa ruchu internetowego pochodzi z sieci komórkowych, dlatego korzystając z numerów komórkowych, przyniesie to korzyści nie tylko użytkownikom telefonów komórkowych, ale także użytkownikom komputerów.

Utwórz wykres z czasami FCP i TI dla wszystkich podobnych witryn i wyróżnij w grupie najszybciej, które z nich są najszybsze. Taki wykres daje lepszy wgląd w skuteczność witryny na tle konkurencji.

Witryna/strona główna FCP TTI
goggles.com 880 ms 3150 ms
Doggos.com 1800 ms 6500 ms
quackquackgo.com 2680 ms 4740 ms
ding.xyz 2420 ms 7040 ms
Analiza konkurencji Doggos.com w sieci 3G
Pies przy komputerze
Doggos.com radzi sobie dobrze w przypadku FCP, ale ma poważne opóźnienia w stosunku do technologii TTI.

Jest wiele aspektów, które można poprawić – dobrym wskazówką jest reguła 20%. Badania pokazują, że użytkownicy zauważają różnicę w czasie odpowiedzi przekraczającym 20%. Oznacza to, że jeśli chcesz uzyskać znacznie wyższą pozycję niż najlepsza porównywalna witryna, musisz działać o co najmniej 20% szybciej.

Zmierz odległość Bieżący czas Budżet (o 20% szybsze niż konkurencja)
FCP 1800 ms 704 ms
TTI 6500 ms 2520 ms
Budżet wydajności, dzięki któremu Doggos.com wyprzedza konkurencję

Jeśli próbujesz zoptymalizować istniejącą witrynę, cel może wydawać się niemożliwy do osiągnięcia. To nie jest znak, żeby się poddać. Zacznij od małych kroków i ustaw budżet o 20% szybciej niż obecnie. Zacznij optymalizować.

W przypadku Doggos.com zmieniony budżet może wyglądać tak:

Zmierz odległość Bieżący czas Początkowy budżet (o 20% krótszy niż bieżący czas) Cel długoterminowy (o 20% szybsze niż konkurencja)
FCP 1800 ms 1440 ms 704 ms
TTI 6500 ms 5200 ms 2520 ms
Poprawiony budżet wydajności Doggos.com

Łączenie różnych danych

Solidny budżet skuteczności łączy w sobie różne typy danych. Budżet i czas realizacji kamieni milowych jest już określony, a teraz dodamy do niego jeszcze dwa:

  • dane oparte na ilościach
  • dane oparte na regułach

Budżet danych opartych na ilości

Niezależnie od ogólnej wagi strony, jaką wymyślisz, spróbuj dostarczyć mniej niż 170 KB zasobów critical-path (skompresowanych/zminimalizowanych). Gwarantuje to szybkość działania Twojej strony nawet na niedrogich urządzeniach i wolnej sieci 3G.

Możesz mieć większy budżet na wersję komputerową, ale nie poddawaj się. Zgodnie z danymi archiwum HTTP z zeszłego roku mediana wagi strony na komputerach i urządzeniach mobilnych wynosi ponad 1 MB. Aby uzyskać skuteczną witrynę, trzeba celować znacznie poniżej tych średnich wartości.

Oto kilka przykładów przygotowanych na podstawie budżetów TTI:

Sieć Urządzenie JS zdjęcia; CSS HTML Czcionki Łącznie Czas do wykorzystania budżetu interaktywnego
Wolna sieć 3G Moto G4 100 30 10 10 20 Ok. 170 KB 5 s
Wolna sieć 4G Moto G4 200 50 35 30 30 Ok. 345 KB 3 s
WiFi Komputer 300 250 50 50 100 Ok. 750 KB 2s

Określenie budżetu na podstawie danych ilościowych nie jest skomplikowane. Witryna e-commerce zawierająca mnóstwo zdjęć produktów znacznie różni się od portalu informacyjnego, który zawiera głównie tekst. Jeśli w swojej witrynie masz reklamy lub funkcje analityczne, zwiększa to ilość wysyłanego przez Ciebie kodu JavaScript.

Wykorzystaj powyższą tabelę jako punkt wyjścia i dostosuj ją w zależności od typu treści, nad którą pracujesz. Określ, co znajdą się na Twoich stronach, zapoznaj się z badaniami i określ, co mają się znaleźć na poszczególnych komponentach. Jeśli na przykład tworzysz witrynę z dużą liczbą obrazów, ustaw bardziej rygorystyczne ograniczenia rozmiaru pliku JS.

Gdy Twoja witryna działa, sprawdź wyniki w zakresie danych o skuteczności nastawionych na użytkowników i dostosuj budżet.

Budżet danych opartych na regułach

Bardzo skuteczne dane oparte na regułach mają wyniki Lighthouse. Lighthouse ocenia aplikację w 5 kategoriach. Jedna z nich to wydajność. Wyniki skuteczności są obliczane na podstawie 5 różnych wskaźników, m.in. Pierwsze wyrenderowanie treści i Czas do pełnej interaktywności.

Jeśli chcesz utworzyć ciekawą witrynę, ustaw budżet wyniku wydajności Lighthouse na co najmniej 85 (na 100). Użyj Lighthouse CI, aby wymuszać jego stosowanie w żądaniach pull.

Nadawanie priorytetów

Zadaj sobie pytanie, jakiego poziomu interakcji oczekujesz w witrynie. Jeśli jest to witryna z wiadomościami, głównym celem użytkowników jest czytanie jej treści, więc warto skupić się na szybkim renderowaniu i utrzymywaniu niskiego współczynnika FCP. Użytkownicy witryny Doggos.com chcą jak najszybciej klikać odpowiednie linki, dlatego priorytetem jest niski wskaźnik TTI.

Dowiedz się, jaka część Twoich odbiorców przegląda na komputerach, a jakie na urządzeniach mobilnych, i na tej podstawie ustal priorytety. Możesz na przykład sprawdzić, co Twoi odbiorcy robią na stronach konkurencji, korzystając z panelu Raportu na temat użytkowania Chrome.

Dane dotyczące dystrybucji na urządzeniach z Raportu na temat użytkowania Chrome
Dane dotyczące dystrybucji urządzeń z Raportu na temat użytkowania Chrome

Dalsze kroki

Dopilnuj, aby budżet wydajności był egzekwowany przez cały projekt i uwzględnił go w procesie kompilacji.