Defer jQuery i WordPress

En guide til å bruke defer på jQuery i WordPress

Hei, ytelsesinteresserte! Jeg er glad for å dele innsikt om optimalisering av WordPress-nettstedet ditt og forbedring av Core Web Vitals. I dag skal jeg vise deg hvordan du kan utsette lastingen av jQuery, noe som forbedrer nettstedets hastighet og dermed user experience.

Hvorfor bruke defer på jQuery?

jQuery, et robust JavaScript-bibliotek, er utvilsomt et kraftig verktøy, men den synkrone lastingen kan noen ganger bremse den første sideinnlastingen. Mange temaer som er tilgjengelige  på de ulike markedsplassene er avhengige av jQuery. Ikke all jQuery er bygget for å bli utsatt, men dessverre bruker mange temaer ikke defer på jQuery. 

Så hva er den største fordelen med å bruke defer på jQuery, spør du kanskje? Ta en titt på bildet nedenfor. Det viser forskjellen i HTML-parsing mellom vanlige, utsatte og asynkrone skript. Hvis jQuery ikke er utsatt, vil nettleseren blokkere HTML-parsingen til skriptet er utført. Hvis jQuery er utsatt, trenger ikke nettleseren å blokkere parseren. Og dette vil spare deg for mye tid, spesielt når det gjelder Largest Contentful Paint. 

Grunnen til at temautviklere ikke bruker defer på jQuery som standard, er på grunn av eldre kode. Noen plugins legger til (inline) skript som er avhengige av jQuery. Hvis jQuery lastes med defer, men skriptet som trenger jQuery ikke har defer, vil det oppstå en konflikt (og en feil)

Metode 1: Manuelt bruke defer på jQuery

Trinn 1: Identifisere jQuery-inkludering i temaet ditt

For å starte optimaliseringsprosessen må vi finne ut hvor jQuery er inkludert i WordPress-temaet ditt. Det finnes vanligvis i temaets functions.php-fil eller direkte i header.php-filen, se etter linjer som ligner:

wp_enqueue_script('jquery');    

Vi vet nå at handelen for jQuery kalles 'jquery'. Å forstå hvor jQuery er satt i kø, legger grunnlaget for vår optimaliseringsreise.

Trinn 2: Lage et barnetema for langsiktig stabilitet

Før du gjør noen endringer, bør du vurdere å lage et barnetema for å beskytte endringene dine mot fremtidige oppdateringer. Dette sikrer at det harde arbeidet ditt ikke blir overskrevet når foreldretemaet mottar en oppdatering. Å lage et barnetema er litt som å legge til et ekstra lag med rustning på nettstedets struktur.

Trinn 3: Sett jQuery i kø med «defer»-attributten

La oss nå dykke ned i de tekniske detaljene. I barnetemaets functions.php-fil legger du til følgende kode og tilpasser den til plasseringen og handelen til din jQuery-fil. Vi kommer til å bruke den nye defer-strategien

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);

La oss bryte det ned:

• wp_deregister_script('jquery'): Avregistrerer standard jQuery-skriptet.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Registrerer jQuery med «defer»-strategien.
• wp_enqueue_script('jquery'): Setter det modifiserte jQuery-skriptet i kø.

Et voilà: du har nå vellykket brukt defer på jQuery på WordPress-nettstedet ditt. Og som en bonus vet du nå hvordan du kan bruke defer på ethvert skript, fordi prosessen er nøyaktig den samme!

Metode 2: bruk en plugin

Plugins som WP Core Web Vitals gjør det superenkelt å bruke defer på jQuery, og mange plugins kan til og med håndtere komplikasjonene som kan oppstå ved å også utsette avhengigheter og utføre noen andre triks som å mellomlagre jQuery-hendelser til jQuery er utført.

Metode 3: CloudFlare

En annen superenkel måte å bruke defer på jQuery er å bruke CloudFlares Rocket Loader. Rocket Loader fungerer ved å deaktivere alle skriptene dine under sideinnlasting og deretter raskt aktivere dem igjen. Dette trikset etterligner utsetting av skript, men det har noen ulemper

• CloudFlare Rocket Loader bryter en nettleserfunksjon kalt forhåndsinnlastingsskanneren. Med Rocket Loader blir ikke skript forhåndslastet, og det kan ta litt lenger tid før skriptene dine lastes ned og utføres.
• CloudFlare Rocket Loader er et ganske grovt verktøy. Det skiller ikke mellom viktige, mindre viktige og hyggelig-å-ha-skript. Det bruker bare defer på alt uten noen vurdering og gir deg ingen kontroll over skript-timing.
  

Test, Test, Test!

Etter å ha implementert disse endringene, bør du teste nettstedets funksjonalitet grundig. Vær spesielt oppmerksom på interaktive elementer, animasjoner og funksjoner som er avhengige av jQuery, for å sikre at de fungerer sømløst. Grundig testing garanterer at optimaliseringen ikke utilsiktet introduserer noen problemer i brukergrensesnittet ditt.

Feilsøking av problemer

Hvis du støter på problemer, vil de sannsynligvis falle inn i en av 3 kategorier. De fleste problemer kan finnes ved å åpne inspektøren og navigere til konsoll-fanen. Hvis det er noen problemer, vil du sannsynligvis finne advarsler som ser omtrent slik ut og lyder «Uncaught ReferenceError: jQuery is not defined»

Å fikse dem er ikke så vanskelig. Ved siden av feilen er en referanse til feilens opprinnelse. Hvis det er (index), stammer det mest sannsynlig fra et inline-skript. Hvis det er en annen fil, er det enten et tidsproblem, eller du glemte å bruke defer på den filen også.

Avhengige skript

Inline-skript

$(function(){
 // do something
})

• Bruk type="module"-trikset. Den nyere <script type="module"> vil også utsette inline JavaScript.
• Plasser inline-skript i en ekstern fil. Hvis du trenger variabler, kan du legge dem til i et inline-skript direkte på siden, men de viktigste jQuery-avhengige funksjonene bør være i en ekstern fil som også er utsatt. 

Tidsproblemer

Et annet, mindre vanlig problem stammer fra timing. Hvis jQuery ikke har defer, vil det kjøre før DOMContentLoaded- og load-hendelsen. Du kan stole på dette. Hvis det har defer, kan et skript bli kjørt etter DOMContentLoaded-hendelsen. Dette betyr at hvis du har knyttet en hendelseshåndterer til DOMContentLoaded-hendelsen, vil den ikke pålitelig bli utført. Hvis du støter på slike problemer, prøv å endre utløseren eller pakke funksjonen inn i jQuery(). 

Og som alltid, hvis du står fast, ikke nøl med å leie meg for en 2-timers økt!