Aby odnieść sukces w biznesie internetowym lub blogu, musisz wiedzieć, jak szybko ładuje się twoja strona i jak możesz zoptymalizować pod tym kątem WordPress. Dobre narzędzia analityczne dostarczają jednak mnóstwo danych. Szczególnie wykresy wodospadowe nie są łatwe do odczytania. Dzisiaj pokażę ci trzy proste sztuczki, które pomogą ci uzyskać więcej z analizy wydajności za pomocą jednego spojrzenia i zoptymalizować WordPressa we właściwych miejscach.

Kiedy po raz pierwszy zacząłem zajmować się optymalizacją WordPressa, po raz pierwszy skorzystałem z webpagetest.org. W tamtym czasie byłem dosłownie zdumiony rezultatami. Zwłaszcza wykres wodospadowy wydaje się początkowo ogromem danych, które są prawie niemożliwe do ogarnięcia i zorganizowania: Kolory, liczby, długość prętów, ich kolejność - wszystko ma znaczenie.

Dlatego wykresy mogą powiedzieć Ci wiele cennych rzeczy o Twojej stronie. Jeśli wiesz, czego szukać.

Dziś pokażę ci, jak za pomocą trzech prostych sztuczek możesz błyskawicznie zebrać ważne dane na temat czasu ładowania się twojej strony i w ten sposób zoptymalizować WordPressa we właściwych miejscach.

Dokładniej mówiąc, pokażę ci:

• Jak rozpoznać powolny serwer internetowy
• Jak rozpoznać nieskompresowane obrazy i zbyt duże pliki
• Jak sprawdzić, czy Twój serwer obsługuje protokół HTTP/2

Imitacja zalecana

Wiele danych, które dzisiaj pokazuję, pochodzi z serwisu webpagetest.org. Wykresy wodospadowe tego narzędzia są szczególnie złożone, ale oferują wiele informacji o Twojej witrynie.

Jeśli chcesz zobaczyć wyniki testu, kliknij tutaj i zobacz dane w całości w Webpagetest.

Jeśli chcesz zoptymalizować swoją stronę internetową za pomocą analizy przeprowadzonej przez Webpagetest, musisz pamiętać, że każdy test jest tylko migawką. Jeśli naprawdę chcesz uzyskać wiarygodne wyniki, radzę ci przeprowadzić co najmniej trzy testy. W ten sposób zmniejszasz prawdopodobieństwo wystąpienia wartości odstających i uzyskujesz lepszą podstawę danych do podejmowania ważnych decyzji.

To tylko pierwsza część diagramu wodospadowego dla raidboxes.de. I już tutaj staje się jasne, że diagram nie jest łatwy do przeniknięcia.

Jak rozpoznać powolny serwer internetowy

Najważniejszą wartością pozwalającą ocenić czas odpowiedzi serwera jest tzw. czas do pierwszego bajtu (TTFB). TTFB to czas, który upływa do momentu pobrania pierwszego bajtu danych z serwera internetowego. W tym czasie praktycznie nic się nie dzieje. Przynajmniej nic, co mogłoby zostać odebrane jako załadowanie strony. Dlatego ważne jest, aby czas do pierwszego bajtu był jak najmniejszy.

Spójrz na pierwsze żądanie z diagramu wodospadowego. Powinno to być jak najkrótsze. Najlepiej poniżej 200 milisekund.

Pierwsze zapytanie na Twojej stronie powinno być jak najkrótsze. Najlepiej poniżej 200 ms.

Poniższy przykład ilustruje to, co mam na myśli: Przed przeniesieniem do nas ta strona jednego z naszych klientów miała czasem TTFB przekraczające 3,5 sekundy. Po przeprowadzce było to znacznie poniżej 200 ms. Szczególnie bladoniebieski obszar pierwszego żądania bardzo się zmniejszył.

Przed:

Z Raidboxes:

Jeśli więc regularnie mierzysz bardzo wysoki czas oczekiwania na pierwszy bajt w swoich projektach WordPressa, jednym ze środków optymalizacyjnych może być zmiana hostera lub aktualizacja planu hostingowego.

Wykrywanie zbyt dużych obrazów i zasobów

Każda linia diagramu wodospadowego reprezentuje tzw. żądanie. Jest to żądanie skierowane przez przeglądarkę do serwera WWW. Żądanie to obejmuje również pobieranie pakietów danych, w tym obrazów. W poniższym przykładzie fioletowa część słupków odpowiada czasowi pobierania.

Jak widzisz, ładowanie obrazów na tej stronie trwa bardzo długo - prawie 12, trzy i prawie dziewięć sekund. Jest to wyraźny znak, że obrazy są nieskompresowane.

Długie, fioletowe paski są wyraźną oznaką braku kompresji obrazu.

Webpagetest pokazuje dokładnie, który zasób jest zaangażowany w każde żądanie. W ten sposób łatwo dowiesz się, który obrazek na twojej stronie WordPressa jest zbyt duży i powinien zostać zoptymalizowany.

Oczywiście dotyczy to także wszystkich innych typów plików, które Webpagetest wyświetla. Na przykład CSS i JavaScript. Pliki te można również skompresować, co jeszcze bardziej skraca czas ładowania strony.

Rozpoznaj protokół HTTP/2

Jeśli chcesz wiedzieć, czy twoje projekty WordPressa korzystają z wyjątkowo szybkiego standardu HTTP/2, możesz to sprawdzić, patrząc na diagram wodospadowy.

Jeśli żądania Twojej strony są przetwarzane równolegle, HTTP/2 jest aktywny.

To zdanie doskonale ilustruje, co tak naprawdę robi HTTP/2. Jeśli Twoja strona jest zaszyfrowana za pomocą protokołu SSL, HTTP/2 umożliwia jednoczesne przetwarzanie kilku żądań serwera WWW. Skraca to całkowity czas ładowania.

Oto pusta strona WordPressa bez SSL:

A tutaj ta sama strona z certyfikatem SSL, a więc również z HTTP/2:

Widzisz: w pierwszym przypadku poszczególne żądania są ładowane jedno po drugim. W drugim przypadku są one jednak przeważnie ładowane jednocześnie.

Przyznaję: W tym przypadku WordPress nie ma możliwości optymalizacji. Najlepiej zapytać swojego dostawcę usług hostingowych, czy korzysta z protokołu HTTP/2.

Wniosek: nie bój się diagramu!

Przy odrobinie praktyki i odpowiedniej wiedzy możesz wyciągnąć wiele informacji z diagramu wodospadowego. Możesz sprawdzić, czy Twoja strona korzysta z pewnych technologii, jak szybko reaguje Twój serwer internetowy i czy Twoja strona ukrywa hamulce czasu ładowania. Jeśli chcesz kompleksowo przeanalizować i zoptymalizować swoją witrynę WordPress, nie ma możliwości obejścia diagramów wodospadowych.

Czy znasz jakieś inne sztuczki pozwalające szybko rozpoznać typowe hamulce czasu ładowania? Więc podziel się nimi z nami!