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 ispravne vrste ugradnje Minify, izbjegavajući nedosljednosti u stilu web stranice i rušenja pri učitavanju. Također uključuje i jednostavno rješenje za postavljanje koje čak i početnici mogu lako primijeniti.WordPress Ubrzajte bez sudara!

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 (Blokirano)To se zove zadano blokiranje. To je najjednostavniji pristup: preglednik se zaustavlja kada naiđe na skriptu, preuzima je i izvršava u potpunosti, a zatim nastavlja prikazivati ​​stranicu. Zvuči pouzdano, zar ne? Ali kompromis je u tome što će početno učitavanje stranice biti blokirano; korisnici će morati pričekati da se skripta završi s izvršavanjem prije nego što išta vide.

Korištenje JS-a za neblokiranjeOvo je prilično zanimljivo. Umjesto izravnog pisanja oznaka `<script>` na stranici, prvo ispisuje malu skriptu, a zatim dinamički ubrizgava skripte koje je potrebno učitati na stranicu putem JavaScripta nakon što se stranica pokrene. Na taj način, stranica se prvo može prikazati, a skripte se mogu postupno učitavati. 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.

Koristite "asinkrono" za neblokiranjeTo uključuje dodavanje atributa `async` oznaci `<script>`. Skripta će se asinkrono preuzeti u pozadini i izvršiti odmah nakon preuzimanja, bez čekanja stranice. Međutim, nedostatak je što je redoslijed izvršavanja potpuno nekontroliran; skripta koja prva završi s preuzimanjem, prva se izvršava, bez obzira na redoslijed koji ste naveli u kodu.

Korištenje "kašnjenja" za neblokiranjeTo znači dodavanje atributa `defer`. Skripta će pričekati dok se cijela stranica ne raščlani prije izvršavanja i, što je važ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.

Koji bih trebao odabrati?

Jednostavno rečeno, ove četiri opcije su poput pitanja s višestrukim izborom:Želite li brzinu ili 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še skripte nemaju jake ovisnosti poput "A se mora izvršiti prije B", odredite prioritete...Korištenje "kašnjenja" za neblokiranje(odgoditi). Ovo je trenutno gotovo najidealnije rješenje, jer ne blokira renderiranje niti remeti redoslijed.

Ako pokušate odgoditi i još uvijek imate problema s nekim funkcijama, razmislite...Korištenje JS-a za neblokiranjeOvo rješenje je radikalnije, ali je njegova kompatibilnost nešto lošija.

Koristite "asinkrono" za neblokiranje(async) 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 sve 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:

Pristup dodatku W3 Total Cache常规设置,pojavi se"kompresija"Poništite odabir te opcije. Zatim kliknite malu strelicu ispod "Spremi postavke" u gornjem desnom kutu i odaberite "..."Spremi postavke i izbriši predmemorijuOvaj korak je ključan; ako ne izbrišete predmemoriju, 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.