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:
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 |
| Urządzenia mobilne | FCP | TTI |
|---|---|---|
| Strona główna | 1800 ms | 6150 ms |
| Strona wyników | 1100 ms | 7870 ms |
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:
- Słowo kluczowe "related:" w wyszukiwarce Google
- Funkcja podobnych witryn Alexy
- SimilarWeb
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 |
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 |
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 |
Łą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.
Dalsze kroki
Dopilnuj, aby budżet wydajności był egzekwowany przez cały projekt i uwzględnił go w procesie kompilacji.