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 praktično iskustvo webmastera i pruža detaljan vodič za precizan odabir prave vrste ugradnje Minify, izbjegavajući probleme sa stilom web stranice i padove 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!

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

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

Vjerujte mi, niste sami. Ove četiri opcije će vjerovatno zbuniti čak i početnika, a kamoli nekoga ko koristi WordPress godinama. Ovaj članak predstavlja zamke na koje sam naišao i lekcije koje sam direktno naučio. Ne morate konsultovati dokumentaciju; samo slijedite moja uputstva.

Šta su tačno ova četiri tipa ugrađivanja?

Prvo da razgovaramo o tome kakav karakter predstavljaju ove četiri opcije.

Zadano (Blokirano)Ovo 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 što će početno učitavanje stranice biti blokirano; korisnici će morati čekati da se skripta završi prije nego što išta vide.

Korištenje JS-a za neblokiranjeOvo je prilično zanimljivo. Umjesto direktnog pisanja oznaka `<script>` na stranici, prvo se ispisuje mala skripta, a zatim dinamički ubrizgava skripte koje je potrebno učitati na stranicu putem JavaScripta nakon što se stranica pokrene. Na ovaj način, stranica se prvo može prikazati, a skripte se mogu postepeno učitavati. Zvuči sjajno, zar ne? Međutim, problem je što ovaj dinamički proces ubrizgavanja može poremetiti originalni redoslijed izvršavanja skripti. Ako se neke skripte na vašoj stranici uveliko oslanjaju na redoslijed izvršavanja, mogu se pojaviti problemi.

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

Korištenje "kašnjenja" za sprječavanje blokiranjaEvo šta znači dodavanje atributa `defer`. Skripta će čekati dok se cijela stranica ne analizira prije izvršavanja i, što je važno, zadržat će originalni redoslijed kojim ste je napisali. Ovo je prilično jednostavno za korištenje, jer ne blokira prvi ekran niti remeti redoslijed.

Koji da odaberem?

Jednostavno rečeno, ove četiri opcije su kao pitanje s višestrukim izborom odgovora:Želite li brzinu ili red?

Moj prijedlog je sljedeći:

Ako je vaša web stranica mala, ima malo skripti i nemate ekstremno 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 ekrana, a vaši skriptovi nemaju jake zavisnosti poput "A se mora izvršiti prije B", dajte prioritet...Korištenje "kašnjenja" za sprječavanje blokiranja(odgoditi). Ovo je trenutno gotovo najidealnije rješenje, jer ne blokira renderiranje niti remeti redoslijed.

Ako pokušate odgoditi, a i dalje 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 "asinhrono" za neblokiranje(async) je opcija koju najmanje preporučujem. Budući da je redoslijed izvršavanja potpuno poremećen, lako je doći do pada sistema osim ako niste apsolutno sigurni da se svi vaši skriptovi izvršavaju nezavisno.

Dvije velike zamke u koje sam upao

Priča je jeftina. Zapisao sam dvije greške koje sam napravio; možete ih provjeriti na osnovu 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 prilagođavanja teme, nakon klika na dugme za spremanje, pregled se nije osvježavao. Napravio bih neke promjene, osvježio stranicu, a ona bi i dalje bila ista.

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

Pristupite dodatku W3 Total Cache常规设置,pojavi se"kompresija"Poništite odabir te opcije. Zatim kliknite na malu strelicu ispod "Sačuvaj postavke" u gornjem desnom uglu i odaberite "..."Sačuvaj postavke i obriši keš memorijuOvaj korak je ključan; ako ne obrišete keš memoriju, i dalje ćete vidjeti staru verziju.

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

Drugi problem: Polje za pretragu Astra teme ne reaguje kada se na njega klikne.

Naišao sam na ovaj problem prije dosta vremena. Koristio sam Astra temu i jednog dana sam iznenada shvatio da polje za pretragu ne reaguje bez obzira kako sam kliknuo na njega. U početku sam mislio da je problem u samoj temi, ali kasnije sam otkrio da je uzrok Minify postavki 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 tip ugrađivanja na jedan od ova dva:

1. Ranije se neblokiranje postizalo korištenjem JavaScripta.
2. Nakon toga, koristite JS za neblokiranje

Slično tome, brisanje keš memorije i osvježavanje stranice omogućit će ispravno funkcioniranje okvira za pretraživanje.

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

Spisak mjesta koja treba posjetiti

Konačno, evo kontrolne liste koju možete direktno 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? Ovo ć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 stranici samo ako ste sigurni da nema problema.

Treće, uvijek obrišite keš memoriju nakon svake izmjene. W3TC-ov mehanizam keširanja će vas spriječiti da vidite najnovije promjene, tako da je korak "obrišite keš memoriju i testirajte ponovo" apsolutno neophodan.

Četvrto, koristite alate za razvojne programere u vašem pregledniku ili alate poput PageSpeed ​​​​Insights kako biste uporedili 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 djelovao je previše sporo, dok asinhroni način rada nije garantirao redoslijed, a odgađanje bi moglo uzrokovati probleme s kompatibilnošću. Nisam bio siguran koju opciju da odaberem.

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; niko nije izuzetak.

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