Fresta greiningu á Javascript - 5 leiðir til að laga það og auka hraða (2023)

Sem einhver sem er að reyna að skilja hvernig á að fresta þáttun Javascript, teljum við að þú hafir vandamál. Þú átt eða hefur heimsótt vefsíðu einhvers sem þú þekkir (kannski viðskiptavinur?) Og það tekur að eilífu að hlaða það inn. Og þegar þú keyrðir það í gegnum hraðaprófunarverkfæri vefsíðu, fékkstu meðmæli sem þú ert ekki viss um hvernig á að framkvæma.

Í þessari grein ætlum við að deila nokkrum leiðum til að fresta Javascript og laga þessa viðvörun og að lokum láta vefsíðuna hlaðast hraðar án þess að henda þessari villu!

Ef þú hefur stuttan tíma, þá eru hér nokkrar fljótar aðgerðir sem þú getur gert:

Leiðbeiningar um hvernig á að fresta þáttun JavaScript

1. Sæktu Async viðbótina hér.
2. Smelltu á Viðbætur> Bæta við nýju> Sendu viðbótina inn og veldu skrána sem þú varst að hlaða niður.
3. Smelltu á Virkja af uppsettu viðbótinni.
4. Farðu í viðbætur og smelltu á Stillingar fyrir Async viðbótina sem þú ert nýbúin að setja upp.
5. Ef smellt er á Virkja Async Javascript, eða Notaðu Async sem tvær algengustu leiðirnar til að beita lagfæringunni.
6. Prófaðu vefsíðuna þína til að sjá að allt virkar enn vel.

Hvers vegna er aðferðin til að hrinda í framkvæmd frestun á Javascript? Ef þú frestar ekki þátttöku á Javascript virðist vefsíðan þín vera að hlaðast hægt upp. Javascript er í meginatriðum mikilvægur byggingarefni á tungumálinu á netinu, það gerir vefhönnuðum kleift að búa til „kraftmikla“ virkni.

Hins vegar hafa Javascript skrár í flestum tilfellum tilhneigingu til að verða nokkuð stórar. Þeir gætu einnig dregið til sín frá netþjónum þriðja aðila. Þetta gerir niðurhalið hægt. En þetta er aðeins helmingur vandans.

Stærsta vandamálið er að ef það er ekki frestað að flokka Javascript þá er VEFURINN lokaður fyrir því að sýna efni. Vefsíðan VERÐUR EKKI. Og hvernig lítur þetta út fyrir notanda? Það lítur út fyrir að síðan sé annaðhvort hæg, biluð eða alveg dauð. 

Vandamálið er samsett í farsímum, þar sem vinnsluaflið sem er í boði, ásamt bandvíddinni sem er til staðar, upplifir upplifunina enn verr.

Og hvað munu notendur sem fá slíka reynslu gera? Þeir munu hoppa frá vefsíðunni þinni og koma aldrei aftur!

Ef þú hefur verið í kringum vefiðnaðinn um tíma og þú ert að reyna að bæta SEO vefsíðu þinnar, veistu þegar að árangur vefsíðunnar er sköpum til að bæta sýnileika leitarvéla þinna.

Og ef þú hefur notað Google PageSpeed ​​Insights til að skoða vefsíðuna þína, fyrir utan „fresta þáttun Javascript“ eru enn fleiri dulrænar viðvaranir, eins og sú sem segir „Fjarlægðu auðlindir sem loka fyrir birtingu“.

Þetta tæknilega efni virðist hafa mest áhrif á álagshraða þinn! 

Útiloka?! En hvernig á ég að útrýma þessum mikilvægu skrám af vefsíðu minni?

Ekki hafa áhyggjur, við erum hér til að hjálpa þér að laga þessar viðvaranir, leysa þessi mál og að lokum láta síður hlaða hraðar!

Útaf þér þarf ekki að fjarlægja þau. Allt sem þú þarft að gera er að fresta þáttun JavaScript.

Skoðaðu þetta stutta myndband hér að neðan til að sjá hversu einfalt það er að fresta þáttun Javascript með einni af aðferðunum hér að neðan:

Í non-geekspeak, hvað þetta þýðir er að þú þarft að fínstilla nokkur atriði á WordPress þínum, til að leyfa síðunni að láta efnið þitt hlaða fyrst áður en þú hleður eða þáttar JavaScript skrár þínar. 

Þetta er vegna þess að ef þú frestar ekki þáttun Javascript verður flutningur vefsíðunnar mjög þung aðgerð og eins og við sögðum hér að ofan mun vefsíðan líta út eins og hún sé biluð.

Til að tryggja að notandinn verði áfram á síðunni viljum við láta vita að eitthvað er í raun að gerast og sýna notandanum efni í stað þess að bíða eftir því að vafrinn geri allt þunglyftið áður en hann sýnir notandanum í raun . 

Tilviljun, ef þú ert að leita að því að gera WordPress hratt, þá eru nokkur viðbætur eins og þetta sem getur skipt raunverulegu máli í frammistöðu á nokkrum mínútum (með litlum sem engum áreynslu).

Ef þú hefur áhuga, WP Rocket getur sett upp frestun á þáttun Javascript og margra annarra lagfæringa til að gera síðuna þína hraðari, smelltu bara á borðið hér að neðan til að skoða það. 

Ertu ekki tilbúinn að nota tappi í bili? Lestu áfram... 

Hvað er fresta þáttun JavaScript?

Fresta þáttun Javascript þýðir að nota „defer"Eða"async"til að koma í veg fyrir að blað verði lokað. Þessi HTML skipun leiðbeinir vafranum um að framkvæma / flokka handritin eftir (fresta) eða ósamstillt (samhliða) við hlaða síðunnar. Þetta gerir efni kleift að birtast án þess að bíða eftir að forskriftirnar verði hlaðnar .

Með því að setja upp frestun á þáttun JavaScript muntu geta látið innihald þitt hlaðast hraðar og með mikinn forgang.

Hvers vegna er það?

Sjáðu hér að neðan þennan ágæta útskýranda sem sýnir fram á hvernig vefsíðum er hlaðið og hvernig JavaScript skrár hamla hleðslutíma vefsíðunnar þinnar.

Höldum áfram á myndbandinu hér að ofan, lítum stutt á hvað gerist þegar einhver heimsækir vefsíðuna þína: 

1. Þegar notandi smellir á tengil sem vísar á vefsíðuna þína mun vafri notandans biðja um það frá netþjóninum þínum, sem netþjónninn þinn mun „þjóna“ í vafra notandans.
2. Vafrinn notandans tekur við og sér HTML innihald vefsíðunnar þinnar og byrjar að endurskoða það. Það mun byrja að byggja vefsíðuna þína frá toppi til botns.
3. Ef það finnur JavaScript skrár á leiðinni mun vafrinn stoppa og sækja (ef um utanaðkomandi skrá er að ræða) og flokka hana
4. Aðeins eftir að hafa sótt og flokka hvert einasta handrit mun það halda áfram að hlaða afganginn af innihaldinu þínu.

Þú ert líklega þegar farinn að sjá hvar vandamálið liggur.

Þegar vefsíður þínar eru með margar JavaScript skrár getur það haft mikil áhrif á hleðslutíma vefsíðu þinnar - neikvæð.

Vafri notanda þíns mun stöðugt sýna hleðslutáknið eða snúningshjólið meðan hann er að flokka og hlaða forskriftirnar þínar áður en það sýnir raunverulegt innihald þitt - þetta er sérstaklega sýnilegt í farsímavöfrum eða notendum með litlum hraða gagnatengingum.

Ef það tekur meira en nokkrar sekúndur, sérstaklega ef þú ert að afgreiða handritin þín frá utanaðkomandi netþjóni (og þessi netþjónn er í vandræðum í augnablikinu) - munu gestir þínir byrja að verða hvirfil.

Á þeim tíma sér notandinn þinn ekkert nema hvíta auða síðu. Er það ekki einn sá pirrandi hlutur á internetinu? Allt á að vera augnablik á vefnum, af hverju þurfa þeir að bíða eftir að síðan þín hlaðist inn?

Ef notandi bíður meira en 4 sekúndur byrjar hann að verða hvassur. Handan við 8 sekúndur og vefsíðan þín er eins og dauð - notandinn mun skoppa á aðra vefsíðu.

Þú hefur misst gesti og líklega viðskipti hans. 

Viðbótar flækjan er sú að þessum JS skrám er mörgum sinnum bætt við vefsíðuna þína með nauðsynlegum viðbótum og þemum sem þú hefur sett upp, svo þú getur ekki nákvæmlega losnað við þær auðveldlega.

Svo hvað gerir þú?

Til að leysa þetta þarftu að fresta þáttun JavaScript. Þetta virkar með því að flokka handritin þín þegar aðalefnið hefur verið hlaðið. Skoðaðu myndina hér að neðan til að sjá nákvæmlega áhrif hleðslutíma. Eins og við getum séð neyðir skipan frestar vafranum til að framkvæma Javascript seinna, meðan ósamstilling leyfir efni að gerast samhliða niðurhalinu.

Þess vegna, þegar notandi heimsækir síðuna þína, mun vafrinn þinn halda áfram að flokka allt frá toppi til botns en sleppa JavaScript skjölunum til seinna. Þannig munu notendur þínir geta séð efnið þitt strax án þess að þurfa að bíða. 

Ef þú hefur horft á myndbandið hér að ofan hefurðu séð að „async“ og „frestun“ eiginleikarnir hjálpa mjög.

En hvernig myndir þú gera það á WordPress? Einnig hvenær er rétti tíminn til að nota þær? Sjáum til og byrjum!

Greindu vefsíðuna þína

Áður en við byrjum þarftu að vita hvort þú verður að framkvæma frestun Javascript festingarinnar á vefnum þínum eða ekki. Til að komast að því hvort þú þarft, getur þú notað nokkur verkfæri sem eru aðgengileg á netinu.

Nokkur dæmi eru eftirfarandi:

1. GTMetrix

Þessi virkar með því að athuga bæði PageSpeed ​​og Yslow mælikvarða og gefur þér einkunn frá F til A. Þeir gefa þér einnig tillögur sem og ráð um hvernig á að bæta vefsíðu þína ef vandamál finnast. Það mun sérstaklega segja þér hvort þú þarft að fresta þáttun JavaScript. 

Almennt ætti skorið að vera að minnsta kosti 71.

Myndin hér að neðan sýnir vefsíðu sem þarf ekki að fresta. 

2. PageSpeed ​​Tools

tæki þróað af Google, PageSpeed ​​Insights er annað yfirgripsmikið tól sem veitir þér alhliða upplýsingar um frammistöðuvandamál vefsvæðisins ásamt ráðum til að laga þau alveg eins og GTMetrix.

Eitt það besta við þetta verkfæri er að það inniheldur tengla í ítarlegar leiðbeiningar og úrræði til að hjálpa þér að laga öll frammistöðuvandamál þín. Myndin hér að neðan sýnir vefsíðu sem þarf sárlega að innleiða frestun þáttunar JavaScript.

3. Pingdom Tools 

Annað vinsælt frammistöðuprófunartæki vefsíðu sem er aðgengilegt fyrir alla.

Þó að það virðist ekki segja þér sérstaklega hvort þú þurfir að fresta þáttun JavaScript, þá geturðu athugað hversu langan tíma það tók fyrir handritin að hlaðast inn þökk sé alhliða niðurstöðusíðu þeirra.

Myndin hér að neðan sýnir vefsíðu sem hefur næstum helminginn af síðu sinni sem samanstendur af JavaScript - frábær vísbending um að þú gætir viljað fresta skriftunum þínum. 

4.  Varvy PageSpeed 

Annað frábært tól sem mun segja þér hvort vefsvæðið þitt er með letur sem hindra flutninga.

Það besta er að það lætur þig vita nákvæmlega hverjar þær eru, rétt eins og á myndinni hér að neðan: 

Allt í lagi, flott!

Nú hefurðu aðgang að verkfærum sem geta hjálpað þér að ákvarða hvort þú þarft að framkvæma frestun þáttunar JavaScript-skrár.

En þú gætir verið að spyrja af hverju ekki bara að framkvæma það og láta það í friði? Ef þú frestar þáttun JavaScript á rangan hátt getur það brotið hluti og það getur verið pirrandi að laga ef þú ert ekki tæknigáfur.

Að einfaldlega kveikja á frestunarstillingu þýðir ekki að allt sé gleymt og muni virka vel. Þú verður að athuga hvort þú hafir gert það rétt og ganga úr skugga um að allt virki enn sem skyldi. 

Til dæmis, ef þú notar jQuery, verður þú að velja vandlega hvaða handrit þú ættir að fresta því það virðist vera vandamál með frestun og jQuery.

Í viðbót við það, munt þú komast að því að það eru mörg spurningar um Stack Overflow um jQuery, async og frestun sem er oft um það hvernig þú ættir að framkvæma frestun og async, ef þú ættir það yfirleitt, að skriftunum þínum sem reiða sig á jQuery. 

Svo, hverjar eru niðurstöðurnar? Þarftu að fresta handritunum þínum?

Ef svo er, þá skulum við nú komast að því hvernig á að fresta JavaScript á WordPress!

Hvernig á að fresta þáttun JavaScript á WordPress

Það getur verið nokkuð einfalt að fresta þáttun JavaScript á WordPress.

Þú getur bara sett upp eitt af þúsundum viðbóta í WordPress geymslunni og þú ert góður í slaginn. En það eru líka háþróaðar leiðir til að gera það ef þú þarft meiri stjórn, sérstaklega ef þú ert að nota flókin forskriftir til að gera síðuna þína meira aðlaðandi og gagnvirk. 

Í þessum hluta ætlum við að athuga fimm mismunandi leiðir til að framkvæma frestun þáttunar JavaScript á WordPress: í gegnum viðbætur, í gegnum aðgerðir.php og breytt kóða handvirkt. 

Það eru svo mörg viðbætur í WordPress geymslunni sem geta hjálpað þér að bæta árangur vefsíðunnar.

Það eru til sem eru tileinkuð tilteknu verkefni eins og að smækka HTML kóðann þinn og það eru viðbót sem reyna að fella öll frammistöðutengd klip í einum viðbót, svo sem að hafa getu til að minnka og fresta CSS og JavaScript skrár, innleiða og nýta skyndiminnkun vafra (sem við höfum fjallað mikið um í þessari grein) og fleira. 

Hins vegar eru ekki öll viðbætur búnar til jafnar. Sumt virkar vel, annað virkar í lagi og annað virkar alls ekki og gæti jafnvel brotið einhverja eða alla virkni síðunnar þinnar. 

(Ef þú vilt frekar að einhver reyndi að höndla þetta fyrir þig, þá geturðu gert þetta með ódýru Fiverr tónleikum með því að smella á hnappinn hér að neðan.)

1. Frestaðu þáttun Javascript með því að nota Async viðbót

Satt að segja mælum við með því að þú veljir aukagjald viðbót (sem er dauð-ódýrt) en þú ert viss um að laga ekki bara þessa viðvörun, heldur fjöldann allan af vandamálum varðandi hleðsluhraða vefsíðna.

Við munum byrja á einni vinsælustu sem er ætlað að vinna eitt starf sem skilgreint er í þessari grein.

Einn vinsælasti kosturinn til að gegna þessu starfi er Async Javascript. Þessi tappi einbeitir sér að því að bæta árangur vefsvæðisins með því að laga hvernig forskriftirnar eru hlaðnar og eins og WP Rocket hér að neðan, það kemur einnig með fleiri háþróaða eiginleika sem gera þér kleift að útiloka tiltekin handrit frá frestun.

Hér eru skrefin sem þú þarft að framkvæma til að nota þessa viðbót.

1. Sæktu Async viðbótina hér.
2. Smelltu á Viðbætur> Bæta við nýjum í backend WP.
3. Smelltu á Sendu viðbótina inn og veldu skrána sem þú varst að hlaða niður.
4. Einnig er hægt að leita að Async Javascript og smella setja Nú.
5. Smelltu á Virkja af uppsettu viðbótinni.
6. Farðu í viðbætur og smelltu á Stillingar fyrir Async viðbótina sem þú ert nýbúin að setja upp.
7. Við mælum með því að smella á Virkja Async Javascript, eða Notaðu Async sem tvær algengustu leiðirnar til að beita lagfæringunni.
8. Ef þetta virkar ekki geturðu prófað nokkrar mismunandi samsetningar.
9. Prófaðu vefsíðuna þína til að sjá að allt virkar enn vel.

Kannski er einn af styrkleikum þess að fyrir utan hæfileikann til að útiloka tiltekin handrit frá því að vera frestað hefurðu einnig möguleika á að velja hvaða handritum verður frestað í staðinn:

Þú gætir líka tekið eftir því að þú hefur möguleika á að annaðhvort samstilla eða fresta handriti. Fyrir frekari upplýsingar um muninn á þessu tvennu geturðu lesið þetta grein.

Einn sérstakur eiginleiki þessa viðbótar er að þú getur tilgreint að útiloka ákveðið þema eða viðbót.

Það er líka möguleiki að samþætta GTMetrix á vefsvæðinu þínu svo þú getir alltaf athugað árangur þess. Athugaðu að í hvert skipti sem þú framkvæmir próf verður API inneign dregin af GTMetrix reikningnum þínum.

Þó að sumir muni mæla með því WP frestað JavaScript, þetta tappi hefur ekki verið uppfært í meira en 3 ár og hefur ekki verið prófað með síðustu 3 helstu útgáfunum, svo við mælum eindregið með að þú notir ekki þennan. Það gæti samt virkað, en það er óprófað, svo það er áhætta sem þú ættir ekki að taka.

Ef þú ert með tiltölulega einfalda síðu og þú ert að leita að því að bæta hleðslutímann þinn enn frekar, þá gæti þetta verið það sem þú þarft. Þetta tappi þarf alls engar stillingar - bara setja upp, virkja og gleyma.

Aftur, hafðu í huga að þessi er ekki ráðlögð fyrir flóknar síður eins og rafræn viðskipti vegna skorts á háþróaðri lagfæringarvalkosti og vegna aldurs. Að geta fínstillt JavaScript frestunarmöguleika skiptir sköpum fyrir stórar og flóknar síður.

2. WP eldflaug

Sem stendur leiðandi WordPress frammistöðuforritið þarna úti, WP Rocket býður ekki aðeins upp á möguleika á að fresta þáttun JavaScript skrár heldur einnig CSS skrár þínar. Að auki færðu tonn af öðrum valkostum til að bæta árangur.

Sumar aðgerðir fela í sér eftirfarandi: 

• Smávægileg - minnkar stærð kóða vefsvæðisins svo hann hlaðist hraðar. Það gerir það með því að fjarlægja hvítt bil og aðra óþarfa stafi úr kóðanum án þess að hafa áhrif á kjarnavirkni þess.
• Sameining - sameinar margar CSS og JavaScript skrár í eina.
• Latur hleðsla - þetta er frestunarstilling fyrir vídeóskrár og annað margmiðlunarefni eins og myndir. Það seinkar hleðslu þessara auðlindakröftu þar til eftir að notandinn flettir niður að þeim.

Eitt það besta við WP Rocket er að þegar þú hefur sett það upp og virkjað þá geturðu látið það í friði og þá færðu sjálfkrafa árangur.

Hins vegar geturðu stillt háþróaðar stillingar fyrir enn meiri afköst, en hafðu í huga að sumar þeirra gætu haft slæm áhrif á síðuna þína. Og vegna þess er frestunarmöguleiki þeirra fyrir JavaScript og CSS skrár ekki sjálfgefið virkt vegna þess að ef vel er að gáðlessly, þeir geta brotið hlutina.

Sem betur fer geturðu útilokað að fresta tilteknum smáforritum.

Þú getur prófað að útiloka öll handritin þín fyrst og síðan fresta þáttun Javascript-skrár ein af annarri þar til þér finnst vandamálið vera. Þeir hafa víðtæk skjöl til að hjálpa þér við það. Með þessum hætti munt þú geta hámarkað frammistöðuhækkanir án þess að brjóta eða fórna einhverjum eða öllum virkni vefsíðu þinnar.

WP Rocket er aukagjald viðbót, en miðað við verð og virkni sem veitt er (ekki bara frestun og aðgreining JS skrár heldur nóg af öðrum hagræðingum sem eru tryggingu til að gera vefsíðuna þína hraðari), teljum við að það sé verðsins virði.

Sækja WP Rocket

3. Hraðauppbyggingarpakki

Annað frábært, allt í einu frammistöðuforrit sem gerir þér kleift að fresta þáttun á Javascript-skrám er Speed ​​Booster Pack. Það er svipað og WP Rocket hvað varðar eiginleika, en það er ókeypis. Það hefur flesta grunnþætti WP Rocket eins og smækkun, frestun, fjarlægingu óþarfa skrár o.s.frv.

Hér að neðan má sjá nokkrar af þeim aðgerðum sem eru í boði í viðbótinni: 

Undir flipanum Ítarleg geturðu valið að útiloka sumar skriftir annaðhvort frá því að vera fluttar í fótinn eða þeim frestað eða hvort tveggja. Þú getur þó aðeins bætt við allt að 4 útilokuðum smáforritum, sem er vissulega takmörkun fyrir flóknar og stórar síður. 

Á heildina litið er það gott ókeypis val við WP Rocket, hentugur fyrir litlar síður.

4. Notkun aðgerða.php klip

Hvað ef þú vilt ekki nota viðbætur?

Það er annað bragð sem þú getur gert til að fresta þáttun Javascript á WordPress og það er með því að breyta aðgerðum þema þíns.php.

Afritaðu einfaldlega kóðann hér að neðan og límdu hann neðst í function.php skrá þemans: 

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

Hafðu í huga að þú gætir klúðrað síðunni þinni ef þú gerir það rangt, svo vertu gaumgæfileg og gakktu úr skugga um að þú sért að breyta réttri skrá í réttu þema og að þú límir kóðabútinn á réttan stað. Vertu viss um að eyða ekki / breyta neinu öðru.

Sem betur fer geturðu búið til barnþema til að gera öruggar breytingar á aðgerðum þínum.php. Til viðbótar við það, ef þú skiptir einhvern tíma út eða uppfærir þemað þitt, geturðu auðveldlega haldið öllum sérsniðnum breytingum þínum í skránni. Hér er frábær grein sem útskýrir hvernig á að búa til barnþema. Þegar þú hefur búið til barnþema, límdu bara kóðabútinn í function.php skrá barnsins, vistaðu það og það er allt komið.

Lestu meira: Skilaboðalokun er virk

5. Tweak kóðann þinn handvirkt

Þetta gæti hljómað ógnvekjandi, sérstaklega ef þú ert ekki hrifinn af kóðun en fyrir lengra komna, að klára kóðann handvirkt er frábær leið til að fresta þáttun JavaScript skrár á WordPress. 

Varvy er með frábært kóðabút sem gerir upphaflegu innihaldi vefsíðunnar kleift að hlaðast alveg áður en þú hleður inn öðrum ytri skriftum. Kóðabútinn er hér að neðan:

  aðgerð niðurhalJSAtOnload () {
    var element = document.createElement ("skrift");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (frumefni);
  }
  ef (window.addEventListener)
    window.addEventListener ("hlaða", hlaða niður JSAtOnload, ósatt);
  annað ef (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  annað window.onload = downloadJSAtOnload;

Skiptu um defer.js fyrir eigin skriftarskrá. Þegar þú hefur breytt því til að endurspegla þitt eigið skrift skaltu líma það rétt áður en HTML-skjölin þín tag. Í WordPress geturðu gert það með því að breyta footer.php skrá þemans.

Aftur er mælt með því að nota barnaþema ef þú myndir búa til breytingar í þemaskrám þínum. Smá athugasemd: að breyta footer.php í gegnum barnsþema er frábrugðið aðgerðum.php: þú verður að afrita allan footer.php af aðalþema þínu ásamt efni þess í þema barnsins þíns og síðan gera / bæta við breytingum. 

Ef þú vilt ekki vanda þig við að breyta footer.php geturðu notað viðbót sem heitir Hausum og fætur Setja. 

Límdu bara kóðabútinn í reitinn „Scripts in Footer“, ýttu á save og þú færð handritinu bætt við neðsta svæðið í kóða vefsvæðisins, fyrir ofan tag. 

Og það eru allar leiðirnar sem þú getur frestað þáttun JavaScript á WordPress! En virka þeir? Bættu þeir árangur síðunnar þinnar? Athugum árangurinn!

Prófun á árangri

Til að prófa niðurstöðurnar skaltu fara á GTMetrix.com, PageSpeed ​​Insights og Pingdom Tools til að sjá hvort árangurseinkunn þín og hleðslutími batnaði.

Í GTMetrix ætti stig þitt að vera að minnsta kosti 71. Því meira því betra! Fullkomin stig skora þetta :-) 

Í PageSpeed ​​Insights skaltu leita að „fyrstu málningu“:

Almennt, þegar þú ert að prófa hvort framkvæmd þín á frestun þáttunar JavaScript hafi leitt til þess að handritunum hafi verið frestað, stefndu á grænar niðurstöður í fyrsta innihaldsríka málningu og fyrsta merkingarbæra málningu.

Berðu saman fyrir og eftir frestun og athugaðu hvort þau batni.

Fyrir Pingdom Tools, skoðaðu hlutann fyrir hlaða röð og sjáðu hvort flestar, ef ekki allar handritaskrárnar þínar voru hlaðnar síðast. Berðu saman fyrir og eftir frestun og horfðu á hvort skriftarskrár breyttu stöðu í fermingarröðinni (þ.e. hlaðust þær fyrr eða síðar). 

Fullnægði árangurinn þér? Ef svo er, frábært starf! Ef ekki, reyndu að prófa meira. Ef þú notaðir aðrar aðferðir á listanum þínum, reyndu að nota háþróaða viðbætur sem gera þér kleift að sérsníða frestun þína og frammistöðu. Ennfremur skaltu skoða nokkrar tillögur frá Google í næsta kafla. Þeir gætu hjálpað þér.

Hvernig á að fresta þáttun JavaScript með skrift

Það eru mismunandi aðferðir sem þú getur notað til að fresta þáttun JavaScript. Í næsta kafla er fjallað um hvað þú þarft að gera. 

Í stuttu máli þarftu að framkvæma eftirfarandi:

1. Afritaðu kóðann hér að neðan og bættu honum við rétt áður en tag í HTML.
2. Skiptu um example.js í kóðanum hér að neðan með skránni sem inniheldur handritið sem á að fresta.
3. Vistaðu breytingarnar.
4. Prófaðu vefsíðuna þína til að sjá áhrifin.

Við skulum skoða þessi skref nánar:

• Notaðu forskrift til að hringja í ytri JS skrá þegar upphafssíðu er lokið. Á varvy.com leggur Patrick Sexton til aðferð sem gerir kleift að hlaða vefsíðuinnihaldi áður en JS er hlaðið (til að tryggja að notandinn geti séð efnið fyrst). Þetta tryggir að mikilvægar hleðsluleiðir hafa ekki áhrif á forskriftir sem valda því að hindra flutninga. Aðferðin felur í sér að búa til utanaðkomandi skrá sem ekki er krafist til að birta efnið upphaflega. Með því að bæta við eftirfarandi handriti rétt áður en í HTML. Eftirfarandi dæmi notar skrá dæmi.js, sem þyrfti að uppfæra í samræmi við það. 

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

  Þegar vefsíðunni lýkur byrjar handritið að hlaða niður og framkvæma dæmi.js - vandamálið er að þú þarft að búa til skrána handvirkt.

• Nota async eða fresta eiginleika. JS merkið async or fresta eiginleikar starfa á svipaðan hátt - vinnubrögðin eru þannig að þau lágmarka þann tíma þar sem HTML-þáttun hættir til að bíða eftir niðurhali og framkvæmd skrifta. Ósamstilltur gerir það að verkum að niðurhal á JS skrám getur farið fram ósamstillt, frekar en samstillt, þ.e. nýr þráður er opnaður til að hlaða niður meðan HTML heldur áfram að flokka. Frestun fyrirskipar vafranum að framkvæma handritið EFTIR að hlaða síðu hefur verið lokið. Þetta er önnur leið til að leyfa síðuskiljun að ljúka og hafa þannig ekki áhrif á hleðslutíma. Bæði þessi merki lágmarka lán fyrir hindrun JS. Í notkun beggja þessara þarf JS ekki að bíða eftir að HTML ljúki við þáttun áður en byrjað er að hlaða niður eða framkvæma - sem tryggir að síðan hlaðast enn hratt. Sjáðu hvernig framkvæmdin gerist vegna ósamstillingar og frestunar á myndunum hér að neðan.
  
  

• Færðu JavaScript neðst á síðunni þinni. 3. og síðasta tillagan er að flytja hvaða sem er <script> merki neðst á síðunum (sérstaklega ef þau eru ekki mikilvæg, svo sem auglýsingar). Þessi aðferð er ekki tilvalin, því vafrinn verður ennþá upptekinn þar til síðasta handritinu hefur verið hlaðið niður að fullu og verið þáttað. Í ljósi þess að vafrinn virðist upptekinn geta sumir gestir ekki tekið þátt í síðunni fyrr en hún er fullhlaðin, sem hefur í för með sér neikvæða notendaupplifun.

Tillögur frá Google

Google hefur fjöldann allan af úrræðum til að bæta árangur vefsvæðisins. Þeir hafa jafnvel síðu sem er tileinkuð því að bæta hleðslutíma handritsins á síðunni þinni, sem þú getur athugað hér.

Í vinstri valmyndinni geturðu líka fundið önnur úrræði sem hjálpa þér að bæta árangur vefsvæðisins. Gakktu úr skugga um að þú athugir þau líka ef PageSpeed ​​Insights skýrir frá vandamálum sem tengjast þeim.

Til að fá yfirlit leggur Google til að þú ættir að setja inn mikilvægar skriftir í staðinn og annaðhvort samstilla eða fresta ekki mikilvægum skriftum. Það þýðir að handrit sem krafist er af vefsíðunni þinni ætti að vera fellt inn í HTML í staðinn. Það er hins vegar starf WordPress þema og viðbótarforritara - en ef þú myndir búa til þema eða viðbót, hafðu þetta í huga.

Lestu meira:  Hvernig á að ráða (GREAT) Javascript forritara

Til viðbótar við það lýsti Google einnig leið fyrir þig til að greina handvirkt hvaða handrit þín hindra flutning vefsíðunnar með því að hafa mjög langan hleðslutíma. Þú getur gert það með því að nota Dev Tools Chrome umfjöllun Flipi.

Fresta ónotuðum CSS

Svipað vandamál sem þú gætir séð eiga sér stað þessa dagana, einnig í Pagespeed innsýnartækinu, er Frestun ónotaðs CSS. Þó að þetta sé svipað vandamál, þá eru rætur þess nokkuð aðrar. Í meginatriðum þyrfti að endurskipuleggja CSS til að laga þetta rétt.

{loadpostion imh-embed}

Algengar spurningar

Hvernig laga ég fresta þáttun JavaScript í WordPress?

Til að laga frestun þáttunar Javascript á WordPress þarftu að gera smávægilegar breytingar á kóðanum þínum. Þú getur annað hvort fundið öll forskriftir og bætt við fresta merktu við þá, eða þú gætir sett upp viðbót sem gerir þetta sjálfkrafa. Þú getur einnig búið til handrit sem hleður skrárnar ósamstillt eins og sýnt er í Hvernig á að fresta þáttun Javascript með því að nota handritahluta þessarar greinar.

Hvað er defer JavaScript?

Frestun þáttunar Javascript er ferlið við að leiðbeina vafra gesta þinna um að hlaða tilteknum skrám eftir að síðunni hefur verið hlaðið. Þetta gerir notandanum kleift að sjá innihald síðunnar mun hraðar en ef þú framkvæmir ekki frestun þáttunar Javascript

Hver er munurinn á ósamstillingu og fresta Javascript?

Async þýðir að Javascript innihaldið er hlaðið sem eigin nýja tengingu, samhliða öðrum kóða. Með async býr vafrinn til nýjan vinnsluþráð sem mun ekki hægja á neinu núverandi niðurhali meðan Javascript er hlaðið niður og keyrt. Frestaðu aftur á móti, biður vafrann um að flokka handritið, eftir að restinni af efninu hefur verið hlaðið niður. Þó að þetta sé yfirleitt gott fyrir hraðann, þá gætu verið einhver vandamál varðandi efnið þitt, ef það vísar til handritsins sem hefur verið frestað (vegna þess að það verður ekki í boði).

Hvernig minnka ég JavaScript í WordPress?

Til að minnka Javascript á WordPress þarftu að innleiða viðbót sem gerir þetta sjálfkrafa. Þú getur lesið meira um þetta hér. 

Umbúðir Up

Og þú varðst bara vitni að því hvernig á að fresta þáttun JavaScript á WordPress.

Við höfum lært að það er hægt að ná annað hvort með viðbótum eða með handvirkum klipum. Það hefur tonn af ávinningi fyrir síðuna þína eins og bætt SEO, betri notendaupplifun og hraðari hleðslutíma. Það er því mikilvægt að tryggja að þú frestir eins mörgum forskriftir og þú getur til að ná hámarks árangri.

En mundu, hafðu alltaf öryggisafrit og prófaðu mikið til að tryggja að þú frestaðir réttu forskriftunum! Það kann að virðast leiðinlegt en ef það er gert rétt er ávinningurinn og hagnaðurinn mikill.

Ef þú vilt virkilega hámarka hleðsluhraða á vefsíðu þína, mælum við með að láta það eftir atvinnumönnunum eins og strákunum frá WP Rocket, til að fá sem mestan ávinning af þessu og hundruðum annarra aðgerða til að gera vefsíðu þína hraðari.

Farðu á WP Rocket til að gera vefsíðuna þína hraðari í dag  

Um höfundinn

Höfundur: David AttardVefsíða: https://www.linkedin.com/in/dattard/Tölvupóstur: david@collectiveray. Með

David hefur starfað í eða við net- / stafræna iðnaðinn síðustu 18 ár. Hann hefur mikla reynslu af hugbúnaðar- og vefhönnunargeiranum með því að nota WordPress, Joomla og veggskot í kringum þau. Sem stafrænn ráðgjafi er áhersla hans lögð á að hjálpa fyrirtækjum að ná samkeppnisforskoti með því að nota sambland af vefsíðu þeirra og stafrænum kerfum sem eru í boði í dag.