Od kilku lat każdy słyszał takie narzędzie jak Google PageSpeed Insights, Ale są też starsze i chłodniejsze narzędzia do kontrolowania ładowania stron Twojej witryny. Dzisiaj proponuję porozmawiać o tak fajnym narzędziu jak wykres wodospadu (Diagram wodospadu). Tak myślę, Wielu widziało to podczas wyszukiwania różnych usług, aby ocenić szybkość ładowania witryny, ale zrozum, Jak to działa tylko kilka.

Do czego służy wykres wodospadowy i jak działa??

Tak myślę, Największą zaletą takiego diagramu jest fakt, że, Co możemy śledzić jako konkretne zasoby strony (Skrypty, zobrazowanie, Style, Elementy wektorowe, Stan serwera i nie tylko) wpływa na ładowanie strony, Ważne jest również, aby móc ocenić każdą pojedynczą stronę.

Jeśli uruchomisz podobny wykres, Możesz być zdezorientowany przez kilka niejasnych terminów. Na przykład wezmę stronę jednego z moich klientów, dla którego zrobiliśmy stronę pod klucz, i pokażę jego schemat (vgamp.com). Użyję narzędzia gtmetrix.com. Podoba mi się ta usługa ze względu na ze względu na kompleksowe sprawdzenie strony, różnorodne narzędzia, a po analizie w nim można również użyć wykresu wodospadowego. Więc, Przykład sprawdzania poprawności

Na końcu pierwszej kolumny widzimy ilość zapytań, w moim przykładzie oni 74 i rozmiar całej strony 472.6 kb. Po prawej stronie widać czas ładowania strony 1,29 sekundy i moment całkowitego zakończenia zdarzenia onload 1.38 sekundy.

w tym przykładzie, w pierwszej kolumnie, Możesz zobaczyć, że wszystkie żądania z metodą GET (pobieranie elementów), istnieją również żądania POST, ale teraz nie o nich. Sprite'y mogą być używane do zmniejszania liczby żądań GET, to wtedy wszystkie małe obrazy na stronie (głównie ikony) są łączone w jeden obraz, a następnie wyświetlane w tle elementów za pomocą CSS, a aby wyświetlić inne, tło jest po prostu przewijane (zmienia pozycję). Całkiem przydatna metoda dla ikon, ale przy użyciu elementów SVG, masz możliwość osadzenia ich na stronie i wtedy serwer nie musi ich szukać, zostaną wygenerowane podczas ładowania głównego kodu HTML.

Jeśli w pierwszej kolumnie najedziesz kursorem na nazwę zasobu (zdjęcia, scenariusz... ), zobaczysz pełną ścieżkę, w której znajduje się załadowany zasób w witrynie Twojej lub strony trzeciej. Aby wyświetlić bardziej szczegółowe informacje, wystarczy kliknąć nazwę zasobu, jak pokazano na poniższym obrazku.

Rozważmy każdy ważny element pod kątem szybkości ładowania strony osobno:

1. Status - kod odpowiedzi serwera, będzie dobrze, jeśli warto 200. Jeśli otrzymasz kod 404, 301 lub 500 oznacza, coś poszło nie tak i spowolni twoją stronę. Przeczytaj więcej o kodach odpowiedzi serwera na Wikipedii.
2. Kodowanie treści - w tym przypadku to widać, że element został skompresowany metodą GZip i to dobrze, ponieważ takie elementy ładują się szybciej.
3. Typ zawartości – pokazuje, jaki typ elementu jest sprawdzany.
4. serwer jest serwerem, który jest skonfigurowany na twoim hostingu, w naszym przypadku jest to nginx.
5. Schemat - mamy to HTTP, praca poprzez szyfrowane mechanizmy transportu SSL. Przydatne dla bezpieczeństwa danych podczas transmisji w serwisie, zwłaszcza dla sklepów. Ważne jest, aby wszystkie połączone pliki w Twojej witrynie miały ten sam typ protokołu., taki sam jak na Twojej stronie głównej. Jeśli masz HTTPS, wtedy wszystkie pliki muszą być HTTPS, wyjątkiem mogą być linki zewnętrzne do stron internetowych (nie pliki).
6. Ścieżka – ścieżka do sprawdzanego pliku.

Legenda pojedynczego pliku podczas oceny wydajności serwisu

Niezwykła legenda słowa, przechowuje dane o pobraniu osobnego pliku, wyświetla się po najechaniu kursorem na słupek w centralnej części diagramu i wygląda tak:

Legenda pokazuje, co dzieje się z żądaniem pliku w postaci różnych schematów kolorów. W legendzie może być wiele faz zapytań, główne są: bloking (jasny szary), wysyłanie (czerwony), oczekiwanie (fioletowy), otrzymujący (Szary). Kolory mogą się różnić w zależności od różnych usług, ale definicje są zwykle takie same.

Krótka definicja poszczególnych faz składania wniosków, które możemy zobaczyć:

• Bloking: czas, spędzony w kolejce przeglądarki, oczekujące połączenie sieciowe.
• Wyszukiwanie DNS: czas na rozpoznanie DNS.
• Złączony: czas, potrzebne do utworzenia połączenia TCP.
• Wysyłanie: czas wysłania danych żądania do serwera.
• Czekanie: limit czasu odpowiedzi serwera.
• Otrzymujący: czas reakcji organizmu na obciążenie.

Dopóki nie napisałem interpretacji artykułu w języku rosyjskim, możesz przeczytać więcej o różnych fazach wniosku tutaj. To jest, jeśli chcesz potraktować to bardzo poważnie.

Limity pobierania dokumentów

Również na schemacie widać kilka linii w różnych kolorach, jak pokazano na poniższym obrazku.

Rozważać, Co oznaczają te linie?:

1. Wyświetlenie pierwszej witryny, chociaż wielu, którzy analizują szybkość ładowania stron, powiązać wyjście elementów już ze sceną [3].
2. Pełne załadowanie elementów DOM strony. dziać się, kiedy wszystkie elementy są ładowane i analizowane.
3. Zakończenie zdarzenia onload. W niektórych przypadkach ładowanie elementów może zakończyć się lub rozpocząć po zdarzeniu onload.
4. Pełne ładowanie przed i po zdarzeniu onload.

Twoje wykresy kaskadowe będą prawdopodobnie bardziej złożone., ale rozważyliśmy podstawowe zasady i przeanalizowaliśmy nasz zestaw narzędzi.

Jak nawigować i optymalizować stronę za pomocą wykresu wodospadowego

Teraz, gdy wiemy już dużo o tym diagramie, przyjrzyjmy się kilku punktom, które ułatwiają identyfikację problemów na nim występujących..

Poniższy przykład ma migawka z nieprawidłową odpowiedzią serwera 404 i 403, niedaleko widać, jak wolno ładuje się strona.

Poszukaj szczególnie długich wykresów na wykresie i sprawdź, jakie parametry powodują to opóźnienie. Czasami same silniki, na których tworzona jest strona, są wyjątkowo powolne, czasami wolny moduł lub programista po prostu zgłupiał i wykonał rekurencję tam, gdzie nie było to konieczne ). Ogólnie rzecz biorąc, najczęstsza jest ostatnia opcja analfabetyzmu. Zdarza się też, że klientka oszczędzała na jakości, a wszystko zostało zrobione tak, aby po prostu pięknie wyglądać..

Oto przykład, który mam.:

Powyższy przykład pokazuje długi plik paragonu, w którym zebrano skrypty przyspieszające działanie serwisu, ale programista całkowicie zapomniał posprzątać liczbę niepotrzebnych skryptów. To jest okropny przykład., gdy strona jest szybka, ale krzywe ręce spowalniają.

Zdarza się również, że między żądaniami występują długie odstępy czasu. Może to mieć miejsce, gdy przeglądarka użytkownika zawiesza się lub jest wykonywany javascript.. Nie znalazłem takiego przykładu na moich stronach, więc znalazłem dla ciebie przykład w sieci, Google zawsze pomaga.

Dziękujemy za przeczytanie tego artykułu do końca. Mam nadzieję, że ten artykuł trochę otworzył Ci oczy., następnie jak analizować diagramy wodospadów.

Jeśli potrzebujesz przyspieszyć stronę zgodnie z wodospadem lub diagramem PageSpeed, albo po prostu nie lubisz, jak długo ładuje się Twoja witryna, śmiało pisz do mnie pomogę. Usługa nie będzie bezpłatna., bo czas kosztuje, jeśli masz tylko pytania dotyczące artykułu, następnie napisz w komentarzach lub w moich sieciach społecznościowych, gdzie wspólnie je rozwiążemy.

/* */