Udsæt jQuery i WordPress

En vejledning til udsættelse af jQuery i WordPress

Hilsener, kollegaer med ydeevnefokus! Jeg er begejstret for at dele indsigt i optimering af dit WordPress-websted og forbedring af Core Web Vitals. I dag vil jeg vise dig, hvordan du udsætter indlæsningen af jQuery og forbedrer dit websteds hastighed og dermed brugeroplevelsen.

Hvorfor udsætte jQuery?

jQuery, et robust JavaScript-bibliotek, er uden tvivl et kraftfuldt værktøj, men dets synkron indlæsning kan nogle gange bremse den oprindelige sideindlæsning. Mange temaer, der er tilgængelige på de forskellige markedspladser, er afhængige af jQuery. jQuery er ikke bygget til at kunne udsættes, men desværre udsætter mange temaer ikke jQuery. 

Så hvad er hovedfordelen ved at udsætte jQuery, kunne du spørge? Nå, se på billedet nedenfor. Det viser forskellen i HTML-parsing mellem normale, udsatte og async-scripts. Hvis jQuery ikke er udsat, vil browseren blokere HTML-parsing, indtil scriptet er blevet udført. Hvis jQuery er udsat, behøver browseren ikke at blokere parseren. Og det vil spare dig meget tid, især når det kommer til Largest Contentful Paint. 

Grunden til, at temaopbygninger ikke udsætter jQuery som standard, skyldes arv. Nogle plugins tilføjer (inline) scripts, der er afhængige af jQuery. Hvis jQuery indlæses udsat, men scriptet, der har brug for jQuery, ikke er udsat, vil der være en konflikt (og en fejl)

Metode 1: Manuelt udsæt jQuery

Trin 1: Identificer jQuery-inkludering i dit tema

For at starte optimeringsprocessen skal vi præcisere, hvor jQuery er inkluderet i dit WordPress-tema. Almindeligvis findes i temafilen functions.php eller direkte i header.php-filen, se efter linjer, der ligner:

wp_enqueue_script('jquery');    

Vi ved nu, at håndtaget for jQuery hedder 'jquery'. At forstå, hvor jQuery er sat i kø, lægger grundlaget for vores optimeringsrejse.

Trin 2: Fremstilling af et barnetema for langtidsætsomhed

Før du foretager ændringer, bør du overveje at oprette et barnetema for at beskytte dine ændringer mod fremtidige opdateringer. Dette sikrer, at dit hårdt arbejde ikke bliver overskrevet, når overordnede temaet modtager en opdatering. At fremstille et barnetema er lidt som at tilføje et ekstra lag rustning til dit websteds struktur.

Trin 3: Sæt jQuery i kø med 'defer'-attributten

Lad os nu dykke ned i de tekniske detaljer. I dit barnetemas functions.php-fil, tilføj følgende kode og ændrer den for at matche din jQuery-filplacering og håndtag. Vi skal bruge den nye defer-strategi

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Lad os dele det op:

• wp_deregister_script('jquery'): Afregistrerer standardscriptet for jQuery.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Registrerer jQuery med 'defer'-strategien.
• wp_enqueue_script('jquery'): Sætter det modificerede jQuery-script i kø.

Et voilà: du har nu med succes udsat jQuery på dit WordPress-websted. Og som bonus ved du nu, hvordan du udsætter ethvert script, fordi processen er nøjagtigt den samme!

Metode 2: Brug et plugin

Plugins som WP Core Web Vitals gør det super nemt at udsætte jQuery, og mange plugins kan endda håndtere de komplikationer, der kan opstå ved at udsætte afhængigheder og udføre nogle få andre tricks som at cachehe jQuery-begivenheder, indtil jQuery er blevet udført.

Metode 3: CloudFlare

En anden super simpel måde at udsætte jQuery på er at bruge CloudFlares Rocket-lader. Rocket-lastere fungerer ved at deaktivere alle dine scripts under sideindlæsning og derefter hurtigt aktivere dem igen. Dette trick efterligner udsættelse af scripts, men det har nogle få ulemper

• CloudFlare Rocket Loader bryder en browser-funktion kaldet preload-scanneren. Med Rocket loader-scripts bliver scriptene ikke forudindlæst, og det kan tage lidt længere tid for dine scripts at blive downloadet og udført.
• CloudFlare Rocket Loader er et ret stumpet instrument. Det skelner ikke mellem vigtige, mindre vigtige og nice-to-have-scripts. Det udsætter bare alt uden nogen overvejelse og efterlader dig uden kontrol over script-timing.
  

Test, test, test!

Efter implementering af disse ændringer skal du grundigt teste dit websteds funktionalitet. Vær særligt opmærksom på interaktive elementer, animationer og funktioner, der er afhængige af jQuery, for at sikre, at de fungerer problemfrit. Grundig test garanterer, at optimeringen ikke utilsigtet introducerer nogle problemer for dit brugerinterface.

Fejlfinding af problemer

Hvis du løber ind i problemer, vil de sandsynligvis falde ind i en af tre kategorier. De fleste problemer kan findes ved at åbne inspektøren og navigere til console-fanen. Hvis der er nogen problemer, vil du sandsynligvis finde advarsler, der ligner dette, og læs 'Uncaught ReferenceError: jQuery is not defined'

At fikse dem er ikke så svært. Ved siden af fejlen er der en henvisning til fejlens oprindelse. Hvis det er (indeks) kommer det sandsynligvis fra et inline-script. Hvis det er en anden fil, er det enten et timingproblem, eller du glemte at udsætte den fil også.

Afhængige scripts

Inline-scripts

$(function(){
 // gør noget
})

• Brug type="module" tricket. Det nyere <script type="module"> vil også udsætte inline JavaScript.
• Placer inline-scripts i en ekstern fil. Hvis du har brug for variabler, kan du tilføje dem i et inline-script direkte på siden, men hovednormalt jQuery-afhængige funktioner skal være i en ekstern fil, der også udsættes. 

Timingproblemer

Et andet, mindre hyppigt problem stammer fra timing. Hvis jQuery ikke udsættes, bliver det udført før DOMContentLoaded og load-begivenheden. Du kan stole på dette. Hvis det udsættes, kan et script blive udført efter DOMContentLoaded-begivenheden. Det betyder, at hvis du har tilknyttet en begivenhedshåndtering på DOMContentLoaded-begivenheden, bliver den ikke pålideligt udført. Hvis du løber ind i problemer som disse, skal du prøve at ændre triggeren eller pakke funktionen ind i jQuery(). 

Og som altid, hvis du er stuck, tøv ikke med at ansætte mig til en 2-timers session!