Jak odroczyć JavaScript w WordPressie, aby poprawić szybkość strony
Czym jest blokujący renderowanie kod JavaScript?
Gdy przeglądarka napotka plik JavaScript w kodzie HTML <head>, wstrzymuje renderowanie, aby pobrać, przeanalizować i wykonać skrypt. Opóźnia to szybkość, z jaką strona staje się widoczna dla użytkownika.
Typowe źródła kodu JS blokującego renderowanie:
- Skrypty motywów i wtyczek (takie jak suwaki, wyskakujące okienka, animacje)
- Skrypty zewnętrzne (Google Analytics, Facebook Pixel itp.)
Jaka jest różnica między odraczać I asynchroniczny?
asynchroniczny: Pobiera skrypt bez blokowania parsowania HTML. Wykonuje go natychmiast po pobraniu — może powodować konflikty, jeśli kolejność ma znaczenie.odraczać: Również pobiera bez blokowania, ale opóźnia wykonanie do momentu zakończenia parsowania kodu HTML — bezpieczniejsze i lepsze w przypadku skryptów zależnych.
Jak zidentyfikować problematyczny JavaScript
Aby sprawdzić, które skrypty blokują renderowanie, użyj tych narzędzi:
- Wgląd w PageSpeed
- Narzędzia programistyczne Chrome → karta Lighthouse
- Chrome DevTools → Sieć → filtruj według JS
Skup się na ładowaniu plików JS w <head> i oznaczone jako „blokujące renderowanie”.
Jak odroczyć JavaScript w WordPressie
Opcja 1: Dodaj Defer z kodem (bez wtyczek)
Dodaj ten kod do swojego motywu potomnego funkcje.php zastosować odraczać do wszystkich skryptów z wyjątkiem jQuery:
funkcja add_defer_attribute($tag, $handle) {
// Pomiń jQuery
jeśli ('jquery-core' === $handle || 'jquery' === $handle) {
zwróć $tag;
}
zwróć str_replace(' src', ' odłóż src', $tag);
}
dodaj_filtr('tag_loadera_skryptu', 'dodaj_atrybut_odroczenia', 10, 2);
Opcja 2: Użyj asynchronicznie
Podobnie jak w przypadku odroczenia, możesz użyć asynchroniczny zamiast tego — po prostu zmień `defer` na `async` w kodzie powyżej. Ale bądź ostrożny: niektóre skrypty zależą od kolejności ładowania i mogą się zepsuć.
Korzystanie z wtyczek (z ostrożnością)
Jeśli nie chcesz ruszać kodu, te wtyczki umożliwiają odroczenie lub asynchronizację wykonywania kodu JS:
- **WP Rocket** – Łatwy interfejs, dobrze działa, ale płatny.
- **Asset CleanUp** – umożliwia ręczne odroczenie lub wyłączenie określonych skryptów.
- **Flying Scripts** – lekkie i skoncentrowane na odraczaniu JS po opóźnieniu.
⚠️ Zawsze testuj po włączeniu — odłożenie niewłaściwego skryptu może spowodować uszkodzenie układu lub funkcjonalności witryny.
Jak testować wpływ
- Użyj PageSpeed Insights lub GTmetrix przed/po
- Otwórz swoją witrynę w oknie incognito, aby wykryć wszelkie widoczne problemy
- Użyj DevTools → zakładka Sieć → sprawdź kolejność i czas ładowania
Wniosek: Odkładaj strategicznie
Odkładanie JavaScript jest jedną z najprostszych, ale najskuteczniejszych technik przyspieszania witryny WordPress. Zacznij od bezpiecznych skryptów, unikaj odkładania jQuery (chyba że go wstawisz) i przetestuj dokładnie.
Chcesz pójść dalej? Poproś o bezpłatny audyt wydajności od SpeedWP Pro i pomożemy Ci zoptymalizować skrypty i strategię ładowania, aby uzyskać najlepsze rezultaty.