Kultura zorientowana na Web Performance

Ci, którzy ze mną pracują, wiedzą, że zawsze mam obsesję na punkcie wydajności. Słowa takie jak: krytyczna ścieżka renderowania, rozmiar paczki i klatki na sekundę, są powszechne w biurze. Ale to wszystko z dobrych pobudek. Wydajność powinna być pierwszorzędnym punktem w dziedzinie inżynierii oprogramowania. Posiadanie w swoim zespole silnej kultury zorientowanej na wydajność może zapewnić, że z wyprzedzeniem ograniczysz wszelkie ryzyko związane ze słabą wydajnością.

Ale dlaczego to takie ważne? I jakie jest to ryzyko?

Dlaczego Web Performance ma znaczenie

Pamiętaj, że jako programistów webowych, naszym celem jest stworzenie jak najlepszego doświadczenia dla naszych użytkowników.

Wydajność to użyteczność

Istnieje wiele badań ([1], [2], [3]), które wykazują bezpośrednią korelację pomiędzy celami biznesowymi a użytecznością w sieci. Szybka i zwinna strona internetowa może stanowić różnicę między sukcesem a porażką, jeśli chodzi o relacje z użytkownikami.

Twoja fantazyjna struktura i architektura interfejsu użytkownika nie będą miały znaczenia, jeśli Twoja strona internetowa będzie kojarzona jako powolna i rzeczywiście będzie "lagować". Nie wspominając o scenariuszu, w którym użytkownicy odchodzą, ponieważ mają dość patrzenia na obracające się kółko lub biały ekran.

53% użytkowników zamknie Twoją stronę internetową w ciągu 3 sekund, jeśli nie wyświetlą się żadne treści. Ponadto, wydajność jest również metryką w rankingu stron mobilnych, według Google.

Wydajność to dostępność

Porozmawiajmy o globalnym rynku. Budżety wydajności są również ważne, jeśli chodzi o koszt danych. Ile użytkownik płaci za odwiedzenie Twojej strony internetowej? Możesz się o tym przekonać, korzystając z tej strony internetowej. Wtedy możesz zadać sobie pytanie: "Czy jestem sam gotów zapłacić x centów za odwiedzenie mojej strony internetowej?" Możesz być zaskoczony własną odpowiedzią.

Ponadto istnieją kraje, w których zdecydowana większość czasu spędzanego w Internecie jest spędzana za pośrednictwem urządzeń przenośnych. Musisz więc przyjąć podejście mobile-first w celu optymalizacji wydajności.

Pomijając ten krok, sprawiasz, że Twój produkt staje się niedostępny dla wielu ludzi!

Wydajność polega na empatii

Mamy tendencję do patrzenia na naszą pracę wyłącznie z własnej perspektywy. Jest to niebezpieczne, ponieważ prowadzi do powierzchownego zrozumienia potrzeb naszych użytkowników.

Nie wspominając o naszej ciągłej potrzebie pracy nad fajnymi rzeczami (nowa technologia, nowoczesne frameworki itd) i ignorowania tych nudnych prac.

Wydajność ma znaczenie i musisz pracować nad jej optymalizacją, mając na uwadze empatię i bezinteresowność. Ale te cechy, niestety, nie są domyślne we wszystkich środowiskach pracy.

Miej plan na najgorszy scenariusz

Kolega pokazał mi interesujący scenariusz kilka tygodni temu. Jest strona internetowa poświęcona stylizacji wystroju domów, która wykorzystuje system CMS do zarządzania danymi. Ktoś przesłał to zdjęcie:

Zrzut ekranu z narzędzi Chrome Dev Tools

Jest to 9,3 megabajtów danych, których załadowanie na ultraszybkim połączeniu Wi-Fi MacBooka Pro zajmuje około 7 sekund. Możesz sobie wyobrazić, ile czasu zajęłoby to na urządzeniu przenośnym? Odpowiedź brzmi: nieskończoność! Ponieważ przeglądarka w telefonie komórkowym przestanie odpowiadać po otwarciu tej strony internetowej.

Oto ta strona, jeśli jesteś ciekawy, ale proszę postępować ostrożnie, ponieważ może ona potencjalnie zablokować Twoją przeglądarkę!

Nie powinniśmy winić użytkownika. Chciał jedynie wyświetlić bardzo szczegółowy obraz z instrukcją złożenia.

Wracając do idei zrozumienia naszych użytkowników, powinniśmy zawsze przygotowywać się na najgorsze scenariusze, jeśli chodzi o tworzone przez użytkowników treści.

Jako programista jesteś w pełni odpowiedzialny za sposób, w jaki użytkownicy komunikują się z Twoim oprogramowaniem.

Kiedy zoptymalizować

Istnieją dwa podejścia do optymalizacji wydajności. Ben Schwarz podsumowuje dwa podejścia w swojej prezentacji, The Critical Request.

Podejście reaktywne (góra) vs podejście proaktywne (dół) do optymalizacji wydajności

Z jednej strony mamy tradycyjne podejście: "Houston mamy problem!". Jest to wysoce reaktywny sposób traktowania kwestii związanych z wydajnością. Lubię to nazywać problemem w stylu "O cholibcia! Zadzwoń do konsultanta!".

Nie tylko jest to kosztowne dla Twojej firmy, ale może być również doskonałym demotywatorem dla zespołu. Może nawet prowadzić do konfliktu, gdy ludzie nie są związani z celami optymalizacji wydajności.

Z drugiej strony, mamy podejście proaktywne. Optymalizację wydajności wprowadza się do procesu tworzenia oprogramowania.

Jeśli musisz przekonać stronę biznesową do wypróbowania proaktywnego podejścia, sprawdź statystyki WPO. Jest to świetne źródło informacji o przypadkach, które pokazują korzyści płynące z optymalizacji wydajności.

Kiedy to podejście jest używane, to zespół i kultura rozwiązują problemy z wyprzedzeniem, a nie konsultant, który przychodzi, aby rozwiązać problem. Wysoka jakość pracy może być świetną motywacją dla zespołu.

Ale świadomość wydajności nie pojawia się z dnia na dzień. Trzeba stworzyć odpowiedni kontekst, aby ludzie byli świadomi wpływu tego, co robią.

Mierz i działaj

Czy wiesz, ilu użytkowników ląduje na Twojej stronie z urządzeń mobilnych? Jak często prowadzisz testy w złych warunkach sieciowych? Jak często wyjmujesz urządzenie średniej klasy, takie jak Moto G4, i zaczynasz bawić się na nim swoją aplikacją?

To wszystko istotne scenariusze, które użytkownicy mogą napotkać każdego dnia! Poznaj swoją bazę użytkowników, swoje urządzenie i sposoby korzystania z przeglądarki. Dobre i istotne wskaźniki są wszystkim, jeśli chcesz stworzyć kulturę wydajności.

Po otrzymaniu wskaźników, nadszedł czas, aby ustalić budżety wydajności. Wreszcie, czas działać! Oto kilka narzędzi i praktyk, które możesz wprowadzić do swojego zwykłego środowiska pracy:

Krok 1: Mieszenie wskaźników wydajności

• Lighthousejest niesamowitym projektem i jest dostępny w Chrome Dev Tools. Pozwoli Ci zobaczyć, jak możesz poprawić wydajność. Znajdziesz tu również kilka miłych sugestii dotyczących SEO, dostępności i najlepszych praktyk.
• Webpagetestjest doskonałym narzędziem do śledzenia kluczowych metryk i porównywania wykresów kaskadowych przed i po wgraniu kolejnej wersji. Mogę również polecić gtmetrix, mniej znane narzędzie, z bardzo łatwym w użyciu interfejsem.

Krok 2: Automatyzacja

• Do procesu budowania na CI dodaj kroki związane z wydajnością. bundlesize to świetny pakiet, jeżeli chcesz zdefiniować jakieś twarde limity dla swoich paczek.
• Buduj zautomatyzowane testy, które zakończą się niepowodzeniem, jeśli czas ładowania lub inne istotne wskaźniki przekraczają określone progi. Puppeteer ma bezpośredni dostęp do API Chrome, co można wykorzystać w testach.

Krok 3: Wizualizacja

• Każdy w zespole powinien być świadomy wpływu pisanego przez siebie kodu. Webpack bundle analyzer to świetny sposób na wizualizację tego, co znajduje się wewnątrz końcowych paczek. Ludzie mogą się zastanowić dwa razy, zanim skorzystają z biblioteki, która zwiększa ogólny rozmiar paczki o 10%.
• import costdla VSCode pokaże Ci, ile kodu dodajesz do projektu przy użyciu pewnych zależności. Ponownie, chodzi o upewnienie się, że wszyscy są w pełni świadomi wpływu tego, co robią.

Krok 4: Egzekucja i wzmacnianie

• Musisz być gotowy do egzekwowania surowych zasad w organizacji. W naszym przypadku stworzyliśmy listę kontrolną wydajności, którą należy spełnić w każdym projekcie.
• Upewnij się, że każdy w zespole zajmuje się odpowiednio swoją częścią optymalizacji wydajności. Nie chcesz mieć tylko jednej osoby, która to robi, bo znowu wpadniesz w scenariusz konsultanta. Dzięki podziałowi zadań, każdy poznaje kontekst i różne sposoby zapobiegania problemom.

Budowanie kultury zorientowanej na wyniki jest procesem stopniowym. I jest to proces zrozumienia problemów i ich rozwiązywania. Stałym elementem całego procesu jest potrzeba edukowania ludzi.

Techniki optymalizacji wydajności nie są skomplikowane. Ale potrzebują pewnego zaplecza technicznego i dobrego zrozumienia tego, jak działa sieć. Budowanie na solidnych podstawach może pomóc Twojemu zespołowi zrozumieć nawet najbardziej zaawansowane techniki przyspieszania Twojej aplikacji.

W naszym przypadku dbamy o to, aby wydajność sieci była częścią ścieżki edukacyjnej dla wszystkich inżynierów. Nie tylko egzekwujemy listę kontrolną. Dbamy o to, aby ludzie mieli dobre warunki do poznania przyczyn, które stoją za tymi technikami.

Ściągawka z wydajności w naszym biurze w Fortech

Wydajność to jakość oprogramowania

W końcu, praca nad wydajnością jest taka sama jak praca nad UX, bezpieczeństwem lub dostępnością. Jest to część oferowanej przez Ciebie jakości oprogramowania. Czasami może się to wydawać dodatkowym wysiłkiem za coś, co nie jest wymagane. To prawda, wydajność może nie być częścią wymagań niefunkcjonalnych.

Wracając jednak do idei odpowiedzialności, naszym obowiązkiem jest zapewnienie jak najlepszej jakości. A wydajność jest jednym z filarów jakości oprogramowania.

Gdybym miał podsumować ścieżkę w kierunku kultury wydajności, oto jej kluczowe cechy:

• Podnoszenie świadomości i budowanie empatii wobec użytkownika.
• Popieranie proaktywnego podejścia i zajmowanie się problemami z wyprzedzeniem.
• Pomiar i działanie w ciągłej pętli.
• Rozpowszechnianie wiedzy i zaangażowanie całego zespołu w proces.
• Uczynienie procesu częścią jakości oprogramowania jako celu końcowego.

Odniesienia

Oto kilka miejsc, od których można zacząć zmiany:

• Portal Google Developersma świetne artykuły na temat technik optymalizacji wydajności.
• perf-tooling.today oferuje wiele wspaniałych zasobów na temat wydajności stron.
• Publikacje Chrome DevTeamprezentują wiele wspaniałych pomysłów i case studies dotyczących poprawy wydajności popularnych stron internertowych.
  
  

Oryginał tekstu w języku angielskim przeczytasz tutaj.