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 sa podelí o praktické skúsenosti správcu webu a poskytne podrobný návod, ako presne vybrať správny typ vloženia Minify, čím sa predíde chybám v štýle 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, a zabezpečí tak plynulé a rýchle používanie WordPressu !

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é blokovanie je najjednoduchší prístup. Keď prehliadač narazí na skript, zastaví sa, stiahne a úplne vykoná skript a potom pokračuje vo vykresľovaní stránky. Znie to spoľahlivo, však? Nevýhodou však je, že počiatočné načítanie stránky sa oneskorí; používatelia budú musieť počkať na dokončenie skriptu, kým niečo uvidia.

Používanie JavaScriptu na neblokovanie je celkom zaujímavé. Namiesto priameho písania tagov `<script>` na stránku sa najprv vypíše malý skript a potom sa po spustení stránky dynamicky vložia potrebné skripty do stránky pomocou JavaScriptu. Týmto spôsobom sa stránka môže najprv vykresliť a skripty sa načítavajú postupne. Znie to skvele, však? Problém je však v tom, že tento proces dynamického 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.

Použitie atribútu „asynchrónne“ pre neblokujúce vykonávanie jednoducho zahŕňa pridanie atribútu `async` do tagu `<script>`. Skript sa bude sťahovať asynchrónne na pozadí a vykoná sa ihneď po dokončení, bez toho, aby naň stránka čakala. Nevýhodou je však, že poradie vykonávania je úplne nekontrolovateľné; vykoná sa to, čo sa stiahne ako prvé, bez ohľadu na poradie, ktoré zadáte v kóde.

Použitie „delay“ pre neblokujúce vykonávanie sa dosiahne pridaním 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 to ani neblokuje prvú obrazovku, ani nenarúša poradie skriptu.

Ktorý si mám vybrať?

Zjednodušene povedané, tieto štyri možnosti sú ako otázka s výberom odpovede: chcete rýchlosť alebo chcete 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 „defer“ pre neblokujúce vykonávanie . Toto je takmer ideálne riešenie, ktoré je momentálne k dispozícii, pretože sa vyhýba blokovaniu vykresľovania a zároveň zachováva poradie vykonávania.

Ak zistíte, že niektoré funkcie majú stále problémy aj po vyskúšaní funkcie defer, zvážte použitie JavaScriptu pre neblokovanie . Tento prístup je agresívnejší, ale jeho kompatibilita je o niečo horšia.

Použitie „async“ pre neblokovanie 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 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é:

Prejdite do všeobecných nastavení pluginu W3 Total Cache , vyhľadajte možnosť „Kompresia“ a zrušte jej začiarknutie. 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ý; bez vymazania vyrovnávacej pamäte sa vám stále zobrazí 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.