Mga Setting sa W3 Total Cache Minify Plugin: Unsaon Pagpili sa Klase sa Pag-embed? Ang Akong Kasinatian sa Pag-troubleshoot ug Tambag nga Makaluwas sa Kinabuhi

Naglisod ka ba sa pagpili sa saktong klase sa pag-embed para sa W3 Total Cache Minify? Kini nga artikulo nagpaambit sa tinuod nga kasinatian sa usa ka webmaster ug naghatag og sunod-sunod nga giya aron tukma nga mapili ang saktong klase sa pag-embed sa Minify, nga malikayan ang mga aksidente sa estilo sa website ug mga pag-crash sa pagkarga. Naglakip usab kini og usa ka dili mapakyas nga solusyon sa pag-setup nga bisan ang mga nagsugod dali nga magamit, nga nagsiguro sa usa ka hapsay ug paspas nga kasinatian sa WordPress !

Nag-optimize ko og website ug sa dihang giablihan nako ang Minify settings sa W3 Total Cache, nahingangha gyud ko. Ang dropdown menu para sa embedded type adunay upat ka options: Default (Block), Use JS para sa Non-Blocking, Use "Asynchronous" para sa Non-Blocking, ug Use "Delayed" para sa Non-Blocking.

Nahunahuna ko kini sa makadiyot, unsa man kining tanan?

Salig lang, dili ka nag-inusara. Kining upat ka mga kapilian lagmit makapalibog bisan sa usa ka bag-o pa lang, labi na kadtong dugay nang naggamit sa WordPress. Kini nga artikulo nagpresentar sa mga lit-ag nga akong nasugatan ug sa mga leksyon nga akong nakat-unan direkta. Dili na kinahanglan nga konsultahon nimo ang dokumentasyon; sunda lang ang akong mga instruksyon.

Unsa gyud kining upat ka klase sa pag-embed?

Atong hisgutan una kung unsang klase sa karakter kining upat ka mga kapilian.

Ang default blocking mao ang pinakasimple nga pamaagi. Kung makasugat ang browser og script, mohunong kini, mag-download ug mo-execute sa script sa hingpit, ug dayon magpadayon sa pag-render sa panid. Morag kasaligan, di ba? Apan ang trade-off mao nga malangan ang imong inisyal nga pagkarga sa panid; ang mga tiggamit kinahanglan maghulat nga mahuman ang pagdagan sa script sa dili pa sila makakita og bisan unsa.

Makapainteres ang paggamit sa JavaScript para sa non-blocking . Imbis nga direkta nga magsulat og `<script>` tags sa panid, una kini mo-output og gamay nga script, ug dayon dinamikong mo-inject sa gikinahanglan nga mga script ngadto sa panid pinaagi sa JavaScript human modagan ang panid. Niining paagiha, ang panid mahimong unang ma-render, ug ang mga script hinay-hinay nga mo-load. Maayo paminawon, di ba? Apan, ang problema kay kining dinamikong proseso sa pag-inject makabalda sa orihinal nga han-ay sa pagpatuman sa mga script. Kon ang ubang mga script sa imong panid kusog nga nagsalig sa han-ay sa pagpatuman, mahimong motumaw ang mga problema.

Ang paggamit sa "asynchronous" para sa non-blocking execution naglakip lang sa pagdugang sa `async` attribute sa `<script>` tag. Ang script mo-download nga asynchronous sa background ug mo-execute dayon human makompleto, nga dili na kinahanglan maghulat ang page. Apan, ang disbentaha kay ang pagkasunod-sunod sa execution dili gyud makontrol; bisan unsa nga download ang unang mo-execute, bisan unsa pa ang pagkasunod-sunod nga imong gi-specify sa code.

Ang paggamit sa "delay" para sa non-blocking execution makab-ot pinaagi sa pagdugang sa `defer` attribute. Ang script maghulat hangtod nga ma-parse ang tibuok panid sa dili pa i-execute, ug ang importante, kini magpabilin sa orihinal nga han-ay sa imong pagsulat niini. Kini sayon ​​gamiton, kay dili kini mo-block sa unang screen ni makabalda sa han-ay sa script.

Hain ang akong pilion?

Sa yanong pagkasulti, kining upat ka mga kapilian sama sa usa ka multiple-choice nga pangutana: gusto ba nimo ang katulin, o gusto ba nimo ang han-ay?

Ang akong sugyot mao ang mosunod:

Kon gamay ra ang imong website, gamay ra ang mga script, ug wala kay taas nga kinahanglanon para sa loading speed, ang paggamit sa default (blocked) setting mao ang pinakasayon ​​nga kapilian. Bisan og medyo hinay kini, dili kini makahatag og problema.

Kon gusto nimong pauswagon ang katulin sa unang pag-screen ug ang imong mga script walay kusog nga mga dependency sama sa "A must execute before B," unaha ang paggamit sa "defer" para sa non-blocking execution . Kini halos ang sulundon nga solusyon nga magamit karon, tungod kay kini makalikay sa pag-block sa rendering samtang gipadayon ang han-ay sa execution.

Kon imong makita nga ang ubang mga gimbuhaton aduna gihapoy mga problema human sa pagsulay sa defer, nan hunahunaa ang paggamit sa JavaScript para sa non-blocking . Kini nga pamaagi mas agresibo, apan ang pagkaangay niini medyo mas grabe.

Ang paggamit og "async" para sa non-blocking mao ang opsyon nga dili nako girekomenda. Tungod kay ang han-ay sa pagpatuman hingpit nga gubot, dali ra kini ma-crash gawas kung sigurado ka nga ang imong mga script modagan nga independente.

Duha ka dagkong lit-ag nga akong nasugatan

Barato ra ang estorya. Gisulat nako ang duha ka sayop nga akong nahimo; mahimo nimo kining susihon base sa imong kaugalingong kasinatian aron makita kung malikayan nimo kini.

Ang unang lit-ag: Ang mga custom nga tema sa WordPress dili ma-preview sa tinuod nga oras.

Sa makadiyot, kon mag-customize og tema, human sa pag-klik sa save, ang preview dili mo-refresh. Maghimo kog pipila ka mga pagbag-o, mo-refresh sa panid, ug parehas ra gihapon kini.

Human sa pipila ka imbestigasyon, akong nadiskobrehan nga ang compression function sa Minify mao diay ang hinungdan. Yano ra ang solusyon:

Adto sa kinatibuk-ang mga setting sa W3 Total Cache plugin , pangitaa ang opsyon nga "Compression" , ug tangtanga kini og tsek. Dayon, i-klik ang gamay nga pana sa ubos sa "Save Settings" sa ibabaw nga tuo nga suok, ug pilia ang " Save Settings and Clear Cache ." Kini nga lakang importante kaayo; bisan dili nimo limpyohan ang cache, makita gihapon nimo ang daan nga bersyon.

Kung nahuman na nimo, balik sa pag-customize sa tema, ug ang live preview mobalik sa normal.

Ang ikaduhang problema: Ang search box sa tema sa Astra dili motubag kung i-klik.

Nakasugat ko ani nga problema kaniadto pa. Gigamit nako ang Astra theme, ug usa ka adlaw kalit nakong nakita nga ang search box wala motubag bisag unsaon nako kini pag-klik. Sa sinugdanan, abi nakog problema kini sa tema mismo, apan sa ulahi akong nadiskobrehan nga kini tungod sa Minify settings sa W3TC.

Ang solusyon mao ang mosunod:

Adto sa W3 Total Cache → General Settings → Advanced Compression Settings → JS → Minify Engine Settings → Locale Settings, ug usba ang embedding type ngadto sa usa niining duha:

1. Kaniadto, ang non-blocking nakab-ot gamit ang JavaScript.
2. Pagkahuman, gamita ang JS para sa dili pag-block

Sa susama, ang paghawan sa cache ug pag-refresh sa panid magtugot sa search box nga molihok sa husto.

Kon nganong kining duha ka opsyon ang gipili imbes sa uban, nakahimo na kog panukiduki. Sa yanong pagkasulti, ang mga front-end component sa Astra theme sensitibo kaayo sa timing sa pag-execute sa script, ug ang pipila ka non-blocking methods mahimong hinungdan sa pagkapakyas sa event binding. Ang paggamit sa "non-blocking with JS" mode nagsiguro nga ang script mo-execute lang human mahuman og load ang page, samtang malikayan ang disordered execution nga makita sa async.

Listahan sa mga lugar nga bisitahon

Sa katapusan, aniay checklist nga mahimo nimong sundon direkta:

Ang unang lakang mao ang pagklaro sa imong tumong. Gusto ba nimo ang pinakapaspas nga inisyal nga pagkarga sa panid, o giuna ba nimo ang kalig-on ug walay sayop nga operasyon? Kini ang magtino kung unsang klase sa pag-embed ang imong gamiton.

Ang ikaduhang lakang mao ang dili pag-usab sa tanan sa usa ka higayon. Una, pangitaa ang usa ka panid nga dili kaayo importante aron sulayan kini, obserbahan kini sulod sa usa o duha ka adlaw, ug i-promote lang kini sa tibuok site kung sigurado ka nga walay problema.

Ikatulo, kanunay nga limpyohi ang cache human sa matag pagbag-o. Ang mekanismo sa pag-cache sa W3TC makapugong kanimo sa pagtan-aw sa pinakabag-ong mga pagbag-o, busa ang lakang nga "limpyohi ang cache ug sulayi pag-usab" hinungdanon kaayo.

Ikaupat, gamita ang mga developer tools sa imong browser o mga himan sama sa PageSpeed ​​​​Insights aron itandi ang loading speed sa wala pa ug pagkahuman. Pasagdi nga ang datos ang mosulti alang sa iyang kaugalingon, dili lang ang imong gibati.

Pagsulat sa katapusan

Sa tinuod lang, sa dihang una nakong nakita kini nga embedded type setting, nahingangha ko sa dugay nga panahon. Ang default blocking mode daw hinay kaayo, samtang ang asynchronous mode dili garantiya sa pagkasunod-sunod, ug ang paglangan mahimong hinungdan sa mga isyu sa compatibility. Wala ko kahibalo kung unsang opsyon ang pilion.

Apan sa ulahi akong naamgohan nga kini usa ka kompromiso. Dili nimo makuha ang pinakapaspas ug ang pinakalig-on; kinahanglan nimo kanunay nga isakripisyo ang usa. Ang akong kasinatian mao ang paggamit una sa defer, nga mao karon ang labing luwas nga solusyon sa non-blocking, ug dayon paggamit og callback kung adunay motumaw nga mga problema.

Kon makasugat ka og susamang mga problema, o kon aduna ka pa'y ubang mga isyu human sa pagsunod sa akong pamaagi, ayaw pagpanuko sa paghisgot niini. Ang paghimo og website kay mahitungod sa pagsulay ug pag-usab sa mga sayop; walay eksepsiyon.

Salamat sa pagbasa sa akong artikulo. Magkita ta sa sunod.