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

Jan Hornung Ostatnia aktualizacja w dniu 12.10.2020 r.
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 w dniu 12.10.2020 r.

Jeśli chcesz WordPress zoptymalizować, niektóre środki są krystalicznie czyste, znane i sprawdzone w praktyce. Ale nawet rzekomo dokładnie zoptymalizowane strony często mają jeszcze potencjał. Dlatego warto spojrzeć poza horyzont Google PageSpeed Insightsi Co. Ponieważ wiele wydajnych narzędzi dostarcza prawdziwych danych o kopalni złotan, które umożliwiają bardzo wszechstronną analizę - jeśli wiesz, czego szukać. Dzisiaj pokażę wam 7 wskazówek, przez co analizae w zaledwie 7 sekund.

Proste narzędzia wydajnościowe, takie jak Google's Przetestuj moją stronę czy Google PageSpeed Insights W rezultacie, narzędzie to będzie przede wszystkim tworzyć listę zalecanych działań. To może być w porządku na początek. Jeśli masz swój WordPress ale skutecznie monitorować projekty i WordPress Prędzej czy później powinieneś skorzystać z narzędzia wydajnościowego, które wyświetla również czas ładowania strony i pokazuje dokładnie, jak zachowuje się Twój blog, Twój sklep, strona firmowa podczas ładowania.

Obejmuje to na przykład Królestwo, GTMetrix czy Test strony internetowej. Często zapewniają one tzw. Wykres wodospadów z. Te nieco nieporęczne zestawy danych są mało zauważalne przez wielu użytkowników. Ale jeśli pracujesz z WordPress nimi zawodowo, powinieneś zrozumieć, jak oni działają. Ponieważ: Nie ma innego źródła danych, które pokazałoby Ci, jak szybko Twoja strona się ładuje, jak dobry jest Twój hoster, jak wydajnie Twoja strona się ładuje i gdzie znajdują się place budowy Twojej strony.

A przy odrobinie praktyki, możesz przeanalizować każdą stronę na pierwszy rzut oka i w (ręcznie zatrzymany) 7 sekund 😉.

Jak to zrobić? Dzisiaj pokażę ci krok po kroku!

WordPress Optymalizować: Bez schematu wodospadu można tylko porysować powierzchnię

Może zastanawiasz się teraz: Jaki jest sens tego wszystkiego? Istnieją świetne narzędzia wydajnościowe, które już teraz pokazują mi wszystkie ważne działania optymalizacyjne. Poza tym, i tak ogranicza się to głównie do następujących punktów:

Jasne, 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) omówione w faktycznie wszystkich przewodnikach dobrych wyników.

Na przykład

A także z najczęstszymi Hamulce czasu obciążenia z WordPress -stron te powody zawsze wychodzą na wierzch.

Jednak nasze doświadczenie z setek systematycznych analiz wydajności z testami stron internetowych i obszernymi kontrolami stron pokazuje, że nawet na rzekomo "dokładnie zoptymalizowanych" WordPress stronach zawsze pojawiają się pułapki wydajności. I właśnie w tym pomaga diagram wodospadów. Bo to może zrobić coś specjalnego: Pokazuje jak Twoja strona się ładuje, które elementy są ładowane i jak szybko to wszystko się odbywa.

W ten sposób uzyskuje się dostęp do skarbu danych

Wszystkie dobre analizy wydajności zawierają również wykresy wodospadów wyjściowych. Na przykład, jeśli używasz narzędzi Pingdom Tools, musisz tylko przewinąć w dół wystarczająco daleko.

WordPress  zoptymalizować wodospad królestwa Pingdom
Z Pingdom Tools musisz najpierw trochę przewinąć, aby dotrzeć do wykresu wodospadu. Odpowiednia sekcja tutaj nazywa się File Requests. Webpagetest i GT-Metrix mają swoje własne zakładki dla wykresów.

Ale aby uzyskać wszystkie te informacje, trzeba zrozumieć, jak prawidłowo odczytywać wykresy wodospadów.

Jak prawidłowo odczytywać schematy wodospadów

Skoncentrowana gęstość informacji oznacza, że wykresy wodospadów nie są dokładnie znane ze względu na ich przejrzystość. W rzeczywistości, wystarczy wiedzieć tylko cztery rzeczy, aby zrozumieć zbiory danych:

  1. Czas jest wykreślony na osi X.
    Schematy wodospadów mają strukturę chronologiczną: Oś x pokazuje dokładnie, kiedy element zaczyna się ładować i jak długo trwa jego ładowanie. To właśnie ta chronologiczna struktura sprawia, że wykres wodospadów jest tak cenny. Widać dokładnie, gdzie traci się czas załadunku i od jakich procesów należy zacząć, aby zoptymalizować prędkość załadunku.
  2. Każde żądanie HTTP jest zapisywane na osi Y.
    Dla większości diagramów wodospadów można kliknąć na elementy na osi Y, aby uzyskać dodatkowe informacje na ich temat.
  3. Legenda pokazuje, który typ zasobu jest ładowany.
    Webpagetest oznacza HTML, CSS, obrazy, Flash, itp. w kolorze, Pingdom używa do tego symboli.
  4. 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.
Optymalizacja WordPressa: Tak przeanalizujesz Twoją stronę internetową w 7 sekund
WordPress  optymalizacja obszarów diagramu wodospadów
Na tym rysunku znajdują się cztery obszary opisane powyżej.

WordPress zoptymalizować za pomocą 7-sekundowej analizy

Więc teraz jasne jest, jak odczytuje się wykres wodospadu - ale jakie wnioski można z niego wyciągnąć?

W analizie wyników mamy 7 sekund Analiza Udowodnione: Na wykresie w skrócie przedstawiono informacje o siedmiu ważnych czynnikach wpływających na prędkość załadunku. Te siedem hackerów pomoże Ci zrozumieć dokładnie jak i jak szybko Twoja strona jest renderowana. Pokazują one, gdzie jest potencjał, aby przyspieszyć, rozwiązać problemy lub jeszcze bardziej je poprawić.

Uwaga

Przy okazji, w naszych przykładach zawsze będziemy się odwoływać do diagramów wodospadów Webpagetest, ponieważ w rzeczywistości zawsze korzystamy z tego narzędzia, niezależnie od tego, czy jest to narzędzie ręczne czy automatyczne.

Wskazówka nr 1: Rozmiar ma znaczenie

Im dłuższy jest wodospad (tzn. im więcej elementów jest usuwanych na osi Y), tym więcej żądań musi być przetworzonych i tym wolniej strona ładuje się. Niemniej jednak długi wodospad niekoniecznie musi być zły. Istnieją funkcje i zasoby zewnętrzne, bez których po prostu nie możesz lub nie chcesz się obejść. Z nami na przykład czat na żywo jest jednym z takich narzędzi. Ładowanie programu czatu oczywiście spowalnia naszą stronę. Ale szybkie wsparcie za pośrednictwem czatu jest centralną częścią naszego hostingu. PluginWięc nie możemy się bez niej obejść.

HTTP/2 zapewnia również, że sama liczba wniosków nie ma już takiego samego znaczenia jak kilka lat temu.

Ponieważ dzięki nowemu standardowi sieciowemu, wnioski mogą być przetwarzane jednocześnie, a nie jeden po drugim jak dotychczas. Ponadto, jako środek zapobiegawczy, serwer wysyła pliki HTML do przeglądarki pod HTTP/2. Nowa norma rekompensuje zatem wady, które mogą wynikać z dużej liczby wniosków HTTP. Aby jednak skorzystać z HTTP/2, Twoja strona internetowa musi być załadowana przez HTTPS, to znaczy przez certyfikat SSL ...porządek.

W każdym razie doświadczenie pokazało, że nie ma bezpośredniej korelacji między długością wodospadu a rzeczywistą prędkością załadunku. Co najmniej do pewnego limitu: Przynajmniej do znacznie ponad 100 zapytań w większości przypadków, są Potencjał oszczędnościowy.

Jeśli Twoja strona przekroczy ten próg, powinieneś przyjrzeć się uważnie swoim żądaniom HTTP. Na przykład, nasza strona główna obciążona jest ponad 130 żądaniami HTTP. Więc jest tu potencjał do optymalizacji.

Jeśli Twój wodospad zawiera więcej niż 100 zapytań, przyjrzyj się uważnie, bez których możesz się obejść.

Wskazówka nr 2: Wykryj czas ładowania

Maksymalna wartość na Twojej osi x jest niezbędna do analizy szybkości ładowania: Tutaj możesz zobaczyć ile czasu upływa do momentu całkowitego wyrenderowania Twojej strony. Im mniejsza jest ta wartość, tym lepiej.

Jeśli maksymalna wartość twojej osi X jest większa niż 10, powinieneś zdecydowanie rozważyć szybkość ładowania twojej strony.

Całkowity czas ładowania strony powinien być krótszy niż 10 sekund.

Wskazówka nr 3: Wykryj postrzegany czas ładowania

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

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

Na szczęście ten odczuwalny czas załadunku poznaje się również bardzo dobrze za pomocą wykresów wodospadów. Według naszej wiedzy, Webpagetest jest jedynym bezpłatnym narzędziem, które może być używane pomiędzy mierzony technicznie czas załadunku i postrzegany przez użytkownika czas ładowania jest inny.

Cały wykres przedstawia - mniej ważny - czas załadunku technicznego. Postrzegany czas ładowania jest ukryty pomiędzy niebieskimi i zielonymi liniami na wykresie.

Zielona linia wskazuje, kiedy załadowany jest pierwszy wizualny element strony (nazywany jest to punktem "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 być jak najdalej w lewo i jak najbliżej siebie.

WordPress  Optymalizacja mapowania postrzeganego czasu załadunku
Pomarańczowy obszar pokazuje fazę, w której nie jest widoczna żadna zawartość. Do końca tej fazy odwiedzający widzi tylko białą stronę. Niebieski obszar oznacza przedział czasowy pomiędzy Start Render a Load Time, podczas którego odwiedzający może dostrzec widoczny proces renderowania (np. klepsydrę). Oba razem tworzą postrzegany czas obciążenia.

Test strony internetowej jest jedynym narzędziem, które może dać ci te dane. Z Pingdom Tools lub GTMetrix nie wiemy tego. Dlatego też zasada ta ma zastosowanie tylko wtedy, gdy Zastosowanie Webpagetest:

Zielona linia powinna pojawić się po około 2 do 3 sekund, niebieska najpóźniej po 7 sekundach.

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

HTTP/2 oferuje zdecydowaną przewagę w porównaniu z HTTP/1: dzięki nowszemu standardowi WWW strony ładują się znacznie szybciej. Jednakże, oprócz certyfikatu SSL, jesteś również zależny od hostera świadczącego tę usługę. Wielu operatorów stron internetowych nie ma pewności, czy rzeczywiście tak jest w ich przypadku, czy też nie.

Jedną z największych zalet HTTP/2 jest jednoczesne przetwarzanie wielu żądań. I widać to wyraźnie na schemacie wodospadu. Ponieważ tutaj żądania są przetwarzane chronologicznie, kilka pasków zaczyna się w tym samym punkcie na osi X, gdy używany jest HTTP/2.

WordPress   Optymalizacja zachowań w zakresie ładowania a WordPress  -Strona z HTTP/2 lub bez
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.

Załaduj pojedyncze żądania równolegle, Twoja strona będzie działać z HTTP/2.

Wskazówka nr 5: Rozpoznawać obrazy, które są zbyt duże

W około 30 procentach analizowanych przez nas stron internetowych wciąż znajdujemy potencjał pod względem wielkości obrazu. I to pomimo tego, że większość webmasterów zakłada, że już wykorzystali ten potencjał.

Z naszego doświadczenia wynika, że zdjęcia są najważniejszym czynnikiem wpływającym na czas ładowania strony po buforowaniu. Dla każdego zdjęcia przesłanego w backendzie WordPress automatycznie tworzona jest cała pęczek innych plików, miniatur lub prezentowanych obrazów. Prawidłowa kompresja tych plików jest jednym z najbardziej efektywnych sposobów na zmniejszenie rozmiaru, a tym samym szybkości ładowania strony.

Jak zoptymalizować swoje zdjęcia sensownie pokazuje na przykład:

Na schemacie wodospadu obrazy można szybko zidentyfikować za pomocą legendy: Webpagetest wyświetla je z fioletowymi paskami, Pingdom z ikoną. Tylko GTMetrix nie identyfikuje osobno obrazów. W każdym razie: Jeśli odpowiednie paski są znacznie dłuższe niż paski pozostałych żądań, oznacza to długi czas ładowania obrazu.

WordPress  zoptymalizować to jest to, jak to wygląda, gdy zdjęcia są naprawdę zbyt duże
Ekstremalny, ale bardzo żywy przykład nieskompresowanych obrazów. Niektóre z samych plików potrzebują ponad 8 sekund na załadowanie, co spowalnia całą stronę.

W takim przypadku, jak powyżej, należy dokładnie przyjrzeć się swoim zdjęciom. Klikając na odpowiednie zapytanie, można zazwyczaj zobaczyć w diagramie wodospadu, które pliki są zaangażowane. Ułatwia to poszukiwanie hamulców czasowych obciążenia.

Długie paski ładowania zasobów obrazu wskazują na potencjał kompresji.

Wskazówka nr 6: Śledzenie spedycji

Diagram wodospadów pomaga nie tylko zrozumieć, które elementy są obciążane kiedy i jak szybko, ale także ile przekierowań zostało ustawionych i gdzie są one skierowane.

Zapytania z przekierowaniami są zazwyczaj wyróżnione kolorem. Diagram pokazuje również, które przekierowanie jest ustawione i dokąd prowadzi.

WordPress  Optymalizacja Identyfikacja spedycji
Ta strona ma kilka 302 przekierowań pod rząd.

Tak więc z diagramem wodospadu widać na pierwszy rzut oka, ile i jakie przekierowania zostały ustawione. Przy okazji, pomaga to również wykryć pętle przesyłowe po zmianie DNA. Dzięki żółtym oznakowaniom udało nam się już kilkakrotnie wykryć niepotrzebne lub nawet szkodliwe przekierowania.

Żółtymi liniami oznaczono Forwarding.

Wskazówka #7: Wykrywanie błędów na pierwszy rzut oka

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

WordPress  zoptymalizować w diagramie wodospadu, błędy są identyfikowane czerwonymi liniami
Ta strona wyrzuca błąd 404.

W tym przypadku schemat wodospadu wyrzuca komunikat o błędzie i zaznacza na czerwono linię z odpowiednim zapytaniem. Diagram wskazuje również, który błąd jest zaangażowany i który zasób powoduje powstanie błędu.

Czerwone linie wskazują na błędy podczas renderowania strony.

Z Arkusz kalkulacyjny wszystkie wskazówki w widoku

Wykres wodospadów jest prawdopodobnie najbardziej wartościową oceną, jaką można uzyskać dla swoich WordPress -stron. Łączy on różne dane, na które właściciel strony powinien zwracać uwagę: Czasy ładowania, kolejność renderingu i komunikaty o błędach. Uzbrojony w wskazówki z tego artykułu, szybko rozpoznasz i skuteczne tam, gdzie jest jeszcze miejsce na poprawę:

  • Czy wodospad jest za długi (ponad 100 zgłoszeń)?
  • Czy maksymalna wartość osi X jest za duża (większa niż 10)?
  • Ładować żądania równolegle (poprzez HTTP/2)?
  • Czy obrazy są zbyt duże (tzn. źle zoptymalizowane)?
  • Czy zielone i niebieskie linie są za daleko w prawo lub za daleko od siebie (więc użytkownik postrzega stronę jako wolną)?
  • Czy są niespodziewane żółte linie (przekierowania)?
  • Czy są 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 z pierwszej godziny i kierownik działu wsparcia. W Bar- i WordCamps lubi rozmawiać o PageSpeed i wydajności strony internetowej. Najlepszym sposobem na przekupienie go jest espresso - lub bawarski precel.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.