Jeśli chcesz zoptymalizować WordPressa, niektóre działania są oczywiste, dobrze znane i sprawdzone. Ale nawet strony internetowe, które są rzekomo zoptymalizowane do końca, często mają jeszcze potencjał. Dlatego warto spojrzeć poza Google PageSpeed Insights i podobne. Ponieważ wiele narzędzi efektywnościowych dostarcza prawdziwych kopalni danych, które umożliwiają bardzo wszechstronną analizę - jeśli wiesz, czego szukać.

Proste narzędzia wydajnościowe, takie jak Testuj moją stronę lub Google PageSpeed Insights, w większości przypadków wyświetlają w rezultacie listę zalecanych działań. To może być dobre na początek. Jeśli jednak chcesz efektywnie monitorować swoje projekty WordPressa i optymalizować je w sensowny sposób, prędzej czy później powinieneś sięgnąć po narzędzie wydajnościowe, które oblicza również czas ładowania strony i pokazuje dokładnie, jak zachowuje się twój blog, twój sklep, twoja strona firmowa podczas ładowania.

Są to na przykład Pingdom, GTMetrix lub Webpagetest. Często dostarczają one tak zwanego wykresu wodospadowego. Wiele osób nie zauważa tych nieporęcznych zbiorów danych. Jeśli jednak pracujesz zawodowo z WordPressem, powinieneś zrozumieć, jak one działają. Ponieważ: Nie ma innego źródła danych, które pokazałoby ci, jak szybko ładuje się twoja strona, jak dobry jest twój hosting, jak efektywnie ładuje się twoja strona i gdzie znajdują się miejsca budowy twojej strony.

A przy odrobinie wprawy możesz przeanalizować każdą stronę internetową w mgnieniu oka i w ciągu 7 sekund 😉 Jak to zrobić? Dzisiaj pokażę ci krok po kroku!

Optymalizacja WordPressa: Bez diagramu wodospadowego to tylko zarysowanie powierzchni

Być może zadajesz sobie teraz pytanie: Jaki jest sens tego całego wysiłku? Istnieją świetne narzędzia, które już teraz pokazują mi wszystkie ważne środki optymalizacji. Poza tym i tak zazwyczaj ogranicza się do poniższych punktów:

• Buforowanie: Albo po stronie serwera, albo przez wtyczkę
• Optymalizacja zdjęć: zobacz np. nasze porównanie wtyczek
• Kompresja i łączenie CSS i JavaScript
• Hosting
• CDN

Oczywiście, jeśli wyjaśniłeś i zoptymalizowałeś te punkty, stworzyłeś bardzo dobrą podstawę dla naprawdę szybkiej strony internetowej. Dlatego właśnie te powody są (całkiem słusznie) omawiane we wszystkich dobrych przewodnikach po wydajności.

Na przykład

• Wszechstronny przewodnik po wydajności WordPressa przygotowany przez Hootproof
• Od Trabbi do Porsche - 7 sztuczek, dzięki którym WordPress będzie szybszy by WP-Ninjas
• 13 środków, które sprawią, że WordPress będzie przystosowany do dużych obciążeń - autorstwa naszego byłego szefa działu produktów Matthiasa.

I nawet w przypadku najczęstszych braków czasu ładowania stron WordPressa, te powody konsekwentnie lądują na pierwszych miejscach.

Jednak nasze doświadczenie z setek systematycznych analiz wydajności za pomocą Webpagetestu i rozległych kontroli witryn pokazuje, że nawet w rzekomo "gruntownie zoptymalizowanych" witrynach WordPressa zawsze można znaleźć pułapki wydajności. I właśnie w tym miejscu przydaje się diagram wodospadowy. Ponieważ potrafi coś wyjątkowego: pokazuje, jak ładuje się Twoja strona, jakie elementy są ładowane i jak szybko to wszystko się dzieje.

W ten sposób dostaniesz się do skarbnicy danych

Wszystkie dobre analizy wydajności zawierają również wykresy wodospadowe. Jeśli na przykład korzystasz z narzędzi Pingdom, wystarczy, że przewiniesz stronę w dół.

W Narzędziach Pingdoma musisz najpierw trochę przewinąć, aby dotrzeć do diagramu wodospadu. Odpowiednia sekcja nosi nazwę Żądania plików -Webpagetest i GT-Metrix mają swoje własne zakładki dla diagramów. Aby jednak prawidłowo uchwycić wszystkie te informacje, musisz zrozumieć, jak prawidłowo czytać diagramy wodospadowe.

Jak prawidłowo czytać diagramy wodospadowe

Skoncentrowana gęstość informacji sprawia, że diagramy wodospadowe nie są znane ze swojej przejrzystości. W rzeczywistości, aby zrozumieć zbiory danych, wystarczy znać tylko cztery rzeczy:

• Czas jest wykreślony na osi X. Diagramy wodospadowe mają strukturę chronologiczną: Korzystając z osi X, możesz dokładnie zobaczyć, kiedy element zaczyna się ładować i ile czasu mu to zajmuje. To właśnie ta chronologiczna struktura sprawia, że diagram wodospadowy jest tak cenny. W ten sposób możesz dokładnie zobaczyć, gdzie tracisz czas ładowania i od czego musisz zacząć, aby zoptymalizować szybkość ładowania.
• Na osi Y zapisywane jest każde żądanie HTTP. W większości diagramów wodospadowych możesz kliknąć elementy na osi Y, aby uzyskać dodatkowe informacje na ich temat.
• Legenda pokazuje, jaki rodzaj zasobu jest załadowany. Webpagetest oznacza HTML, CSS, obrazki, Flash itp. kolorem, Pingdom używa do tego symboli.
• Dodatkowy system kodowania dostarcza informacji o tym, jak wykonywane są poszczególne żądania — na przykład jak długo trwa połączenie z serwerem lub czy używany jest protokół HTTPS.

Na poniższej ilustracji znajdziesz opisane przed chwilą cztery obszary.

OptymalizacjaWordPress z analizą 7 sekund

Teraz już wiadomo, jak czytać diagram wodospadowy - ale jakie wnioski można z niego wyciągnąć?

Analiza 7-sekundowa sprawdziła się w naszej analizie wydajności: Na diagramie znajdziesz informacje o siedmiu ważnych czynnikach wpływających na szybkość ładowania. Te siedem wskazówek pomoże ci dokładnie zrozumieć, jak i z jaką szybkością renderowana jest twoja strona. Pokazują też, gdzie jest potencjał, by przyspieszyć działanie, usunąć problemy lub jeszcze bardziej je ulepszyć.

Wskazówka #1: Rozmiar ma znaczenie

Im dłuższy jest wodospad (tzn. im więcej elementów jest przenoszonych w dół osi Y), tym więcej żądań musi zostać przetworzonych i tym wolniej strona się ładuje. Jednak długi wodospad nie musi być zły. Istnieją funkcje i zasoby zewnętrzne, bez których po prostu nie możesz lub nie chcesz się obejść. W naszym przypadku takim narzędziem jest na przykład czat na żywo. Oczywiście ładowanie programu czatu spowalnia działanie naszej strony. Jednak szybkie wsparcie za pośrednictwem czatu jest centralną częścią naszego hostingu. Nie możemy więc obejść się bez wtyczki.

HTTP/2 sprawia również, że sama liczba żądań nie ma już takiego znaczenia, jak jeszcze kilka lat temu.

Dzięki nowemu standardowi sieciowemu żądania mogą być przetwarzane jednocześnie, a nie jedno po drugim. Co więcej, w ramach protokołu HTTP/2 serwer wysyła już pliki HTML do przeglądarki jako środek ostrożności. Nowy standard rekompensuje więc wszelkie niedogodności wynikające z dużej liczby żądań HTTP. Aby skorzystać z dobrodziejstw HTTP/2, Twoja strona musi być ładowana przez HTTPS, czyli musi mieć certyfikat SSL.

W każdym razie, z naszego doświadczenia wynika, że nie ma bezpośredniego związku między długością wodospadu a rzeczywistą szybkością ładowania. Przynajmniej do pewnego limitu: przy liczbie żądań znacznie przekraczającej 100, w większości przypadków można zdecydowanie zaoszczędzić.

Jeśli Twoja strona przekracza ten próg, powinieneś przyjrzeć się bliżej swoim żądaniom HTTP. Na przykład nasza strona główna ładuje się przy pomocy ponad 130 żądań HTTP. Istnieje więc możliwość optymalizacji w tym zakresie. Jeśli twój wodospad zawiera ponad 100 żądań, przyjrzyj się dokładnie, bez których z nich możesz się obejść.

Wskazówka #2: Wykryj czas ładowania

Maksymalna wartość na osi X jest niezbędna do analizy szybkości ładowania: możesz tu odczytać, ile czasu upływa do całkowitego wyświetlenia strony. Im mniejsza jest ta wartość, tym lepiej.

Jeśli maksymalna wartość osi X jest większa niż 10, powinieneś zwrócić uwagę na szybkość ładowania się strony. Całkowity czas ładowania Twojej strony powinien wynosić poniżej 10 sekund.

Wskazówka #3: Wykryj postrzegany czas ładowania

Większości użytkowników nie obchodzi, jakie wartości przedstawiają narzędzia do analizy. Jedyną rzeczą, która się dla nich liczy, jest to, jak szybko strona wydaje się ładować.

Kiedy prowadzisz stronę internetową, ważne jest, aby w jak największym stopniu poprawić to poczucie szybkości. Możesz to osiągnąć dzięki optymalnemu buforowaniu, optymalizacji "above-the-fold" lub - jeśli Twoi klienci znajdują się za granicą - wykorzystaniu sieci dostarczania treści (CDN).

Na szczęście jednak ten postrzegany czas ładowania jest również bardzo łatwy do prześledzenia przy użyciu diagramów wodospadowych. Według naszej wiedzy Webpagetest jest jedynym darmowym narzędziem, które rozróżnia technicznie mierzony czas ładowania od postrzeganego przez użytkownika czasu ładowania.

Cały wykres przedstawia - mniej ważny - techniczny czas ładowania. Postrzegany czas ładowania jest ukryty pomiędzy niebieską i zieloną linią na diagramie.

Zielona linia wskazuje, kiedy zostanie załadowany pierwszy wizualny element strony (jest to punkt "rozpoczęcia renderowania"). Niebieska linia wskazuje, kiedy użytkownik postrzega stronę jako w pełni załadowaną - w tym momencie prawdopodobieństwo interakcji ze stroną znacznie wzrasta. Te dwie linie powinny znajdować się jak najdalej po lewej stronie i jak najbliżej siebie.

Pomarańczowy obszar pokazuje fazę, w której nie jest renderowana żadna widoczna treść. Do końca tej fazy odwiedzający widzi tylko białą stronę. Niebieskim obszarem zaznaczono przedział czasu pomiędzy Start Render a Load Time, w którym odwiedzający może dostrzec widoczny proces renderowania (np. klepsydrę). Oba te czynniki razem składają się na postrzegany czas ładowania.

Webpagetest jest jedynym narzędziem, które dostarcza tych danych. Nie wiemy tego o Pingdom Tools ani GTMetrix. Ta reguła obowiązuje więc tylko wtedy, gdy używasz Webpagetest: Zielona linia powinna pojawić się po około 2-3 sekundach, a niebieska najpóźniej po 7 sekundach.

Wskazówka #4: HTTP/2 vs. HTTP/1

HTTP/2 ma zdecydowaną przewagę nad HTTP/1: dzięki nowszemu standardowi strony internetowe ładują się znacznie szybciej. Jednak oprócz certyfikatu SSL jesteś uzależniony od tego, czy Twój hosting zapewni Ci tę usługę. Wiele osób nie jest pewnych, czy rzeczywiście tak jest w ich przypadku.

Jedną z największych zalet HTTP/2 jest możliwość jednoczesnego przetwarzania wielu żądań. I dokładnie to widać na twoim diagramie wodospadowym. Ponieważ żądania są przetwarzane chronologicznie, w przypadku użycia protokołu HTTP/2 kilka słupków zaczyna się w tym samym punkcie na osi X.

Po lewej stronie widać typowe zachowanie podczas ładowania strony WordPressa bez protokołu HTTP/2. Poszczególne żądania HTTP są wykonywane jedno po drugim. Po prawej stronie możesz zobaczyć, jak ta sama strona zachowuje się przy użyciu protokołu HTTP/2: Poszczególne żądania są ładowane jednocześnie.

Jeśli poszczególne żądania ładują się równolegle, Twoja strona działa na podstawie protokołu HTTP/2.

Wskazówka #5: Rozpoznaj, że obrazy są zbyt duże

W około 30 procentach analizowanych przez nas stron internetowych nadal można znaleźć potencjał w zakresie wielkości obrazu. Dzieje się tak, mimo że większość webmasterów zakłada, że osiągnęli już optimum.

Obrazy są - według naszego doświadczenia - najważniejszym czynnikiem wpływającym na czas ładowania strony po buforowaniu. Dla każdego obrazu, który przesyłasz do zaplecza, WordPress automatycznie tworzy całą serię dodatkowych plików - miniatur lub wyróżnionych obrazów. Prawidłowa kompresja tych plików jest jedną z najskuteczniejszych metod zmniejszania rozmiaru, a tym samym szybkości ładowania strony internetowej.

Jak można sensownie zoptymalizować swoje zdjęcia pokażą Ci np:

• WPMU DEV:Jak prawidłowo kompresować i zmieniać rozmiar obrazów w WordPressie
• Nasze porównanie 5 wtyczek do optymalizacji obrazu dla WordPressa
• Producent wtyczki Optimus wyjaśnia podstawowe różnice między kompresją stratną a kompresją bezstratną.

W diagramie wodospadowym obrazy mogą być szybko zidentyfikowane za pomocą legendy: Webpagetest wyświetla je za pomocą fioletowych pasków, Pingdom za pomocą ikony. Tylko GTMetrix nie wyświetla obrazów osobno. W każdym przypadku, jeśli odpowiednie paski są znacznie dłuższe niż paski pozostałych żądań, wskazuje to na długi czas ładowania obrazu.

Na ilustracji możesz zobaczyć skrajny, ale bardzo wyraźny przykład nieskompresowanego obrazu. Niektóre z tych plików ładują się przez ponad 8 sekund, co spowalnia całą stronę.

W przypadku takim jak ten powyżej, powinieneś dokładnie przyjrzeć się swoim zdjęciom. Klikając na odpowiednie żądanie, możesz zwykle zobaczyć na diagramie wodospadowym, które pliki są w nie zaangażowane. To znacznie ułatwia poszukiwanie hamulców czasu ładowania. Długie paski ładowania dla zasobów obrazu wskazują na możliwość kompresji.

Wskazówka #6: Śledź przekierowania

Wykres wodospadowy nie tylko pomoże Ci zrozumieć, które elementy ładują się kiedy i jak szybko, ale także ile przekierowań zostało ustawionych i gdzie są kierowane. Żądania z przekierowaniami są zwykle wyróżnione kolorem. Schemat informuje również o tym, które przekierowanie jest ustawione i gdzie się znajduje.

Strona na tej ilustracji ma kilka przekierowań 302 pod rząd.

Dzięki diagramowi wodospadowemu możesz zobaczyć na pierwszy rzut oka, ile i jakie przekierowania zostały ustawione. Pomaga to również wykryć pętle przekierowania po zmianie DNS.

Dzięki żółtym oznaczeniom już kilka razy udało nam się wykryć niepotrzebne, a nawet szkodliwe przekierowania.

Wskazówka #7: Rozpoznawaj błędy na pierwszy rzut oka

Czasami elementy strony internetowej nie są wyświetlane poprawnie. Może to mieć wpływ na przykład na ramki AdSense, ale także na osadzone mapy i czcionki.

W takim przypadku diagram wodospadowy wyrzuca komunikat o błędzie i zaznacza na czerwono linię z odpowiednim żądaniem. Diagram wskazuje również, na czym polega błąd i który zasób go wywołuje. Strona internetowa na tej ilustracji wyrzuca błąd 404.

Czerwone linie oznaczają błędy podczas renderowania strony.

Dzięki Cheatsheet wszystkie wskazówki w jednym miejscu

Wykres wodospadowy to prawdopodobnie najbardziej wartościowa analiza, jaką możesz uzyskać dla swoich stron internetowych WordPress. Łączy w sobie różne dane, które powinieneś mieć na uwadze: Czas ładowania, kolejność renderowania i komunikaty o błędach. Uzbrojony w wskazówki zawarte w tym artykule, możesz szybko i skutecznie rozpoznać miejsca, które wymagają jeszcze optymalizacji:

• Czy wodospad jest zbyt długi (ponad 100 zapytań)?
• Czy maksymalna wartość osi X jest zbyt duża (większa niż 10)?
• Czy żądania ładują się równolegle (przez HTTP/2)?
• Czy zdjęcia są zbyt duże (tzn. źle zoptymalizowane)?
• Czy zielone i niebieskie linie są zbyt daleko na prawo lub zbyt daleko od siebie (tzn. czy użytkownik postrzega stronę jako powolną)?
• Czy występują nieoczekiwane żółte linie (przekierowania)?
• Czy są jakieś czerwone linie (błędy)?

Należy przyznać, że: Za pierwszym razem analiza może zająć ci więcej czasu. Jednak po zdobyciu pewnego doświadczenia diagramy wodospadowe pozwolą Ci lepiej zrozumieć Twoje projekty WordPressa i dokładniej je zoptymalizować.