Skuteczność to ważny element wrażeń użytkownika i wpływa na dane biznesowe. Może się wydawać, że dobra witryna osiąga dobre wyniki, ale świetna wydajność rzadko jest skutkiem ubocznym. Jak zawsze, aby osiągnąć cel, musisz go jasno określić. Zacznij od ustawienia budżetu wydajności.
Definicja
Budżet wydajności to zestaw limitów nałożonych na dane wpływające na wydajność witryny. Może to być łączny rozmiar strony, czas wczytywania strony w sieci komórkowej, a nawet liczba wysłanych żądań HTTP. Określenie budżetu pomaga rozpocząć rozmowę na temat skuteczności witryny. Służą one jako punkt odniesienia przy podejmowaniu decyzji dotyczących projektu, technologii i dodawania obiektów.
Dysponowanie budżetem pozwala projektantom zastanowić się nad efektami obrazów o wysokiej rozdzielczości i liczbą wybranych czcionek internetowych. Pomaga też programistom porównywać różne podejścia do problemu oraz oceniać platformy i biblioteki na podstawie ich rozmiaru i kosztów analizy.
Wybierz dane
Dane ilościowe ⚖️
Dane te są przydatne na wczesnych etapach programowania, ponieważ wskazują wpływ umieszczenia ciężkich obrazów i skryptów. Ułatwiają też komunikowanie się z projektantami i programistami.
Pisaliśmy już o tym, że w budżecie wydajności można uwzględnić kilka rzeczy, takich jak waga strony czy liczba żądań HTTP. Możesz jednak podzielić je na bardziej szczegółowe limity, na przykład:
- Maksymalny rozmiar obrazów
- Maksymalna liczba czcionek internetowych
- Maksymalny rozmiar skryptów, w tym platformy
- Łączna liczba zasobów zewnętrznych, takich jak skrypty innych firm
Jednak te liczby niewiele mówią o wrażeniach użytkowników. Dwie strony o tej samej liczbie żądań lub tej samej wadze mogą być renderowane różnie w zależności od kolejności żądań zasobów. Jeśli krytyczny zasób, taki jak baner powitalny czy arkusz stylów na jednej ze stron, zostanie wczytany później w trakcie tego procesu, użytkownik będzie musiał dłużej czekać, aby zobaczyć coś przydatnego, i będzie uznawać, że strona działa wolniej. Jeśli na drugiej stronie najważniejsze elementy szybko się ładują, mogą nawet tego nie zauważyć, jeśli reszta strony nie zacznie się ładować.
Dlatego tak ważne jest śledzenie innego rodzaju danych.
Harmonogramy kamieni milowych ⏱️
Kamienie milowe oznaczają zdarzenia, które mają miejsce podczas wczytywania strony, np. DOMContentLoaded lub load. Najbardziej przydatne są dane o skuteczności związane z użytkownikami, które informują o wrażeniach użytkowników podczas wczytywania strony. Te dane są dostępne w interfejsach API przeglądarek oraz w raportach Lighthouse.
Pierwsze wyrenderowanie treści (FCP) mierzy, kiedy przeglądarka wyświetla pierwszy bit treści z DOM, np. tekst lub obrazy.
Czas do pełnej interaktywności (TTI) mierzy, ile czasu potrzeba, aby strona staje się w pełni interaktywna i sprawnie reaguje na dane wejściowe użytkownika. To bardzo ważne dane, które należy śledzić, jeśli spodziewasz się jakiejkolwiek interakcji użytkownika ze stroną, np. klikania linków, przycisków, pisania czy używania elementów formularza.
Dane oparte na regułach 🎬
Lighthouse i WebPageTest obliczają wyniki skuteczności na podstawie ogólnych reguł sprawdzonych metod, które możesz wykorzystać jako wytyczne. Dodatkowo Lighthouse udostępnia wskazówki dotyczące prostych optymalizacji.
Najlepsze wyniki uzyskasz, śledząc kombinację danych dotyczących skuteczności na podstawie ilości i użytkowników. Skup się na rozmiarach zasobów na wczesnych fazach projektu i jak najszybciej zacznij śledzić FCP oraz TTI.
Wyznacz poziom odniesienia
Jedynym sposobem, aby przekonać się, co sprawdza się najlepiej w przypadku Twojej witryny, jest jej wypróbowanie – najpierw przeprowadź badania, a potem zweryfikuj wyniki. Przeanalizuj konkurencję, aby zobaczyć, jak wypadasz na tle innych. 🕵️
Jeśli nie masz na to czasu, oto kilka domyślnych numerów, które pomogą Ci zacząć:
- Czas do pełnej interaktywności poniżej 5 s
- Poniżej 170 KB zasobów ścieżki krytycznej (skompresowanej/zminimalizowanej)
Te wartości są obliczane na podstawie rzeczywistej liczby urządzeń bazowych i szybkości sieci 3G. Ponad połowa ruchu internetowego pochodzi obecnie z sieci komórkowych, dlatego jako punktu wyjścia warto użyć sieci 3G.
Przykłady budżetów
Musisz zaplanować budżety dla różnych typów stron w witrynie, ponieważ ich zawartość będzie różna. Na przykład:
- Nasza strona produktu musi zawierać mniej niż 170 KB JavaScriptu na urządzenia mobilne
- Nasza strona wyszukiwania musi zawierać mniej niż 2 MB obrazów w wersji na komputery
- Nasza strona główna musi się wczytywać i interaktywnie działać w ciągu < 5 s, jeśli połączenie z siecią 3G na telefonie Moto G4
- Nasz blog musi uzyskać ponad 80 punktów w związku z audytami działania narzędzia Lighthouse
Dodawanie budżetów wydajności do procesu tworzenia
Dobór narzędzia do tego zadania będzie w dużej mierze zależał od skali projektu i zasobów, które możesz przeznaczyć na to zadanie. Istnieje kilka narzędzi open source, które pomogą Ci zaplanować budżetowanie w procesie tworzenia:
Gdy wartość przekroczy określony próg, masz 2 możliwości:
- Zoptymalizuj istniejącą funkcję lub zasób 🛠️
- Usuń istniejącą funkcję lub zasób 🗑️
- Nie dodaj nowej funkcji lub zasobu ✋⛔
Śledzenie skuteczności
Jeśli zadbasz o wystarczającą szybkość swojej strony, musisz dalej prowadzić pomiary po jej uruchomieniu. Monitorowanie tych danych wraz z upływem czasu i uzyskiwanie informacji od rzeczywistych użytkowników pokazuje, jak zmiany skuteczności wpływają na kluczowe dane biznesowe.
Podsumowanie
Celem budżetu wydajności jest umożliwienie Ci skoncentrowania się na wydajności przez cały czas trwania projektu, a wczesne określenie go zapobiegnie cofaniu się śledzenia w późniejszym czasie. Będzie dla Ciebie punktem odniesienia przy wyborze treści, które warto umieścić w witrynie. Najważniejsze jest wyznaczenie celów, aby uzyskać równowagę pomiędzy wydajnością i wrażeniami użytkownika.🎯
Z następnego przewodnika dowiesz się, jak w kilku prostych krokach określić pierwszy budżet skuteczności.