Narzędzie do testowania prędkości Pingdom – jak poprawić wyniki Pingdom

Szybko ładujące się strony internetowe zawsze zyskują większy ruch w porównaniu z wolniejszymi, co wpływa na ranking i wydajność. W tym artykule omówię narzędzie Pingdom Speed ​​Test, które może pomóc w zrozumieniu wszelkich problemów z wydajnością w Twojej witrynie. Celem jest doprowadzenie Cię do punktu, jak szybka jest Twoja witryna i jak możesz ją przyspieszyć.

Zbyt często użytkownicy błędnie interpretują dane narzędzia Pingdom Speed ​​Test, do tego stopnia, że ​​pogarszają prędkość ich witryny. Pamiętaj, zawsze używaj wszystkich narzędzi zgodnie z instrukcją, ponieważ nie są one w 100% dokładne.

Co to jest narzędzie do testowania prędkości Pingdom i co oferuje?

Pingdom to popularne bezpłatne narzędzie do testowania szybkości sieci, rozwiązanie do monitorowania witryn, aplikacji i serwerów. Nie tylko monitoruje czas pracy, ale także wydajność ładowania, dzięki czemu możesz zobaczyć, jak odwiedzający odbierają Twoją witrynę. Pingdom oferuje takie usługi, jak monitorowanie czasu pracy, monitorowanie szybkości strony, monitorowanie transakcji, monitorowanie serwera i wgląd w odwiedzających (RUM).

Dlaczego jest tak popularny? Cóż, jest to prawdopodobnie najłatwiejsze narzędzie do monitorowania szybkości witryny i wydajności strony. Nie wszyscy użytkownicy mogą być ekspertami od wydajności, więc jest to dobry wybór dla przeciętnego użytkownika WordPressa.

Zobaczmy, jak wykonać test na Pingdom. Korzystanie z narzędzia Pingdom Speed ​​Test to nic wielkiego – wystarczy wejść na stronę Pingdom, wpisać swój adres URL i wybrać lokalizację zgodnie z lokalizacją odwiedzających. Następnie kliknij przycisk „Rozpocznij test” .

Narzędzie Pingdom Speed ​​Test pozwala przetestować witrynę w 7 różnych lokalizacjach testowych (5 kontynentów) na całym świecie:

• Azja – Japonia – Tokio
• Europa – Niemcy – Frankfurt
• Europa – Wielka Brytania – Londyn
• Ameryka Północna – USA – Waszyngton
• Ameryka Północna – USA – San Francisco
• Pacyfik – Australia – Sydney
• Ameryka Południowa – Brazylia – Sao Paulo

A więc, która lokalizacja testu prędkości witryny Pingdom byłaby najlepsza do testowania? To zależy od odwiedzających Twoją witrynę. Upewnij się, że wybrałeś lokalizację w pobliżu odwiedzających. Jeśli odbiorcy Twojej witryny pochodzą z Europy , masz do wyboru 2 opcje: (Europa – Niemcy – Frankfurt) lub (Europa – Wielka Brytania – Londyn) . Jeśli Twoja witryna jest odwiedzana na całym świecie, przetestuj ją w różnych lokalizacjach i podejmij odpowiednie kroki w celu poprawy.

Zrozumienie analizy wodospadu za pomocą narzędzia do testowania prędkości Pingdom

Strona internetowa to zazwyczaj połączenie HTML, CSS, JavaScript i plików multimedialnych , a każdy z nich generuje żądanie renderowania na serwerze. Więcej żądań może być przyczyną powolnego działania witryny. W narzędziu Pingdom Speed ​​Test znajduje się wiele sekcji, które wskazują punktację i sugestie ulepszeń. Sekcje narzędzia Pingdom Speed ​​Test to:

• Podsumowanie Pingdom
• Popraw wydajność strony
• Kody odpowiedzi
• Rozmiar zawartości i żądania według typu zawartości
• Rozmiar treści i żądania według domeny
• Wykres wodospadu

W tej sekcji wyjaśnię, jak przeprowadzić analizę kaskadową, podzielę każdą sekcję Pingdom i wyjaśnię bardziej szczegółowo.

Podsumowanie Pingdom

Kiedy uruchamiasz witrynę WordPress przez Pingdom, generuje ona wynik na podstawie oceny wydajności, rozmiaru strony, czasu ładowania i żądań.

Podczas wielokrotnego testowania witryny zauważysz, że czas ładowania witryny zmienia się w każdym teście, podczas gdy inne wyniki (ocena wydajności, rozmiar strony i żądania) pozostają takie same. Powodem tej różnicy czasu ładowania jest pamięć podręczna DNS, pamięć podręczna CDN, pamięć podręczna WordPress i zewnętrzne interfejsy API.

Poprawiony wynik Pingdom zależy od Twojej aplikacji internetowej i konfiguracji serwera. Może nie być możliwe uzyskanie 100 procent wyników przez cały czas, zwłaszcza gdy prowadzisz witrynę e-commerce, ale zawsze jest miejsce na ulepszenia.

Popraw wydajność strony

Sekcja Popraw wydajność strony zawiera zbiorcze oceny wydajności z sugestiami dotyczącymi poprawy wydajności strony Chociaż te sugestie mogą nie mieć zastosowania do każdej witryny, zwiększają szanse na poprawę.

Przyjrzyjmy się tym sugestiom.

1) Użyj sieci dostarczania treści (CDN)

Najważniejszą rzeczą, której możesz użyć w swojej witrynie WordPress, jest CDN (Sieć dostarczania treści). CDN odnosi się do geograficznie rozproszonej grupy serwerów, które zapewniają szybkie dostarczanie treści internetowych. To sieć serwerów zlokalizowanych na całym świecie. CDN umożliwia szybkie przesyłanie treści internetowych, przybliżając je do miejsca, w którym znajdują się użytkownicy.

Jeśli jesteś użytkownikiem Cloudways, możesz skorzystać z CloudwaysCDN. Wszystkie plany hostingowe Cloudways mają wbudowany CloudwaysCDN, który można włączyć za pomocą kilku kliknięć. Aby dowiedzieć się więcej, sprawdź blog WordPress CDN na Cloudways.

Przyjrzyjmy się niektórym zewnętrznym dostawcom CDN:

1. Klucz CDN
2. CloudFlare CDN
3. Amazon CloudFront
4. CDN77

Tutaj możesz zobaczyć test porównawczy CDN WordPress trzech powszechnie używanych popularnych dostawców CDN.

2) Unikaj błędu HTTP 404 (nie znaleziono)

Błąd Unikaj HTTP (404) pojawia się w sugestii narzędzia Pingdom Speed ​​Test, gdy żądanie nie może zostać pomyślnie zakończone. Uszkodzony link, na przykład podczas ręcznego dołączania linku do usuniętego obrazu na stronie, powoduje błąd 404.

Zawsze upewnij się, że żadne żądanie nie zostanie wygenerowane dla zasobów, które już nie istnieją.

3) Zminimalizuj przekierowania

Najczęstszą sugestią narzędzia Pingdom Speed ​​Test jest „minimalizuj przekierowania”. Przekierowanie ma miejsce, gdy jedna strona w Twojej witrynie powoduje wczytanie innej strony. Może się to zdarzyć, gdy przekierujesz protokół HTTP na HTTPS , www na inny niż www , a adres URL zaktualizowanego posta uległ zmianie.

Oto kilka rzeczy, które możesz zrobić, aby chronić swoją witrynę przed zbyt wieloma przekierowaniami:

1. Nigdy nie umieszczaj linków do strony, na której jest już przekierowanie, ponieważ może to spowodować wiele przekierowań.
2. Pamiętaj, aby usunąć dezaktywowane/nieużywane wtyczki, które mogą powodować niepotrzebne przekierowania.
3. Tworząc linki w swojej witrynie, użyj odpowiedniego prefiksu HTTP lub HTTPS i sprawdź, czy jest to www czy nie.

Jeśli chcesz dowiedzieć się więcej o przekierowaniach, zapoznaj się z artykułem Cloudways na temat Przekierowań WP 301.

4) Dodaj nagłówki wygasa

Wszystkie pliki witryny WordPress są ładowane jeden po drugim dla odwiedzającego po raz pierwszy. Żądania generowane między Twoją przeglądarką a serwerem wydłużają czas ładowania strony. Pamięć podręczna przeglądarki zapisuje pliki strony internetowej na komputerze odwiedzającego, więc przy ponownym wejściu na stronę strona ładuje się z pamięci podręcznej przeglądarki, a nie z serwera, co przyspiesza działanie strony.

Ale skąd przeglądarka wie, który plik zapisać, a który wczytać z serwera i jak długo je przechowywać? W tym miejscu pojawiają się nagłówki Expires. Są to reguły, które informują przeglądarki internetowe, czy mają ładować zasoby strony internetowej z pamięci podręcznej przeglądarki użytkownika, czy z serwera.

Przejdźmy teraz do właściwej części poradnika. Pokażę Ci, jak dodać nagłówki Expires za pomocą dwóch różnych metod.

Dodaj nagłówki Expires za pomocą wtyczki

Zainstaluj wtyczkę W3 Total Cache. Po zainstalowaniu i aktywacji przejdź do Pulpit nawigacyjny WordPressa > Wydajność > Pamięć podręczna przeglądarki , a następnie włącz opcję „Ustaw nagłówek wygasa” i zapisz zmiany.

Jeśli chcesz dowiedzieć się więcej o wtyczce W3 Total Cache, zapoznaj się z artykułem Cloudways na temat korzystania z wtyczki WordPress W3 Total Cache dla szybszych stron internetowych.

Dodaj nagłówki wygasa za pomocą kodu

Możesz również dodać nagłówki Expires za pomocą kodu. W tym celu sprawdź, czy Twoja witryna korzysta z serwerów Apache lub Nginx. Aby to zrobić, uruchom swoją witrynę w przeglądarce, naciśnij Ctrl + Shift + I, aby przejść do sieci witryny (być może musisz raz odświeżyć witrynę), kliknij nazwę domeny u góry i przejdź do nagłówka Sekcja. Tam znajdziesz nazwę swojego serwera.

Aby dodać nagłówki Expires do serwera Apache, uzyskaj dostęp do pliku .htaccess za pomocą dowolnego serwera FTP (Filezilla) i kodu podanego w górnej części pliku .htaccess.

 ## WYGASZA CACHOWANIE NAGŁÓWEK ##
<IfModule mod_expires.c>
WygasaAktywny wł.
ExpiresByType image/jpg „dostęp 1 rok”
ExpiresByType image/jpeg „dostęp 1 rok”
ExpiresByType image/gif „dostęp 1 rok”
ExpiresByType image/png „dostęp 1 rok”
ExpiresByType image/svg „dostęp 1 rok”
ExpiresByType text/css „dostęp 1 miesiąc”
ExpiresByType application/pdf "dostęp 1 miesiąc"
ExpiresByType aplikacja/javascript „dostęp 1 miesiąc”
ExpiresByType application/x-javascript "dostęp 1 miesiąc"
Aplikacja ExpiresByType/x-shockwave-flash „dostęp 1 miesiąc”
ExpiresByType obraz/x-icon „dostęp 1 rok”
ExpiresDefault „dostęp 3 dni”
</IfModule>
## WYGASZA CACHOWANIE NAGŁÓWEK ##

W Cloudways nie możesz wprowadzać żadnych zmian na poziomie Nginx, ale możesz użyć reguł Apache i dodać nagłówki Expires w pliku .htaccess swoich aplikacji. Aby uzyskać więcej informacji, zapoznaj się z artykułem Cloudways Wykorzystaj buforowanie przeglądarki w WordPress, aby zoptymalizować czas ładowania strony.

5) Wykonuj mniej żądań HTTP

Za każdym razem, gdy ładujesz witrynę, dzieje się wiele technicznych rzeczy, które dostarczają zawartość na ekran użytkownika, w tym żądanie HTTP. Czym więc jest żądanie HTTP? Jak to wpływa na wrażenia użytkownika? A co możesz zrobić, aby zredukować żądania HTTP swojej witryny?

Gdy ktoś odwiedza stronę w Twojej witrynie, przeglądarka internetowa tej osoby wysyła żądanie do Twojego serwera internetowego. Twój serwer obsługuje stronę internetową, którą próbują wyświetlić w Twojej witrynie. Dla każdego pliku przeglądarka internetowa musi wykonać osobne żądanie HTTP , więc im więcej plików ma Twoja witryna, tym więcej żądań HTTP wygeneruje z Twojej przeglądarki. Więcej żądań HTTP może wpłynąć na wygodę użytkownika witryny.

Oto kilka ogólnych strategii tworzenia mniejszej liczby żądań HTTP :

• Usuń żądania HTTP, usuwając niepotrzebne wtyczki, które nie dodają żadnej wartości do Twojej witryny, ponieważ wtyczki zwykle ładują własne CSS i JavaScript.
• Połącz żądania HTTP, scalając wiele plików CSS w jeden plik CSS. Strona ładuje się szybciej, ponieważ przeglądarka musi wysyłać mniej żądań.
• Jedną z lepszych strategii jest zastąpienie wtyczki wagi ciężkiej lżejszą.
• Chociaż obrazy czynią Twoją witrynę bardziej atrakcyjną i dodają jej wartości, usuń niepotrzebne obrazy i zawsze używaj zoptymalizowanych obrazów (możesz użyć ShortPixel i WP Compress, aby zoptymalizować obrazy).
• Użyj leniwego ładowania obrazów i filmów.

Skorzystaj z tych punktów, aby przyspieszyć działanie witryny WordPress, aby uzyskać lepszą wydajność.

6) Kompresuj komponenty za pomocą GZIP

Kompresja GZIP to technologia, która skraca czas pobierania pliku poprzez kompresję plików danych. Wszystkie nowoczesne przeglądarki automatycznie rozpakowują skompresowane pliki po odebraniu skompresowanych danych przez przeglądarkę. Wszystkie nowoczesne przeglądarki, oprogramowanie serwerowe i wszystkie najlepsze hostingi WordPress obsługują kompresję GZIP. Kompresja GZIP może zmniejszyć rozmiary plików nawet o 70%.

Cloudways jest dostarczany z zainstalowaną wtyczką Breeze, więc możesz uzyskać kompresję GZIP po prostu instalując i aktywując wtyczkę pamięci podręcznej Breeze WordPress.

Oto zalecane wtyczki do kompresji GZIP:

• GZIP z WP Rocket
• GZIP z WP Super Cache
• GZIP z całkowitą pamięcią podręczną W3

W3 Total Cache to wtyczka do buforowania w darmowej wersji. Wystarczy zainstalować i aktywować wtyczkę, a kompresja GZIP zostanie automatycznie włączona w Twojej witrynie. Przejdź do Wydajność > Ustawienia ogólne i włącz „Pamięć podręczna przeglądarki” . Po wprowadzeniu zmian kliknij przycisk „Zapisz wszystkie zmiany” .

7) Unikaj pustych Src lub Href

Atrybuty HTML bez ustawionej wartości (brak informacji między cudzysłowami) nazywane są „pustymi” atrybutami. Pusty atrybut source (src) i link (href) podkreśla, że ​​przeglądarka może się połączyć, nawet jeśli nie ma wartości Uniform Resource Identifier (URI).

Oto kilka przykładów pustych tagów Source (src) i Link (href) w HTML i JavaScript :

HTML:

 <img src=””>
<a href=””>

JavaScript:

 var img = nowy Obraz();
img.src = "";

Upewnij się, że w Twojej witrynie nie ma pustych tagów HTML i JavaScript. Jeśli tak, usuń je i odpowiednio utrzymuj wszystkie swoje linki. Po drugie, problem z pustymi tagami dotyczy obrazów, więc zawsze sprawdzaj linki do obrazów podczas przesyłania i używania.

8) Umieść JavaScript na dole

Oznacza to, że ładujesz inną zawartość strony przed JavaScriptem, więc użytkownik z wolnym połączeniem internetowym nie musi czekać na załadowanie JavaScriptu. Kiedy JavaScript jest umieszczony na górze, zaczyna się ładować jako pierwszy i wpływa na wrażenia użytkownika, spowalniając pozostałą zawartość strony.

Zapisz plik JavaScript z rozszerzeniem .js (my-amazing-script.js) i umieść ten plik JS w katalogu motywów (możesz utworzyć katalog dla JavaScripts, np. public_html/wp-content/themes/your-theme/assets /js). Po umieszczeniu pliku JavaScript edytuj plik functions.php motywu i dodaj ten kod:

 funkcja wpb_adding_scripts() {
wp_register_script('mój-niesamowity-skrypt', get_template_directory_uri() . '/js/mój-niesamowity-skrypt.js','','1.1', prawda);
wp_enqueue_script('mój-niesamowity-skrypt');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Użyta funkcja wp_register_script() i zawiera:

 <?php
wp_register_script( $uchwyt, $src, $deps, $ver, $in_footer);
?>

Ustaw parametr $in_footer na true, aby dodać skrypt w stopce lub na dole strony WordPress.

Kody odpowiedzi

Następna sekcja w narzędziu do testowania prędkości Pingdom to Kody odpowiedzi, zwane również kodami stanu HTTP. W tej sekcji dowiesz się, co się dzieje ze wszystkimi zasobami, które ładujesz na stronie. Niektóre z najczęstszych to:

• 200 – Wszystko w porządku
  301 – Żądany zasób został przeniesiony na stałe
  404 – Żądany zasób nie został znaleziony

Odpowiedzi Kody z zakresu od 200 do 300 są zwykle w porządku, ale te z przedziału od 400 do 500 są zwykle nazywane błędami, które należy naprawić.

Rozmiar zawartości i żądania według typu zawartości

Pomoże Ci to zobaczyć zasoby Twojej strony internetowej. Tabele zawierają informacje o dystrybucji Twoich treści i Twoich próśb.

Rozmiar zawartości według typu zawartości udostępnia listę wszystkich zasobów witryny pogrupowanych według typu zawartości. Te informacje mogą pomóc w wyeliminowaniu błędów. Wszędzie tam, gdzie zdasz sobie sprawę, że rozmiar zawartości według typu zawartości jest większy niż oczekiwano, możesz popracować nad tą częścią zawartości, aby poprawić wydajność.

Rozmiar treści i żądania według domeny

Sekcja Rozmiar zawartości i żądania według domeny pozwala zobaczyć usługi wewnętrzne i zewnętrzne wraz z ich medianą rozmiarów. Ta sekcja wyświetla żądania wygenerowane przez domenę. Zaleca się wykonywanie mniejszej liczby żądań zewnętrznych, ponieważ każda usługa zewnętrzna wprowadza własne opóźnienie.

Ogólnie rzecz biorąc, najlepiej jest zminimalizować liczbę żądań i przechowywać zasoby w jednym miejscu, na przykład przenosząc je na serwer sieciowy lub CDN. Przykładem może być FontAwesome lub BootStrap. Jeśli łączysz skrypt FontAwesome lub BootStrap zewnętrznie, pobierz go i udostępnij bezpośrednio.

Wykres wodospadu

Na koniec mamy sekcję żądania narzędzia do testowania prędkości Pingdom, która generuje wykres kaskadowy. Możesz przeanalizować każde żądanie, aby zobaczyć problemy z wydajnością. Ta sekcja zawiera szczegółowy wykres kaskadowy oznaczony kolorami.

Analiza kaskadowa Pingdom pokazuje każde żądanie HTTP w Twojej witrynie i jest używana przez programistów do wizualnego zrozumienia ładowania witryny i identyfikowania wąskich gardeł. Skoncentruj się na rozmiarach połączeń — długie połączenia i długie paski blokują szybkie ładowanie witryny.

Streszczenie

Jeśli chodzi o narzędzia do testowania szybkości stron internetowych, na rynku dostępnych jest wiele narzędzi. Jak widać, narzędzie Pingdom Speed ​​Test działa lepiej, aby zbadać wydajność witryny dzięki dogłębnym wyjaśnieniom i sugestiom.

Podałem Ci szczegółowe informacje o produkcie. Teraz Twoja kolej, aby użyć tego narzędzia, aby poprawić wydajność swojej witryny.