Wstęp
Szybka aplikacja internetowa to odnosząca sukcesy aplikacja internetowa. Twoja praca jako programista nie będzie wykonywana, dopóki nie zoptymalizujesz zarówno rzeczywistej, jak i widocznej wydajności aplikacji. To nie tylko dobry sposób na zapewnienie użytkownikom doskonałych wrażeń, ale też bardzo praktyczne i ważne biznesowe powody optymalizacji. Amazon zmierzył 1-procentowy spadek sprzedaży na każde 100 ms czasu oczekiwania na witrynę, a Google zmierzył o 20% spadek ruchu na każde 0,5-sekundowe opóźnienie (citation. Są to rzeczywiste liczby, które mają realny wpływ na Twoją firmę i aplikację internetową.
Szybkość działania sieci jest tak ważna, że Google podejmuje wiele działań, aby szybciej korzystać z internetu. Jeśli potrzebujesz jeszcze jednego powodu, aby optymalizować wydajność aplikacji, do algorytmu rankingowego dodaliśmy zapowiedzianą przez Google szybkość działania.
Istnieje wiele opublikowanych sprawdzonych metod optymalizacji wydajności aplikacji internetowej, w tym 2 świetne książki (Witryny internetowe o wysokiej wydajności i Jeszcze szybsze witryny internetowe). Metody stosowane na serwerze (wdrażanie odpowiednich nagłówków elementów sterujących pamięci podręcznej) i klienta (podawanie atrybutów szerokości i wysokości obrazu) są łączone w kompleksową strategię optymalizacji wydajności. Przy tak wielu poradach i wskazówkach czasem trudno jest określić, jak mają się do rzeczywistości i aplikacji internetowej.
Na szczęście Narzędzia deweloperskie w Chrome (dostępne w każdej wersji Chrome) to doskonałe narzędzie, które sprawdza Twoją aplikację internetową i oferuje spersonalizowane rekomendacje pozwalające zwiększyć wydajność i skrócić czas oczekiwania. W tym artykule omówimy panel audytów podobnego do popularnego narzędzia YSlow oraz dowiesz się, jak za jego pomocą przyspieszyć działanie strony, skrócić czas oczekiwania i zwiększyć satysfakcję użytkowników.
Narzędzie Panel kontroli jest obecnie dostępne tylko w Chrome, ale mamy nadzieję, że w przyszłości zostaną zintegrowane z innymi przeglądarkami WebKit.
Pierwsze kroki
Aby pokazać, jak panel audytów może zalecać poprawę wydajności aplikacji internetowych, wskażemy jego własną stronę www.html5rocks.com. Panel audytu pomoże jeszcze bardziej przyspieszyć działanie witryny.
Aby uruchomić Narzędzia deweloperskie, kliknij ikonę Chrome (w prawym górnym rogu okna Chrome) i wybierz Narzędzia > Narzędzia dla deweloperów.
Więcej informacji o tym, jak zacząć korzystać z Narzędzi deweloperskich, znajdziesz w oficjalnej dokumentacji.
Panel audytu znajduje się w głównym panelu przycisku narzędzi. Zwróć uwagę, że po wybraniu panel audytów nie przeprowadził jeszcze analizy Twojej aplikacji internetowej. Wykonanie wszystkich operacji heurystycznych może być powolne, zwłaszcza w przypadku dużej aplikacji internetowej, takiej jak Gmail, dlatego narzędzie jest domyślnie wyłączone.
Kliknij przycisk Uruchom, co spowoduje ponowne załadowanie aplikacji internetowej z włączoną heurystyką wydajności. Po ponownym załadowaniu strony zobaczysz listę rekomendacji podobną do zrzutu ekranu poniżej.
Zobaczysz, że panel audytów klasyfikuje sugestie według wagi: najpoważniejsze są oznaczone czerwoną kropką, a sugestie o średniej wadze – żółtą kropką. Dzięki oznaczaniu kolorami możesz priorytetowo traktować sugestie i skoncentrować się najpierw na najważniejszych (i największych korzyściach).
Liczba w nawiasach (zgodnie z sugestią) oznacza liczbę instancji wykrytych przez narzędzie audytowe. Na przykład w 12 wynikach pojawiła się zasada „Wykorzystaj pamięć podręczną przeglądarki”. W ten sposób sprawdzisz, jak często dana sugestia może być stosowana.
Strategie dotyczące szybkości
Jak już wspomnieliśmy, istnieje wiele dobrze znanych i testowanych strategii optymalizacji wydajności aplikacji internetowych. Nie omówimy ich szczegółowo w tym artykule, ale można z łatwością znaleźć więcej informacji i szczegółów. Przydatne materiały, z których dowiesz się więcej o optymalizacji aplikacji internetowych, to m.in. samouczki o szybszym działaniu w internecie i opóźnienie dużej skalowalności jest wszędzie i obniża koszty sprzedaży.
Sugestie w panelu audytów dzielą swoje sugestie na 2 kategorie: Wykorzystanie sieci i Wydajność strony internetowej.
Według panelu audytorów, aby poprawić wykorzystanie sieci, powinniśmy:
- wykorzystaj pamięć podręczną przeglądarki
- wykorzystaj buforowanie serwera proxy
- minimalizowanie rozmiaru pliku cookie
- wyświetlanie treści statycznych z domeny nieobjętej plikami cookie
- określić wymiary obrazu
Aby poprawić wydajność strony internetowej, należy:
- Optymalizuj kolejność stylów i skryptów
- usuń nieużywane reguły CSS
Przyjrzyjmy się jednej ze strategii, na których możemy się skupić, aby poprawić wyniki witryny htmlrocks.com.
Wykorzystaj zapisywanie w pamięć podręczną przeglądarki
Przyjrzyjmy się np. najpierw zaleceniom wykorzystania pamięci podręcznej przeglądarki. Co to oznacza? Po otwarciu opcji w interfejsie zobaczysz takie informacje:
- W przypadku poniższych zasobów nie ma daty ważności pamięci podręcznej. Zasoby, które nie mają określonej daty ważności, nie mogą być przechowywane w pamięci podręcznej przez przeglądarki.
- Poniższe zasoby, które można zapisać w pamięci podręcznej, mają krótki okres aktualności.
- Poniższe zasoby nie mogą być przechowywane w pamięci podręcznej. W miarę możliwości rozważ udostępnienie ich w pamięci podręcznej.
Pamięć podręczna to doskonały sposób na zwiększenie wykorzystania sieci, co prowadzi do obniżenia opłat za przepustowość dla programistów i skrócenia czasu odpowiedzi użytkownika. Narzędzie nie podaje dokładnie, co należy zrobić, dlatego musimy dokładniej przyjrzeć się rekomendacjom i wdrożyć je na podstawie naszej wiedzy o optymalizacji wydajności aplikacji internetowych.
Zapisywanie w pamięci podręcznej
Bez zagłębiania się w pamięć o buforowaniu HTTP możemy z pewnością omówić niektóre podstawy. Protokół HTTP zawiera instrukcje buforowania, co pozwala serwerowi i klientowi zmniejszyć ilość danych przesyłanych kablem. Serwer może na przykład poprosić klienta o zapisanie zasobu lokalnie przez określony czas, co eliminuje potrzebę ponownego żądania zasobu. Klient może też zapytać, czy zasób serwera jest nowszy niż ten przechowywany lokalnie. W idealnej sytuacji, jeśli zasób jest statyczny, serwer powinien poinstruować klienta, aby zapisywał go lokalnie, i unikać w przyszłości próśb o udostępnienie go serwerowi. Istnieje, jak można sobie wyobrazić, ogromna ilość szczegółów na temat buforowania HTTP, ale ogólnym założeniem jest „zmniejszenie ilości danych przesyłanych przez sieć przewodową dzięki przechowywaniu zasobów lokalnie po stronie klienta”.
Naprawianie zasobów nieprzechowywanych w pamięci podręcznej
Przyjrzyjmy się dokładniej jednemu z rekomendacji i dowiedzmy się, jak połączyć rekomendację dotyczącą audytu z innymi narzędziami dostępnymi w Narzędziach deweloperskich. W szczególności przyjrzyjmy się, jak rozwiązać problem z „poniższymi zasobami nie można zapisać w pamięci podręcznej”.
Ponieważ pamięć podręczna jest realizowana za pomocą protokołu HTTP, musimy sprawdzić żądania i odpowiedzi HTTP dotyczące zasobu http://www.html5rocks.com/. Po prostu kliknij zasób, aby wyświetlić nagłówki i szczegóły pierwotnego żądania i odpowiedzi.
Następnie zostanie wyświetlony panel Sieć, Zasoby lub Źródła (w zależności od typu klikniętego zasobu) z dodatkowymi informacjami. W tym przypadku nastąpi przekierowanie do panelu Sieć.
Chcemy się upewnić, że serwer poinstruował klienta „nie zapisuj strony głównej html5rocks.com w pamięci podręcznej”. W tym celu klikamy zasób, aby zapoznać się z nagłówkami odpowiedzi, ponieważ są to nagłówki i instrukcje wysłane przez serwer.
Cache-Control.Serwer wysłał nagłówek „Cache-Control: no-cache” do klienta. W ten sposób, jak można sobie wyobrazić, informuje klienta, aby zawsze prosił o zasób i nie buforował go lokalnie. Specyfikacja HTTP dotycząca „no-cache” brzmi:
„Jeśli dyrektywa no-cache nie określa nazwy pola, pamięć podręczna NIE MOŻE używać odpowiedzi, aby zrealizować kolejne żądanie bez pomyślnej ponownej weryfikacji na serwerze pierwotnym. Dzięki temu serwer pierwotny może zapobiegać zapisywaniu danych w pamięci podręcznej nawet w przypadku pamięci podręcznych skonfigurowanych w taki sposób, aby zwracał nieaktualne odpowiedzi na żądania klienta.
Właśnie dlatego panel audytów zaleca włączenie buforowania, ponieważ w przeciwnym razie serwer i klient będą wysyłać potencjalnie nadmiarowe informacje.
Skoro już ustaliliśmy główną przyczynę sugestii dotyczących audytu, jak rozwiązać ten problem? W tym przypadku rozwiązanie wymaga konfiguracji lub kodu po stronie serwera. W zależności od konfiguracji możesz włączyć zapisywanie w pamięci podręcznej w ramach konfiguracji serwera WWW lub za pomocą platformy aplikacji internetowej. W szczególności należy umieścić nagłówek Expiration i parametr Cache-Control: private z parametrem max-age dla wszystkich zasobów, które mają być przechowywane w pamięci podręcznej.
Tylko sugestie, sugestie
Pamiętaj, że panel kontrolny zaleca ulepszenia na podstawie ogólnych danych heurystycznych. Stosuje sprawdzone przez wiele lat sprawdzone metody w Twojej aplikacji internetowej. W większości przypadków te rekomendacje są trafne i warto im się przyjrzeć.
W niektórych przypadkach jednak mogą one być trafne, ale w rzeczywistości nie prowadzić do żadnych ulepszeń. Jeśli na przykład strona zawiera tylko jeden duży obraz, panel audytu zaleca dodanie do tagu <img> atrybutów szerokości i wysokości (aby mechanizm renderujący znał wymiary obrazu bez konieczności pobierania i sprawdzania obrazu). Jest to zwykle świetna porada, ale nie pomoże, jeśli obraz jest jedynym elementem na stronie.
Pamiętaj, aby zastosować te sugestie po ich zrozumieniu. Nie zapomnij też mierzyć skuteczności przed wprowadzeniem zmian i po ich wprowadzeniu, aby mieć pewność, że rzeczywiście się to poprawi.
Podsumowanie
Panel audytów jest doskonałym i łatwym w użyciu narzędziem, które szybko pokaże Ci, jak zoptymalizować wydajność aplikacji internetowej. Szybkość jest kluczowym atrybutem aplikacji internetowej, ponieważ wiele firm dostrzega bezpośrednie zależności między wydajnością a przychodami lub aktywnością. Optymalizacja wydajności aplikacji to nie tylko właściwe zadanie dla użytkowników, ale także przyczynia się do poprawy wyników firmy.