Wydajność ma duże znaczenie dla wygody użytkowników i ma wpływ na dane biznesowe. Może się wydawać, że jeśli jesteś dobrym programistą, z pewnością trafisz na wydajną witrynę, ale tak naprawdę dobra wydajność rzadko jest efektem ubocznym. Podobnie jak w przypadku większości innych rzeczy, aby osiągnąć cel, musisz go jasno określić. Na początek ustaw budżet skuteczności.
Definicja
Budżet wydajności to zestaw limitów nałożonych na dane, które wpływają na wydajność witryny. Może to być całkowity rozmiar strony, czas wczytywania w sieci komórkowej lub nawet liczba wysłanych żądań HTTP. Zdefiniowanie budżetu ułatwia rozpoczęcie rozmowy na temat wydajności witryny. Stanowi punkt odniesienia przy podejmowaniu decyzji dotyczących projektowania, technologii i dodawania funkcji.
Dzięki budżetowi projektanci mogą myśleć o wpływie obrazów w wysokiej rozdzielczości i liczbie czcionek, które wybierają. Pomaga ono też deweloperom porównywać różne podejścia do problemu oraz oceniać platformy i biblioteki na podstawie ich rozmiaru oraz kosztów analizy.
Wybierz dane
Dane oparte na ilości ⚖️
Te dane są przydatne na wczesnych etapach programowania, ponieważ pokazują wpływ umieszczenia ciężkich obrazów i skryptów. Ułatwiają też komunikację z projektantami i programistami.
Wspomnieliśmy już o kilku aspektach uwzględnianych w budżecie wydajności, takich jak waga strony czy liczba żądań HTTP, ale możesz je też dzielić na bardziej szczegółowe limity, takie jak:
- Maksymalny rozmiar obrazów
- Maksymalna liczba czcionek internetowych
- Maksymalny rozmiar skryptów, w tym platform
- Łączna liczba zasobów zewnętrznych, takich jak skrypty innych firm
Te liczby nie mówią jednak wiele o wrażeniach użytkowników. Dwie strony o tej samej liczbie żądań lub o tej samej wadze mogą renderować się w różny sposób zależnie od kolejności żądań zasobów. Jeśli krytyczny zasób, taki jak baner powitalny lub arkusz stylów na jednej ze stron, zostanie wczytany pod koniec procesu, użytkownicy będą czekać dłużej na wyświetlenie przydatnych informacji, a strona będzie postrzegana jako wolniej. Jeśli na innej stronie szybko wczytują się najważniejsze elementy, mogą nawet nie zauważyć, że reszta strony nie wczytuje się.
Dlatego ważne jest śledzenie innych rodzajów danych.
Harmonogramy kamieni milowych ⏱️
Etapy czasowe wskazują zdarzenia, które mają miejsce podczas wczytywania strony, takie jak DOMContentLoaded lub load. Najbardziej przydatne sygnatury czasowe to dane o wydajności pod kątem użytkownika, które informują o wrażeniach użytkownika podczas wczytywania strony. Dane te są dostępne w interfejsach API przeglądarek oraz w raportach Lighthouse.
Pierwsze wyrenderowanie treści (FCP) mierzy, kiedy przeglądarka wyświetla pierwszy fragment treści z DOM, np. tekst lub obrazy.
Czas do pełnej interaktywności (TTI) określa, po jakim czasie strona staje się w pełni interaktywna i skutecznie reaguje na dane wejściowe użytkownika. Są to bardzo ważne dane, które należy śledzić, jeśli spodziewasz się jakiejkolwiek interakcji użytkownika na stronie, np. klikania linków, przycisków, pisania lub używania elementów formularzy.
Dane oparte na regułach 💌
Lighthouse i WebPageTest obliczają wyniki wydajności na podstawie ogólnych sprawdzonych metod, których możesz używać jako wskazówek. Dodatkowo w Lighthouse znajdziesz wskazówki dotyczące prostych optymalizacji.
Najlepsze wyniki uzyskasz, jeśli będziesz śledzić kombinację danych dotyczących skuteczności, na podstawie ilości i użytkownika. Skup się na rozmiarach zasobów na wczesnych fazach projektu i zacznij jak najszybciej śledzić FCP oraz TTI.
Określ punkt odniesienia
Jedynym sposobem na stwierdzenie, co jest najlepsze w przypadku Twojej witryny, jest wypróbowanie jej – badanie, a następnie przetestowanie wyników. Przeanalizuj konkurencję, aby zobaczyć, jak wypadasz. 🕵️
Jeśli nie masz na to czasu, na początek możesz użyć poniższych wartości domyślnych:
- Czas do pełnej interaktywności: poniżej 5 s
- Poniżej 170 KB zasobów ze ścieżką krytyczną (skompresowanych/zminimalizowanych)
Te liczby są obliczane na podstawie rzeczywistych urządzeń podstawowych i szybkości sieci 3G. Ponad połowa ruchu w internecie odbywa się obecnie przez sieci komórkowe, dlatego warto zacząć od szybkości sieci 3G.
Przykłady budżetów
Należy ustalić budżet dla różnych typów stron w witrynie, ponieważ ich treść będzie się różnić. Na przykład:
- Nasza strona produktu musi wysyłać mniej niż 170 KB kodu JavaScript na urządzenia mobilne
- Strona wyszukiwania musi zawierać mniej niż 2 MB obrazów na komputerze
- Strona główna musi się wczytać i wejść w interakcję w ciągu < 5 s na powolnym połączeniu 3G na telefonie Moto G4
- Nasz blog musi uzyskać ponad 80 z audytów wydajności w Lighthouse
Dodawanie budżetów skuteczności do procesu tworzenia
Wybór odpowiedniego narzędzia zależy w dużym stopniu od skali projektu i dostępnych zasobów. Istnieje kilka narzędzi open source, które mogą Ci pomóc w zwiększaniu budżetu:
Jeśli coś przekracza zdefiniowany próg, możesz:
- Zoptymalizuj obecną funkcję lub zasób 🛠️
- Usuń istniejącą funkcję lub zasób 🗑️
- Nie dodawaj nowej funkcji ani komponentu ✋⛔
Śledzenie skuteczności
Jeśli zadbasz o wystarczającą szybkość działania strony, po jej pierwszym uruchomieniu musisz nadal prowadzić pomiary. Monitorowanie tych danych w czasie i uzyskiwanie danych od rzeczywistych użytkowników pokaże Ci, jak zmiany skuteczności wpływają na kluczowe dane biznesowe.
Podsumowanie
Budżet wydajności pomaga skupić się na wydajności w ramach całego projektu. Ustawienie go odpowiednio wcześnie pomoże zapobiec cofaniu się zmian w późniejszym czasie. Powinna być pomocna przy wyborze elementów, które warto umieścić na stronie. Głównym założeniem jest tu wyznaczenie celów, które pozwolą Ci znaleźć równowagę między wydajnością a wygodą użytkowników bez negatywnego wpływu na działanie funkcji i wygodę użytkowników.🎯
Z następnego przewodnika dowiesz się, jak określić pierwszy budżet skuteczności w kilku prostych krokach.