[Täydellinen opas] Kuinka korjata Javascriptin jäsentämisen lykkääminen WordPressissä (5 tapaa)

[Kuinka korjata] Korjaa Javascript-varoituksen lykkääminen WordPressissä

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.

 

GTMetrix - lykkää Javascript-varoituksen jäsentämistä

 

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".

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:

mZNfo71y1_8

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. 

Tee verkkosivustostasi nopeampiEtkö ole valmis käyttämään laajennusta toistaiseksi? Jatka lukemista... 

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

lykätä Javascript Visualin jäsentämistä

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.

BMuFBYw91UQ

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ä. 

Hyvä lykkäyspiste GTMetrixissä

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ä.

Gagespeed-oivallukset - merkittävä vaikutus latausaikaan

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. 

Pingdom-työkalujen js-pisteet

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: 

Renderöinnin estävät komentosarjat vaikuttavat suorituskykyyn

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

Fiverr

Napsauttamalla tätä löydät edulliset Fiverr-keikat, jotka auttavat sinua korjaamaan tämän

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.

async javascript -laajennuksen asetukset

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:

Async javascript poissulkeminen

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.

gtmetrix-testi

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.

WP lykkäsi javascript-laajennusta

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.

WP-raketin renderöinti estä css js

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: 

Nopeuslisäpaketti 

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. 

Nopeuden tehostepaketin raja

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

functions.php muokkaus

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.

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

Aseta otsikko ja alatunniste

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

täydellinen lykätä pisteet 

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

Pagespeed oivallukset hyvät pisteet

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.
    asynkribuutti
    lykätä määritettä

  • 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-resurssit

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.

Usein kysytyt kysymykset

1. Kuinka korjaan JavaScriptin jäsentämisen 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.

2. Mikä on lykätä JavaScriptiä?

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ä

3. Mitä eroa on asynkronoinnin ja lykätä Javascriptin välillä?

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ä).

4. Kuinka JavaScript minimoidaan 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
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
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ää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...