Lykkää Javascriptin jäsentämistä – 5 tapaa korjata se ja lisätä nopeutta (2023)

Koska joku, joka yrittää ymmärtää, kuinka lykätä Javascriptin jäsentämistä, uskomme, että sinulla on ongelma. Omistat tai olet käynyt jonkun tuntemasi henkilön verkkosivustolla (ehkä asiakas?), Ja lataaminen kestää ikuisesti. Ja kun suoritit sen verkkosivuston nopeustestaustyökalujen avulla, saat suosituksen, jonka et ole varma miten se toteutetaan.

Tässä artikkelissa aiomme jakaa useita tapoja lykätä Javascriptia ja korjata tämä varoitus ja viime kädessä saada verkkosivusto latautumaan nopeammin, heittämättä tätä virhettä!

Jos sinulla on vähän aikaa, voit tehdä joitain nopeita toimintoja:

Ohjeet JavaScriptin jäsentämisen lykkäämiseen

1. Lataa Async-laajennus tätä.
2. Valitse Laajennukset> Lisää uusi> Lähetä laajennus ja valitse juuri lataamasi tiedosto.
3. Valitse Aktivoida asennetun laajennuksen.
4. Siirry laajennuksiin ja napsauta Asetukset juuri asentamallesi Async-laajennukselle.
5. Klikkaamalla Ota Async Javascript käyttööntai Käytä Async kahdeksi yleisimmistä tavoista käyttää korjausta.
6. Testaa verkkosivustoasi nähdäksesi, että kaikki toimii edelleen hyvin.

Miksi Javascriptin jäsentämisen lykkäämisen toteutus on tärkeä? Jos et lykkää Javascriptin jäsentämistä, verkkosivustosi näyttää vaikuttavan latautuvan hitaasti. Javascript on pohjimmiltaan tärkeä rakennuspalikka web-kielellä, sen avulla web-kehittäjät voivat luoda "dynaamisen" toiminnallisuuden.

Useimmissa tapauksissa Javascript-tiedostot ovat yleensä melko suuria. Ne voivat myös vetää sisään kolmannen osapuolen palvelimilta. Tämä tekee lataamisesta hidasta. Mutta tämä on vain puolet ongelmasta.

Suurin ongelma on, että jos Javascriptin jäsentämistä ei ole lykätty, selain on estetty näyttämästä sisältöä. Verkkosivusto EI TEE. Ja miltä tämä näyttää käyttäjältä? Näyttää siltä, ​​että sivusto on joko hidas, rikki tai täysin kuollut. 

Ongelma lisääntyy mobiililaitteissa, joissa käytettävissä oleva prosessointiteho yhdessä käytettävissä olevan kaistanleveyden kanssa tekevät kokemuksesta vieläkin pahemman.

Ja mitä käyttäjät, jotka saavat tällaisen kokemuksen, tekevät? He vetäytyvät pois verkkosivustoltasi, eivätkä koskaan palaa!

Jos olet ollut verkkotoimialalla jonkin aikaa ja yrität parantaa verkkosivustosi SEO: tä, tiedät jo, että verkkosivuston suorituskyky on ratkaiseva hakukoneesi näkyvyyden parantamiseen.

Ja jos olet käyttänyt Google PageSpeed ​​Insights -palvelua verkkosivustosi tarkistamiseen, "Javascriptin jäsentämisen lykkäämisen" lisäksi on vielä salaisempia varoituksia, kuten "Poista renderointia estävät resurssit".

Tällä teknisellä tavaralla näyttää olevan suurin vaikutus kuormausnopeuteen! 

Poistaa?! Mutta kuinka minun pitäisi poistaa nämä tärkeät tiedostot verkkosivustoltani?

Älä huoli, olemme täällä auttamassa sinua korjaamaan nämä varoitukset, ratkaisemaan nämä ongelmat ja viime kädessä tekemään sivusi latautumaan nopeammin!

Koska sinä sinun ei tarvitse poistaa niitä. Sinun tarvitsee vain lykätä JavaScriptin jäsentämistä.

Katsokaa tätä lyhyttä videota nähdäksesi, kuinka helppoa on lykätä Javascriptin jäsentämistä jollakin seuraavista tavoista:

Muissa kuin geekspeakissa tämä tarkoittaa sitä, että sinun täytyy säätää muutamia asioita WordPressissäsi, jotta sivu antaa sisällön ladata ensin ennen JavaScript-tiedostojesi lataamista tai jäsentämistä. 

Tämä johtuu siitä, että jos et lykkää Javascriptin jäsentämistä, verkkosivuston renderoinnista tulee erittäin raskas toimenpide, ja kuten edellä sanoimme, verkkosivusto näyttää olevan rikki.

Sen varmistamiseksi, että käyttäjä pysyy sivustolla, haluaisimme ilmoittaa heille, että jotain todella tapahtuu, ja näyttää sisällön käyttäjälle sen sijaan, että odottaisimme selaimen suorittavan kaikki raskaat nostot ennen kuin näytät mitään käyttäjälle. . 

Muuten, jos haluat tehdä WordPressistä nopeasti, on olemassa muutamia laajennuksia, kuten tämä joka voi saada aikaan todellisen muutoksen suorituskyvyssä muutamassa minuutissa (vaivattomasti nollaan).

Jos olet kiinnostunut, WP Rocket voi asettaa lykätä Javascriptin ja monien muiden muutosten jäsentämistä, jotta sivustosi olisi nopeampi, napsauta alla olevaa banneria tarkistaaksesi sen. 

Etkö ole valmis käyttämään laajennusta toistaiseksi? Jatka lukemista... 

Mikä on JavaScript-jäsentämisen lykkääminen?

Lykkää Javascriptin jäsentämistä tarkoittaa "defer"Tai"async"sivun estämisen estämiseksi. Tämä HTML-komento kehottaa selainta suorittamaan / jäsentämään komentosarjat sivun lataamisen jälkeen (lykätä) tai asynkronisesti (rinnakkain). Tämä sallii sisällön näyttämisen odottamatta komentosarjojen lataamista. .

Asettamalla lykätä JavaScriptien jäsentämistä voit antaa sisällön latautua nopeammin ja etusijalla.

Miksi näin?

Katso alla tämä erinomainen selittäjä, joka osoittaa, kuinka verkkosivut ladataan ja kuinka JavaScript-tiedostot haittaavat suuresti verkkosivustosi latausaikaa.

Jatkamme yllä olevaa videota, katsotaanpa lyhyesti, mitä tapahtuu, kun joku vierailee verkkosivustollasi: 

1. Kun käyttäjä napsauttaa verkkosivustoosi osoittavaa linkkiä, käyttäjän selain pyytää sitä palvelimeltasi, jonka palvelimesi "palvelee" käyttäjän selaimessa.
2. Sitten käyttäjän selain vastaanottaa ja näkee verkkosivusi HTML-sisällön ja aloittaa sen renderoinnin. Se aloittaa verkkosivusi rakentamisen ylhäältä alas.
3. Jos se löytää JavaScript-tiedostoja matkan varrella, selain pysähtyy ja noutaa sen (jos se on ulkoinen tiedosto) ja jäsentää sen
4. Vasta sen jälkeen, kun jokainen komentosarja on täysin haettu ja jäsennelty, se jatkaa muun sisällön lataamista.

Olet todennäköisesti jo alkamassa nähdä, missä ongelma on.

Kun sivuillasi on paljon JavaScript-tiedostoja, se voi vaikuttaa merkittävästi verkkosivustosi latausaikaan - negatiivisesti.

Käyttäjän selain näyttää jatkuvasti latauskuvakkeen tai pyörivän pyörän jäsennellessäsi ja ladatessasi komentosarjojasi, ennen kuin se näyttää todellisen sisällön - tämä näkyy erityisesti mobiiliselaimissa tai hitailla datayhteyksillä.

Jos se vie enemmän kuin muutaman sekunnin, varsinkin jos palvelet komentosarjojasi ulkoiselta palvelimelta (ja tällä palvelimella on tällä hetkellä ongelmia) - kävijät alkavat kärsiä.

Tuona aikana käyttäjä ei näe muuta kuin valkoista tyhjää sivua. Eikö se ole yksi turhauttavimmista asioista Internetissä? Kaiken oletetaan olevan välitöntä verkossa, miksi heidän on odotettava sivusi latautumista?

Jos käyttäjä odottaa yli 4 sekuntia, hän alkaa ärtyä. Yli 8 sekunnin kuluttua ja verkkosivustosi on yhtä hyvä kuin kuollut - käyttäjä siirtyy toiselle verkkosivustolle.

Olet menettänyt kävijän ja luultavasti heidän liiketoimintansa. 

Lisähaaste on, että monta kertaa nämä JS-tiedostot lisätään verkkosivustollesi välttämättömillä laajennuksilla ja teemoilla, jotka olet asentanut, joten et voi päästä eroon niistä helposti.

Joten mitä teet?

Tämän ratkaisemiseksi sinun on lykättävä JavaScriptin jäsentämistä. Tämä toimii jäsentämällä komentosarjat, kun pääsisältö on ladattu. Katso alla olevasta kuvasta nähdäksesi tarkalleen vaikutus latausaikaan. Kuten voimme nähdä, komento lykätä pakottaa selaimen suorittamaan Javascriptin myöhemmin, kun taas asynkronointi sallii tavaroiden tapahtua samanaikaisesti latauksen kanssa.

Siksi, kun käyttäjä vierailee sivustollasi, selaimesi jatkaa sen sijaan kaiken jäsentämistä ylhäältä alas, mutta ohittaa JavaScript-tiedostosi myöhempää käyttöä varten. Tällä tavalla käyttäjät voivat nähdä sisältösi heti odottamatta. 

Jos olet katsellut yllä olevaa videota, olet huomannut, että asynkronointi- ja lykkäämisominaisuudet auttavat suuresti.

Mutta miten tekisit sen WordPressissä? Milloin on oikea aika käyttää niitä? Katsotaanpa ja aloitetaan!

Analysoi verkkosivustosi

Ennen kuin aloitamme, sinun on tiedettävä, onko sinun asennettava Javascriptin lykkäyskorjaus sivustollesi vai ei. Voit selvittää tarpeen mukaan käyttämällä useita työkaluja, jotka ovat helposti saatavilla verkossa.

Joitakin esimerkkejä ovat seuraavat:

1. GTMetrix

Tämä toimii tarkistamalla sekä PageSpeed- että Yslow-mittarit ja antaa sinulle pistemäärän F: sta A: seen. Ne antavat sinulle myös suosituksia ja vinkkejä verkkosivustosi parantamiseen, jos ongelmia löytyy. Se kertoo sinulle, jos haluat lykätä JavaScriptin jäsentämistä. 

Yleensä pistemäärän tulisi olla vähintään 71.

Alla olevassa kuvassa on verkkosivusto, jota ei tarvitse lykätä. 

2. PageSpeed-työkalut

Googlen kehittämä työkalu, PageSpeed ​​Insights on toinen kattava työkalu, joka tarjoaa kattavaa tietoa sivustosi suorituskykyongelmista sekä vinkkejä niiden korjaamiseen kuten GTMetrix.

Yksi parhaista asioista tässä työkalussa on se, että se sisältää linkit perusteellisiin oppaisiin ja resursseihin, joiden avulla voit korjata kaikki suorituskykyongelmat. Alla olevassa kuvassa on verkkosivusto, jonka on pakko toteuttaa JavaScriptiä lykätä.

3. Pingdom Työkalut 

Toinen suosittu verkkosivuston suorituskyvyn testaustyökalu, joka on kaikkien saatavilla vapaasti.

Vaikka ei vaikuta nimenomaisesti kertovan, onko JavaScriptin jäsentämistä lykättävä, kattavan tulossivun ansiosta voit tarkistaa, kuinka kauan skriptien lataaminen kesti.

Alla olevassa kuvassa on verkkosivusto, jolla on melkein puolet sivusta, joka koostuu JavaScriptiä - hyvä osoitus siitä, että haluat ehkä lykätä komentosarjojasi. 

4.  Vaihteleva PageSpeed 

Toinen erinomainen työkalu, joka kertoo, onko sivustollasi hahmonnusta estäviä komentosarjoja.

Parasta on, että se antaa sinun tietää tarkalleen, mitä he ovat, aivan kuten alla olevassa kuvassa: 

Okei hyvä!

Nyt sinulla on pääsy työkaluihin, joiden avulla voit selvittää, tarvitseeko JavaScripti-tiedostojen jäsentämistä lykätä.

Mutta saatat kysyä, miksi ei vain panna se täytäntöön ja jättää se yksin? Jos lykkäät JavaScriptien jäsentämistä väärin, se voi rikkoa asioita, ja korjaaminen voi olla turhauttavaa, jos et ole teknisesti taitava.

Pelkkä lykkäystilan käyttöönotto ei tarkoita, että kaikki on asetettu unohdettavaksi ja että ne toimivat hyvin. Sinun on tarkistettava, oletko tehnyt sen oikein ja varmistettava, että kaikki toimii edelleen suunnitellusti. 

Esimerkiksi, jos käytät jQueryä, sinun on valittava huolellisesti, mitä skriptejäsi pitäisi lykätä, koska näyttää olevan ongelma lykkäyksen ja jQueryn kanssa.

Tämän lisäksi huomaat, että Stack Overflow -sovelluksessa on paljon kysymyksiä jQuerystä, asynkronoinnista ja lykkäämisestä, mikä usein kertoo kuinka sinun tulisi toteuttaa viivästys ja asynkronointi, jos niin pitäisi, jQueryyn perustuville skripteillesi. 

Joten mitkä ovat tulokset? Tarvitseeko sinun lykätä skriptejäsi?

Jos näin on, selvitetään nyt, kuinka lykätä JavaScriptiä WordPressissä!

Kuinka lykätä JavaScriptin jäsentämistä WordPressissä

JavaScriptin jäsentämisen lykkääminen WordPressissä voi olla melko suoraviivaista.

Voit vain asentaa yhden tuhansista laajennuksista WordPress-arkistoon ja olet valmis lähtemään. Mutta on myös edistyneitä tapoja tehdä se, jos tarvitset enemmän hallintaa, varsinkin jos käytät monimutkaisia ​​komentosarjoja, jotta sivustosi olisi houkuttelevampi ja vuorovaikutteisempi. 

Tässä osiossa aiomme tarkistaa viisi erilaista tapaa suorittaa JavaScriptiä lykätä jäsentämistä WordPressissä: laajennusten, functions.php: n ja koodin muokkaamisen manuaalisesti. 

WordPress-arkistossa on niin paljon laajennuksia, jotka voivat auttaa parantamaan verkkosivustosi suorituskykyä.

On joitain, jotka on omistettu tietylle tehtävälle, kuten HTML-koodisi minimoimiseksi, ja on laajennuksia, jotka yrittävät sisällyttää kaikki suorituskykyyn liittyvät muutokset yhdellä laajennuksella, kuten mahdollisuus minimoida ja lykätä CSS- ja JavaScript-tiedostoja, toteuttaa ja hyödyntää selaimen välimuistia (jota olemme käsitelleet laajasti tässä artikkelissa) ja enemmän. 

Kaikkia laajennuksia ei kuitenkaan luoda yhtä suurina. Jotkut toimivat hyvin, jotkut toimivat kunnossa, ja jotkut eivät toimi lainkaan ja saattavat jopa rikkoa osan tai kaikki sivustosi toiminnot. 

(Jos haluat mieluummin jonkun kokeneen hoitavan tämän puolestasi, voit tehdä sen käyttämällä halpaa Fiverr-keikkaa napsauttamalla alla olevaa painiketta.)

1. Lykkää Javascriptin jäsentämistä Async-laajennuksen avulla

Rehellisesti sanottuna suosittelemme, että valitset premium-laajennuksen (joka on halpa), mutta olet varma, että korjaat paitsi tämän varoituksen myös kaikenlaisia ​​verkkosivustojen latausnopeusongelmia.

Aloitamme yhdellä suosituimmista, jotka on tarkoitettu tekemään yksi tässä artikkelissa määritelty työ.

Yksi suosituimmista vaihtoehdoista suorittaa tämä työ on Async Javascript. Tämä laajennus keskittyy parantamaan sivustosi suorituskykyä säätämällä komentosarjojesi latautumista, ja kuten alla olevassa WP Rocketissa, siinä on myös lisäominaisuuksia, joiden avulla voit sulkea pois tiettyjen komentosarjojen lykkäämisen.

Tässä on vaiheet, jotka sinun on suoritettava tämän laajennuksen käyttämiseksi.

1. Lataa Async-laajennus tätä.
2. Valitse Laajennukset> Lisää uusi WP-taustalla.
3. Valitse Lähetä laajennus ja valitse juuri lataamasi tiedosto.
4. Vaihtoehtoisesti voit hakea Async Javascriptia ja napsauttaa Asenna nyt.
5. Valitse Aktivoida asennetun laajennuksen.
6. Siirry laajennuksiin ja napsauta Asetukset juuri asentamallesi Async-laajennukselle.
7. Suosittelemme napsauttamalla Ota Async Javascript käyttööntai Käytä Async kahdeksi yleisimmistä tavoista käyttää korjausta.
8. Jos nämä eivät toimi, voit kokeilla muutamia erilaisia ​​yhdistelmiä.
9. Testaa verkkosivustoasi nähdäksesi, että kaikki toimii edelleen hyvin.

Ehkä yksi sen vahvuuksista on, että sen lisäksi, että voit sulkea pois tiettyjen komentosarjojen lykkäämisen, sinulla on myös mahdollisuus valita, mitkä komentosarjat lykätään:

Saatat myös huomata, että sinulla on mahdollisuus joko asynkronoida tai lykätä komentosarjaa. Lisätietoja näiden kahden välisestä erosta voit lukea tämän artikkeli.

Yksi tämän laajennuksen ainutlaatuinen piirre on, että voit määrittää sulkemaan tietyn teeman tai laajennuksen.

On myös mahdollisuus integroida GTMetrix sivustoosi, jotta voit aina tarkistaa sen suorituskyvyn. Huomaa, että joka kerta kun suoritat testin, API-hyvitys vähennetään GTMetrix-tililtäsi.

Vaikka jotkut ihmiset suosittelevat WP Lykätty JavaScriptiä, tätä laajennusta ei ole päivitetty yli 3 vuoden ajan, eikä sitä ole testattu viimeisillä kolmella pääversiolla, joten suosittelemme, ettet käytä tätä. Se voi silti toimia, mutta sitä ei ole testattu, joten se on riski, jota sinun ei pitäisi ottaa.

Jos sinulla on suhteellisen yksinkertainen sivusto ja haluat parantaa edelleen latausaikojasi, tämä voi olla juuri sitä mitä tarvitset. Tämä laajennus ei vaadi konfigurointia lainkaan - asenna, aktivoi ja unohda.

Jälleen kerran pidä mielessä, että tätä ei suositella monimutkaisille sivustoille, kuten verkkokauppa, koska sillä ei ole edistyneitä säätövaihtoehtoja ja iänsä vuoksi. Mahdollisuus hienosäätää JavaScript-lykkäysvaihtoehtoja on ratkaisevan tärkeää suurille ja monimutkaisille sivustoille.

2. WP-raketti

Tällä hetkellä siellä johtava WordPress-suorituskyvyn laajennus, WP Rocket tarjoaa paitsi mahdollisuuden lykätä JavaScript-tiedostojen myös CSS-tiedostojesi jäsentämistä. Sen lisäksi saat paljon muita suorituskyvyn parantamisvaihtoehtoja.

Joitakin ominaisuuksia ovat seuraavat: 

• Minimointi - kutistaa sivustosi koodin koon, jotta se latautuu nopeammin. Se tekee niin poistamalla välilyönnit ja muut tarpeettomat merkit koodista vaikuttamatta sen ydintoimintoihin.
• Ketjutus - yhdistää useita CSS- ja JavaScript-tiedostoja yhdeksi.
• Laiska lataus - tämä on videotiedostojen ja muun multimediasisällön, kuten kuvien, lykkäystila. Se viivästyttää näiden resurssiintensiivisten tiedostojen lataamista vasta, kun käyttäjä on vierittänyt niitä alaspäin.

Yksi WP Rocketin parhaista asioista on, että kun asennat ja aktivoit sen, voit jättää sen yksin ja saat automaattisesti suorituskyvyn parannuksia.

Voit kuitenkin määrittää lisäasetuksia, jotta suorituskyky paranee entisestään, mutta muista, että joillakin niistä voi olla haitallisia vaikutuksia sivustoosi. Ja siksi niiden lykkäysvaihtoehto JavaScript- ja CSS -tiedostoille ei ole oletusarvoisesti käytössä, koska jos ne tehdään varovastilesshe voivat rikkoa asioita.

Onneksi voit sulkea pois tiettyjen komentosarjojen lykkäämisen.

Voit yrittää sulkea ensin kaikki komentosarjat ja lykätä sitten Javascript-tiedostojen jäsentämistä yksi kerrallaan, kunnes löydät ongelmallisen. Heillä on laaja dokumentaatio auttaa sinua siinä. Näin pystyt maksimoimaan suorituskyvyn parannuksia rikkomatta tai uhraamatta verkkosivustosi kaikkia tai kaikkia toimintoja.

WP Rocket on premium-laajennus, mutta kun otetaan huomioon tarjottu hinta ja toiminnallisuus (paitsi JS-tiedostojen lykkääminen ja asynkronointi, myös paljon muita optimointeja, jotka ovat taattu jotta verkkosivustosi olisi nopeampi), uskomme sen olevan hintansa arvoinen.

Lataa WP Rocket

3. Speed ​​Booster -paketti

Toinen loistava, all-in-one-suorituskykyinen laajennus, jonka avulla voit lykätä Javascript-tiedostojen jäsentämistä, on Speed ​​Booster -paketti. Se on ominaisuuksiltaan samanlainen kuin WP Rocket, mutta se on ilmainen. Siinä on suurin osa WP Rocketin perusominaisuuksista, kuten pienentäminen, lykkääminen, tarpeettomien tiedostojen poistaminen jne.

Alla näet joitain lisäosan ominaisuuksia: 

Lisäasetukset-välilehdessä voit jättää joitain komentosarjoja joko siirtymättä alatunnisteeseen tai lykkäämistä tai molempia. Voit kuitenkin lisätä vain 4 poissuljettua komentosarjaa, mikä on varmasti rajoitus monimutkaisille ja suurille sivustoille. 

Kaiken kaikkiaan se on hyvä ilmainen vaihtoehto WP Rocketille, sopii pienille sivustoille.

4. Funktioiden.php käyttäminen

Entä jos et halua käyttää laajennuksia?

On toinen temppu, jonka voit tehdä lykätäksesi Javascriptin jäsentämistä WordPressissä, eli muokkaamalla teeman toiminnot.php-tiedostoa.

Kopioi vain alla oleva koodi ja liitä se teeman funk.php -tiedoston alaosaan: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Muista, että saatat sotkea sivustosi, jos teet sen väärin, joten ole varovainen ja varmista, että muokkaat oikeaa tiedostoa oikealla teemalla ja että liität koodinpätkän oikeaan paikkaan. Älä poista / muuta mitään muuta.

Onneksi voit luoda lapsiteeman turvallisten muokkausten tekemiseen function.php-tiedostoon. Sen lisäksi, jos vaihdat tai päivität teeman, voit helposti pitää kaikki mukautetut muokkaukset tiedostossa. Tässä on hieno artikkeli, joka selittää lapsiteeman luomisen. Kun olet luonut lapsiteeman, liitä vain koodinpätkä lapsen function.php-tiedostoon, tallenna se ja kaikki on asetettu.

Lue lisää: Viestien esto on aktiivinen

5. Muokkaa koodia manuaalisesti

Tämä saattaa kuulostaa pelottavalta, varsinkin jos et halua koodaamista, mutta edistyneille käyttäjille koodin säätäminen manuaalisesti on hieno tapa lykätä JavaScripti -tiedostojen jäsentämistä WordPressissä. 

Varvy on upea koodinpätkä, jonka avulla verkkosivusi alkuperäinen sisältö ladataan kokonaan ennen muiden ulkoisten komentosarjojen lataamista. Koodinpätkä on alla:

  function downloadJSAtOnload () {
    var element = document.createElement ("komentosarja");
    element.src = "//www.omaverkkotunnus.com/viite.js";
    document.body.appendChild (elementti);
  }
  if (ikkuna.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  else if (ikkuna.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  else window.onload = lataaJSAtOnload;

Korvaa defer.js omalla komentotiedostollasi. Kun olet muokannut sitä vastaamaan omaa komentosarjaasi, liitä se juuri ennen HTML-koodisi tag. WordPressissä voit tehdä sen muokkaamalla teeman footer.php-tiedostoa.

Jälleen on suositeltavaa käyttää aliteemaa, jos aiot luoda muokkauksia teematiedostoihisi. Pieni huomautus: footer.php: n muokkaaminen lapsiteeman kautta poikkeaa toiminnoista.php: sinun on kopioitava pääteemasi koko footer.php ja sen sisältö lapsesi teemaan ja tehtävä / lisättävä muokkaukset. 

Jos et halua mennä vaivaan footer.php: n muokkaamisesta, voit käyttää liitännäistä nimeltä Lisää otsikot ja alatunnisteet. 

Liitä vain koodinpätkä Scripts in Footer -ruutuun, paina Tallenna ja saat komentosarjan sivustosi koodin alaosaan, tag. 

Ja siinä kaikki tapa, jolla voit lykätä JavaScriptin jäsentämistä WordPressissä! Mutta toimivatko ne? Paransivatko ne sivustosi suorituskykyä? Tarkistetaan tulokset!

Tulosten testaaminen

Testaa tulokset siirtymällä osoitteisiin GTMetrix.com, PageSpeed ​​Insights ja Pingdom Tools ja tarkistaaksesi, parantuiko suorituskykysi ja latausaikasi.

GTMetrixissä pistemäärän tulee olla vähintään 71. Mitä enemmän, sitä parempi! Täydellinen pisteet haluaisivat tämän :-) 

Etsi PageSpeed ​​Insights -sivustolta ”ensimmäiset maalit”:

Yleensä, kun testaat, onko JavaScriptiä lykkäävä jäsentäminen johtanut komentosarjojen lykkäämiseen, pyri vihreisiin tuloksiin First Contentful Paint ja First Meaning Paint.

Vertaa ennen lykkäämistä ja sen jälkeen ja tarkista, parantuvatko ne.

Katso Pingdom-työkalut latausjärjestys-osiosta ja katso, ladataanko suurin osa, ellei kaikki, komentosarjatiedostoistasi viimeisin. Vertaa ennen lykkäystä ja sen jälkeen ja varmista, muuttivatko skriptitiedostot sijaintia latausjärjestyksessä (ts. Latautuivatko ne aikaisemmin vai myöhemmin). 

Tyydyttivätkö tulokset sinua? Jos näin on, hyvää työtä! Jos ei, kokeile kokeilla lisää. Jos käytit muita luettelossamme olevia tapoja, kokeile käyttää laajennettuja laajennuksia, joiden avulla voit mukauttaa edelleen lykkäystä ja suorituskykyä. Katso myös joitain Googlen suosituksia seuraavasta osiosta. He voivat auttaa sinua.

Kuinka lykätä JavaScriptin jäsentämistä komentosarjan avulla

JavaScript-jäsentämisen lykkäämiseen voidaan käyttää erilaisia ​​tekniikoita. Seuraava osa käsittelee mitä sinun on tehtävä. 

Yhteenvetona, sinun on suoritettava seuraava:

1. Kopioi alla oleva koodi ja lisää se juuri ennen koodia tag HTML-koodissasi.
2. Korvaa alla olevan koodin esimerkki.js tiedostolla, joka sisältää lykättävän komentosarjan.
3. Tallenna muutokset.
4. Testaa verkkosivustosi nähdäksesi vaikutuksen.

Katsotaanpa näitä vaiheita tarkemmin:

• Kutsu ulkoinen JS-tiedosto komentosarjan avulla, kun alkuperäinen sivu on ladattu. Sivustolla varvy.com Patrick Sexton ehdottaa menetelmää, jonka avulla verkkosivuston sisältö voidaan ladata ennen JS: n lataamista (varmistaakseen, että käyttäjä näkee sisällön ensin). Tämä varmistaa, että komentosarjat, jotka aiheuttavat renderöinnin eston, eivät vaikuta kriittiseen latausreittiin. Menetelmässä luodaan ulkoinen tiedosto, jota ei tarvita sisällön näyttämiseen alun perin. Lisäämällä seuraava komentosarja juuri ennen HTML: ssä. Seuraava esimerkki käyttää tiedostoa example.js, joka on päivitettävä vastaavasti. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.js";
          document.body.appendChild(element);
      }
      if (window.addEventListener)
          window.addEventListener("load", downloadJSAtOnload, false);
      else if (window.attachEvent)
          window.attachEvent("onload", downloadJSAtOnload);
      else window.onload = downloadJSAtOnload;
  </script>

  Kun verkkosivun lataus on valmis, komentosarja alkaa ladata ja suorittaa esimerkki.js - Ongelmana on, että sinun on luotava tiedosto manuaalisesti.

• Async- tai lykätä-määritteiden käyttäminen. JS-tunniste async or lykätä attribuutit toimivat samalla tavalla - niiden työskentelytapa on sellainen, että ne minimoivat ajan, jonka HTML-jäsentäminen pysähtyy odottamaan komentosarjojen lataamista ja suorittamista. async sallii JS-tiedostojen lataamisen tapahtua asynkronisesti eikä synkronisesti, ts. uusi ketju avataan ladattavaksi, kun HTML: n jäsentäminen jatkuu. Defer kehottaa selainta suorittamaan komentosarjan SIVUN lataamisen jälkeen. Tämä on toinen tapa antaa sivun jäsentämisen päätökseen eikä siten luoda vaikutusta latausaikaan. Molemmat näistä tunnisteista minimoivat JS: n renderoinnin eston. Molempien käytöissä JS: n ei tarvitse odottaa HTML: n jäsentämistä ennen lataamisen tai suorittamisen aloittamista - mikä varmistaa, että sivu latautuu edelleen nopeasti. Katso alla olevien kuvien ohjeet siitä, miten asynkronointi ja viivästyminen suoritetaan.
  
  

• Siirrä JavaScript sivusi alaosaan. Kolmas ja viimeinen ehdotus on siirtää kaikki <script> tunnisteet sivujen alaosaan (varsinkin jos ne eivät ole kriittisiä, kuten mainokset). Tämä menetelmä ei ole ihanteellinen, koska selain on edelleen varattu, kunnes viimeinen komentosarja on ladattu kokonaan ja jäsennelty. Koska selain näyttää olevan kiireinen, jotkut kävijät eivät välttämättä harjoita sivua, ennen kuin se on ladattu kokonaan, mikä johtaa mahdollisesti negatiiviseen käyttökokemukseen.

Ehdotuksia Googlelta

Googlella on paljon resursseja verkkosivustosi suorituskyvyn parantamiseksi. Heillä on jopa sivu, joka on tarkoitettu parantamaan sivustosi komentosarjojen latausaikaa, jonka voit tarkistaa tätä.

Vasemmasta valikosta löydät myös muita resursseja, jotka auttavat sinua parantamaan sivustosi suorituskykyä. Varmista, että tarkistat heidät myös, jos PageSpeed ​​Insights -raporttisi ilmoitti niihin liittyvistä ongelmista.

Google ehdottaa yleiskatsaukseksi, että sinun tulisi sen sijaan lisätä kriittisiä komentosarjoja ja joko asynkronoida tai lykätä kriittisiä komentosarjoja. Tämä tarkoittaa, että sivustosi edellyttämät komentosarjat tulisi upottaa HTML-koodiin. Se on kuitenkin WordPress-teema- ja laajennuskehittäjien tehtävä - mutta jos haluat luoda teeman tai laajennuksen, pidä tämä mielessä.

Lue lisää:  Kuinka palkata (SUURIA) Javascript-kehittäjiä

Tämän lisäksi Google hahmotteli myös tapaa, jolla voit manuaalisesti tunnistaa, mitkä skripteistäsi estävät verkkosivusi hahmottamisen lataamalla erittäin pitkään. Voit tehdä sen käyttämällä Chromen Dev Tools -sovellusta kattavuus Tab.

Lykätä käyttämätöntä CSS: ää

Samanlainen ongelma, jonka saatat nähdä nykyään, myös Pagespeed Insights -työkalussa, on käyttämättömän CSS: n lykkääminen. Vaikka tämä on samanlainen ongelma, sen juuret ovat hieman erilaiset. Pohjimmiltaan CSS olisi uudistettava tämän korjaamiseksi oikein.

{loadpostion imh-embed}

Usein kysytyt kysymykset

Kuinka korjaan JavaScriptin lykkäämisen WordPressissä?

Jos haluat korjata Javascriptin lykkäämisen jäsentämisen WordPressissä, sinun on tehtävä joitain pieniä muutoksia koodiin. Voit joko löytää kaikki komentosarjat ja lisätä lykätä tag heille, tai voit asentaa laajennuksen, joka tekee tämän automaattisesti. Voit myös luoda komentosarjan, joka lataa tiedostot asynkronisesti, kuten on osoitettu Javascriptin jäsentämisen lykkääminen tämän artikkelin komentosarjan avulla.

Mikä on JavaScriptin lykkääminen?

Javascriptin jäsentämisen lykkääminen on prosessi, jossa verkkosivustosi kävijöitä kehotetaan lataamaan tiettyjä tiedostoja SIVUN lataamisen jälkeen. Tämän avulla käyttäjä voi nähdä sivun sisällön paljon nopeammin kuin jos et ottanut käyttöön Javascriptin lykkäämistä

Mitä eroa on asyncillä ja lykkäävällä Javascriptillä?

Async tarkoittaa, että Javascript-sisältö ladataan uutena yhteytenä, rinnakkain minkä tahansa muun koodin kanssa. Async-toiminnon avulla selain luo uuden käsittelylangan, joka ei hidasta olemassa olevia latauksia Javascriptin lataamisen ja suorittamisen aikana. Toisaalta lykkää, pyytää selainta jäsentämään komentosarjan, kun loput sisällöstä on ladattu. Vaikka tämä on yleensä hyvää nopeuden kannalta, sisällössä saattaa olla joitain ongelmia, jos se viittaa komentoon, joka on lykätty (koska se ei ole käytettävissä).

Kuinka vähennän JavaScriptiä WordPressissä?

Javascriptin minimoimiseksi WordPressissä sinun on asennettava laajennus, joka tekee tämän automaattisesti. Voit lukea lisää tästä tätä. 

Käärimistä

Ja olet juuri nähnyt kuinka lykätä JavaScriptin jäsentämistä WordPressissä.

Olemme oppineet, että se voidaan saavuttaa joko laajennusten tai manuaalisten muutosten avulla. Sillä on paljon etuja sivustollesi, kuten parannettu hakukoneoptimointi, parempi käyttökokemus ja nopeammat latausajat. Siksi on tärkeää varmistaa, että lykkäät niin monta komentosarjaa kuin mahdollista parhaan suorituskyvyn parantamiseksi.

Mutta muista, pidä aina varmuuskopio ja testaa paljon varmistaaksesi, että lykkäät oikeita komentosarjoja! Se saattaa tuntua tylsältä, mutta jos se tehdään oikein, hyödyt ja voitot ovat valtavat.

Jos haluat todella maksimoida verkkosivustosi latausnopeuden, suosittelemme jättämään sen ammattilaisille, kuten WP Rocketin kavereille, saadaksesi tämän ja satojen muiden toimintojen parhaat hyödyt, jotta verkkosivustosi latautuu nopeammin.

Käy WP Rocketissa, jotta verkkosivustosi olisi nopeampi tänään  

kirjailijasta

Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/Sähköposti: David@collectiveray.com

David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.