Optymalizacja WordPressa: Tak przeanalizujesz Twoją stronę internetową w 7 sekund

Jan Hornung Ostatnia aktualizacja 12.10.2020
.
. 9 Min.
Dzięki tym wskazówkom i naszemu Cheat Sheet możesz analizować swoje strony WordPress w zaledwie 7 sekund nawet lepiej niż Google PageSpeed Insights
Ostatnia aktualizacja 12.10.2020

Jeśli chcesz zoptymalizować WordPress , niektóre środki są krystalicznie czyste, znane i sprawdzone jako skuteczne. Ale nawet rzekomo zoptymalizowane strony często mają jeszcze potencjał. Dlatego warto spojrzeć poza Google PageSpeed Insights i Co. Ponieważ wiele narzędzi wydajnościowych dostarcza prawdziwych kopalni złota, które pozwalają na bardzo wszechstronną analizę - jeśli wiesz, czego szukać. Dziś pokażę Ci 7 wskazówek , które pomogą Ci przeanalizować dane w zaledwie 7 sekund.

Proste narzędzia wydajnościowe, takie jak Google Przetestuj moją stronę lub Google PageSpeed Insights Głównie w wyniku tego pojawia się lista zalecanych działań. To może być dobre na początek. Jeśli jednak chcesz efektywnie monitorować swoje projekty WordPress i sensownie optymalizować WordPress , powinieneś prędzej czy później sięgnąć po narzędzie wydajnościowe, które oblicza również czas ładowania strony i pokazuje Ci dokładnie, jak Twój blog, Twój sklep, Twoja strona firmowa zachowuje się podczas ładowania.

Należą do nich na przykład Pingdom, GTMetrix czy Webpagetest. Często przedstawiają one tzw. wykres wodospadowy. Te nieco nieporęczne zbiory danych są prawie niezauważalne dla wielu użytkowników. Ale jeśli pracujesz zawodowo z WordPress , powinieneś zrozumieć, jak one działają. Ponieważ: Nie ma innego źródła danych, które pokazuje, jak szybko ładuje się Twoja strona, jak dobry jest Twój hoster, jak efektywnie ładuje się Twoja strona i gdzie są miejsca budowy Twojej strony.

A przy odrobinie wprawy można przeanalizować każdą stronę na pierwszy rzut oka i to w (zatrzymane ręcznie) 7 sekund 😉

Jak to zrobić? Pokażę Ci dzisiaj krok po kroku!

ZoptymalizujWordPress : Bez diagramu wodospadu, to tylko zarysowanie powierzchni

Może teraz się zastanawiasz: Jaki jest sens tego całego wysiłku? Istnieją świetne narzędzia wydajnościowe, które już teraz pokazują mi wszystkie ważne wskaźniki optymalizacji. Poza tym i tak w większości ogranicza się do poniższych punktów:

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

Na przykład

A także z najczęstszymi hamulcami czasu ładowania WordPress - strony z tych powodów lądują raz po raz na czołowych miejscach.

Jednak nasze doświadczenie z setek systematycznych analiz wydajności za pomocą Webpagetest i obszernych kontroli stron pokazuje: nawet w rzekomo "dokładnie zoptymalizowanych" stronach WordPress można znaleźć wiele pułapek wydajności. I tu właśnie przydaje się diagram wodospadowy. Ponieważ potrafi coś wyjątkowego: pokazuje, jak ładuje się Twoja strona, które elementy są ładowane i jak szybko to wszystko przebiega.

W ten sposób dostaniesz się do skarbnicy danych

Wszystkie dobre analizy wydajności dają również wykresy wodospadowe. Jeśli używasz narzędzi Pingdom, na przykład, wystarczy przewinąć w dół wystarczająco daleko.

WordPress  zoptymalizuj Pingdom Waterfall
W Pingdom Tools, najpierw trzeba przewinąć trochę, aby dotrzeć do wykresu wodospadu. Odpowiednia sekcja w tym miejscu 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, należy zrozumieć, jak prawidłowo czytać diagramy wodospadowe.

Jak prawidłowo czytać diagramy wodospadowe

Skumulowana gęstość informacji oznacza, że wykresy wodospadowe nie są znane ze swojej przejrzystości. W rzeczywistości, aby zrozumieć zbiory danych, wystarczy wiedzieć tylko cztery rzeczy:

  1. Czas jest wykreślony na osi X.
    Diagramy wodospadowe mają strukturę chronologiczną: Używając osi X, możesz dokładnie zobaczyć, kiedy element zaczyna się ładować i jak długo trwa ładowanie. To właśnie ta chronologiczna struktura sprawia, że wykres wodospadowy jest tak wartościowy. W ten sposób można dokładnie zobaczyć, gdzie czas ładowania jest tracony i jakie procesy należy rozwiązać, aby zoptymalizować szybkość ładowania.
  2. Na osi Y rejestrowane jest każde żądanie HTTP.
    W większości diagramów wodospadowych można kliknąć na elementy na osi Y, aby uzyskać dodatkowe informacje na ich temat.
  3. Legenda pokazuje, jaki rodzaj zasobu jest załadowany.
    Webpagetest oznacza HTML, CSS, obrazy, Flash itp. za pomocą kolorów, Pingdom używa do tego ikon.
  4. Dodatkowy system kodowania dostarcza informacji o tym, jak realizowane są poszczególne żądania - na przykład, jak długo trwa połączenie z serwerem lub czy używany jest protokół HTTPS.
Optymalizacja WordPressa: Tak przeanalizujesz Twoją stronę internetową w 7 sekund
WordPress  optymalizacja obszarów diagramu wodospadowego
Na tym rysunku znajdują się cztery opisane powyżej obszary.

OptymalizacjaWordPress z analizą 7 sekund

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

W przypadku analizy wydajności, 7-sekundowa analiza sprawdziła się u nas: Wykres dostarcza informacji o siedmiu ważnych czynnikach wpływających na szybkość ładowania strony. Te siedem hacków pomoże Ci dokładnie zrozumieć , jak i jak szybko Twoja strona jest renderowana. I pokazują, gdzie jest potencjał, aby przyspieszyć, naprawić problemy lub ulepszyć go jeszcze bardziej.

Uwaga

Przy okazji, w naszych przykładach zawsze będziemy odnosić się do diagramów wodospadowych Webpagetestu, ponieważ w rzeczywistości zawsze używamy tego narzędzia, bez względu na to, czy jest ono ręczne czy zautomatyzowane.

Wskazówka nr 1: Rozmiar ma znaczenie

Im dłuższy jest wodospad (tzn. im więcej elementów znajduje się na osi Y), tym więcej żądań musi zostać przetworzonych i tym wolniej ładuje się strona. Niemniej 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 jednym z takich narzędzi jest na przykład live chat. Oczywiście, ładowanie programu czatu spowalnia naszą stronę. Jednak szybkie wsparcie poprzez czat jest centralną częścią naszego hostingu. Nie możemy więc obejść się bez Plugin .

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 jak dotychczas jedno po drugim. Ponadto, w ramach HTTP/2 serwer wysyła już pliki HTML do przeglądarki jako zabezpieczenie. Nowy standard rekompensuje więc ewentualne niedogodności wynikające z dużej liczby żądań HTTP. Aby jednak skorzystać z HTTP/2, Twoja strona musi być ładowana poprzez HTTPS, czyli musi posiadać certyfikat SSL.

Tak czy inaczej, nasze doświadczenie pokazało, że nie ma bezpośredniej korelacji pomiędzy długością wodospadu a rzeczywistą prędkością ładowania. Przynajmniejdo pewnego limitu: Przy znacznie większej ilości zapytań niż 100, w większości przypadków istnieje potencjał oszczędnościowy .

Jeśli Twoja strona przekracza ten próg, powinieneś przyjrzeć się bliżej żądaniom HTTP. Dla przykładu, nasza strona główna ładuje się przy ponad 130 żądaniach HTTP. Tak więc jest tu potencjał do optymalizacji.

Jeśli Twój wodospad zawiera więcej niż 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 istotna dla analizy szybkości ładowania: Tutaj możesz odczytać, ile czasu upływa do momentu, gdy Twoja strona zostanie całkowicie wyrenderowana. Im mniejsza jest ta wartość, tym lepiej.

Jeśli maksymalna wartość Twojej osi x jest powyżej 10, powinieneś zdecydowanie przyjrzeć się szybkości ładowania Twojej strony.

Całkowity czas ładowania strony powinien wynosić poniżej 10 sekund

Wskazówka #3: Wykryj postrzegany czas ładowania

Większość użytkowników nie dba o to, jakie wartości wypluwają narzędzia analityczne. Dla nich liczy się tylko to, jak szybko ładuje się strona .

Dlatego dla Ciebie, jako operatora strony, ważne jest, aby w jak największym stopniu poprawić to poczucie szybkości. Można to osiągnąć poprzez optymalne buforowanie, optymalizację "above-the-fold" lub - jeśli Twoi klienci znajdują się za granicą - wykorzystanie sieci dostarczania treści (CDN).

Na szczęście, można również dotrzeć do sedna tego postrzeganego czasu ładowania bardzo dobrze poprzez diagramy wodospadowe. Według naszej wiedzy, Webpagetest jest jedynym darmowym narzędziem, które potrafi rozróżnić pomiar techniczny czas ładowania i postrzegane przez użytkownika czas ładowania.

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

Zielona linia wskazuje, kiedy pierwszy wizualny element strony internetowej jest ładowany (jest to tzw. punkt "start render"). 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.

WordPress  optymalizacja mapowania postrzeganego czasu ładowania
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 takich danych. Nie jest to znane nam z Pingdom Tools czy GTMetrix. Ta reguła ma zatem zastosowanie tylko wtedy, gdy używasz Webpagetest:

Zielona linia powinna pojawić się po około 2 do 3 sekundach, 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 sieciowemu strony ładują się znacznie szybciej. Jednakże, oprócz certyfikatu SSL, jesteś również zależny od hostera, który zapewnia tę usługę. Wielu operatorów witryn nie jest pewnych, czy tak jest w ich przypadku, czy też nie.

Jedną z największych zalet HTTP/2 jest to, że może on obsługiwać wiele żądań jednocześnie. I możesz to wyraźnie zobaczyć na swoim diagramie wodospadowym. Ponieważ żądania są tutaj przetwarzane chronologicznie, kilka słupków zaczyna się w tym samym punkcie na osi X, gdy używany jest protokół HTTP/2.

WordPress  optymalizacja ładowania strony WordPress  z i bez HTTP/2
Po lewej stronie znajduje się typowy sposób ładowania WordPress strony bez HTTP/2. Poszczególne żądania HTTP są wykonywane jeden po drugim. Po prawej stronie widzisz jak zachowuje się ta sama strona z HTTP/2: Poszczególne żądania są tu ładowane jednocześnie.

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

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

Dla około 30 procent analizowanych przez nas stron internetowych, wciąż znajdujemy potencjał w zakresie wielkości obrazu. I to pomimo tego, że większość webmasterów wychodzi z założenia, że osiągnęli już tutaj optimum.

Obrazki są - z naszego doświadczenia - po cachowaniu najważniejszym czynnikiem wpływającym na czas ładowania strony. Dla każdego obrazu, który załadujesz w backend, WordPress automatycznie tworzy całą serię dodatkowych plików, miniatur lub wyróżnionych obrazów. Właściwa kompresja tych plików jest jednym z najbardziej efektywnych sposobów na zmniejszenie rozmiaru, a tym samym szybkości ładowania strony.

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

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.

WordPress  optimize tak to wygląda, gdy obrazy są naprawdę za duże
Skrajny, ale bardzo obrazowy przykład nieskompresowanego obrazu. Niektóre z tych plików ładują się ponad 8 sekund, spowalniając całą stronę.

W przypadku takim jak ten powyżej, powinieneś dokładnie przyjrzeć się swoim zdjęciom. Klikając na odpowiednie żądanie, można zazwyczaj zobaczyć na diagramie wodospadowym, które pliki są dokładnie zaangażowane. Dzięki temu wyszukiwanie hamulców czasu ładowania jest znacznie łatwiejsze.

Długie paski ładowania dla zasobów graficznych 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 one kierują.

Żądania z przekierowaniami są zazwyczaj wyróżnione kolorem. Schemat informuje również o tym, które przekierowanie jest ustawione i dokąd zmierza.

OptymalizacjaWordPress  Identyfikacja przekierowań
Ta strona ma kilka przekierowań 302 z rzędu.

Dzięki diagramowi wodospadowemu możesz zobaczyć na pierwszy rzut oka, ile i jakie przekierowania zostały ustawione. Przy okazji, pomaga to również wykryć pętle forwardowania po zmianie DNS. Dzięki żółtym znacznikom wielokrotnie udało nam się wykryć niepotrzebne, a nawet szkodliwe przekierowania.

Żółte linie oznaczają przekierowania.

Wskazówka #7: Rozpoznaj błędy napierwszy rzut oka

Czasami zdarza się, że elementy strony nie są poprawnie renderowane. Może to mieć wpływ na przykład na ramki AdSense, ale także na osadzone mapy i czcionki.

WordPress  optymalizacja w diagramie wodospadowym błędy są oznaczone czerwonymi liniami
Ta strona wyrzuca błąd 404.

W takim przypadku diagram wodospadowy wyrzuca komunikat o błędzie i zaznacza na czerwono linię z żądaniem, o którym mowa. Dodatkowo diagram wskazuje, na czym polega błąd i który zasób go wywołuje.

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

Wszystkie wskazówki w skrócie dzięki cheat sheet

Wykres wodospadowy jest prawdopodobnie najbardziej wartościową analizą, jaką możesz uzyskać dla swoich stron WordPress . Łączy w sobie różne dane, które jako właściciel strony powinieneś mieć na uwadze: Czasy ładowania, kolejność renderowania i komunikaty o błędach. Uzbrojeni we wskazówki zawarte w tym artykule, możecie szybko i skutecznie rozpoznać i efektywnie, gdzie jest jeszcze potencjał do optymalizacji:

  • Czy wodospad jest zbyt długi (ponad 100 zapytań)?
  • Czy maksymalna wartość na 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 w 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)?

Przyjęte: Za pierwszym razem, analiza może potrwać dłużej. Przy odrobinie doświadczenia schematy wodospadów pozwalają jednak na lepsze zrozumienie WordPress projektów i ich dokładniejszą optymalizację.

RAIDBOXER od początku istnienia firmy i szef działu wsparcia. Na Bar- i WordCampach uwielbia rozmawiać o PageSpeed i wydajności stron internetowych. Najlepszym sposobem na przekupienie go jest espresso - lub bawarski precel.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.