Jak przyspieszamy ładowanie stron na WPBeginner (ujawniono 6 wskazówek)

Nikt nie lubi czekać na wolno ładującą się stronę internetową. Frustruje to odwiedzających i szkodzi Twojej pozycji w wyszukiwarkach.

W WPBeginner obsługujemy miliony czytelników każdego miesiąca. Szybkość nie jest dla nas tylko miłą funkcją; jest niezbędna do przetrwania naszego biznesu.

Wiemy, jak trudne może być dotrzymanie kroku zmieniającym się wskaźnikom Google, takim jak nowy wynik Interaction to Next Paint (INP). Potrzebujesz szybkiej witryny, aby utrzymać silne SEO.

Odsłaniamy kulisy, aby podzielić się naszą dokładną strategią szybkości. Oto rzeczywiste narzędzia i ustawienia, których używamy tutaj, na WPBeginner.

Oto szybki przegląd optymalizacji, które omówimy:

Dlaczego szybkość ładowania strony jest ważna?

Szybkość ładowania strony to tempo, w jakim Twoja witryna wyświetla się, gdy użytkownik kliknie w link do niej.

Naszym celem jest zapewnienie, że użytkownicy szybko uzyskają potrzebne informacje. Szybciej ładująca się strona internetowa uszczęśliwia użytkowników, ponieważ mogą oni natychmiast uzyskać informacje, których szukają.

Z drugiej strony, wolno ładująca się strona internetowa może zmusić ich do odejścia. Tego chcemy unikać na wszystkich naszych stronach. Użytkownicy chętniej zostaną subskrybentami lub klientami, jeśli dłużej pozostaną na Twojej stronie.

Użytkownicy są o 36% bardziej skłonni opuścić (odbicie) stronę internetową, jeśli jej wczytanie zajmuje 3 sekundy. A o 90% bardziej skłonni opuścić strony, które ładują się 5 sekund lub dłużej.

Source: ThinkWithGoogle

Oto kilka powodów, dla których szybkość ładowania strony jest tak ważna:

• Zwiększa zaangażowanie użytkowników: Szybko ładująca się witryna utrzymuje zaangażowanie odwiedzających, umożliwiając im szybki dostęp do informacji. Użytkownicy spędzający więcej czasu na stronie są bardziej skłonni do wydawania pieniędzy lub konwersji.
• Poprawia pozycję w wyszukiwarkach: Dzięki lepszej jakości obsługi użytkownika wyszukiwarki faworyzują szybko ładujące się strony internetowe, oceniając je wyżej.
• Kluczowe dla użytkowników mobilnych: Szybkość jest szczególnie ważna podczas przeglądania stron na urządzeniach mobilnych. Użytkownicy mobilni dwukrotnie częściej opuszczają wolną stronę internetową niż użytkownicy komputerów stacjonarnych.
• Buduje zaufanie i autorytet: Szybko ładująca się strona wydaje się bardziej wiarygodna i profesjonalna, co może pomóc Ci przekonać użytkowników do zakupu od Twojej firmy.

Podsumowując, szybkość ładowania strony poprawia ogólne doświadczenie użytkownika, zwiększając satysfakcję i zaangażowanie klientów.

Jak poprawiamy szybkość ładowania stron na WPBeginner

Stosujemy wszystkie standardowe najlepsze praktyki z naszego podręcznika optymalizacji wydajności i szybkości WordPress.

Dodatkowo podjęliśmy kilka dodatkowych kroków, aby jeszcze bardziej zwiększyć wydajność WordPress na WPBeginner.

Oto zrzut ekranu naszej optymalizacji wydajności przed i po zastosowaniu wdrożonych przez nas technik.

Jeśli chcesz przeprowadzić podobny test dla swojej witryny i zobaczyć swój wynik Google Core Web Vitals, skorzystaj z narzędzia PageSpeed Insights .

Po prostu wprowadź adres URL, który chcesz przetestować, i kliknij przycisk „Analizuj”.

Narzędzie przeanalizuje stronę internetową przez kilka sekund, a następnie pokaże wyniki testu.

Teraz przyjrzyjmy się krokom, które podjęliśmy, aby osiągnąć ten wynik wydajności.

1. Szybsza platforma hostingowa

Dzięki wieloletniemu doświadczeniu w prowadzeniu firm opartych na WordPress, nauczyliśmy się znaczenia wyboru najlepszego hostingu WordPress.

W przypadku małych witryn możesz zacząć od dowolnej z najlepszych firm hostingowych, takich jak Bluehost lub Hostinger.

Jednak WPBeginner to duża strona internetowa z dużym natężeniem ruchu. Plany hostingu współdzielonego lub VPS są zbyt ograniczone w takiej skali.

Dlatego WPBeginner jest hostowany na infrastrukturze Enterprise Cloud firmy SiteGround, która działa na Google Cloud Platform.

Dlaczego używamy SiteGround

• SiteGround’s infrastruktura hostingowa klasy enterprise posiada kilka warstw redundancji, co zapewnia maksymalny czas działania.
• Działa na platformie Google Cloud Platform, która jest połączona z najnowocześniejszą siecią Google, zapewniając najszybsze prędkości ze wszystkich punktów na całym świecie.
• Zmniejsza to koszty i trudności związane z zarządzaniem poszczególnymi serwerami hostingowymi dedykowanymi.
• Wewnętrzne usprawnienia SiteGround, takie jak Ultrafast PHP, szybszy MySQL i kompresja Brotli, zapewniają dodatkowy wzrost wydajności.
• Mamy bezpośrednie doświadczenie we współpracy z zespołem wsparcia SiteGround. Wiedza ich inżynierów, szybsze czasy reakcji i ogólna pomocność zawsze nas imponowały.

Więcej szczegółów znajdziesz w naszym artykule na temat tego, dlaczego WPBeginner przeszedł na hosting SiteGround.

Obecnie oferują również hojny rabat dla użytkowników WPBeginner z darmową nazwą domeny. Zaczyna się od bardzo niskiej miesięcznej stawki, co jest dość przystępne, biorąc pod uwagę technologię i poziom świadczonych usług.

Najlepsze jest to, że korzyści SiteGround nie ograniczają się do klientów korporacyjnych. Wszystkie konta współdzielonego hostingu SiteGround są również hostowane na Google Cloud Platform.

2. CloudFlare DNS

W poprzednim artykule WPBeginner Insider podzieliliśmy się studium przypadku przejścia z Sucuri na Cloudflare.

Oprócz bezpieczeństwa, korzystanie z DNS Cloudflare daje WPBeginner znaczącą przewagę w wydajności.

DNS (Domain Name System) jest jak książka telefoniczna dla stron internetowych.

Kiedy wpisujesz adres strony internetowej w przeglądarce lub klikasz link, usługa DNS wyszukuje nazwę domeny i kieruje Twoją przeglądarkę do adresu IP tej konkretnej strony internetowej.

Zazwyczaj strony internetowe korzystają z serwerów DNS swojej firmy hostingowej do zarządzania DNS. Nie są one tak szybkie jak Cloudflare, umożliwiając rozwiązywanie nazw DNS na brzegu sieci w swoich centrach danych w ponad 310 miastach na całym świecie.

Dlaczego używamy Cloudflare DNS

• Najszybsze rozwiązywanie DNS: Globalna sieć Cloudflare pozwala na rozwiązywanie DNS w lokalizacji najbliższej każdemu użytkownikowi.
• Wbudowane zabezpieczenia: Ponieważ cały ruch przechodzi przez Cloudflare DNS, ich zapora aplikacji internetowej (WAF) jest w stanie szybko łagodzić i blokować ataki DDoS, spam, niepotrzebne boty, ataki SQL injection, próby włamań i inne.
• Dostarczanie przez CDN – Ich sieć automatycznie buforuje zasoby statyczne i serwuje je za pośrednictwem swojej globalnej sieci, przyspieszając ładowanie stron internetowych. A ponieważ dzieje się to na poziomie DNS, nie potrzebujesz oddzielnych subdomen dla zasobów CDN.

Używamy planu Enterprise do obsługi naszego dużego ruchu, ale darmowa wersja Cloudflare zapewnia ogromny wzrost prędkości i jest więcej niż wystarczająca dla większości małych i średnich stron internetowych.

3. Optymalizacja wydajności za pomocą WP Rocket

W celu dalszej optymalizacji wydajności używamy WP Rocket, który jest jednym z najlepszych wtyczek do optymalizacji wydajności WordPress na rynku. Między innymi obsługuje buforowanie, co oznacza, że zapisuje kopie Twojej witryny, dzięki czemu strony ładują się szybciej dla powracających odwiedzających.

Najbardziej podoba nam się w WP Rocket to, że jest to najbardziej kompleksowa wtyczka do optymalizacji wydajności WordPress, dzięki czemu potrzebujemy tylko jednego narzędzia do obsługi wielu różnych zadań.

Dlaczego używamy WP Rocket

• Preloading cache – Zazwyczaj plugin cache czeka, aż użytkownik odwiedzi stronę, aby utworzyć jej skopiowaną wersję. WP Rocket automatycznie utrzymuje Twój cache gotowy, co ma ogromne znaczenie dla czasu ładowania strony.
• Buforowanie przeglądarki – przechowywanie statycznych zasobów, takich jak obrazy, JavaScript i CSS, w pamięci podręcznej przeglądarki oznacza szybsze ładowanie przy kolejnych wyświetleniach stron.
• Optymalizacja plików – WP Rocket pomaga w minifikacji i optymalizacji dostarczania plików statycznych, takich jak JavaScript i arkusze stylów. Zmniejszenie rozmiaru tych plików znacząco skraca ogólny czas ładowania strony.

Nasze szczegółowe doświadczenia z tą wtyczką opisaliśmy w naszej recenzji WP Rocket z zaletami i wadami.

Jakich ustawień używamy w WP Rocket?

Mamy włączone następujące ustawienia WP Rocket:

• Pełne cachowanie strony
• Optymalizacja plików (<a id="x1">minimalizacja plików JS i CSS</a> oraz dostarczanie krytycznego CSS)
• Odroczone ładowanie JavaScript (opóźnienie ładowania JS, co pomaga <a id="x1">naprawić problem blokowania renderowania</a>). <strong>Uwaga:</strong> Jeśli z tego korzystasz, zawsze sprawdzaj swoją witrynę w trybie Incognito, aby upewnić się, że menu i suwaki nadal działają.
• Lenistwo ładowania obrazów i plików multimedialnych

Potrzebujesz pomocy w użyciu tych ustawień na swojej witrynie? Mamy <a id="x1">przewodnik krok po kroku dotyczący konfiguracji WP Rocket</a>, aby osiągnąć najlepsze rezultaty.

4. Dołączanie JavaScript i CSS

Optymalizujemy dostarczanie plików JavaScript i CSS za pomocą WP Rocket, ale najpierw upewniamy się, że nasza witryna ładuje tylko te pliki <a id="x1">JavaScript</a> i <a id="x2">CSS</a>, które są potrzebne dla danej strony.

Najlepszym sposobem na rozwiązanie tego problemu jest używanie wysokiej jakości motywów i wtyczek, które są zgodne ze standardami kodowania WordPress. Te narzędzia są zaprojektowane tak, aby ładować skrypty tylko wtedy, gdy są faktycznie potrzebne.

Jednak deweloper może czasami załadować skrypt na całej witrynie, aby zapewnić poprawne działanie funkcji. W WPBeginner nasz zespół deweloperski ręcznie usuwa te niepotrzebne skrypty z kolejki, a następnie <a id="x1">dodaje je do kolejki</a> tylko na stronach, gdzie są wymagane.

Znacznie bezpieczniejszym i łatwiejszym sposobem dodawania fragmentów PHP, takich jak poniższe, jest użycie darmowego wtyczki <a id="x1">WPCode</a>. Pozwala ona na dodawanie i zarządzanie niestandardowym kodem bez edycji plików motywu, co pomaga zapobiegać błędom. Więcej informacji można znaleźć w naszej kompletnej <a id="x2">recenzji WPCode</a>.

Niezależnie od tego, czy wklejasz kod do wtyczki WPCode (zalecane), czy do pliku functions.php, najpierw musisz znaleźć niepotrzebne skrypty. Najłatwiejszym sposobem jest użycie wtyczki <a id="x1">Query Monitor</a>.

Pokaże Ci wszystkie pliki JavaScript i CSS ładowane na stronie, dzięki czemu możesz określić, które z nich są niepotrzebne. Aby usunąć skrypt, będziesz potrzebować jego uchwytu z Query Monitor. Następnie możesz użyć następującego kodu:

function prefix_remove_scripts() {
    // Check if we are on the homepage
	if ( is_front_page() ) { 
		wp_dequeue_script( 'plugin-script-handle' ); 
	} 
} 
add_action( 'wp_enqueue_scripts', 'prefix_remove_scripts', 100 );

Podobnie, możesz użyć poniższego kodu, aby usunąć niepotrzebny arkusz stylów:

/**
 * Remove unnecessary stylesheets
 */
function prefix_remove_styles() {
	if ( is_front_page() ) {
	wp_dequeue_style( 'stylesheet-handle' );
	}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

Więcej szczegółów znajdziesz w naszym poradniku na temat <a id="x1">prawidłowego dodawania JavaScript i CSS w WordPress</a>.

5. Rozładowywanie stylów edytora blokowego

W WPBeginner używamy domyślnego <a id="x1">edytora bloków WordPress</a>. Jest on niezwykle szybki, a zespół deweloperski WordPress wkłada dużo czasu i zasobów w poprawę jego wydajności.

Aby dalej zwiększyć wydajność, usuwamy niektóre style edytora bloków, których nie używamy na WPBeginner.

Zmniejsza to ogólny rozmiar strony i zapewnia, że przeglądarka nie marnuje czasu na ładowanie niepotrzebnego kodu.

W terminologii przeglądarki, DOM jest jak mapa elementów i pod-elementów na stronie (nagłówki, tekst, obrazy, arkusze stylów, skrypty itp.)

Większe DOM oznacza, że przeglądarka poświęci trochę więcej czasu na jego przetwarzanie. Mniejszy DOM jest szybko przetwarzany.

Jednak wzrost wydajności z tego tytułu nie jest duży i nie polecalibyśmy go większości użytkowników z mniejszymi <a id="x1">witrynami WordPress</a>.

6. Różne ulepszenia wydajności

Oprócz wskazówek wymienionych powyżej, stosujemy również najlepsze praktyki, aby zapewnić lepszą szybkość ładowania stron.

Oto niektóre z nich, które możesz łatwo zaimplementować na swojej stronie internetowej:

• <strong>Zoptymalizowane obrazy</strong> – Nasz zespół dba o to, aby zrzuty ekranu, obrazy i multimedia, które przesyłamy, były wysoce zoptymalizowane pod kątem zmniejszenia rozmiaru pliku. Zobacz nasz poradnik na temat <a id="x1">optymalizacji obrazów dla WordPress</a>.
• <strong>Optymalizacja zadań Cron</strong> – Zadania Cron to zaplanowane zadania WordPress, które działają w tle, aby sprawdzać aktualizacje, publikować zaplanowane posty itp. Wtyczki WordPress mogą również dodawać własne procesy w tle. <a id="x1">Optymalizacja zadań Cron</a> zmniejsza obciążenie serwera i poprawia wydajność.
• <strong>Zmniejszenie zewnętrznych żądań HTTP</strong> – Niektóre wtyczki i narzędzia, których używasz, mogą wymagać ładowania plików z zewnętrznych domen. Zbyt wiele takich żądań może zwiększyć czas ładowania strony. Aby to naprawić, możesz zapoznać się z naszym poradnikiem na temat <a id="x1">wyłączania plików CSS i JavaScript Twoich wtyczek</a>.

Możesz skorzystać z naszego kompletnego <a id="x1">przewodnika po szybkości i wydajności WordPress</a>, aby uzyskać bardziej szczegółowe omówienie tych metod i innych strategii poprawy czasu ładowania strony.

FAQ dotyczące poprawy szybkości ładowania strony

Rozumiemy, że możesz mieć jeszcze pytania dotyczące szybszego ładowania Twojej strony. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań.

Jaka jest dobra prędkość ładowania strony internetowej?

Świetnym celem jest, aby Twoje strony ładowały się poniżej 2 sekund. Im szybsza jest Twoja strona, tym lepiej zarówno dla Twoich odwiedzających, jak i dla Twoich rankingów w wyszukiwarkach.

Jak mogę przetestować szybkość mojej strony internetowej?

Możesz użyć darmowych narzędzi online, takich jak Google PageSpeed Insights, aby przetestować swoją witrynę. Wystarczy wprowadzić adres URL swojej witryny, a narzędzie dostarczy szczegółowy raport o wydajności i sugestie dotyczące ulepszeń.

Czy muszę być programistą, aby przyspieszyć działanie mojej strony?

Wcale nie. Wiele z najskuteczniejszych strategii, takich jak wybór wysokiej jakości hostingu, używanie wtyczki do buforowania, takiej jak WP Rocket, i optymalizacja obrazów, nie wymaga żadnych umiejętności kodowania.

Która z tych wskazówek daje największy wzrost wydajności?

Twoje hostowanie WordPress jest podstawą szybkości Twojej witryny. Rozpoczęcie od szybkiego i niezawodnego hosta, takiego jak SiteGround, będzie miało największy wpływ na Twoją wydajność od pierwszego dnia.

Dodatkowe zasoby i kolejne kroki

Mamy nadzieję, że to wewnętrzne spojrzenie na naszą strategię wydajności daje jasną ścieżkę do przyspieszenia własnej witryny. Wskazówki, którymi się podzieliliśmy, mogą poprawić doświadczenie użytkownika i SEO dla każdej witryny.

Jeśli jesteś gotów dowiedzieć się więcej, oto kilka dodatkowych przewodników, które mogą okazać się pomocne:

• Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
• Jak przygotować swoją stronę WordPress na wydarzenie o dużym natężeniu ruchu
• Najlepsze wtyczki buforujące WordPress do przyspieszenia Twojej witryny

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.