Jak wyeliminować zasoby blokujące renderowanie w WordPress?

Kiedy ktoś próbuje odwiedzić stronę w Twojej witrynie, wpisuje adres URL w swojej przeglądarce, co natychmiast zaczyna działać. Aby załadować stronę, musi „renderować” wszystkie elementy składające się na tę stronę.

Czasami jednak istnieją pliki CSS lub JavaScript, które wstrzymują ten proces, uniemożliwiając renderowanie treści — są to tak zwane zasoby blokujące renderowanie . Oznacza to, że odwiedzający mogą doświadczać długich czasów oczekiwania, co może negatywnie wpłynąć na to, jak ludzie postrzegają Twoją organizację i czy podejmują działania, które chcesz.

W tym poście wyjaśnimy, czym są zasoby blokujące renderowanie i omówimy korzyści z usunięcia ich z witryny. Następnie pokażemy Ci, jak je wyeliminować na pięć różnych sposobów.

Co to są zasoby blokujące renderowanie?

Zanim przyjrzymy się bliżej zasobom blokującym renderowanie, ważne jest, aby zrozumieć normalny proces ładowania witryny. Gdy użytkownik kliknie łącze do Twojej witryny, jego przeglądarka musi wyrenderować (lub pobrać) całą jej zawartość. Odczytuje kod Twojej witryny od góry do dołu, w tym cały kod HTML, CSS i JavaScript.

Odwiedzający nie będą mogli zobaczyć Twojej witryny, dopóki przeglądarka w pełni nie odczyta tej kolejki skryptów. Jeśli istnieją zasoby blokujące renderowanie, mogą czekać długo.

Zasadniczo zasób blokujący renderowanie to plik CSS lub JavaScript, który powoduje, że przeglądarka przestaje ładować inną zawartość, dopóki nie zostanie przetworzona. Może to wstrzymać proces renderowania, powodując, że strona będzie wyglądać na pustą lub niekompletną.

Za każdym razem, gdy witryna ma zasoby blokujące renderowanie, ładuje niepotrzebne pliki na początku kodu. Odwiedzający będą musieli poczekać, aż te pliki zostaną przetworzone, zanim będą mogli zobaczyć stronę.

Oto kilka wskaźników wydajności witryny, na które mogą mieć wpływ zasoby blokujące renderowanie:

• Największe wyrenderowanie treści : mierzy, ile czasu zajmuje wczytanie głównej zawartości strony.
• First Contentful Paint : jest to czas potrzebny przeglądarce na wyrenderowanie pierwszego fragmentu zawartości Document Object Model (DOM) w witrynie.
• Całkowity czas blokowania : mierzy opóźnienie między pierwszym wyrenderowaniem treści a czasem do interakcji (jak długo trwa, aby strona stała się w pełni interaktywna).

Zasoby blokujące renderowanie nie są krytyczne podczas ładowania, ale mogą opóźnić proces renderowania. Może to mieć negatywny wpływ na wrażenia użytkownika (UX) Twojej witryny. Aby więc uniemożliwić odwiedzającym opuszczanie Twoich stron, ważne jest, aby je wyeliminować.

Korzyści z wyeliminowania zasobów blokujących renderowanie

Ogólnie internauci nie lubią czekać na załadowanie stron. Szybka witryna może zachęcić odwiedzających do zapoznania się z Twoimi treściami i uniemożliwić im zwrócenie się do konkurencji.

Wyeliminowanie zasobów blokujących renderowanie może być kluczem do poprawy szybkości strony, ponieważ zasadniczo sprawiasz, że kod witryny jest tak lekki, jak to tylko możliwe.

Usunięcie plików blokujących renderowanie może również poprawić rankingi w wyszukiwarkach, ponieważ wydajność witryny i zaangażowanie użytkowników to tylko niektóre ze wskaźników, które firmy takie jak Google wykorzystują podczas oceny witryn.

Jak przetestować swoją witrynę pod kątem zasobów blokujących renderowanie

Zanim zaczniesz eliminować pliki ze swojej witryny, musisz sprawdzić, czy zawiera ona zasoby blokujące renderowanie. Długie czasy ładowania mogą być również spowodowane innymi czynnikami, takimi jak niezoptymalizowane obrazy, niska jakość hostingu lub zbyt duża liczba wtyczek.

Aby przetestować swoją witrynę pod kątem zasobów blokujących renderowanie, możesz użyć narzędzia takiego jak Google PageSpeed ​​Insights. Dzięki temu uzyskasz szczegółowe raporty na temat skuteczności Twojej strony oraz sugestie, które pomogą Ci poprawić wyniki.

Aby rozpocząć, po prostu wpisz adres URL swojej witryny w polu wyszukiwania i kliknij opcję Analizuj . Narzędzie przetestuje następnie wydajność Twojej witryny. Gdy będzie gotowy, zobaczysz ocenę swoich podstawowych wskaźników internetowych, które są zestawem wskaźników dotyczących szybkości Twojej strony.

PageSpeed ​​Insights ułatwia też sprawdzanie zasobów blokujących renderowanie. Aby to zrobić, możesz przewinąć w dół do sekcji Możliwości . W tym miejscu musisz poszukać sugestii o nazwie Wyeliminuj zasoby blokujące renderowanie .

Jeśli go klikniesz, PageSpeed ​​Insights wyświetli listę zasobów blokujących renderowanie, które zostały zidentyfikowane podczas testu. W prawej części strony zobaczysz szacunkowe oszczędności, jeśli usuniesz lub odroczysz te pliki.

Po zidentyfikowaniu zasobów blokujących renderowanie możesz usunąć je ze swojej witryny. W ten sposób możesz poprawić szybkość strony i wygodę użytkownika.

Jak wyeliminować zasoby blokujące renderowanie w WordPress?

Teraz, gdy wiesz, jak zidentyfikować zasoby blokujące renderowanie w WordPressie, możesz zastanawiać się, jak usunąć je ze swojej witryny. Na szczęście przygotowaliśmy listę różnych sposobów, w jakie możesz to zrobić, zaczynając od najprostszych metod.

1. Zoptymalizuj ładowanie CSS

Jednym ze sposobów na wyeliminowanie zasobów blokujących renderowanie jest optymalizacja ładowania CSS witryny. Jak wspomniano wcześniej, przeglądarka ładuje Twoją witrynę od góry do dołu. Kiedy musi przetworzyć określone pliki, może to opóźnić proces ładowania.

Należy pamiętać, że do załadowania wymagane są tylko niektóre pliki CSS. Dlatego, gdy optymalizujesz ładowanie CSS, możesz najpierw wyświetlić najważniejsze pliki.

Chociaż możesz ręcznie usunąć kod CSS blokujący renderowanie, możesz zainstalować wtyczkę, aby uprościć ten proces. Jetpack Boost umożliwia optymalizację witryny z pulpitu WordPress.

Dzięki tej wtyczce możesz zoptymalizować ładowanie CSS, odroczyć nieistotny JavaScript i wdrożyć leniwe ładowanie w kilku prostych krokach. To jeden z najłatwiejszych sposobów na wyeliminowanie zasobów blokujących renderowanie w WordPressie.

Aby rozpocząć, przejdź do Wtyczki → Dodaj nowy na pulpicie WordPress i wyszukaj Jetpack Boost. Następnie zainstaluj i aktywuj wtyczkę w swojej witrynie.

Jeśli masz już zainstalowany Jetpack, możesz przejść do Jetpack → Mój Jetpack . Na liście produktów Jetpack poszukaj Boost i kliknij Aktywuj .

Po aktywacji wtyczki kliknij zakładkę Jetpack Boost i wybierz Rozpocznij .

Jetpack automatycznie poda wynik wydajności Twojej witryny. Zobaczysz ocenę literową, a także szczegółowe informacje o wynikach na urządzeniach mobilnych i komputerach.

Następnie przewiń w dół do Optymalizuj ładowanie CSS i włącz tę funkcję. Po aktywacji Jetpack Boost przeniesie krytyczny CSS Twojej witryny na górę Twoich stron, dzięki czemu ładują się one szybciej.

2. Odłóż niepotrzebny JavaScript

Optymalizacja ładowania CSS to nie jedyny krok, który możesz podjąć, aby wyeliminować zasoby blokujące renderowanie w WordPressie. Możesz także odroczyć nieistotny kod JavaScript, aby jeszcze bardziej skrócić czas wczytywania witryny.

Odraczając nieistotny JavaScript, możesz odłożyć niektóre zadania do czasu załadowania treści. Jeśli niektóre pliki JavaScript nie są niezbędne do załadowania strony, możesz uniemożliwić przeglądarce ich przetwarzanie.

Na szczęście jest to proste do wdrożenia dzięki wtyczce Jetpack Boost. Po zoptymalizowaniu ładowania CSS możesz łatwo odroczyć również nieistotny JavaScript.

Aby to zrobić, znajdź sekcję Odrocz nieistotny kod JavaScript , która znajduje się pod Optymalizuj ładowanie CSS , i włącz przełącznik.

Po włączeniu tego ustawienia wtyczka ponownie obliczy ogólną wydajność strony. Będziesz mógł zobaczyć swój wynik przed i po użyciu Jetpack Boost.

Porównaj wyniki na zrzutach ekranu przed i po przejściu przez ten proces. Przekonasz się, że optymalizacja ładowania CSS i odkładanie nieistotnego JavaScriptu skutecznie poprawiły szybkość strony. Bez konieczności przetwarzania obszernych skryptów przeglądarki mogą szybciej ładować Twoje treści.

3. Odłóż obrazy poza ekranem

Obrazy nie są zasobem blokującym renderowanie, ale możesz zoptymalizować proces ich ładowania, aby poprawić renderowanie strony. Często witryny internetowe zawierają obrazy poza ekranem, które nie pojawiają się na stronie, dopóki użytkownik nie wykona interakcji, takiej jak przewijanie. Ponieważ nie są one krytyczne dla ładowania strony internetowej, możesz je odroczyć z leniwym ładowaniem.

Lazy image loading obejmuje tylko ładowanie obrazów, które mogą zobaczyć odwiedzający. Gdy ktoś zacznie przewijać, te obrazy zostaną załadowane tuż przed pojawieniem się na stronie.

Bez opóźnionego ładowania przeglądarka spróbuje załadować jednocześnie wszystkie obrazy na stronie. Oznacza to, że ładowanie treści potrwa dłużej, co może skłonić użytkowników do opuszczenia witryny.

Jeśli odwiedzający korzysta z komputera stacjonarnego, regularne ładowanie może nie stanowić problemu. Z drugiej strony smartfony i tablety mają mniejsze ekrany i mniejszą przepustowość. Jeśli Twoja witryna w pełni załaduje wszystkie obrazy jednocześnie, może to zwiększyć obciążenie przepustowości i wydłużyć czas ładowania dla użytkowników telefonów komórkowych. Lazy loading rozwiązuje ten problem.

Możesz użyć Jetpack Boost, aby umożliwić leniwe ładowanie w swojej witrynie. Po prostu znajdź funkcję Lazy Image Loading i włącz ją.

W ten sposób Twoja witryna załaduje obrazy tylko wtedy, gdy odwiedzający przewinie stronę w dół. Chociaż obrazy nie są zasobem blokującym renderowanie, włączenie opóźnionego wczytywania może pomóc w zwiększeniu szybkości strony.

4. Ręcznie usuń blokujący renderowanie JavaScript

Chociaż instalacja wtyczki optymalizacyjnej jest znacznie prostszym rozwiązaniem, możesz również ręcznie usunąć zasoby blokujące renderowanie. Najlepiej byłoby rozważyć tę opcję tylko wtedy, gdy jesteś doświadczonym programistą. Ten proces może być również przydatny, jeśli chcesz zmniejszyć liczbę wtyczek w swojej witrynie.

Optymalizując JavaScript, możesz dodać do swoich plików atrybut asynchroniczny lub odroczenia. Spowoduje to oznaczenie niekrytycznych skryptów i poinformuje przeglądarkę, aby renderowała je osobno. Oba atrybuty mogą służyć do szybszego ładowania treści HTML.

W normalnym skrypcie plik HTML jest analizowany, aż dotrze do pliku skryptu. Następnie parsowanie zostanie wstrzymane na czas pobierania skryptu. Po pobraniu i wykonaniu analizowanie zostaje wznowione.

Atrybut async umożliwia przeglądarce pobieranie kodu JavaScript podczas analizowania reszty kodu HTML. Po pobraniu może zatrzymać analizowanie kodu HTML w celu wykonania skryptu.

Podobnie atrybut defer umożliwia przeglądarce pobranie skryptu podczas analizowania kodu HTML. Różnica polega na tym, że z wykonaniem skryptu czeka on również na zakończenie parsowania HTML.

Aby zaimplementować jeden z tych atrybutów, musisz dodać fragment kodu do pliku functions.php . Najpierw musisz znaleźć tag <script> dla zasobu blokującego renderowanie. Następnie możesz dodać atrybut asynchroniczny w następujący sposób:

 <script src="resource.js" async></script>

Alternatywnie, oto jak może wyglądać skrypt z atrybutem odroczenia:

 http://resource.js

Chociaż wtyczka może obsłużyć te atrybuty za Ciebie, możesz chcieć wykonać to zadanie samodzielnie. Jeśli tak, ważne jest, abyś wiedział, kiedy użyć każdego atrybutu. W przypadku nieistotnych skryptów, które opierają się na innym skrypcie, musisz użyć atrybutu odroczenia. W przypadku wszystkich innych skryptów możesz przejść z asynchronią.

5. Zastosuj asynchroniczne lub odroczone atrybuty za pomocą wtyczki

Jeśli masz problemy z ręczną edycją skryptów, możesz użyć wtyczki, takiej jak Async JavaScript. To narzędzie pozwala w pełni kontrolować, które skrypty mają atrybut asynchroniczny lub odroczenia.

Po zainstalowaniu wtyczki przejdź do Ustawienia → Asynchroniczny JavaScript i wybierz Włącz asynchroniczny JavaScript .

Następnie przejdź do sekcji Async JavaScript Method . Tutaj możesz wybrać, czy chcesz włączyć atrybuty asynchroniczne, czy odroczone.

Ponieważ wiele wtyczek opiera się na jQuery, dobrym pomysłem jest wykluczenie tych skryptów. Jeśli spróbujesz zastosować atrybuty asynchroniczne do jQuery, możesz skończyć z uszkodzeniem swojej witryny.

W razie wątpliwości możesz użyć atrybutu defer, ale najlepszym sposobem działania jest całkowite wykluczenie jQuery.

Teraz możesz wyświetlić listę określonych skryptów, które chcesz odroczyć lub asynchronicznie. Ważne jest, aby upewnić się, że każdy skrypt został umieszczony we właściwej sekcji.

W sekcji Wykluczenie skryptów możesz wyświetlić listę wszystkich skryptów, które chcesz wykluczyć z tego procesu.

U dołu strony zobaczysz również opcje wykluczania wtyczek i motywów. Gdy umieścisz tutaj motyw lub wtyczkę, ich skrypty nie będą miały zastosowania do atrybutów asynchronicznych lub odroczonych.

Po dostosowaniu tych opcji możesz przejść dalej i kliknąć Zapisz ustawienia . Ta metoda może być skutecznym środkiem między ręczną edycją skryptów a umożliwieniem wtyczce wykonania tego procesu za Ciebie. Alternatywnie możesz użyć uniwersalnego narzędzia, takiego jak Jetpack Boost, aby usunąć te dodatkowe kroki.

Często zadawane pytania (FAQ)

Jak widać, istnieje kilka sposobów na wyeliminowanie zasobów blokujących renderowanie w WordPressie. Przyjrzyjmy się niektórym z najczęstszych pytań dotyczących tego procesu.

Jak mogę przetestować moją witrynę WordPress pod kątem zasobów blokujących renderowanie?

Możesz przetestować swoją witrynę WordPress, wpisując jej adres URL w PageSpeed ​​Insights. W wynikach poszukaj zasobów blokujących renderowanie w sekcji Możliwości .

Czy zasoby blokujące renderowanie są powiązane z Core Web Vitals?

Tak, zasoby blokujące renderowanie mogą negatywnie wpłynąć na wyniki kluczowych wskaźników internetowych Twojej witryny. Wszelkie niezoptymalizowane skrypty mogą wydłużyć największe malowanie treści (LCP), całkowity czas blokowania (TBT) i pierwsze malowanie treści (FCP). Jeśli testujesz swoją witrynę za pomocą oprogramowania Core Web Vitals, takiego jak PageSpeed ​​Insights, może to zasugerować wyeliminowanie zasobów blokujących renderowanie, aby poprawić wynik.

Czy HTML jest zasobem blokującym renderowanie?

Tak, wszelkie importy HTML, skrypty lub arkusze stylów, które opóźniają proces renderowania strony, mogą być zasobem blokującym renderowanie.

Czy obrazy blokują renderowanie?

Nie, obrazy nie są zasobem blokującym renderowanie, ale nadal możesz chcieć zoptymalizować obrazy, aby zwiększyć szybkość strony. Korzystając z Jetpack Boost, możesz odroczyć obrazy poza ekranem, aby załadować tylko to, co jest widoczne na ekranie. Następnie obrazy zostaną załadowane, gdy odwiedzający przewinie stronę w dół.

Zoptymalizuj swoją witrynę, aby przyspieszyć wczytywanie

Usunięcie plików blokujących renderowanie może skrócić czas wczytywania witryny. Może to przyczynić się do lepszego doświadczenia użytkownika, co może zatrzymać odwiedzających na Twojej stronie przez dłuższy czas. Dlatego eliminacja zasobów blokujących renderowanie może być skutecznym sposobem na optymalizację witryny w celu lepszego osiągnięcia celów.

Oto pięć sposobów na wyeliminowanie zasobów blokujących renderowanie w WordPressie:

1. Zoptymalizuj ładowanie CSS dzięki Jetpack Boost.
2. Odłóż niepotrzebny JavaScript.
3. Odłóż obrazy poza ekranem.
4. Ręcznie usuń zasoby blokujące renderowanie.
5. Zastosuj asynchroniczne lub odroczone atrybuty za pomocą wtyczki Async JavaScript.

Po usunięciu zasobów blokujących renderowanie Twoi goście mogą cieszyć się szybszym czasem ładowania!