Jak naprawić JavaScript i CSS blokujący renderowanie w WordPress

Czy chcesz wyeliminować JavaScript i CSS blokujące renderowanie w WordPress? Jeśli przetestujesz swoją witrynę za pomocą Google PageSpeed ​​Insights, prawdopodobnie zobaczysz propozycję wyeliminowania skryptów blokujących renderowanie i CSS. W tym artykule pokażemy, jak łatwo naprawić blokowanie renderowania JavaScript i CSS w WordPress, aby poprawić swój wynik w Google PageSpeed.


Jak naprawić renderowanie blokujące JavaScript i CSS w WordPress

Co to jest blokowanie renderowania JavaScript i CSS?

Każda witryna WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS do frontonu Twojej witryny. Te skrypty mogą wydłużyć czas ładowania strony w Twojej witrynie, a także mogą 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 wolniejszego połączenia będą musieli poczekać kilka milisekund dłużej, aby zobaczyć stronę.

Te skrypty i arkusze stylów nazywane są JavaScript i CSS blokującymi renderowanie.

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

Co to jest Wynik Google PageSpeed?

Google PageSpeed ​​Insights to narzędzie internetowe utworzone przez Google, aby pomóc właścicielom witryn w optymalizacji i testowaniu ich witryn. To narzędzie testuje Twoją witrynę pod kątem szybkości Google i oferuje sugestie dotyczące poprawy czasu ładowania strony.

Pokazuje wynik oparty na liczbie zasad, które Twoja witryna spełnia. Większość witryn ma od 50 do 70 lat. Jednak niektórzy właściciele witryn czują się zobowiązani do osiągnięcia 100 (najwyższego wyniku na stronie).

Czy naprawdę potrzebujesz doskonałego wyniku Google PageSpeed ​​„100”?

Celem statystyk Google PageSpeed ​​jest dostarczenie wskazówek, jak poprawić szybkość i wydajność Twojej witryny. Nie musisz ściśle przestrzegać tych zasad.

Pamiętaj, że szybkość to tylko jeden z wielu wskaźników SEO, które pomagają Google określić sposób pozycjonowania witryny. Szybkość jest tak ważna, ponieważ poprawia komfort użytkowania witryny.

Lepsze wrażenia użytkownika wymagają znacznie więcej niż tylko prędkości. Musisz także zaoferować przydatne informacje, lepszy interfejs użytkownika i angażować treści za pomocą tekstu, obrazów i filmów.

Twoim celem powinno być stworzenie szybkiej strony internetowej, która zapewni doskonałą obsługę.

Niedawno przeprojektowaliśmy WPBeginner i skupiliśmy się na szybkości, a także na poprawianiu wygody użytkownika.

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

Powiedziawszy to, rzućmy okiem na to, co możesz zrobić, aby naprawić blokowanie renderowania JavaScript i CSS 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. Napraw skrypty blokujące renderowanie i CSS z Autoptimize

Ta metoda jest prostsza i zalecana dla większości użytkowników.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Autoptimize. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia »Optymalizuj automatycznie strona, aby skonfigurować ustawienia wtyczki.

Ustawienia automatycznej optymalizacji

Możesz zacząć od zaznaczenia pola opcji Opcje JavaScript i Opcje CSS, a następnie kliknij przycisk Zapisz zmiany.

Możesz teraz przetestować swoją witrynę za pomocą narzędzia PageSpeed. Jeśli nadal są renderowane skrypty blokujące, musisz wrócić do strony ustawień wtyczki i kliknąć przycisk „Pokaż ustawienia zaawansowane” u góry.

Zaawansowane opcje JavaScript

W tym miejscu możesz zezwolić wtyczce na dołączanie wbudowanego JS i usuwanie skryptów domyślnie wykluczonych, takich jak seal.js lub jquery.js.

Następnie przewiń w dół do opcji CSS i pozwól wtyczce agregować wbudowany CSS.

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

Po zakończeniu przejdź do witryny i sprawdź ją ponownie za pomocą narzędzia PageSpeed.

Upewnij się, że dokładnie przetestowałeś swoją witrynę, aby upewnić się, że nic nie jest zepsute dzięki optymalizacji skryptów JavaScript lub CSS.

Jak to działa?

Automatyczna optymalizacja agreguje wszystkie kolejkowane JavaScript i CSS. Następnie tworzy zminimalizowane pliki CSS i JavaScript i wyświetla kopie w pamięci podręcznej na stronie jako asynchroniczne lub odroczone.

Pozwala to naprawić problem ze skryptami blokującymi renderowanie i stylami. Pamiętaj jednak, że może to również wpłynąć na wydajność lub wygląd Twojej witryny.

2. Napraw blokadę renderowania JavaScript za pomocą W3 Total Cache

Ta metoda wymaga nieco więcej pracy i jest zalecana dla użytkowników, którzy już korzystają z wtyczki W3 Total Cache na swojej stronie internetowej.

Najpierw musisz zainstalować i aktywować wtyczkę W3 Total Cache. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji i konfiguracji W3 Total Cache dla początkujących.

Następnie musisz odwiedzić Wydajność »Ustawienia ogólne i przewiń w dół do sekcji Minify.

W3 Total Cache enable minify

Najpierw zaznacz „Włącz” obok opcji Minify, a następnie wybierz „Ręcznie” dla opcji trybu minify.

Kliknij przycisk Zapisz wszystkie ustawienia, aby zapisać ustawienia.

Następnie musisz dodać skrypty i CSS, które chcesz zminimalizować.

Możesz uzyskać adresy URL wszystkich skryptów i arkuszy stylów blokujących renderowanie za pomocą narzędzia Google PageSpeed ​​Insights.

Zgodnie z sugestiami: „Wyeliminuj JavaScript i CSS blokujące renderowanie w treści widocznej po przewinięciu”, kliknij „Pokaż, jak to naprawić”. Pokaże ci listę skryptów i arkuszy stylów.

Pobierz JavaScript i adresy URL arkuszy stylów z narzędzia Google PageSpeed

Najedź myszką na skrypt, który wyświetli pełny adres URL. Możesz wybrać ten adres URL, a następnie użyć klawiszy CTRL + C (Command + C na Macu) na klawiaturze, aby skopiować adres URL.

Teraz przejdź do obszaru administracyjnego WordPress i przejdź do Wydajność »Minify strona.

Najpierw musisz dodać pliki JavaScript, które chcesz zminimalizować. Przewiń w dół do sekcji JS, a następnie w sekcji „Operacje w obszarach” ustaw typ osadzania na „Nieblokującą asynchronię” dla sekcji.

Dodaj skrypty do zminimalizowania

Następnie kliknij przycisk „Dodaj skrypt”, a następnie rozpocznij dodawanie adresów URL skryptów skopiowanych z narzędzia Google PageSpeed.

Po zakończeniu przewiń w dół do sekcji CSS, a następnie kliknij przycisk „Dodaj arkusz stylów”. Teraz zacznij dodawać adresy URL arkuszy stylów skopiowane z narzędzia Google PageSpeed.

Dodaj arkusze stylów do zminimalizowania

Teraz kliknij przycisk „Zapisz ustawienia i wyczyść pamięć podręczną”, aby zapisać ustawienia.

Odwiedź narzędzie Google PageSpeed ​​i ponownie przetestuj swoją witrynę.

Upewnij się również, że dokładnie przetestowałeś swoją witrynę, aby upewnić się, że wszystko działa poprawnie.

Rozwiązywanie problemów

W zależności od tego, w jaki sposób wtyczki i motywy WordPress używają JavaScript i CSS, może być trudne zadanie całkowitego rozwiązania wszystkich problemów z blokowaniem renderowania JavaScript i CSS.

Chociaż powyższe narzędzia mogą pomóc, twoje wtyczki mogą potrzebować pewnych skryptów o innym priorytecie, aby działać poprawnie. W takim przypadku powyższe rozwiązania mogą uszkodzić wtyczki lub mogą działać nieoczekiwanie.

Google może nadal wskazywać pewne problemy, takie jak optymalizacja dostarczania CSS pod kątem zawartości strony widocznej na ekranie. Autoptimize pozwala to naprawić, ręcznie dodając wbudowany CSS wymagany do wyświetlenia powyższego obszaru składania twojego motywu.

Jednak może być dość trudno dowiedzieć się, jaki kod CSS trzeba wyświetlić nad zawartością fold.

To wszystko, mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak naprawić blokowanie renderowania JavaScript i CSS w WordPress. Możesz także zobaczyć, jak nasz ostateczny przewodnik zwiększa szybkość i wydajność WordPress dla początkujących.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map