Jeśli jeszcze o tym nie wiesz… Google wprowadziło kilka ważnych zmian w swoich wskaźnikach wydajności witryn internetowych o nazwie Google Core Web Vitals.
Rdzeń Web Vitals zawiera teraz stabilny Interaction to Next Paint (INP), który zastępuje First Input Delay (FID).
Wielu naszych czytelników pytało, w jaki sposób utrzymujemy szybkie czasy wczytywania na WPBeginner. Stosujemy standardowe praktyki optymalizacyjne, ale podejmujemy dodatkowe kroki, aby obsłużyć nasz duży ruch.
W tym artykule podzielimy się tymi dodatkowymi wskazówkami, aby zwiększyć szybkość wczytywania twojej witryny, z których wiele można zastosować do każdej witryny internetowej.
Uwaga: Ten artykuł jest częścią naszej serii WPBeginner Insider, w której dzielimy się wiedzą, wskazówkami i narzędziami, których używamy do rozwijania naszej działalności.
Oto krótki przegląd wszystkich elementów, które omówimy w tym artykule:
Dlaczego prędkość wczytywania strony jest ważna?
Szybkość wczytywania strony to szybkość wyświetlania twojej witryny internetowej, gdy użytkownik kliknie odnośnik do niej.
Naszym celem jest zapewnienie użytkownikom szybkiego dostępu do potrzebnych informacji. Szybciej wczytująca się witryna internetowa sprawia, że użytkownicy są zadowoleni, ponieważ mogą natychmiast uzyskać informacje, których szukają.
Z drugiej strony, wolno wczytująca się witryna internetowa może zmusić ich do opuszczenia strony. Tego właśnie chcemy uniknąć na wszystkich naszych witrynach internetowych. Jest bardziej prawdopodobne, że użytkownicy staną się subskrybentami lub klientami, jeśli pozostaną dłużej na twojej witrynie.
Użytkownicy są o 36% bardziej skłonni do opuszczenia witryny internetowej, jeśli jej wczytywanie trwa 3 sekundy. Z kolei prawdopodobieństwo opuszczenia witryny internetowej, której wczytywanie trwa 5 sekund lub dłużej, wynosi 90%.
Source: ThinkWithGoogle
Oto kilka innych powodów, dla których szybkość wczytywania strony jest tak ważna:
- Zwiększa zaangażowanie użytkowników: Szybko wczytująca się witryna internetowa utrzymuje zaangażowanie odwiedzających, umożliwiając im szybki dostęp do informacji. Użytkownicy spędzający więcej czasu na witrynie są bardziej skłonni do dokonywania zakupów lub konwersji.
- Poprawia ranking w wyszukiwarkach: Ze względu na lepsze wrażenia użytkownika, wyszukiwarki faworyzują szybko wczytujące się witryny internetowe, umieszczając je wyżej w rankingu.
- Kluczowe dla użytkowników mobilnych: Szybkość jest szczególnie ważna w przypadku przeglądania stron na urządzeniach mobilnych. Użytkownicy mobilni są dwa razy bardziej skłonni do opuszczenia powolnej witryny internetowej niż użytkownicy komputerów stacjonarnych.
- Buduje zaufanie i autorytet: Szybko wczytująca się witryna sprawia wrażenie bardziej wiarygodnej i profesjonalnej, co może pomóc w przekonaniu użytkowników do zakupów w twojej firmie.
Podsumowując, szybkość wczytywania strony poprawia ogólne wrażenia użytkownika, zwiększając zadowolenie i zaangażowanie klientów.
Jak poprawiamy szybkość wczytywania strony w WPBeginner?
Stosujemy wszystkie standardowe najlepsze praktyki z naszego podręcznika optymalizacji wydajności i szybkości WordPress.
Ponadto podjęliśmy kilka dodatkowych kroków, aby jeszcze bardziej zwiększyć wydajność WordPressa na WPBeginner.
Oto niedawny zrzut ekranu naszej optymalizacji wydajności przed i po wdrożeniu technik, które wdrożyliśmy.
Jeśli chcesz przeprowadzić podobny test dla twojej witryny internetowej i zobaczyć wynik Google Core Web Vitals, skorzystaj z narzędzia PageSpeed Insights.
Wystarczy wpisz adres URL, który chcesz przetestować i kliknij przycisk „Analizuj”.
Narzędzie przeanalizuje stronę internetową przez kilka sekund, a następnie wyświetli wyniki testu.
Przyjrzyjmy się teraz 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 WordPressie nauczyliśmy się, jak ważny jest wybór najlepszego hostingu WordPress.
W przypadku małych witryn internetowych można zacząć od jednej z najlepszych firm hostingowych, takich jak Bluehost lub Hostinger.
WPBeginner to jednak większa witryna internetowa o dużym natężeniu ruchu. Plany hostingu współdzielonego lub VPS są zbyt ograniczone w tej skali.
Dlatego WPBeginner jest hostowany w infrastrukturze chmury korporacyjnej SiteGround, która działa na platformie Google Cloud Platform.
Dlaczego korzystamy z SiteGround
- Infrastruktura hostingowa SiteGround klasy korporacyjnej ma kilka warstw redundancji, co zapewnia maksymalny czas pracy.
- 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 biorące udział w zarządzaniu poszczególnymi dedykowanymi serwerami hostingowymi.
- Wewnętrzne ulepszenia SiteGround, takie jak Ultrafast PHP, szybsze MySQL i kompresja Brotli, zapewniają dodatkowy wzrost wydajności.
- Mamy doświadczenie z pierwszej ręki w pracy z zespołem pomocy technicznej SiteGround. Wiedza ich inżynierów, szybsze czasy reakcji i ogólna pomoc zawsze robiły na nas wrażenie.
Więcej szczegółów można znaleźć w naszym artykule na temat tego, dlaczego WPBeginner przeszedł na hosting SiteGround.
Obecnie oferują również hojną zniżkę dla użytkowników WPBeginner z bezpłatną nazwą domeny. Zaczyna się od 2,99 USD miesięcznie, co jest całkiem przystępne, jeśli weźmie się pod uwagę technologię i poziom świadczonych usług.
Najlepsze jest to, że korzyści SiteGround nie ograniczają się do klientów korporacyjnych. Wszystkie współdzielone konta hostingowe SiteGround są również hostowane na Google Cloud Platform.
2. CloudFlare DNS
W poprzednim artykule WPBeginner Insider podzieliliśmy się naszym studium przypadku przejścia z Sucuri na Cloudflare.
Oprócz zabezpieczeń, korzystanie z Cloudflare DNS daje WPBeginner znaczną przewagę w zakresie wydajności.
DNS (Domain Name System) jest jak książka telefoniczna dla witryn internetowych.
Gdy wpiszesz adres witryny internetowej w przeglądarce lub klikniesz odnośnik, usługa DNS wyszukuje nazwę domeny i kieruje twoją witrynę na adres IP tej konkretnej witryny.
Zazwyczaj witryny internetowe używają serwerów nazw swojej firmy hostingowej do zarządzania DNS. Nie są one tak szybkie jak Cloudflare, umożliwiając rozwiązywanie DNS na brzegu sieci w ich centrach danych w ponad 310 miastach na całym świecie.
Dlaczego korzystamy z Cloudflare DNS?
- Najszybsze rozwiązywanie DNS: Globalna sieć Cloudflare umożliwia rozwiązywanie DNS w najbliższej lokalizacji dowolnego użytkownika.
- Wbudowane zabezpieczenia: Ponieważ cały ruch przechodzi przez Cloudflare DNS, ich zapora aplikacji internetowych (WAF) jest w stanie szybko łagodzić i blokować ataki DDoS, spam, niepotrzebne boty, wstrzyknięcia SQL, próby włamań i inne.
- CDN Delivery – ich sieć automatycznie buforuje zasoby statyczne i serwuje je za pośrednictwem globalnej sieci, dzięki czemu witryny internetowe wczytują się szybciej. A ponieważ dzieje się to na poziomie DNS, nie trzeba mieć oddzielnych subdomen dla zasobów CDN.
Korzystamy z planu Enterprise, ale Cloudflare oferuje bezpłatny CDN i DNS dla mniejszych witryn internetowych, który zasadniczo robi to samo z mniejszą liczbą funkcji.
3. Optymalizacja wydajności przy użyciu WP Rocket
Do dalszej optymalizacji wydajności używamy WP Rocket, która jest jedną z najlepszych wtyczek wydajności WordPress na rynku. Obsługuje ona między innymi buforowanie, co oznacza, że zapisuje kopie witryny, dzięki czemu strony ładują się szybciej dla kolejnych odwiedzających.
W WP Rocket najbardziej podoba nam się to, że jest to najbardziej wszechstronna wtyczka do optymalizacji wydajności WordPressa, więc potrzebujemy tylko jednego narzędzia do obsługi wielu różnych zadań.
Dlaczego korzystamy z WP Rocket
- Wstępne ładowanie pamięci podręcznej – Zazwyczaj wtyczka pamięci podręcznej czeka, aż użytkownik przejdzie na stronę, aby utworzyć jej kopię w pamięci podręcznej. WP Rocket automatycznie utrzymuje twoją pamięć podręczną w gotowości, co robi dużą różnicę w czasie wczytywania strony.
- Buforowanie przeglądarki – Przechowywanie statycznych zasobów, takich jak obrazki, JavaScript i CSS w pamięci podręcznej przeglądarki oznacza szybsze wczytywanie przy kolejnych zobaczeniach strony.
- Optymalizacja plików – WP Rocket pomaga zminimalizować i zoptymalizować dostarczanie plików statycznych, takich jak JavaScript i arkusze stylów. Zmniejszenie tych plików znacznie skraca ogólny czas wczytywania strony.
Podzieliliśmy się naszymi szczegółowymi doświadczeniami z tą wtyczką 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łna pamięć podręczna strony
- Optymalizacja plików(minifikacja plików JS i CSS oraz dostarczanie krytycznych CSS)
- JavaScript deferred (opóźnienie wczytywania JS, co pomaga poprawić problem blokowania renderowania )
- Leniwe wczytywanie obrazków i plików multimedialnych
Potrzebujesz pomocy w korzystaniu z tych ustawień na twojej witrynie? Mamy przewodnik krok po kroku, jak skonfigurować WP Rocket, aby osiągnąć najlepsze wyniki.
4. Enqueuing JavaScript i CSS
Optymalizujemy dostarczanie plików JavaScript i CSS za pomocą WP Rocket, ale wcześniej upewniamy się, że nasza witryna internetowa wczytuje tylko te pliki JavaScript i CSS, które są potrzebne dla danej strony.
Najprostszym sposobem na to jest użycie wtyczek i motywów WordPress, które są zgodne z najlepszymi praktykami kodowania WordPress. Wtyczki te wczytują skrypt tylko wtedy, gdy jest to konieczne.
Czasami jednak twórca wtyczki lub motywu nie może podjąć tej decyzji za Ciebie. Mogą oni wczytywać skrypty globalnie, aby zapewnić lepsze wrażenia użytkownika.
W WPBeginner mamy wewnętrznych programistów, którzy zajmują się tym problemem. Usuwamy niepotrzebne skrypty i CSS, a następnie dodajemy je tam, gdzie są potrzebne.
⚠️Note: Osiągnięcie tego będzie trudne dla początkujących użytkowników bez umiejętności kodowania. Próba zrobienia tego może zepsuć twoją witrynę lub spowodować nieoczekiwane zachowanie.
Jednak użytkownicy z podstawowym zrozumieniem kodowania WordPress mogą to zrobić, wykonując następujące kroki.
Najpierw należy znaleźć niepotrzebne skrypty. Najprostszym sposobem na sprawdzenie, które skrypty i arkusze stylów są wczytywane, jest użycie wtyczki Query Monitor.
Pokaże ci pliki JavaScript i CSS wczytywane na stronie, a następnie możesz dowiedzieć się, które z nich są niepotrzebne.
Aby usunąć skrypt z kolejki, należy użyć uchwytu skryptu, jak pokazano w Monitorze zapytań. Następnie można użyć następującego kodu do usunięcia skryptu:
function prefix_remove_scripts() {
if ( is_front_page() ) {
wp_dequeue_script( 'plugin-script-handle' );
}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );
Podobnie, aby usuwać niepotrzebne arkusze stylów, można użyć następującego kodu:
/**
* 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 można znaleźć w naszym poradniku na temat prawidłowego dodawania JavaScript i CSS w WordPress.
5. Rozładowywanie stylów edytora bloków
Używamy domyślnego edytora bloków WordPress na WPBeginner. Jest on niezwykle szybki, a rdzeń zespołu programistów WordPress poświęca wiele czasu i zasobów na poprawę jego wydajności.
Aby jeszcze bardziej zwiększyć wydajność, odciążamy niektóre style edytora bloków, których nie używamy w WPBeginner.
Zmniejsza to rozmiar DOM i przyspiesza przetwarzanie żądanej strony przez przeglądarki.
W terminologii przeglądarek, DOM jest jak mapa elementów i podelementów na stronie (nagłówki, tekst, obrazki, arkusze stylów, skrypty i tak dalej)
Większy DOM oznacza, że przeglądarka poświęci nieco więcej czasu na jego przetworzenie. Mniejszy DOM jest przetwarzany szybko.
Jednak wzrost wydajności z tego powodu nie jest tak duży i nie polecalibyśmy go większości użytkowników z mniejszymi witrynami internetowymi WordPress.
6. Różne ulepszenia wydajności
Oprócz wskazówek wymienionych powyżej, mamy również najlepsze praktyki, aby zapewnić lepszą szybkość wczytywania strony.
Oto kilka z nich, które możesz łatwo wdrożyć na swojej witrynie internetowej:
- Zoptymalizowane obrazy – Nasz zespół zapewnia, że zrzuty ekranu, obrazki i media, które przesyłamy, są wysoce zoptymalizowane w celu zmniejszenia rozmiaru pliku. Zobacz nasz przewodnik na temat optymalizacji obrazków dla WordPress.
- Optymalizacja zadań C ron – zadania Cron to zaplanowane zadania WordPress, które działają w tle, aby sprawdzać dostępność aktualizacji, publikować zaplanowane wpisy itp. Wtyczki WordPress mogą również dodawać własne procesy w tle. Optymalizacja zadań cron zmniejsza wczytywanie serwera i poprawia wydajność.
- Redukcja zewnętrznych żądań HTTP – Niektóre wtyczki i narzędzia mogą wymagać wczytywania plików z zewnętrznych domen. Zbyt wiele takich żądań może wydłużać czas wczytywania strony. Aby to poprawić, możesz zapoznać się z naszym poradnikiem, jak wyłączyć pliki CSS i JavaScript w twoich wtyczkach.
Możesz skorzystać z naszego kompletnego przewodnika po szybkości i wydajności WordPress, aby uzyskać bardziej szczegółowy opis tych metod i innych strategii mających na celu poprawę czasu wczytywania twojej strony.
Mamy nadzieję, że ten artykuł dał ci wgląd w to, jak zwiększyć szybkość wczytywania stron na twojej witrynie internetowej. Możesz również zobaczyć, jak rozwijamy naszą listę mailingową lub zapoznać się z naszym przewodnikiem SEO WordPress, aby zwiększyć twój ruch organiczny.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.