jQuery:n viivästetty lataus WordPressissä

Opas jQuery:n viivästämiseen WordPressissä

Tervehdys, suorituskyvyn ystävät! Jaan mielelläni näkemyksiä WordPress-sivustosi optimoinnista ja Core Web Vitals -mittareiden parantamisesta. Tänään näytän, miten jQuery:n lataaminen viivästetään, mikä nopeuttaa sivustoasi ja parantaa samalla user experience.

Miksi viivästää jQuery?

jQuery, vankka JavaScript-kirjasto, on kiistatta tehokas työkalu, mutta sen synkroninen lataaminen voi joskus hidastaa sivun alkuperäistä latausta. Monet eri markkinapaikoilla saatavilla olevat teemat nojaavat jQuery:iin. jQuery ei ole rakennettu viivästettäväksi, ja valitettavasti monet teemat eivät viivästä jQuery:ä. 

Mikä on jQuery:n viivästämisen tärkein etu, saatat kysyä? Katso alla olevaa kuvaa. Se näyttää eron HTML-jäsennyksen välillä normaaleilla, viivästetyillä ja async-skripteillä. Jos jQuery:ä ei viivästetä, selain estää HTML-jäsennyksen, kunnes skripti on suoritettu. Jos jQuery on viivästetty, selaimen ei tarvitse estää jäsentäjää. Tämä säästää paljon aikaa, erityisesti Largest Contentful Paint -mittarin osalta. 

Syy siihen, miksi teemat eivät viivästä jQuery:ä oletuksena, on perintökoodi. Jotkut lisäosat lisäävät (inline-)skriptejä, jotka riippuvat jQuery:stä. Jos jQuery ladataan viivästettynä, mutta sitä tarvitseva skripti ei ole viivästetty, syntyy ristiriita (ja virhe)

Menetelmä 1: Viivästä jQuery manuaalisesti

Vaihe 1: jQuery:n sisällyttämisen tunnistaminen teemassasi

Optimointiprosessin aloittamiseksi meidän on paikannettava, missä jQuery sisällytetään WordPress-teemaasi. Se löytyy yleensä teeman functions.php-tiedostosta tai suoraan header.php-tiedostosta, etsi rivejä kuten:

wp_enqueue_script('jquery');    

Tiedämme nyt, että jQuery:n handle on nimeltään 'jquery'. Sen ymmärtäminen, missä jQuery on lisätty jonoon, luo pohjan optimointimatkalle.

Vaihe 2: Lapsiteeman luominen pitkäaikaisen vakauden takaamiseksi

Ennen muutosten tekemistä harkitse lapsiteeman luomista suojellaksesi muutoksiasi tulevilta päivityksiltä. Tämä varmistaa, ettei kovaa työtäsi ylikirjoiteta, kun emäteema päivitetään. Lapsiteeman luominen on kuin lisäpanssarikerroksen lisäämistä sivustosi rakenteeseen.

Vaihe 3: jQuery:n lisääminen jonoon 'defer'-attribuutilla

Sukellaan nyt teknisiin yksityiskohtiin. Lisää seuraava koodi lapsiteemasi functions.php-tiedostoon ja muokkaa sitä vastaamaan jQuery-tiedostosi sijaintia ja handlea. Käytämme uutta defer-strategiaa

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

Puretaan se osiin:

• wp_deregister_script('jquery'): Poistaa oletusarvoisen jQuery-skriptin rekisteröinnin.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Rekisteröi jQuery:n 'defer'-strategialla.
• wp_enqueue_script('jquery'): Lisää muokatun jQuery-skriptin jonoon.

Et voilà: olet nyt onnistuneesti viivästänyt jQuery:n WordPress-sivustollasi. Bonuksena tiedät nyt myös, miten mikä tahansa skripti viivästetään, koska prosessi on täsmälleen sama!

Menetelmä 2: käytä lisäosaa

Lisäosat kuten WP Core Web Vitals tekevät jQuery:n viivästämisestä erittäin helppoa, ja monet lisäosat voivat jopa käsitellä siitä aiheutuvia ongelmia viivästämällä myös riippuvuuksia ja suorittamalla muutamia muita temppuja, kuten jQuery-tapahtumien välimuistiin tallentaminen, kunnes jQuery on suoritettu.

Menetelmä 3: CloudFlare

Toinen erittäin yksinkertainen tapa viivästää jQuery:ä on käyttää CloudFlaren Rocket loaderia. Rocket loader toimii poistamalla kaikki skriptisi käytöstä sivun latauksen aikana ja ottamalla ne sitten nopeasti uudelleen käyttöön. Tämä temppu jäljittelee skriptien viivästämistä, mutta sillä on muutamia haittapuolia

• CloudFlare Rocket Loader rikkoo selaimen ominaisuuden nimeltä preload scanner. Rocket loaderilla skriptejä ei esiladata, ja skriptiesi lataaminen ja suorittaminen voi kestää hieman kauemmin.
• CloudFlare Rocket Loader on melko suoraviivainen työkalu. Se ei tee eroa tärkeiden, vähemmän tärkeiden ja mukavien skriptien välillä. Se vain viivästää kaiken ilman harkintaa eikä anna sinulle hallintaa skriptien ajoituksesta.
  

Testaa, testaa, testaa!

Näiden muutosten toteuttamisen jälkeen testaa sivustosi toiminnallisuus perusteellisesti. Kiinnitä erityistä huomiota interaktiivisiin elementteihin, animaatioihin ja jQuery:stä riippuviin ominaisuuksiin varmistaaksesi, että ne toimivat saumattomasti. Perusteellinen testaus takaa, ettei optimointi vahingossa aiheuta häiriöitä käyttöliittymääsi.

Vianmääritys

Jos kohtaat ongelmia, ne kuuluvat todennäköisesti yhteen kolmesta kategoriasta. Useimmat ongelmat löytyvät avaamalla tarkastustyökalu ja siirtymällä konsoli-välilehdelle. Jos ongelmia on, löydät todennäköisesti varoituksia, jotka näyttävät tältä ja lukevat 'Uncaught ReferenceError: jQuery is not defined'

Niiden korjaaminen ei ole kovin vaikeaa. Virheen vieressä on viittaus virheen alkuperään. Jos se on (index), se todennäköisesti tulee inline-skriptistä. Jos se on toinen tiedosto, kyseessä on joko ajoitusongelma tai unohdit viivästää myös kyseisen tiedoston.

Riippuvat skriptit

Inline-skriptit

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

• Käytä type="module" -temppua. Uudempi <script type="module"> viivästää myös inline JavaScript.
• Sijoita inline-skriptit ulkoiseen tiedostoon. Jos tarvitset muuttujia, voit lisätä ne inline-skriptiin suoraan sivulle, mutta pääasialliset jQuery:stä riippuvat funktiot tulisi sijoittaa ulkoiseen tiedostoon, joka on myös viivästetty. 

Ajoitusongelmat

Toinen, harvinaisempi ongelma johtuu ajoituksesta. Jos jQuery:ä ei viivästetä, se suoritetaan ennen  DOMContentLoaded- ja load-tapahtumaa. Tähän voi luottaa. Jos se on viivästetty, skripti saatetaan suorittaa DOMContentLoaded-tapahtuman jälkeen. Tämä tarkoittaa, että jos olet liittänyt tapahtumankäsittelijän DOMContentLoaded-tapahtumaan, sitä ei suoriteta luotettavasti. Jos kohtaat tällaisia ongelmia, kokeile vaihtaa triggeriä tai kääriä funktio jQuery():n sisään. 

Ja kuten aina, jos jäät jumiin, älä epäröi palkata minut 2 tunnin sessioon!