Czy chcesz wyeliminować pliki (CSS i JS), które blokują ładowanie stron w WordPress? Jeśli testujesz swoją witrynę w Google Insights PageSpeed, prawdopodobnie zobaczysz sugestię, aby wyeliminować skrypty blokujące ładowanie stron. W tym samouczku pokażemy, jak naprawić te pliki, które blokują ładowanie Twoich stron, aby poprawić wynik Google PageSpeed.
Co blokuje ładowanie stron?
Każda witryna WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS na końcu, zanim strona będzie widoczna w przeglądarce. Te skrypty mogą wydłużyć czas ładowania strony witryny, a także mogą blokować renderowanie strony.
Przeglądarka użytkownika będzie musiała załadować skrypty i CSS przed załadowaniem zawartości strony. Oznacza to, że użytkownicy korzystający z wolniejszego połączenia będą musieli poczekać kilka milisekund, aby wyświetlić stronę.
Właściciele witryn, którzy chcą uzyskać dobry wynik w Google PageSpeed, będą musieli rozwiązać ten problem.
1 - Jak poprawić renderowanie strony za pomocą funkcji 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, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywowaniu wtyczki musisz odwiedzić „ Ustawienia> Autoptimize Aby skonfigurować ustawienia wtyczki.
Możesz zacząć od zaznaczenia pola opcji JavaScript i CSS, a następnie kliknij przycisk „Zapisz zmiany”.
Możesz teraz przetestować swój Witryna internetowa za pomocą narzędzia PageSpeed. Jeśli nadal istnieją skrypty blokujące renderowanie strony, musisz wrócić do strony ustawień wtyczki i kliknąć przycisk „Pokaż ustawienia zaawansowane” u góry.
W tym miejscu możesz zezwolić wtyczce na dołączanie JS w tekście i usuwanie skryptów, które są domyślnie wykluczone, jak „seal.js” lub „jquery.js”.
Następnie przewiń w dół do opcji CSS i pozwól wtyczce połączyć wszystkie pliki CSS.
Kliknij przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać zmiany i wyczyść pamięć podręczną wtyczki.
Gdy skończysz, idź dalej i sprawdź swój Witryna internetowa ponownie za pomocą narzędzia PageSpeed.
Upewnij się, że dokładnie przetestowałeś swoją witrynę, aby upewnić się, że wszystko działa poprawnie po optymalizacji skryptów JavaScripts lub plików CSS.
2 - Naprawiono renderowanie plików za pomocą W3 Total Cache
Ta metoda wymaga nieco więcej pracy i jest zalecana dla tych, którzy mają już na swoim komputerze W3 Total Cache strona internetowa.
Najpierw musisz zainstalować i aktywować wtyczkę W3 Total Cache. Jeśli potrzebujesz pomocy, sprawdź nasz kompletny przewodnik dotyczący Total Cache W3.
Następnie przejdź do „Wydajność> Ustawienia ogólne” i przewiń w dół do sekcji „minify”.
Przede wszystkim musisz zaznaczyć pole „Włącz”, a następnie wybrać opcję „Ręczny” dla trybu minifikacji.
Kliknij przycisk Zapisz wszystkie ustawienia Aby zapisać ustawienia.
Następnie musisz dodać skrypty i CSS, które chcesz zmniejszyć.
Możesz uzyskać adresy URL wszystkich skryptów i arkuszy stylów, które należy połączyć zgodnie z Google PageSpeed Insights.
Zgodnie z sugestiami, gdzie jest napisane: Wyeliminuj Renderowanie blokujące JavaScript i CSS ”, Kliknij„ Pokaż, jak rozwiązać ”. Pokaże ci listę skryptów i arkuszy stylów.
Najedź myszą na skrypt, a wyświetli się pełny adres URL. Możesz wybrać ten adres URL, a następnie użyć CTRL + C na klawiaturze (Command + C na Macu), aby skopiować adres URL.
Teraz przejdź do panelu administracyjnego WordPress i przejdź do „ jest gwarancją najlepszej jakości, które mogą dostarczyć Ci Twoje monitory, > minifier ".
Najpierw musisz dodać pliki JavaScript, które chcesz skompresować. Przewiń w dół do sekcji JS, a następnie pod ustawieniem „operacje w strefach” typu embed na „nie blokuj przy użyciu opcji„ async ”” dla sekcji .
Następnie musisz kliknąć przycisk Dodaj skrypt A następnie zacznij dodawać skrypty URL skopiowane z narzędzia Google PageSpeed.
Gdy skończysz, przewiń w dół do sekcji CSS i kliknij przycisk „Dodaj arkusz stylów”. Teraz zacznij dodawać adresy URL arkuszy stylów skopiowane za pomocą narzędzia Google PageSpeed.
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ż, aby dokładnie przetestować swoją witrynę internetową, aby sprawdzić, czy wszystko działa poprawnie.
To wszystko w tym samouczku, mam nadzieję, że pozwoli ci poprawić wydajność twojego blog WordPress.
