Wprowadzenie
Szybka aplikacja internetowa to aplikacja, która odniesie sukces. Twoja rola dewelopera nie kończy się, dopóki nie zoptymalizujesz zarówno rzeczywistej, jak i postrzeganej wydajności aplikacji. Nie tylko dlatego, że to po prostu właściwe działanie, ale też z ważkich praktycznych i biznesowych powodów. Amazon odnotował spadek sprzedaży o 1% na każde 100 ms opóźnienia w obsługiwaniu witryny, a Google – spadek ruchu o 20% na każde 0,5 sekundy opóźnienia (cytowanie). To są rzeczywiste liczby, które mają realne konsekwencje dla Twojej firmy i aplikacji internetowej.
Szybkość internetu jest tak ważna, że Google poświęca wiele wysiłków na przyspieszanie internetu. Jeśli potrzebujesz jeszcze jednego powodu, aby zoptymalizować działanie aplikacji, Google ogłosił, że szybkość strony została dodana do algorytmu rankingowego.
Istnieje wiele opublikowanych sprawdzonych metod optymalizacji wydajności aplikacji internetowej, w tym 2 świetne książki (High Performance Web Sites i Even Faster Web Sites). Techniki na serwerze (implementacja prawidłowych nagłówków kontroli pamięci podręcznej) i na kliencie (podanie atrybutów szerokości i wysokości obrazu) są łączone w ramach kompleksowej strategii optymalizacji wydajności. Przy tak wielu wskazówkach i wskazówkach trudno czasami ocenić, jak można je zastosować w praktyce i w rzeczywistej aplikacji internetowej.
Na szczęście Narzędzia deweloperskie w Chrome (dostępne w każdej instancji Chrome) to świetne narzędzie, które sprawdza Twoją aplikację internetową i podaje spersonalizowane rekomendacje dotyczące zwiększania wydajności i opóźnień. W tym artykule omówimy panel audytów, który pod względem zakresu działania jest podobny do bardzo popularnego narzędzia YSlow, oraz to, jak można go wykorzystać do przyspieszenia witryny, zmniejszenia opóźnień i zwiększenia zadowolenia użytkowników.
Pamiętaj, że narzędzie Panel kontroli jest obecnie dostępne tylko w Chrome, ale spodziewamy się, że inne przeglądarki WebKit zostaną z nim zintegrowane.
Pierwsze kroki
Aby pokazać, jak panel kontroli może zalecać poprawę wydajności aplikacji internetowej, użyjemy tego narzędzia w przypadku naszej witryny www.html5rocks.com. Użyjemy panelu kontroli, aby jeszcze bardziej przyspieszyć działanie naszej witryny.
Aby uruchomić Narzędzia deweloperskie, kliknij ikonę Chrome (w prawym górnym rogu okna przeglądarki) 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 audytów znajduje się w panelu głównym z przyciskami narzędzi. Po wybraniu panelu audytowego zauważysz, że nie przeprowadzono jeszcze analizy Twojej aplikacji internetowej. Przeprowadzenie wszystkich testów może być czasochłonne, zwłaszcza w przypadku dużych aplikacji internetowych, takich jak Gmail, dlatego narzędzie jest domyślnie wyłączone.
Aby rozpocząć, kliknij przycisk Uruchom, który ponownie wczyta aplikację internetową z włączoną heurystyką dotyczącą wydajności. Po ponownym załadowaniu strony zobaczysz listę rekomendacji podobną do tej na zrzucie ekranu poniżej.
Panel audytów klasyfikuje sugestie według ich wagi. Najpoważniejsze są oznaczone czerwoną kropką, a te o średniej wadze – żółtą. Dzięki temu kodowaniu kolorami możesz nadawać priorytety sugestiom, skupiając się najpierw na najważniejszych (i największych) zyskach.
Liczba w nawiasach obok sugestii to liczba wystąpień wykrytanych przez narzędzie do weryfikacji. Na przykład było 12 wystąpienia „Wykorzystaj pamięć podręczną przeglądarki”. Dzięki temu możesz określić, jak często można stosować tę sugestię.
Strategie dotyczące szybkości
Jak już wspomnieliśmy, istnieje wiele dobrze znanych i gruntownie przetestowanych strategii optymalizacji wydajności aplikacji internetowej. W tym artykule nie omawiamy ich wszystkich szczegółowo, ale bez problemu znajdziesz więcej informacji i szczegółów. Więcej informacji o szczegółach optymalizacji aplikacji internetowych znajdziesz w artykule Przyspieszamy internet i artykule Wysoka skalowalność: opóźnienia występują wszędzie i kosztują Cię sprzedaży.
Wskazówki w panelu audytów są podzielone na 2 kategorie: Wykorzystanie sieci i Wydajność strony internetowej.
Według panelu audytowego, aby zwiększyć wykorzystanie sieci, należy:
- korzystanie z zapisywania w pamięci podręcznej przeglądarki,
- korzystanie z pamięci podręcznej serwera proxy.
- minimalizowanie rozmiaru plików cookie
- wyświetlać treści statyczne z domeny bez plików cookie;
- określić wymiary obrazu,
Aby zwiększyć wydajność strony internetowej, należy:
- optymalizowanie kolejności stylów i skryptów.
- usunąć nieużywane reguły CSS.
Przyjrzyjmy się jednej ze strategii, na której możemy się skupić, aby zwiększyć skuteczność htmlrocks.com.
Wykorzystaj zapisywanie w pamięć podręczną przeglądarki
Zacznijmy od omówienia rekomendacji dotyczącej korzystania z pamięci podręcznej przeglądarki. Co to dokładnie oznacza? Po wybraniu opcji w interfejsie wyświetlają się te informacje:
- W tych zasobach brakuje daty wygaśnięcia pamięci podręcznej. Zasoby, które nie mają określonego czasu ważności, mogą nie być przechowywane w pamięci podręcznej przez przeglądarki.
- Te zasoby, które można przechowywać w pamięci podręcznej, mają krótki okres ważności.
- Te zasoby nie mogą być przechowywane w pamięci podręcznej. Jeśli to możliwe, rozważ ich buforowanie.
Buforowanie zasobów to świetny sposób na zwiększenie wykorzystania sieci, co prowadzi do niższych rachunków za przepustowość dla dewelopera i krótszego czasu reakcji dla użytkownika. Narzędzie nie podaje dokładnie, co należy zrobić, więc musimy dokładnie przyjrzeć się rekomendacjom i zastosować je, korzystając z naszej wiedzy o optymalizacji wydajności aplikacji internetowych.
Pamięć podręczna
Nie będziemy się zagłębiać w temat pamięci podręcznej HTTP, ale omówimy podstawy. Protokół HTTP zawiera instrukcje dotyczące buforowania, co pozwala serwerowi i klientowi zmniejszyć ilość danych, które muszą być przesłane przez sieć. Serwer może na przykład poinformować klienta, aby zapisał zasób lokalnie na określony czas, dzięki czemu nie będzie musiał ponownie wysyłać żądania. Klient może też zapytać, czy zasób na serwerze jest nowszy niż ten przechowywany lokalnie. W idealnej sytuacji, jeśli zasób jest statyczny, serwer powinien poinformować klienta, aby przechowywał zasób lokalnie i nie prosił o niego serwera w przyszłości. Jak możesz sobie wyobrazić, istnieje ogromna ilość szczegółów dotyczących buforowania HTTP, ale ogólny temat to „zmniejszanie ilości danych przesyłanych przez sieć poprzez przechowywanie zasobów lokalnie na kliencie”.
Rozwiązywanie problemów z zasobami, których nie można przechowywać w pamięci podręcznej
Przyjrzyjmy się dokładniej jednej rekomendacji i zobaczmy, jak połączyć ją z innymi narzędziami w Narzędziach deweloperskich. Dokładnie przyjrzymy się, jak rozwiązać problem z tym, że „podane zasoby nie mogą być przechowywane w pamięci podręcznej”.
Ponieważ buforowanie odbywa się za pomocą protokołu HTTP, musimy sprawdzić żądanie i odpowiedź HTTP dla zasobu http://www.html5rocks.com/. Wystarczy kliknąć zasób, aby wyświetlić oryginalne nagłówki żądania i odpowiedzi oraz szczegóły.
Następnie zostaniesz przekierowany do panelu Sieć, Zasoby lub Źródła (w zależności od klikniętego zasobu) z dodatkowymi informacjami. W tym przypadku przejdziemy do panelu Sieć.
Staramy się potwierdzić, że serwer powiedział klientowi „nie przechowuj w pamięci podręcznej strony głównej html5rocks.com”. Aby to zrobić, kliknij zasób, aby wyświetlić nagłówki odpowiedzi, czyli nagłówki i instrukcje wysyłane przez serwer.
Cache-Control.Serwer wysłał do klienta nagłówek „Cache-Control: no-cache”. Jak można się domyślić, oznacza to, że klient zawsze prosi o zasób i nie przechowuje go lokalnie w pamięci podręcznej. W specyfikacji HTTP dotyczącej „no-cache” czytamy:
„Jeśli dyrektywa no-cache nie określa nazwy pola, pamięć podręczna NIE MOŻE używać odpowiedzi do obsługi kolejnego żądania bez ponownej weryfikacji na serwerze źródłowym. Dzięki temu serwer źródłowy może uniemożliwić buforowanie nawet w przypadku pamięci podręcznej skonfigurowanej tak, aby zwracać nieaktualne odpowiedzi na żądania klienta”.
Właśnie dlatego w Panelu audytów zalecamy włączenie pamięci podręcznej, ponieważ w przeciwnym razie serwer i klient wysyłają potencjalnie zbędne informacje.
Teraz, gdy już znamy główną przyczynę sugestii w audycie, jak możemy ją naprawić? W takim przypadku rozwiązanie obejmuje konfigurację lub kod po stronie serwera. W zależności od konfiguracji możesz włączyć buforowanie w konfiguracji serwera WWW lub w ramach konfiguracji w ramach frameworku aplikacji internetowej. W szczególności w przypadku zasobów, które chcesz przechowywać w pamięci podręcznej, musisz uwzględnić nagłówek Expires i Cache-Control: private z parametrem max-age.
Sugestie to tylko sugestie
Pamiętaj, że panel audytów zaleca ulepszenia na podstawie ogólnych heurystycznych zasad. Polega ono na zastosowaniu sprawdzonych metod, wypracowanych przez wiele lat, w konkretnej aplikacji internetowej. W większości przypadków te rekomendacje są trafne i warto się do nich stosować.
Są jednak przypadki, w których rekomendacja może być prawidłowa, ale nie przyniesie oczekiwanych rezultatów. Jeśli na przykład na stronie jest tylko jeden duży obraz, panel audytów zaleci dodanie atrybutów width i height do tagu <img> (aby mechanizm renderowania znał wymiary obrazu bez konieczności jego pobierania i sprawdzania). Chociaż jest to ogólna i dobra rada, nie pomoże ona zbytnio, jeśli obraz jest jedynym elementem na stronie.
Pamiętaj, aby zastosować te sugestie po ich zrozumieniu. Pamiętaj, aby mierzyć skuteczność przed wprowadzeniem zmian i po ich wprowadzeniu, aby mieć pewność, że nastąpiła poprawa.
Podsumowanie
Panel audytów to doskonałe i łatwe w użyciu narzędzie, które szybko pokaże Ci, jak zoptymalizować działanie aplikacji internetowej. Szybkość jest kluczową cechą aplikacji internetowej, ponieważ wiele firm zauważyło bezpośrednią korelację między wydajnością a przychodami lub aktywnością. Optymalizacja wydajności aplikacji to nie tylko właściwe działanie z perspektywy użytkowników, ale też korzystne dla wyników finansowych Twojej firmy.