Jak naprawić blokowanie renderowania JavaScript i CSS w WordPress

Czy chcesz wyeliminować blokowanie renderowania JavaScript i CSS w WordPress?

Jeśli przetestujesz swoją witrynę na Google PageSpeed insights, prawdopodobnie zobaczysz sugestię wyeliminowania skryptów blokujących renderowanie i CSS. Nie zawiera jednak żadnych szczegółów na temat tego, jak to zrobić w witrynie WordPress.

W tym artykule pokażemy, jak łatwo naprawić blokowanie renderowania JavaScript i CSS w WordPress, aby poprawić wynik Google PageSpeed.

Co To jest blokowanie renderowania JavaScript i CSS?

Blokowanie renderowania JavaScript i CSS to pliki, które uniemożliwiają witrynie wyświetlanie strony internetowej przed załadowaniem tych plików.

Każda witryna WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS do front-end Twojej witryny. Skrypty te mogą wydłużyć czas ładowania strony witryny, a także zablokować 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 będą musieli poczekać kilka milisekund więcej, aby zobaczyć stronę.

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

Właściciele stron internetowych, którzy próbują osiągnąć wynik Google PageSpeed 100, będą musieli rozwiązać ten problem, aby osiągnąć ten doskonały wynik.

Co to jest wynik Google PageSpeed?

Google PageSpeed Insights to narzędzie do testowania prędkości witryny stworzone przez Google, aby pomóc właścicielom witryn zoptymalizować i przetestować swoje witryny. To narzędzie testuje Twoją witrynę zgodnie z wytycznymi Google dotyczącymi szybkości i oferuje sugestie, aby poprawić czas ładowania strony w witrynie.

Pokazuje wynik oparty na liczbie zasad, które przechodzi Twoja witryna. Większość stron internetowych znajduje się pomiędzy 50-70. Jednak niektórzy właściciele witryn czują się zmuszeni do osiągnięcia 100 (najwyższy wynik strony).

Czy naprawdę potrzebujesz idealnego wyniku ” 100 ” Google PageSpeed?

Celem Google PageSpeed insights jest dostarczenie wskazówek dotyczących poprawy szybkości i wydajności witryny. Nie musisz ściśle przestrzegać tych zasad.

Pamiętaj, że szybkość jest tylko jedną z wielu wskaźników SEO witryny, które pomagają Google określić, jak oceniać Twoją witrynę. Powodem, dla którego prędkość jest tak ważna, jest to, że poprawia wrażenia użytkownika w witrynie.

Lepsze wrażenia użytkownika wymagają znacznie więcej niż tylko szybkości. Musisz także oferować przydatne informacje, lepszy interfejs użytkownika i angażującą zawartość z tekstem, obrazami i filmami.

Twoim celem powinno być stworzenie szybkiej strony internetowej, która oferuje wspaniałe wrażenia użytkownika.

Podczas ostatniego przeprojektowania WPBeginner skupiliśmy się na szybkości, a także na poprawie komfortu użytkowania.

Zalecamy używanie zasad Google Pagespeed jako sugestii, a jeśli możesz je łatwo wdrożyć bez rujnowania doświadczenia użytkownika, to świetnie. W przeciwnym razie powinieneś starać się robić jak najwięcej, a potem nie martwić się o resztę.

Powiedziawszy to, rzućmy okiem na to, co możesz zrobić, aby naprawić JavaScript i CSS blokujące renderowanie w WordPress.

Omówimy dwie metody, które naprawią blokowanie renderowania JavaScript i CSS w WordPress. Możesz wybrać ten, który najlepiej pasuje do twojej witryny.

1. Fix renderowanie skryptów blokujących i CSS za pomocą wp Rocket

W tej metodzie będziemy używać wtyczki WP Rocket. Jest to najlepsza wtyczka buforująca WordPress na rynku i pozwala szybko poprawić wydajność witryny bez żadnych umiejętności technicznych lub skomplikowanej konfiguracji.

Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

WP Rocket działa po wyjęciu z pudełka i 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 opcji optymalizacji JavaScript i CSS. Te optymalizacje mogą potencjalnie wpłynąć na wygląd witryny lub niektóre funkcje, dlatego wtyczka umożliwia opcjonalne włączenie tych ustawień.

Aby to zrobić, musisz odwiedzić Ustawienia ” wp Rocket strony, a następnie przejść do zakładki „Optymalizacja plików”. Stąd przewiń do sekcji Pliki CSS i zaznacz pola obok Minify CSS, Połącz Pliki CSS i zoptymalizuj opcje dostarczania CSS.

Uwaga: WP Rocket spróbuje zminimalizować wszystkie pliki CSS, połączyć je i załadować tylko CSS potrzebny do widocznej części witryny. Może to wpłynąć na wygląd witryny, więc musisz dokładnie przetestować swoją witrynę na wielu urządzeniach i rozmiarach ekranu.

Następnie musisz przewinąć do sekcji pliki JavaScript. Tutaj możesz sprawdzić wszystkie opcje, aby uzyskać maksymalną poprawę wydajności.

Możesz minifikować i łączyć pliki JavaScript, tak jak w przypadku CSS.

Możesz również zatrzymać WordPress od ładowania pliku jQuery Migrate. Jest to skrypt, który ładuje WordPress, aby zapewnić kompatybilność wtyczek i motywów przy użyciu starych wersji jQuery.

Większość witryn nie potrzebuje tego pliku, ale nadal chcesz sprawdzić swoją witrynę, aby upewnić się, że usunięcie go nie wpływa na motyw lub wtyczki.

Następnie przewiń w dół nieco dalej i zaznacz pola obok opcji „załaduj JavaScript Defered” i „Tryb awaryjny dla jQuery”.

Te opcje opóźniają Ładowanie nieistotnych skryptów JavaScript, a tryb awaryjny jQuery umożliwia ładowanie jQuery dla motywów, które mogą go używać w wierszu. Możesz pozostawić tę opcję niezaznaczoną, jeśli masz pewność, że Twój motyw nie używa inline jQuery nigdzie.

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

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

Na naszej stronie testowej udało nam się uzyskać 100% punktów na komputerze, a problem z blokowaniem renderowania został rozwiązany zarówno w wynikach mobilnych, jak i stacjonarnych.

2. Fix renderowanie skryptów blokujących i CSS z Autoptimize

W tej metodzie będziemy używać osobnej wtyczki stworzonej specjalnie w celu poprawy dostarczania plików CSS i JS Twojej witryny. Podczas gdy ta wtyczka wykonuje zadanie, nie ma innych potężnych funkcji, które ma WP Rocket.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Autoptimize. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” Autoptimize strona konfiguracji ustawień wtyczki.

Najpierw musisz zaznaczyć pole obok opcji „zoptymalizuj kod JavaScript”w bloku opcji JavaScript. Upewnij się, że opcja’ Aggregate js-files ’ jest odznaczona.

Następnie przewiń w dół do opcji CSS i zaznacz opcję „zoptymalizuj kod CSS”. Upewnij się, że opcja’ Agreguj pliki CSS ’ nie jest zaznaczona.

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

Przetestuj swoją witrynę za pomocą narzędzia Page Speed Insights. Na naszej stronie demonstracyjnej udało nam się rozwiązać problem blokowania renderowania za pomocą tych podstawowych ustawień.

Jeśli nadal istnieją Skrypty blokujące renderowanie, musisz wrócić do strony ustawień wtyczki i przejrzeć opcje pod opcjami JavaScript i CSS.

Na przykład możesz zezwolić wtyczce na włączenie inline JS i usunięcie skryptów, które są domyślnie wyłączone, takich jak seal.js lub jquery.js.

Kliknij przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać zmiany i pustą pamięć podręczną wtyczki.

Po zakończeniu sprawdź ponownie swoją witrynę za pomocą narzędzia Prędkość strony.

Jak to działa?

Autoptimize agreguje wszystkie zapytania JavaScript i CSS. Następnie tworzy minifigurowane pliki CSS i JavaScripts i serwuje kopie w pamięci podręcznej do witryny jako asynchroniczne lub odroczone.

Pozwala to rozwiązać problem ze skryptami i stylami blokującymi renderowanie. Należy jednak pamiętać, że może to również wpływać na wydajność lub wygląd witryny.

Rozwiązywanie problemów

W zależności od tego, w jaki sposób wtyczki i motyw WordPress wykorzystują JavaScript i CSS, całkowite naprawienie wszystkich problemów z blokowaniem renderowania JavaScript i CSS może być dość trudne.

Chociaż powyższe narzędzia mogą pomóc, wtyczki mogą potrzebować pewnych skryptów na innym poziomie priorytetu, aby działały poprawnie. W takim przypadku powyższe rozwiązania mogą złamać funkcjonalność takich wtyczek, lub mogą zachowywać się nieoczekiwanie.

Google może nadal pokazywać pewne problemy, takie jak Optymalizacja dostarczania CSS dla zawartości powyżej fałdu. WP Rocket pozwala to naprawić, dodając ręcznie krytyczne CSS wymagane do wyświetlenia powyższego obszaru składania motywu.

Jednak może być dość trudno dowiedzieć się, jaki kod CSS będzie potrzebny do wyświetlenia nad zawartością zagięcia.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak naprawić blokowanie renderowania JavaScript i CSS w WordPress. Możesz również zobaczyć nasz najlepszy przewodnik, jak przyspieszyć wydajność WordPress dla początkujących i nasze porównanie najlepiej zarządzanych firm hostingowych WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.