Czy chcesz wyeliminować blokowanie renderowania JavaScript i CSS w WordPress?
Jeśli testujesz swoją witrynę w Google PageSpeed Insights, prawdopodobnie zobaczysz sugestię usunięcia skryptów i bloków renderowania CSS. Jednak nie zawiera szczegółów, jak to zrobić w witrynie WordPress.
W tym artykule pokażemy, jak łatwo naprawić blokowanie renderowania JavaScript i CSS w WordPress, aby poprawić swój wynik Google PageSpeed.
Ale wcześniej odkryjmy razem Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu.
Co to jest blokowanie renderowania w JavaScript i CSS?
Blokowanie renderowania JavaScript i CSS to pliki, które uniemożliwiają witrynie wyświetlenie strony internetowej przed ich załadowaniem.
Każda witryna WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS do frontendu 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 pozostałej części kodu HTML na stronie. Oznacza to, że użytkownicy korzystający z wolniejszego połączenia będą musieli poczekać kilka milisekund, aby wyświetlić stronę.
Te skrypty i arkusze stylów nazywane są blokerami renderowania JavaScript i CSS.
Właściciele witryn, którzy chcą osiągnąć wynik Google PageSpeed 100, będą musieli to naprawić, aby osiągnąć ten doskonały wynik.
Co to jest wynik Google PageSpeed?
Google PageSpeed Insights to narzędzie do testowania szybkości stworzone przez Google, aby pomóc właścicielom witryn w optymalizacji i testowaniu ich witryn. To narzędzie testuje Twoją witrynę pod kątem wytycznych Google dotyczących szybkości i oferuje sugestie dotyczące poprawy czasu ładowania strony.
Pokazuje wynik oparty na liczbie reguł, które przechodzi Twoja witryna. Większość witryn ma od 50 do 70 lat. Jednak niektórzy właściciele witryn odczuwają presję, aby osiągnąć 100.
Czy naprawdę potrzebujesz wyniku „100” w Google PageSpeed?
Cel Statystyki Google PageSpeed ma na celu dostarczenie wskazówek, jak poprawić szybkość i wydajność Twojej witryny. Nie musisz ściśle przestrzegać tych zasad.
Pamiętaj, prędkość to tylko jeden z wielu wskaźników SEO, które pomagają Google określić, jak uszeregować Twoją witrynę. Szybkość jest tak ważna, ponieważ poprawia się doświadczenie użytkownika na twojej stronie.
Lepsze wrażenia użytkownika wymagają znacznie więcej niż szybkości. Musisz także zaoferować przydatne informacje, lepszy interfejs użytkownika i angażować treści w tekst, obrazy i filmy.
Twoim celem powinno być stworzenie szybkiej witryny internetowej, która zapewni wygodę użytkownikom.
Podczas ostatniego przeprojektowania BlogPasCher skupiliśmy się na szybkości, a także poprawie komfortu użytkowania.
Zalecamy użycie reguł Google Pagespeed jako sugestii, a jeśli możesz je łatwo zaimplementować bez zrujnowania doświadczenia użytkownika, to świetnie. Jeśli nie, powinieneś starać się zrobić jak najwięcej, a potem nie martwić się o resztę.
Mając to na uwadze, przyjrzyjmy się, co możesz zrobić, aby naprawić blokowanie renderowania JavaScript i CSS w WordPress.
Omówimy dwie metody, które rozwiążą ten problem. Możesz wybrać ten, który najlepiej działa w Twojej witrynie.
1. Napraw skrypty blokujące renderowanie i CSS za pomocą WP Rocket
W przypadku tej metody będziemy używać wtyczki WP Rocket. To jest najlepsza wtyczka do buforowania WordPress na rynku i pozwala szybko poprawić wydajność Twojej witryny bez konfigurowania jakichkolwiek technicznych lub skomplikowanych umiejętności.
Przede wszystkim musisz zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress..
WP Rocket aktywuje pamięć podręczną z optymalnymi ustawieniami. Domyślnie nie włącza opcji optymalizacji JavaScript i CSS. Te optymalizacje mogą potencjalnie wpłynąć nawygląd Twojej strony lub niektórych funkcji, dlatego wtyczka umożliwia włączenie tych ustawień jako opcji.
Aby to zrobić, musisz iść dalej Ustawienia »WP Rocket, a następnie przejdź do „Optymalizacja plików '. Stamtąd przewiń w dół do sekcji Pliki CSS i zaznacz pola Zminimalizuj CSS, Połącz pliki CSS et Zoptymalizuj dostarczanie CSS.
Uwaga : WP Rocket spróbuje zminimalizować wszystkie pliki CSS, połączyć je i załadować tylko niezbędny CSS dla widocznej części Twojej witryny. Może to wpłynąć nawygląd Twojej strony, dlatego powinieneś dokładnie przetestować swoją witrynę na wielu urządzeniach i różnych rozmiarach ekranu.
Następnie musisz przewinąć do sekcji Pliki JavaScript. Tutaj możesz zaznaczyć wszystkie opcje maksymalnej poprawy wydajności.
Możesz zmniejszać i łączyć pliki JavaScript, tak jak robiłeś to z plikami CSS.
Możesz także uniemożliwić przesyłanie pliku przez WordPress. jQuery Migracja. To jest skrypt ładowany przez WordPress w celu zapewnienia kompatybilności z wtyczkami i motywami używającymi starszych wersji jQuery.
Większość witryn nie potrzebuje tego pliku, ale dobrze jest sprawdzić swoją witrynę, aby upewnić się, że jego usunięcie nie ma wpływu na motyw lub wtyczki.
Następnie przewiń w dół trochę dalej i sprawdź opcje 'Załaduj JavaScript odroczony'i'Tryb bezpieczny dla jQuery".
Te opcje opóźniają ładowanie nieistotnego kodu JavaScript, a tryb bezpieczny jQuery umożliwia ładowanie jQuery dla motywów, które mogą go używać w tekście.
Pamiętaj, aby kliknąć przycisk Zapisz zmiany, aby zapisać 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 byliśmy w stanie osiągnąć 100% wynik na komputerach stacjonarnych, a problem z blokowaniem renderowania został rozwiązany zarówno w przypadku urządzeń mobilnych, jak i komputerów stacjonarnych.
2. Napraw blokowanie renderowania JavaScript i CSS za pomocą funkcji automatycznej optymalizacji
W przypadku tej metody będziemy używać innej wtyczki stworzonej specjalnie w celu usprawnienia dostarczania plików CSS i JS Twojej witryny. Chociaż ta wtyczka wykonuje swoją pracę, brakuje jej innych potężnych funkcji, które oferuje WP Rocket.
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.
Podczas aktywacji musisz odwiedzić stronę Ustawienie »Autoptimize skonfigurować ustawienia wtyczki.
Przede wszystkim musisz zaznaczyć opcję 'Zoptymalizuj kod JavaScript'pod blokiem JAVASCRIPT Opcje. Upewnij się, że opcja „Agreguj wszystkie połączone pliki JS” nie jest zaznaczona.
Następnie przewiń w dół do obszaru Opcje CSS i zaznacz opcję ' Zoptymalizować kod CSS?”. Upewnij się, że opcja 'Agreguj wszystkie połączone pliki CSS”nie jest zaznaczone.
Możesz teraz kliknąć przycisk „Zapisz zmiany i wyczyść pamięć podręczną”, aby zapisać ustawienia.
Śmiało i przetestuj swoją witrynę za pomocą Page Speed Insights. W naszej witrynie demonstracyjnej udało nam się rozwiązać problem z blokowaniem renderowania przy tych podstawowych ustawieniach.
Jeśli nadal istnieją skrypty blokujące renderowanie, musisz wrócić do strony ustawień wtyczki i spojrzeć na opcje JavaScript i CSS.
Na przykład, możesz pozwolić wtyczce na dołączenie JS Inline i usunięcie skryptów, które są domyślnie wykluczone, takich jak seal.js lub jquery.js.
Kliknij przycisk „Zapisz zmiany i wyczyść pamięć podręczną”, aby zapisać zmiany i wyczyścić pamięć podręczną wtyczek.
Gdy skończysz, sprawdź ponownie swoją witrynę za pomocą narzędzia Page Speed Insights.
Jak to działa?
Autoptimize zawiera wszystkie pliki JavaScript i CSS. Potem tworzy zminimalizowane pliki CSS i JavaScripts i udostępnia kopie Twojej witryny w pamięci podręcznej na zasadzie synchronizacji lub odroczenia.
Pozwala to rozwiązać problem blokowania renderingi skrypty i style blokowania. Należy jednak pamiętać, że może to również mieć wpływ na wydajność lubwygląd Twojej strony.
pomoc
W zależności od tego, jak wtyczki i motyw WordPress używają JavaScript i CSS, całkowite rozwiązanie wszystkich problemów z blokowanie z Renderowanie JavaScript i CSS.
Chociaż powyższe narzędzia mogą pomóc, twoje wtyczki mogą wymagać pewnych skryptów o innym poziomie priorytetu, aby działać poprawnie. W takim przypadku powyższe rozwiązania mogą zepsuć funkcjonalność tych wtyczek lub mogą one zachowywać się nieoczekiwanie.
Google nadal może pokazywać Ci pewne problemy, takie jak optymalizacja dostarczania CSS. WP Rocket pozwala to naprawić, ręcznie dodając krytyczny CSS potrzebny do idealnego wyświetlania motywu WordPress.
Jednak ustalenie, jaki kod CSS będzie potrzebny do wyświetlenia, może być dość trudne.
Odkryj także niektóre motywy i wtyczki premium WordPress
Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.
Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.
1. WordPress Speed Optimization Plugin
Czy zmagasz się z zarządzaniem wieloma wtyczkami do optymalizacji szybkości witryny? Martwisz się, że spowalniają one szybkość działania Twojej witryny? wtedy ta wtyczka WordPress będzie najlepszym rozwiązaniem dla wszystkich Twoich zmartwień.
Ta wtyczka została zaprojektowana, aby zapewnić funkcjonalność prawie 6-8 różnych wtyczek WordPress. Wystarczy go zainstalować i skonfigurować, aby zobaczyć wyraźną poprawę w ładowaniu stron.
Chcielibyśmy zwrócić uwagę, że to nie jest plik wtyczka pamięci podręcznej lub CDN, ale wynik, jaki oferuje, jest imponujący. Nie wahaj się wypróbować tej wtyczki WordPress, aby zobaczyć, do czego jest zdolna.
2. Udostępnianie społecznościowe i Locker Pro
Rozszerzenie Social Share & Locker Pro zostało zaprojektowane, aby Twoja witryna była bardziej widoczna w sieciach społecznościowych. Za pomocą kilku kliknięć możesz ustawić położenie ikon społecznościowych lub zablokować zawartość, wymagając udostępniania w jednej z oferowanych przez Ciebie sieci społecznościowych.
Masz predefiniowane motywy 10, które powinny obejmować najczęstsze życzenia. Wszystkie jej tematy to Retina i cuda.
Ponadto dzięki Social Share & Locker Pro będziesz mógł wyświetlić pełną nazwę sieci społecznościowej lub tylko ikonę. Zależy to od Twojego projektu, dostępnej przestrzeni lub Twoich życzeń.
3. WordPress PDF Images Lightbox
WordPress PDF Lightbox to Wtyczka WordPressa co pozwala na tworzenie przeglądarek plików PDF. Przeglądarka plików PDF to zbiór zdjęć, które można zapisać jako pliki PDF.
Dzięki temu rozszerzeniu możesz utworzyć dowolną liczbę przeglądarek PDF. Dla każdej przeglądarki administrator może ustawić kilka opcji, takich jak:
- Obraz okładki: który zostanie dodany jako pierwsza strona pliku PDF utworzonego przez użytkownika
- Maksymalna liczba obrazów na przeglądającego
- Obraz znaku wodnego: do zastosowania na stronach PDF
- Wysyłanie pocztą elektroniczną: jeśli ta funkcja jest aktywna, a formularz kontaktowy będzie oferowany zaraz po galerii zdjęć. Dzięki temu formularzowi użytkownicy będą mogli wysłać e-mailem utworzony plik PDF do dowolnej osoby.
Polecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Wtyczki 10 WordPress w celu poprawy SEO Twojej witryny
- 5 premium WordPress wtyczki do optymalizacji kategorii
- 10 wtyczek WordPress do przeliczania waluty
- Wtyczki 10 WordPress integracji odtwarzacza audio na stronie internetowej
Wnioski
Tutaj! To wszystko w tym samouczku. Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak naprawić blokowanie renderowania JavaScript i CSS w WordPress. Możesz również zobaczyć nasze Kompletny przewodnik, jak przyspieszyć działanie WordPressa dla początkujących.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.
Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych. A jeśli masz jakieś sugestie lub uwagi, zostaw je w naszej sekcji commentaires.
...
