Nastavenia pluginu W3 Total Cache Minify: Ako vybrať typ vkladania? Moje skúsenosti s riešením problémov a rady, ktoré mi zachránia život

Máte problém s výberom správneho typu vloženia pre W3 Total Cache Minify? Tento článok zdieľa praktické skúsenosti správcu webu a poskytuje podrobný návod na presný výber správneho typu vloženia Minify, čím sa predíde nekonzistentnostiam štýlu webových stránok a zlyhaniam pri načítavaní. Obsahuje tiež bezchybné riešenie nastavenia, ktoré môžu ľahko použiť aj začiatočníci.WordPress Zrýchlite bez havárie!

Optimalizoval som webovú stránku a keď som otvoril nastavenia Minify v W3 Total Cache, bol som úplne ohromený. Rozbaľovacia ponuka pre vložený typ mala štyri možnosti: Predvolené (Blokovať), Použiť JS pre neblokovanie, Použiť „Asynchrónne“ pre neblokovanie a Použiť „Oneskorené“ pre neblokovanie.

Na chvíľu som sa zamyslel, o čo tu vlastne ide?

Verte mi, nie ste sami. Tieto štyri možnosti pravdepodobne nechávajú zmäteného aj začiatočníka, nieto ešte niekoho, kto používa WordPress už roky. Tento článok vám priamo predstavuje úskalia, s ktorými som sa stretol, a ponaučenia, ktoré som si z toho odniesol. Nemusíte konzultovať dokumentáciu; stačí postupovať podľa mojich pokynov.

Čo presne sú tieto štyri typy vkladania?

Najprv si povedzme, aký charakter majú tieto štyri možnosti.

Predvolené (blok)Toto sa nazýva predvolené blokovanie. Je to najjednoduchší prístup: prehliadač sa zastaví, keď narazí na skript, stiahne ho a úplne ho vykoná a potom pokračuje vo vykresľovaní stránky. Znie to spoľahlivo, však? Nevýhodou je však to, že počiatočné načítanie stránky bude zablokované; používatelia budú musieť počkať, kým sa skript dokončí, kým niečo uvidia.

Používanie JS pre neblokovanieToto je celkom zaujímavé. Namiesto priameho zápisu tagov `<script>` na stránku sa najprv vypíše malý skript a potom sa po spustení stránky dynamicky vložia skripty, ktoré je potrebné načítať, do stránky pomocou JavaScriptu. Týmto spôsobom sa stránka môže najskôr vykresliť a skripty sa môžu načítavať postupne. Znie to skvele, však? Problém je však v tom, že tento dynamický proces vkladania môže narušiť pôvodné poradie vykonávania skriptov. Ak sa niektoré skripty na vašej stránke silne spoliehajú na poradie vykonávania, môžu nastať problémy.

Pre neblokovanie použite „asynchrónne“To zahŕňa pridanie atribútu `async` do tagu `<script>`. Skript sa bude sťahovať asynchrónne na pozadí a spustí sa ihneď po stiahnutí, bez toho, aby naň stránka čakala. Nevýhodou však je, že poradie vykonávania je úplne nekontrolovateľné; skript, ktorý sa sťahuje ako prvý, sa vykoná ako prvý, bez ohľadu na poradie, ktoré ste zadali v kóde.

Použitie „oneskorenia“ pre neblokovanieToto znamená pridanie atribútu `defer`. Skript pred spustením počká, kým sa celá stránka analyzuje, a čo je dôležité, zachová si pôvodné poradie, v akom ste ho napísali. Toto je celkom užívateľsky prívetivé, pretože ani neblokuje prvú obrazovku, ani nenarúša poradie.

Ktorý si mám vybrať?

Zjednodušene povedané, tieto štyri možnosti sú ako otázka s výberom odpovede:Chcete rýchlosť alebo poriadok?

Môj návrh je nasledovný:

Ak je vaša webová stránka malá, má málo skriptov a nemáte extrémne vysoké požiadavky na rýchlosť načítavania, najjednoduchšou možnosťou je použiť predvolené (blokované) nastavenie. Aj keď je to trochu pomalšie, nespôsobí to žiadne problémy.

Ak chcete zlepšiť rýchlosť zobrazenia na prvej obrazovke a vaše skripty nemajú silné závislosti typu „A sa musí vykonať pred B“, uprednostnite...Použitie „oneskorenia“ pre neblokovanie(odložiť). Toto je v súčasnosti takmer najideálnejšie riešenie, pretože ani neblokuje vykresľovanie, ani nenarúša poradie.

Ak sa pokúsite o odloženie a stále zistíte, že niektoré funkcie majú problémy, zvážte...Používanie JS pre neblokovanieToto riešenie je radikálnejšie, ale jeho kompatibilita je o niečo horšia.

Pre neblokovanie použite „asynchrónne“(asynchrónne) je možnosť, ktorú najmenej odporúčam. Keďže poradie vykonávania je úplne narušené, je ľahké zlyhať, pokiaľ si nie ste úplne istí, že všetky vaše skripty bežia nezávisle.

Dve veľké pasce, do ktorých som spadol

Reči sú lacné. Zapísal som dve chyby, ktoré som urobil; môžete si ich overiť na základe vlastnej skúsenosti, aby ste zistili, či sa im dokážete vyhnúť.

Prvé úskalie: Vlastné témy WordPress nie je možné zobraziť v reálnom čase.

Chvíľu sa mi pri úprave témy po kliknutí na tlačidlo Uložiť neobnovovala ukážka. Urobil som nejaké zmeny, obnovil stránku a stále to bolo rovnaké.

Po nejakom skúmaní som zistil, že vinníkom bola kompresná funkcia Minify. Riešenie je jednoduché:

Prístup k doplnku W3 Total CacheVšeobecné nastavenia,otočte sa"kompresia"Zrušte začiarknutie tejto možnosti. Potom kliknite na malú šípku pod možnosťou „Uložiť nastavenia“ v pravom hornom rohu a vyberte možnosť „...“Uložiť nastavenia a vymazať vyrovnávaciu pamäťTento krok je kľúčový; ak nevymažete vyrovnávaciu pamäť, stále sa vám bude zobrazovať stará verzia.

Po dokončení sa vráťte k prispôsobeniu témy a živý náhľad sa vráti do normálu.

Druhý problém: Vyhľadávacie pole témy Astra nereaguje po kliknutí.

S týmto problémom som sa stretol už dávnejšie. Používal som tému Astra a jedného dňa som zrazu zistil, že vyhľadávacie pole nereaguje, bez ohľadu na to, ako som naň klikol. Najprv som si myslel, že je problém so samotnou témou, ale neskôr som zistil, že to spôsobujú nastavenia Minify vo W3TC.

Riešenie je nasledovné:

Prejdite do W3 Total Cache → Všeobecné nastavenia → Rozšírené nastavenia kompresie → JS → Nastavenia enginu Minify → Nastavenia miestneho nastavenia a zmeňte typ vkladania na jeden z týchto dvoch:

1. Predtým sa neblokovanie dosahovalo pomocou JavaScriptu.
2. Potom použite JS pre neblokovanie

Podobne vymazanie vyrovnávacej pamäte a obnovenie stránky umožní správne fungovanie vyhľadávacieho poľa.

Pokiaľ ide o to, prečo boli tieto dve možnosti vybrané namiesto iných, urobil som si prieskum. Jednoducho povedané, front-endové komponenty témy Astra sú dosť citlivé na načasovanie vykonávania skriptu a určité neblokujúce metódy môžu spôsobiť zlyhanie viazania udalostí. Použitie režimu „neblokovanie s JS“ zabezpečí, že skript sa vykoná až po dokončení načítania stránky, pričom sa zabráni neusporiadanému vykonávaniu, ku ktorému dochádza pri asynchrónnom režime.

Zoznam miest, ktoré sa oplatí navštíviť

Nakoniec tu je kontrolný zoznam, ktorý môžete priamo dodržiavať:

Prvým krokom je ujasniť si svoj cieľ. Chcete najrýchlejšie načítanie úvodnej stránky alebo uprednostňujete stabilitu a bezchybnú prevádzku? To určí, ktorý typ vkladania by ste mali použiť.

Druhým krokom nie je meniť všetko naraz. Najprv si nájdite menej dôležitú stránku na otestovanie, pozorujte ju deň alebo dva a propagujte ju na celom webe iba vtedy, ak ste si istí, že nie sú žiadne problémy.

Po tretie, vždy vymažte vyrovnávaciu pamäť po každej úprave. Mechanizmus ukladania do vyrovnávacej pamäte W3TC vám zabráni vidieť najnovšie zmeny, takže krok „vymazať vyrovnávaciu pamäť a znova otestovať“ je absolútne nevyhnutný.

Po štvrté, použite nástroje pre vývojárov vo vašom prehliadači alebo nástroje ako PageSpeed ​​​​Insights na porovnanie rýchlosti načítania pred a po. Nechajte za seba hovoriť dáta, nielen váš pocit.

Na koniec napíšte

Úprimne povedané, keď som prvýkrát videl toto nastavenie vloženého typu, dlho som bol ohromený. Predvolený režim blokovania sa mi zdal príliš pomalý, zatiaľ čo asynchrónny režim nezaručoval poradie operácií a odloženie mohlo spôsobiť problémy s kompatibilitou. Nebol som si istý, ktorú možnosť si vybrať.

Neskôr som si však uvedomil, že je to kompromis. Nemôžete mať zároveň najrýchlejší aj najstabilnejší systém; vždy musíte jeden obetovať. Z mojej skúsenosti najprv použijem defer, čo je momentálne najbezpečnejšie neblokujúce riešenie, a potom použijem spätné volanie, ak sa vyskytnú problémy.

Ak narazíte na podobné problémy alebo ak máte po použití mojej metódy stále iné problémy, neváhajte to prediskutovať. Vývoj webových stránok je o pokusoch a omyloch; nikto nie je výnimkou.

Ďakujem za prečítanie môjho článku. Dovidenia nabudúce.