JavaScript i CSS blokujące renderowanie w WordPress: 5 wtyczek do naprawy

Nie tak dawno Google ogłosił, że strony, które ładują się dłużej niż trzy sekundy, nie są przyjazne dla SEO.

W dobie internetu i marketingu cyfrowego musisz mieć najszybszą stronę internetową, jeśli chcesz skutecznie konkurować z tysiącami rywali na całym świecie. Nie ma wątpliwości, że szybsza strona internetowa ma większe szanse na przyciągnięcie odwiedzających i zwiększenie ich zaangażowania w treści.

Prowadzenie witryny WordPress oznacza znaczną liczbę skryptów, które działają w tym samym czasie, aby Twoja witryna była dostępna.

Jednak nie wszystkie z tych elementów są zawsze niezbędne do załadowania. Jeśli kiedykolwiek sprawdzałeś wydajność swojej witryny za pomocą Google Insights PageSpeed, prawdopodobnie natknąłeś się na opcję JavaScript i CSS blokującą renderowanie, która wpływa na jego szybkość.

Dzisiaj porozmawiamy o tych niepotrzebnych plikach i wyjaśnimy, w jaki sposób możesz je usunąć, aby ulepszyć swoją witrynę.

 

Co to jest JavaScript i CSS blokujące renderowanie?

Podsumowując, JavaScript i CSS blokujące renderowanie to seria arkuszy stylów i skryptów niezbędnych do całkowitego uruchomienia, zanim strona się załaduje i stanie się widoczna.

Motywy i wtyczki, które instalujesz na swojej stronie WordPress, dodają wiele tych plików do sekcji front-end Twojej witryny. Jak zapewne się domyślasz, niektóre z nich spowalniają czas ładowania strony i uniemożliwiają jej renderowanie.

Kiedy odwiedzający witrynę otwiera Twoją witrynę, przeglądarka internetowa najpierw ładuje niezbędne pliki JavaScript i CSS przed kodem HTML.

Jest to zwykła procedura, ponieważ strona bez tych istotnych elementów będzie bezużyteczna. Problem polega na tym, że przeglądarka internetowa nie może wyświetlić strony przed całkowitym załadowaniem tych plików.

Sztuczka polega na tym, że możesz odroczyć ładowanie niektórych skryptów, nie powodując żadnych problemów z tym, co odwiedzający widzą po otwarciu Twojej strony.

Właściciele witryn mogą wprowadzać modyfikacje w swoich witrynach, aby uniemożliwić przeglądarkom ładowanie jakichkolwiek kodów poza tym, co jest niezbędne do wyświetlenia górnej części strony, którą użytkownik widzi natychmiast.

Innymi słowy, przeglądarki ładują tylko niezbędne pliki dla tej sekcji, zanim użytkownik przewinie stronę w dół. Ten obszar stron internetowych nazywa się ATF, co oznacza Powyżej zakładki. Inne części, które wymagają od użytkowników przewinięcia w dół, aby móc je zobaczyć, to sekcja inna niż ATF.

Dlatego jeśli Twoja witryna ładuje kody JavaScript i CSS związane z sekcjami innymi niż ATF, ładowanie stron zajmuje więcej czasu. I dlatego Google próbuje powiedzieć ci, abyś przestał uruchamiać niepotrzebne zasoby w kodach swojej witryny.

 

Znajdź JavaScript i CSS blokujące renderowanie

Najprostszym sposobem, aby dowiedzieć się o tym problemie, jest przeprowadzenie testu szybkości za pomocą Google PageSpeed ​​Insights. Po odwiedzeniu strony wszystko, co musisz zrobić, to wpisać swój adres URL w wymaganym polu, a następnie kliknąć przycisk „Analizuj”.

Jeśli ten problem występuje na stronie, zobaczysz sugestię dotyczącą wyeliminowania kodu JavaScript i CSS blokującego renderowanie w części strony widocznej na ekranie.

Byłoby najlepiej, gdybyś nie zapomniał o tym najbardziej punktacja stron internetowych gdzieś pomiędzy 70 a 90, a nawet najskuteczniejsze rzadko osiągają liczbę bliską 100. Dlatego nigdy nie powinieneś zmuszać swojej witryny do osiągnięcia 100. Zrób wszystko, co w Twojej mocy, aby osiągnąć jak najlepszy wynik bez wpływu na wygodę użytkownika ujemnie.

W zależności od motywu i narzędzi, których używasz w swojej witrynie, niektóre skrypty są niezbędne dla doskonałego UX masz do zaoferowania swoim odbiorcom. Dlatego całkowicie nierozsądne jest ich usuwanie w celu uzyskania nieco wyższego wyniku na stronie wyników tego narzędzia Google.

 

Napraw JavaScript i CSS blokujące renderowanie

Istnieje wiele strategii eliminowania kodu JavaScript blokującego renderowanie. Główne metody to Async i Defer. Pierwsza metoda pozwala przeglądarce użytkownika pobrać JavaScript podczas analizowania innych części HTML.

Chociaż nie zatrzymuje całkowicie analizowania w czasie pobierania pliku, Parser HTML zatrzymuje się, aby wykonać skrypt podczas pobierania. Z drugiej strony podejście Defer pozwala przeglądarce pobrać JavaScript podczas analizowania innych części HTML i nie wykonuje skryptu, dopóki analiza HTML nie zostanie zakończona.

Wyeliminowanie kodu CSS blokującego renderowanie jest większym wyzwaniem, ponieważ możesz opóźnić kody niezbędne do załadowania zawartości ATF. Procedura jest nieco skomplikowana i wymaga dobrego zrozumienia tworzenia stron internetowych.

Niemniej jednak zwracamy się do przeciętnych użytkowników, którzy samodzielnie prowadzą swoją witrynę.

Wszyscy wiemy, że WordPress to system modułowy, który pozwala przeciętnym użytkownikom modyfikować wszystko bez pisania ani jednej linijki kodu. Rozwiązanie tego problemu jest również takie samo i możesz szybko rozwiązać problem, instalując odpowiednią wtyczkę.

 

Najlepsze wtyczki WordPress do naprawy JavaScript i CSS blokujących renderowanie

W następnych akapitach przedstawimy pięć najbardziej wydajne wtyczki WordPress które pomogą ci rozwiązać ten problem najgłębiej.

Ostrzeżenie: Przed użyciem któregokolwiek z poniższych narzędzi wykonaj kopię zapasową swojej witryny, aby zapobiec ewentualnej utracie danych.

 

Autoptimize

Połączenia Autoptimize plugin jest wyraźnie stworzony w celu rozwiązania problemów sugerowanych przez narzędzia do analizy witryn, takie jak Google PageSpeed ​​Insights. Poprawia dostarczanie skryptów JavaScript i plików CSS bez większego skupiania się na innych aspektach wydajności witryny.

Jeśli szukasz podstawowych funkcji optymalizacji, ta wtyczka zapewni Ci to, czego potrzebujesz. Dobrą częścią tego narzędzia jest to, że konwertuje obrazy Twojej witryny do zoptymalizowanego formatu WebP.

Po zainstalowaniu i aktywacji Autoptimize musisz zaznaczyć pola opcji „Optymalizuj kod JavaScript” i „Optymalizuj kod CSS” w ustawieniach wtyczki. Uważaj, aby nie zaznaczyć pól poniżej tych dwóch opcji, które agregują pliki CSS i pliki skryptów.

Chociaż ta wtyczka jest dostępna za darmo, możesz także kupić pakiety premium, które pomogą Ci w konfiguracji strony.

 

WP Rocket

WP Rocket to dobrze znana nazwa wśród narzędzi optymalizacyjnych WordPress, która pomaga w różnych aspektach, takich jak modyfikacja JavaScript i CSS, leniwe ustawienia ładowania. Proces konfiguracji WP Rocket jest dość prosty, ale na początku może być trudno zrozumieć, jak to się dzieje w interfejsie.

Jest gotowy od razu po wyjęciu z pudełka i stosuje optymalne ustawienia w Twojej witrynie natychmiast po instalacji. Biorąc pod uwagę nieuchronność awarii witryny z powodu zmian w skrypcie, wtyczka domyślnie nie aktywuje ustawień JavaScript i CSS blokujących renderowanie.

Ale możesz łatwo włączyć tę funkcję, przechodząc do ustawień wtyczki i szukając powiązanych opcji w sekcjach „Pliki CSS” i „Pliki JavaScript”.

Główna wtyczka kosztuje 49 USD rocznie i obejmuje również rok wsparcia. Co więcej, możesz znaleźć wiele darmowe dodatki również dla podstawowej wtyczki do WordPressa.

 

RabbitLoader

RabbitLoader to najnowocześniejsza wtyczka do optymalizacji wydajności WordPress, zaprojektowana tak, aby strona internetowa działała szybciej, płynniej i wydajniej.

Podobnie jak powszechnie uznawany WP Rocket, RabbitLoader nie tylko podnosi wydajność Twojej witryny na wyższy poziom, ale także wprowadza kilka innowacyjnych funkcji, które odróżniają ją od innych graczy w grze.

Magia buforowania: RabbitLoader podnosi poprzeczkę, oferując dynamiczny system buforowania, który dostosowuje się w czasie rzeczywistym do zmian w Twojej witrynie, dzięki czemu odwiedzający zawsze zobaczą najnowszą treść bez utraty szybkości.

Optymalizacja obrazu: Obrazy mogą znacznie spowolnić stronę internetową, ale funkcja optymalizacji obrazu RabbitLoader zmienia zasady gry. Automatycznie kompresuje i zmienia rozmiar obrazów do optymalnego rozmiaru bez utraty jakości, zapewniając szybkie ładowanie witryny bez utraty atrakcyjności wizualnej.

Powolne ładowanie: Zarówno WP Rocket, jak i RabbitLoader oferują leniwe ładowanie obrazów i ramek iframe, ale RabbitLoader idzie dalej, oferując odroczone ładowanie JavaScript.

Kompatybilność: RabbitLoader został zaprojektowany do bezproblemowej współpracy z szeroką gamą motywów i wtyczek WordPress, podobnie jak WP Rocket. Niezależnie od tego, czy prowadzisz prosty blog, czy złożoną witrynę e-commerce, RabbitLoader został zaprojektowany tak, aby bez konfliktów zwiększać wydajność Twojej witryny.

 

W3 Razem Cache

W3 Razem Cache to solidny wzmacniacz wydajności, który radzi sobie nie tylko z problemami z pamięcią podręczną, ale także problemami powodowanymi przez skrypty i arkusze stylów.

Możesz łatwo usunąć JavaScript i CSS blokujące renderowanie, najpierw włączając opcję Minify w ustawieniach wtyczki i ustawiając ją w trybie ręcznym.

Następnie należy kliknąć zakładkę „Wyeliminuj zasoby blokujące renderowanie” i skopiować pełny adres łącza niezbędnych plików do blokowania skryptów i arkuszy stylów. Teraz możesz użyć tych linków i wprowadzić je w „sekcji JS” strony Wydajność>Minifikuj patka.

W3 Total Cache ma ponad milion aktywnych instalacji i możesz pobrać go na swoją stronę za darmo ze strony WordPress.org.

 

Pakiet przyspieszacza prędkości

Pakiet przyspieszacza prędkości to niezawodne narzędzie do optymalizacji arkuszy stylów, skryptów JavaScript, leniwego ładowania i usuwania bałaganu. Zespół programistów stale aktualizuje tę wtyczkę, aby była na bieżąco z najnowszymi aktualizacjami i środkami bezpieczeństwa.

Jeśli sprzedajesz produkty i usługi online, Optymalizacja specyficzna dla WooCommerce Funkcje Speed ​​Booster Pack bardzo pomogą Ci w zwiększeniu widoczności Twojego sklepu w internecie.

Możesz szybko naprawić JavaScript i CSS blokujące renderowanie w swojej witrynie WordPress, klikając kartę „Zaawansowane” w menu Speed ​​Booster Pack w panelu administracyjnym.

W przypadku języka JavaScript aktywuj opcje „Przenieś skrypty do stopki” i „Odłóż parsowanie plików JavaScript”. Następnie przejdź do menu „Optymalizacja CSS” i wybierz jedną z dostępnych opcji, aby poprawić wydajność swojej witryny.

Speed ​​Booster Pack to darmowe rozwiązanie dostępne na stronie WordPress.org.

 

Optymalizacja JCH

Optymalizacja JCH to ostatnia pozycja na tej liście sugerowanych wtyczek, która jest wyposażona w przydatne narzędzia przyspieszyć ładowanie strony. Na przykład pomaga zmniejszyć liczbę żądań HTTP wymaganych do załadowania stron i jednocześnie zmniejszyć rozmiar tych stron.

generator duszków to kolejna ekscytująca funkcja dostępna w tej wtyczce, która zmniejsza liczbę żądań HTTP w celu załadowania obrazów tła.

Korzystając z JCH Optimize, możesz usunąć JavaScript i CSS blokujące renderowanie, jeśli przejdziesz na plan premium. Wystarczy aktywować opcje „Premium” lub „Optymalne” w sekcji „Ustawienia automatyczne”. Ustawienia dostarczania CSS są również dostępne tylko w wersji Pro.

Możesz zainstalować tę wtyczkę za darmo z WordPress.org, ale musisz kupić plan premium, aby odblokować jej pełny potencjał. Plany cenowe zaczynają się od 29 USD za sześć miesięcy i osiągają 99 USD za dożywotni dostęp.

 

Podsumowanie

Szybkość ładowania witryny jest jednym z najważniejszych elementów przyciągania, angażowania i zatrzymywania odbiorców. Powinieneś nadać temu wysoki priorytet podczas optymalizacji witryny pod kątem wyszukiwarek i użyć narzędzia Google PageSpeed ​​​​Insights, aby zmierzyć, jak dobrze radzisz sobie w tej dziedzinie.

Element JavaScript i CSS blokujący renderowanie to jedna z najczęstszych sugestii, jakie możesz napotkać podczas korzystania z potężnego narzędzia Google. Możesz łatwo rozwiązać ten problem, instalując jedną z pięciu wtyczek, które przedstawiliśmy w tym artykule i przyspieszyć ładowanie stron w dużej mierze.

Mamy nadzieję, że ten samouczek okaże się przydatny i będziesz cieszyć się szybko ładującą się stroną internetową, aby uzyskać najlepsze możliwe wyniki.