Jak naprawiono JavaScript i CSS blokujące renderowanie w WordPressie

Czy próbujesz wyeliminować JavaScript i CSS blokujące renderowanie w WordPress?

Jeśli przetestujesz swoją witrynę internetową w Google PageSpeed Insights, prawdopodobnie zobaczysz sugestię, aby wyeliminować skrypty i CSS blokujące renderowanie. Nie zawiera ona jednak żadnych szczegółów na temat tego, jak to zrobić na twojej witrynie WordPress.

W tym artykule pokażemy ci, jak łatwo poprawić JavaScript i CSS blokujące renderowanie w WordPressie, aby poprawić twój wynik Google PageSpeed.

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 wczytywać te skrypty i CSS przed załadowaniem reszty kodu HTML na stronie. Oznacza to, że użytkownicy korzystający z wolniejszego łącza będą musieli 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 internetowych w optymalizacji i testowaniu ich witryn. Narzędzie to testuje twoją witrynę internetową pod kątem wytycznych Google dotyczących szybkości i oferuje sugestie dotyczące poprawy czasu wczytywania strony.

Pokazuje on wynik na podstawie liczby audytów, które przeszła twoja witryna. Większość witryn internetowych uzyskuje gdzieś pomiędzy 50-70. Jednak niektórzy właściciele witryn internetowych czują się zmuszeni do osiągnięcia 100 (najwyższy wynik, jaki może uzyskać strona).

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

Celem Google PageSpeed Insights jest dostarczenie Ci wskazówek, które pozwolą Ci poprawić szybkość i wydajność Twojej witryny internetowej. Nie jest wymagane ścisłe przestrzeganie 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.

Twoim celem powinno być stworzenie szybkiej witryny 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 potem nie martwić się o resztę.

Powiedziawszy to, przyjrzyjmy się, co można zrobić, aby poprawić blokujące renderowanie JavaScript i CSS w WordPress.

Omówimy dwie metody, które wyeliminują zasób blokujący renderowanie w WordPress. Możesz wybrać tę, która działa najlepiej dla twojej witryny internetowej:

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 na rynku wtyczka do buforowania i optymalizacji WordPress, która pozwala szybko poprawić wydajność twojej witryny internetowej bez żadnych umiejętności technicznych ani skomplikowanej konfiguracji.

Najpierw należy zainstalować i włączyć 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 pamięć podręczną z optymalnymi ustawieniami dla twojej witryny internetowej. 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ń.

W tym celu należy przejść na stronę Ustawienia ” WP Rocket, a następnie przełączyć się na kartę „Optymalizacja plików”.

Stąd przewiń do sekcji Pliki CSS i zaznacz 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. W tym miejscu możesz zaznaczyć wszystkie opcje, aby uzyskać maksymalną poprawę wydajności.

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

Można również uniemożliwić WordPressowi wczytywanie pliku jQuery Migrate. Jest to skrypt, który WordPress wczytuje w celu zapewnienia zgodności dla 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ń nieco dalej w dół i zaznacz pola obok opcji „Wczytywanie JavaScript z opóźnieniem” i „Tryb bezpieczny dla 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ć twoje 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 będziemy używać oddzielnej wtyczki stworzonej specjalnie w celu poprawy dostarczania plików CSS i JS Twojej witryny internetowej. Chociaż ta wtyczka wykonuje swoją pracę, nie ma innych potężnych funkcji, które ma WP Rocket.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie Autoptimize, darmowej wtyczki przyspieszającej działanie witryny internetowej. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” Autoptymalizacja, aby skonfigurować ustawienia wtyczki.

Najpierw musisz zaznaczyć pole obok „Optymalizuj kod JavaScript” w bloku opcji JavaScript. Upewnij się, że opcja „Agreguj pliki JS” nie jest zaznaczona.

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

Upewnij się, że opcja „Agreguj pliki CSS” nie jest zaznaczona.

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

Przetestuj swoją witrynę internetową za pomocą narzędzia PageSpeed Insights. Na naszej witrynie demonstracyjnej udało nam się poprawić problem blokowania renderowania za pomocą tych podstawowych ustawień.

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 usuwać skrypty, które są domyślnie wykluczone, takie jak seal.js lub jquery.js. Następnie wystarczy kliknąć przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać twoje zmiany i opróżnić pamięć podręczna 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 mieć również wpływ na wydajność lub wygląd twojej witryny internetowej.

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

W zależności od tego, w jaki sposób wtyczki i twój motyw WordPress używają JavaScript i CSS, może być trudno całkowicie poprawić wszystkie problemy JavaScript i CSS blokujące renderowanie.

Podczas gdy powyższe narzędzia mogą pomóc, twoja wtyczka może wymagać pewnych skryptów na innym poziomie priorytetu do prawidłowego działania. W takim przypadku powyższe rozwiązania mogą złamać funkcjonalność takich wtyczek lub mogą one zachowywać się nieoczekiwanie.

Zamiast próbować całkowicie wyeliminować problemy z blokowaniem renderowania, zalecamy wykonanie alternatywnych podejść, aby przyspieszyć twoją witrynę internetową. Możesz na przykład skorzystać z usługi CDN, aby udostępnić twoje statyczne pliki JavaScript i CSS i skrócić czas ich wczytywania.

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 dowiedzieć się, jak poprawić blokujące renderowanie JavaScript i CSS w WordPress. Warto również zapoznać się z naszym artykułem o tym, jak WPBeginner zwiększa szybkość wczytywania strony dzięki 6 wskazówkom oraz z naszym porównaniem najlepszych zarządzanych firm hostingowych WordPress.

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.