Kuinka lykätä Javascriptiä WordPressillä nopeuttaaksesi latausaikoja

Haluatko lykätä JavaScriptiä sivustossasi?

Jos et itse ole kehittäjä, tämä voi tuntua ylitsepääsemättömältä tehtävältä.

Javascriptin lykkääminen ei ole vaikeaa, jos olet rakentanut sivuston tyhjästä, mutta WordPressillä sinulla on todennäköisesti teema ja 6–10 laajennusta, jotka kaikki lataavat omia Javascript-tiedostojaan.

Jokaisen JS-tiedoston lataustavan muuttamiseen tarvittavien "koukkujen" löytäminen kestää ikuisuuden!

Onneksi on paljon helpompi tapa.

Tarvitset vain oikean työkalun.

Miksi sinun pitäisi lykätä JS-tiedostoja

Varmistetaan, että olemme samalla sivulla.

Selaimet lataavat yleensä Javascript-tiedostoja ennen kuin ne yrittävät renderöidä sivustosi. Tämä tarkoittaa, että vierailijat eivät näe sivustoasi ennen kuin kaikki Javascript- (ja CSS-)tiedostot on ladattu täyteen.

Jos lykkäät Javascript-tiedostoa, HTML-dokumentti voi latautua ennen kuin Javascript-tiedosto on latautunut. JS-tiedosto saattaa latautua samaan aikaan, mutta se ei käynnisty ennen kuin HTML-dokumentti on ladattu kokonaan.

Toisin sanoen, jos lykkäät Javascript-tiedostoja, HTML-dokumentti latautuu nopeammin, mikä tarkoittaa, että sivustosi tulee näkyviin nopeammin. Näin sivustosi näkyy vierailijoille nopeammin, mikä on viime kädessä tärkeintä.

Kun tämä on poissa tieltä, siirrytään uskomattoman yksinkertaiseen menetelmään, jolla voit lykätä JavaScriptiä sivustossasi.

Kuinka lykätä Javascript-tiedostoja

Sen sijaan, että yrittäisit etsiä ja lykätä komentosarjoja manuaalisesti, voit käyttää laajennusta tekemään sen automaattisesti puolestasi.

Suosittelen kahta erilaista menetelmää.

Lykkää Async Javascriptillä

Ensinnäkin on ilmainen ja helppokäyttöinen Async Javascript -laajennus.

Yksinkertainen ja suosittu Async Javascript on vankka valinta JS-skriptien lykkäämiseen.

Kun asennat tämän suorituskykylaajennuksen, sivustollesi on lisätty seuraava uusi asetusvalikko:

Jos haluat saada asiat käyntiin nopeasti, voit synkronoida tai lykätä kaikki Javascript-tiedostosi kerralla jollakin seuraavista asetuksista:

Voit käyttää viivästettyä latausmenetelmää kaikkiin tiedostoihin, muista tyhjentää välimuisti ja testata sivustosi huolellisesti. On mahdollista, että jotkin sivustosi ominaisuudet, kuten mobiilivalikko tai interaktiiviset hakupalkit, voivat rikkoutua.

Jos huomaat, että jokin sivustosi toiminnoista ei enää toimi, vaihda johonkin versiosta, joka sulkee pois jQueryn, ja tämä todennäköisesti ratkaisee kaikki ongelmat.

Muussa tapauksessa voit manuaalisesti lisätä komentosarjoja asynkronointiin tai lykkäämiseen, jolloin voit testata huolellisesti yhden tiedoston kerrallaan.

Yksi asia tässä lähestymistavassa on, että sinulla on oltava jonkin verran teknistä tietämystä löytääksesi komentosarjakahvat, joita tarvitaan lykättävien tiedostojen tunnistamiseen.

Kaiken kaikkiaan Async Javascript on loistava laajennus ja se on ilmainen!

Jos haluat suorituskykylaajennuksen, joka on yhtä yksinkertainen mutta kestävämpi, jatka lukemista.

Kuinka lykätä JS:ää WP Rocketilla

Completethemes.com-sivustolla käyttämäni laajennus, jota suosittelen useimpiin suorituskyvyn optimointiin, on WP Rocket.

WP Rocket tarjoaa yksinkertaisen käyttöliittymän, joka on täynnä suorituskyvyn optimointiominaisuuksia. Voit kääntää kytkimen pienentääksesi ja ketjuttaaksesi tiedostoja, ottaa käyttöön edistyneen välimuistin, ladata kuvia laiskasti ja paljon muuta.

Vaikka tämä liitännäinen on monimutkainen, asetuspaneeli ei vaadi teknistä tietämystä. Tämä koskee myös Javascript-tiedostojen lykkäämistä.

WP Rocket -hallintapaneelista löydät Tiedoston optimointi -osion.

Täällä on paljon upeita optimointityökaluja, ja JS-lykkäysominaisuus löytyy sivun alalaidasta. Jos otat lykkäyksen käyttöön, näkyviin tulee toinen valintaruutu, jossa on myös "Vikasietotila"-asetus automaattisesti käytössä.

Kuten jo mainitsin, jQueryn lykkääminen johtaa usein rikkinäisiin ominaisuuksiin sivustollasi. Vaikka voit yrittää sammuttaa vikasietotilan, sinun ei todennäköisesti pitäisi.

Ja siinä kaikki! Valitse vain yksi ruutu ja Javascript-tiedostosi lykätään.

Jos haluat tutustua muihin suorituskykyvaihtoehtoihin, voit käydä WP Rocketissa täällä tai katsoa WP Rocket -opetusohjelmamme.

Javascriptiä lykätty

Kun Javascript-tiedostojasi lykätään, sivustosi HTML-dokumentti latautuu nopeammin ja saa sivustosi näyttämään paljon nopeammin.

Useimmille WordPress-sivustoille tämä on helppo ja merkittävä suorituskyvyn lisäys. Mikä parasta, sen käyttäminen sivustossasi ei vaadi teknistä tietämystä.

Jos sinulla on kysyttävää Javascriptin lykkäämisestä WordPressin avulla, jätä kommentti alle.