Jak naprawiono JavaScript i CSS blokujące renderowanie w WordPressie

Napotkanie problemów z blokującymi renderowanie skryptami JavaScript i CSS w witrynie WordPress może być frustrujące. Problemy te mogą spowolnić działanie witryny i wpłynąć na jej wydajność. Powolna witryna może odstraszyć odwiedzających i wpłynąć na rankingi w wyszukiwarkach.

Kiedy sprawdzasz swoją witrynę w Google PageSpeed Insights, możesz zobaczyć sugestię, aby wyeliminować te zasoby blokujące renderowanie. Niestety, narzędzie nie dostarcza jasnych instrukcji, jak poprawić ten problem w WordPress.

Dobrą wiadomością jest to, że istnieją narzędzia, które mogą sprawić, że poprawka blokujących renderowanie skryptów JavaScript i CSS będzie mniej skomplikowana niż się wydaje. Możesz użyć wtyczki buforującej, takiej jak WP Rocket lub Autoptimize, aby zoptymalizować swoją witrynę poprzez minifikację i odraczanie skryptów, co skraca czas ładowania i poprawia wyniki PageSpeed.

W tym artykule przeprowadzimy Cię przez kroki, które pozwolą Ci rozwiązać te problemy w Twojej witrynie WordPress.

Co to jest JavaScript i CSS blokujące renderowanie?

Render-blocking JavaScript i CSS to pliki, które uniemożliwiają witrynie internetowej wyświetlenie strony internetowej przed wczytywaniem tych plików.

Każda witryna internetowa WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS do front-endu twojej witryny.

Skrypty te mogą wydłużać czas wczytywania twojej witryny, a także blokować renderowanie strony.

Przeglądarka użytkownika będzie musiała załadować te skrypty i CSS przed załadowaniem reszty kodu HTML na stronie. Oznacza to, że użytkownicy korzystający z wolniejszego połączenia muszą poczekać kilka milisekund dłużej, aby zobaczyć stronę.

Te skrypty i arkusze stylów są określane jako JavaScript i CSS blokujące renderowanie.

Właścicielewitryn internetowych WordPress, którzy starają się osiągnąć wynik Google PageSpeed na poziomie 100, będą musieli poprawić ten problem, aby osiągnąć ten doskonały wynik.

Co to jest Google PageSpeed Score?

Google PageSpeed Insights to narzędzie do testowania szybkości witryny stworzone przez Google, aby pomóc właścicielom witryn w optymalizacji i testowaniu ich witryn. Narzędzie to testuje witrynę pod kątem wytycznych Google dotyczących szybkości i oferuje sugestie dotyczące poprawy czasu ładowania strony.

Pokazuje wynik na podstawie liczby audytów, które przeszła witryna.

Większość stron uzyskuje wyniki w przedziale 50-70. Jednak niektórzy właściciele witryn czują się zmuszeni do osiągnięcia 100 (najwyższego wyniku, jaki może uzyskać strona).

Czy naprawdę potrzebujesz idealnego wyniku „100” w Google PageSpeed Score?

Celem Google PageSpeed Insights jest dostarczenie wskazówek pozwalających na poprawę szybkości i wydajności witryny. Nie musisz jednak ściśle przestrzegać tych zasad.

Pamiętaj, że szybkość jest tylko jednym z wielu wskaźników optymalizacji witryny internetowej (SEO), które pomagają Google określić, jak uszeregować twoją witrynę. Szybkość jest tak ważna, ponieważ poprawia komfort korzystania z Twojej witryny.

Lepsze doświadczenie użytkownika wymaga znacznie więcej niż tylko szybkości. Musisz także oferować przydatne informacje, lepszy interfejs użytkownika i angażującą treść z tekstem, obrazkami i filmami.

Następnie, celem powinno być stworzenie szybkiej strony internetowej, która oferuje doskonałe wrażenia użytkownika.

Zalecamy stosowanie zasad Google PageSpeed jako sugestii. Jeśli możesz je łatwo wdrożyć bez rujnowania doświadczenia użytkownika, to świetnie. W przeciwnym razie powinieneś spróbować zrobić jak najwięcej, a następnie nie martwić się o resztę.

Mając to na uwadze, przyjrzymy się temu, co można zrobić, aby poprawić blokujące renderowanie JavaScript i CSS w WordPress. Omówimy 2 metody, które wyeliminują zasoby blokujące renderowanie w WordPress. Możesz wybrać tę, która najlepiej pasuje do Twojej witryny:

Zanurzmy się i sprawmy, by Twoja witryna działała płynnie!

Metoda 1: Poprawka skryptów i CSS blokujących renderowanie za pomocą WP Rocket

W tej metodzie będziemy używać wtyczki WP Rocket.

Jest to najlepsza wtyczka do buforowania i optymalizacji WordPress na rynku, która pozwala szybko poprawić wydajność witryny bez żadnych umiejętności technicznych ani skomplikowanej konfiguracji.

Najpierw należy zainstalować i aktywować wtyczkę WP Rocket. Więcej szczegółów można znaleźć w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

WP Rocket działa po wyjęciu z pudełka: włącza buforowanie z optymalnymi ustawieniami dla Twojej witryny. Możesz dowiedzieć się więcej na ten temat w naszym kompletnym przewodniku, jak poprawnie zainstalować i skonfigurować WP Rocket w WordPress.

Domyślnie nie włącza ona opcji optymalizacji JavaScript i CSS. Optymalizacje te mogą potencjalnie mieć wpływ na wygląd twojej witryny internetowej lub niektóre funkcje, dlatego wtyczka umożliwia opcjonalne włączenie tych ustawień.

Aby to zrobić, należy odwiedzić stronę Ustawienia ” WP Rocket i przejść do karty „Optymalizacja plików”.

Stąd wystarczy przewinąć do sekcji „Pliki CSS” i zaznaczyć pola obok „Zminimalizuj CSS”, „Połącz pliki CSS” i „Zoptymalizuj dostarczanie CSS”.

W przypadku ustawienia „Optymalizuj dostarczanie CSS” WP Rocket zaleca wybranie metody„Usuwaj nieużywane CSS„.

Oprócz oferowania najlepszej wydajności, może pomóc zmniejszyć rozmiar strony i liczbę żądań HTTP.

Następnie należy przewinąć do sekcji „Pliki JavaScript”.

Z tego miejsca można sprawdzić wszystkie opcje w celu maksymalnej poprawy wydajności.

Pliki JavaScript można minifikować i łączyć podobnie jak w przypadku CSS.

Można również uniemożliwić WordPressowi ładowanie pliku jQuery Migrate. Skrypt ten jest ładowany w celu zapewnienia kompatybilności wtyczek i motywów korzystających ze starych wersji jQuery.

Większość witryn internetowych nie potrzebuje tego pliku, ale i tak warto sprawdzić swoją witrynę internetową, aby upewnić się, że usuwanie go nie ma wpływu na twój motyw lub wtyczki.

Następnie przewińmy nieco dalej i zaznaczmy pola obok opcji „Load JavaScript Defered” i „Safe Mode for jQuery”.

Opcje te opóźniają ładowanie nieistotnych skryptów JavaScript, a tryb bezpieczny jQuery pozwala wczytywać jQuery dla motywów, które mogą używać go inline. Możesz pozostawić tę opcję niezaznaczoną, jeśli masz pewność, że twój motyw nigdzie nie używa jQuery inline.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać ustawienia.

Następnie możesz również wyczyścić pamięć podręczną w WP Rocket przed ponownym przetestowaniem twojej witryny internetowej za pomocą Google PageSpeed Insights.

Na naszej witrynie testowej udało nam się osiągnąć 100% wynik na urządzeniach stacjonarnych, a problem blokowania renderowania został rozwiązany zarówno w wynikach mobilnych, jak i stacjonarnych.

Metoda 2: Poprawka skryptów i CSS blokujących renderowanie za pomocą Autoptimize

W przypadku tej metody użyjemy oddzielnej wtyczki stworzonej specjalnie w celu poprawy dostarczania plików CSS i JS witryny. Chociaż ta wtyczka wykonuje swoją pracę, nie ma innych potężnych funkcji, które ma WP Rocket.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Autoptimize, darmową wtyczkę przyspieszającą działanie witryny. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji należy przejść do Ustawienia ” Autoptymalizacja, aby skonfigurować ustawienia wtyczki.

Najpierw zaznaczmy pole obok „Optymalizuj kod JavaScript” w bloku „Opcje JavaScript”. Tutaj musisz upewnić się, że opcja „Agreguj pliki JS” jest odznaczona.

Następnie przewiń w dół do pola „Opcje CSS” i zaznacz opcję „Optymalizuj kod CSS”.

Po prostu upewnij się, że opcja „Agreguj pliki CSS” jest odznaczona.

Możesz teraz kliknąć przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać ustawienia.

Przetestuj swoją witrynę za pomocą narzędzia PageSpeed Insights. Dzięki tym podstawowym ustawieniom z powodzeniem poprawiliśmy problem blokowania renderowania na naszej stronie demonstracyjnej.

Jeśli nadal istnieją skrypty blokujące renderowanie, możesz wrócić do strony ustawień wtyczki i przejrzeć ustawienia zarówno w opcjach JavaScript, jak i CSS.

Można na przykład zezwolić wtyczce na dołączanie wbudowanych skryptów JS i usuwanie skryptów, które są domyślnie wykluczone, takich jak seal.js lub jquery.js. Następnie wystarczy kliknąć przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać zmiany i opróżnić pamięć podręczną wtyczki.

Gdy skończysz, sprawdź swoją witrynę internetową ponownie za pomocą narzędzia PageSpeed Insights.

Jak działa automatyczna optymalizacja?

Autoptimize agreguje wszystkie zapisane w kolejce pliki JavaScript i CSS. Następnie tworzy zminimalizowane pliki CSS i JavaScript i serwuje pamięci podręcznej kopie do twojej witryny internetowej jako asynchroniczne lub odroczone.

Pozwala to na poprawienie problemu skryptów i stylów blokujących renderowanie. Należy jednak pamiętać, że może to również wpłynąć na wydajność lub wygląd witryny.

Co zrobić, jeśli JavaScript i CSS blokujące renderowanie nadal istnieją?

W zależności od tego, w jaki sposób wtyczki i motyw WordPress używają JavaScript i CSS, całkowite poprawienie wszystkich blokujących renderowanie problemów JavaScript i CSS może być trudne.

Podczas gdy powyższe narzędzia mogą pomóc, wtyczki mogą wymagać pewnych skryptów do prawidłowego działania na innym poziomie priorytetu. W takim przypadku powyższe rozwiązania mogą złamać funkcjonalność takich wtyczek lub spowodować ich nieoczekiwane zachowanie.

Zamiast całkowicie eliminować problemy związane z blokowaniem renderowania, zalecamy zastosowanie alternatywnych podejść w celu przyspieszenia witryny. Na przykład, można użyć usługi CDN do obsługi statycznych plików JavaScript i CSS i skrócić czas ładowania.

Aby uzyskać więcej informacji, przeczytaj nasz przewodnik po zwiększaniu szybkości i wydajności WordPressa.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się poprawki blokujących renderowanie skryptów JavaScript i CSS w WordPress. Warto również zapoznać się z naszym artykułem o tym , jak łatwo naprawić błąd „This Site Can’t Be Reached” oraz z naszą ekspercką listą najczęstszych błędów WordPressa i sposobów ich naprawy.

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.