Postavke dodatka W3 Total Cache Minify: Kako odabrati vrstu ugrađivanja? Moje iskustvo s rješavanjem problema i savjeti koji spašavaju život

Mučite se s odabirom prave vrste ugradnje za W3 Total Cache Minify? Ovaj članak dijeli stvarno iskustvo webmastera i pruža detaljan vodič za točan odabir prave vrste ugradnje Minify, izbjegavajući probleme sa stilom web stranice i rušenja pri učitavanju. Također uključuje jednostavno rješenje za postavljanje koje čak i početnici mogu lako primijeniti, osiguravajući glatko i brzo WordPress iskustvo!

Optimizirao sam web stranicu i kada sam otvorio postavke Minify u W3 Total Cacheu, bio sam potpuno zapanjen. Padajući izbornik za ugrađeni tip imao je četiri opcije: Zadano (Blokiraj), Koristi JS za neblokiranje, Koristi "Asinkrono" za neblokiranje i Koristi "Odgođeno" za neblokiranje.

Razmislio sam o tome na trenutak, o čemu se radi?

Vjerujte mi, niste sami. Ove četiri opcije vjerojatno će zbuniti čak i početnika, a kamoli nekoga tko WordPress koristi godinama. Ovaj članak predstavlja zamke na koje sam naišao i lekcije koje sam izravno naučio. Ne morate konzultirati dokumentaciju; samo slijedite moje upute.

Što su točno ove četiri vrste ugrađivanja?

Prvo razgovarajmo o tome kakav karakter imaju ove četiri opcije.

Zadano blokiranje je najjednostavniji pristup. Kada preglednik naiđe na skriptu, zaustavlja se, preuzima i izvršava skriptu u potpunosti, a zatim nastavlja s prikazom stranice. Zvuči pouzdano, zar ne? Ali kompromis je u tome što će početno učitavanje stranice biti odgođeno; korisnici će morati pričekati da se skripta završi s izvršavanjem prije nego što išta vide.

Korištenje JavaScripta za neblokiranje je prilično zanimljivo. Umjesto izravnog pisanja oznaka `<script>` na stranici, prvo se ispisuje mala skripta, a zatim dinamički ubrizgava potrebne skripte u stranicu putem JavaScripta nakon što se stranica pokrene. Na taj način, stranica se prvo može prikazati, a skripte se postupno učitavaju. Zvuči sjajno, zar ne? Međutim, problem je što ovaj dinamički proces ubrizgavanja može poremetiti izvorni redoslijed izvršavanja skripti. Ako se neke skripte na vašoj stranici uvelike oslanjaju na redoslijed izvršavanja, mogu se pojaviti problemi.

Korištenje "asinkronog" za izvršavanje bez blokiranja jednostavno uključuje dodavanje atributa `async` oznaci `<script>`. Skripta će se asinkrono preuzeti u pozadini i izvršiti odmah nakon završetka, bez čekanja stranice. Međutim, nedostatak je što je redoslijed izvršavanja potpuno nekontroliran; ono što se prvo preuzme izvršava se, bez obzira na redoslijed koji navedete u kodu.

Korištenje "delay" za neblokirajuće izvršavanje postiže se dodavanjem atributa `defer`. Skripta će pričekati dok se cijela stranica ne raščlani prije izvršavanja i, što je ključno, zadržat će izvorni redoslijed kojim ste je napisali. To je prilično jednostavno za korištenje jer ne blokira prvi zaslon niti remeti redoslijed skripte.

Koji bih trebao odabrati?

Jednostavno rečeno, ove četiri opcije su poput pitanja s višestrukim izborom: želite li brzinu ili želite red?

Moj prijedlog je sljedeći:

Ako je vaša web stranica mala, ima malo skripti i nemate izrazito visoke zahtjeve za brzinu učitavanja, korištenje zadane (blokirane) postavke je najjednostavnija opcija. Iako je malo sporija, neće uzrokovati nikakve probleme.

Ako želite poboljšati brzinu prikaza prvog zaslona, ​​a vaši skripti nemaju jake ovisnosti poput "A se mora izvršiti prije B", dajte prioritet korištenju "defer" za neblokirajuće izvršavanje . Ovo je gotovo idealno rješenje koje je trenutno dostupno, jer izbjegava blokiranje renderiranja uz održavanje redoslijeda izvršavanja.

Ako ustanovite da neke funkcije i dalje imaju problema nakon što ste isprobali defer, razmislite o korištenju JavaScripta za neblokiranje . Ovaj pristup je agresivniji, ali je njegova kompatibilnost nešto lošija.

Korištenje "async" za neblokiranje je opcija koju najmanje preporučujem. Budući da je redoslijed izvršavanja potpuno poremećen, lako je srušiti se osim ako niste apsolutno sigurni da se vaše skripte izvode neovisno.

Dvije velike zamke u koje sam upao

Priča je jeftina. Zapisao sam dvije pogreške koje sam napravio; možete ih provjeriti na temelju vlastitog iskustva kako biste vidjeli možete li ih izbjeći.

Prva zamka: Prilagođene WordPress teme ne mogu se pregledati u stvarnom vremenu.

Neko vrijeme, prilikom prilagodbe teme, nakon klika na Spremi, pregled se nije osvježavao. Napravio bih neke promjene, osvježio stranicu, a i dalje bi bilo isto.

Nakon malo istraživanja, otkrio sam da je krivac Minifyjeva funkcija kompresije. Rješenje je jednostavno:

Idite na opće postavke dodatka W3 Total Cache , pronađite opciju "Kompresija" i poništite je. Zatim kliknite malu strelicu ispod "Spremi postavke" u gornjem desnom kutu i odaberite " Spremi postavke i izbriši predmemoriju ". Ovaj korak je ključan; bez brisanja predmemorije i dalje ćete vidjeti staru verziju.

Nakon što završite, vratite se na prilagodbu teme i pregled uživo će se vratiti u normalu.

Drugi problem: Okvir za pretraživanje teme Astra ne reagira kada se klikne.

Naišao sam na ovaj problem prije dosta vremena. Koristio sam Astra temu i jednog dana sam iznenada otkrio da okvir za pretraživanje ne reagira bez obzira na to kako sam kliknuo na njega. Isprva sam mislio da je problem u samoj temi, ali kasnije sam otkrio da je uzrok tome Minify postavke u W3TC-u.

Rješenje je sljedeće:

Idite na W3 Total Cache → Opće postavke → Napredne postavke kompresije → JS → Postavke mehanizma za minimiziranje → Postavke lokalizacije i promijenite vrstu ugrađivanja na jednu od ove dvije:

1. Prije se neblokiranje postizalo pomoću JavaScripta.
2. Nakon toga, koristite JS za neblokiranje

Slično tome, brisanje predmemorije i osvježavanje stranice omogućit će ispravan rad okvira za pretraživanje.

Što se tiče razloga zašto su odabrane ove dvije opcije umjesto drugih, proveo sam istraživanje. Jednostavno rečeno, front-end komponente Astra teme prilično su osjetljive na vrijeme izvršavanja skripte, a određene metode koje ne blokiraju mogu uzrokovati neuspjeh vezanja događaja. Korištenje načina rada "neblokiranje s JS-om" osigurava da se skripta izvršava tek nakon što se stranica učitava, a istovremeno se izbjegava neuređeno izvršavanje koje se vidi kod asinkronosti.

Popis mjesta koja treba posjetiti

Konačno, evo kontrolne liste koju možete izravno slijediti:

Prvi korak je razjasniti svoj cilj. Želite li najbrže početno učitavanje stranice ili dajete prioritet stabilnosti i radu bez grešaka? To će odrediti koju vrstu ugradnje trebate koristiti.

Drugi korak nije mijenjati sve odjednom. Prvo, pronađite manje važnu stranicu za testiranje, promatrajte je dan ili dva i promovirajte je na cijeloj web-lokaciji samo ako ste sigurni da nema problema.

Treće, uvijek obrišite predmemoriju nakon svake izmjene. W3TC-ov mehanizam predmemorije spriječit će vas da vidite najnovije promjene, stoga je korak "obrišite predmemoriju i ponovno testirajte" apsolutno neophodan.

Četvrto, upotrijebite alate za razvojne programere u svom pregledniku ili alate poput PageSpeed ​​​​Insights kako biste usporedili brzinu učitavanja prije i poslije. Neka podaci govore sami za sebe, a ne samo vaš osjećaj.

Napiši na kraju

Iskreno, kada sam prvi put vidio ovu postavku ugrađenog tipa, dugo sam bio zapanjen. Zadani način blokiranja činio se previše sporim, dok asinhroni način nije jamčio redoslijed, a odgađanje bi moglo uzrokovati probleme s kompatibilnošću. Nisam bio siguran koju opciju odabrati.

Ali kasnije sam shvatio da je to kompromis. Ne možete imati i najbrži i najstabilniji; uvijek morate žrtvovati jedno. Moje iskustvo je da prvo koristite defer, što je trenutno najsigurnije rješenje bez blokiranja, a zatim koristite povratni poziv ako se pojave problemi.

Ako naiđete na slične probleme ili ako i dalje imate drugih problema nakon što ste slijedili moju metodu, slobodno o tome razgovarajte. Razvoj web stranica se svodi na pokušaje i pogreške; nitko nije iznimka.

Hvala vam što ste pročitali moj članak. Vidimo se sljedeći put.