Nastavení pluginu W3 Total Cache Minify: Jak vybrat typ vkládání? Moje zkušenosti s řešením problémů a rady, které mi zachrání život

Máte potíže s výběrem správného typu vkládání pro W3 Total Cache Minify? Tento článek sdílí praktické zkušenosti webmastera a poskytuje podrobný návod, jak přesně vybrat správný typ vkládání Minify, abyste se vyhnuli nekonzistencím ve stylu webových stránek a pádům při načítání. Obsahuje také bezchybné řešení nastavení, které snadno zvládnou i začátečníci.WordPress Zrychlete bez havárie!

Optimalizoval jsem webovou stránku a když jsem v W3 Total Cache otevřel nastavení Minify, byl jsem naprosto ohromen. Rozbalovací nabídka pro vložený typ měla čtyři možnosti: Výchozí (Blokovat), Použít JS pro neblokování, Použít „Asynchronní“ pro neblokování a Použít „Zpožděné“ pro neblokování.

Na chvíli jsem se zamyslel, o co to všechno jde?

Věřte mi, nejste sami. Tyto čtyři možnosti pravděpodobně zmátnou i nováčka, natož někoho, kdo používá WordPress už léta. Tento článek vám přímo představuje úskalí, se kterými jsem se setkal, a ponaučení, která jsem si z nich odnesl. Nemusíte číst dokumentaci, stačí se řídit mými pokyny.

Co přesně jsou tyto čtyři typy vkládání?

Pojďme si nejdříve povědět, jaký charakter tyto čtyři možnosti představují.

Výchozí (blok)Tomu se říká výchozí blokování. Je to nejpřímější přístup: prohlížeč se zastaví, když narazí na skript, stáhne ho a kompletně ho spustí a poté pokračuje ve vykreslování stránky. Zní to spolehlivě, že? Nevýhodou ale je, že počáteční načtení stránky bude blokováno; uživatelé budou muset počkat, až skript dokončí spuštění, než něco uvidí.

Použití JS pro neblokováníTo je docela zajímavé. Místo přímého zápisu tagů `<script>` na stránku se nejprve vypíše malý skript a poté se po spuštění stránky dynamicky vloží skripty, které je třeba načíst, do stránky pomocí JavaScriptu. Tímto způsobem se stránka může nejprve vykreslit a skripty se mohou načítat postupně. Zní to skvěle, že? Problém je však v tom, že tento dynamický proces vkládání může narušit původní pořadí provádění skriptů. Pokud se některé skripty na vaší stránce na pořadí provádění silně spoléhají, mohou nastat problémy.

Pro neblokování použijte „asynchronní“To zahrnuje přidání atributu `async` do tagu `<script>`. Skript se bude stahovat asynchronně na pozadí a spustí se ihned po stažení, aniž by na něj stránka čekala. Nevýhodou však je, že pořadí provádění je zcela nekontrolovatelné; skript, který se stahuje jako první, se spustí jako první, bez ohledu na pořadí, které jste zadali v kódu.

Použití „zpoždění“ pro neblokováníTo znamená přidání atributu `defer`. Skript počká, až bude celá stránka analyzována, než se spustí, a co je důležité, zachová původní pořadí, ve kterém jste ji napsali. To je docela uživatelsky přívětivé, protože ani neblokuje první obrazovku, ani nenarušuje pořadí.

Který si mám vybrat?

Jednoduše řečeno, tyto čtyři možnosti jsou jako otázka s výběrem odpovědí:Chcete rychlost, nebo pořádek?

Můj návrh je následující:

Pokud je váš web malý, má málo skriptů a nemáte extrémně vysoké požadavky na rychlost načítání, je nejjednodušší volbou použití výchozího (blokovaného) nastavení. I když je to trochu pomalejší, nezpůsobí to žádné problémy.

Pokud chcete zlepšit rychlost zobrazení na první obrazovce a vaše skripty nemají silné závislosti typu „A se musí spustit před B“, upřednostněte...Použití „zpoždění“ pro neblokování(odložit). Toto je v současnosti téměř nejideálnější řešení, protože ani neblokuje vykreslování, ani nenarušuje pořadí.

Pokud se pokusíte o odložení a stále zjistíte, že některé funkce mají problémy, zvažte...Použití JS pro neblokováníToto řešení je radikálnější, ale jeho kompatibilita je o něco horší.

Pro neblokování použijte „asynchronní“(asynchronní) je možnost, kterou nejméně doporučuji. Protože pořadí provádění je naprosto zmatené, je snadné selhat, pokud si nejste naprosto jisti, že všechny vaše skripty běží nezávisle.

Dvě velké pasti, do kterých jsem spadl

Řeči jsou levné. Sepsal jsem dvě chyby, kterých jsem se dopustil; můžete si je ověřit na základě vlastní zkušenosti, abyste zjistili, zda se jim dokážete vyhnout.

První úskalí: Vlastní šablony WordPressu nelze zobrazit v náhledu v reálném čase.

Chvíli se mi stávalo, že při úpravě motivu se po kliknutí na tlačítko Uložit náhled neobnovoval. Provedl jsem nějaké změny, obnovil stránku a pořád to bylo stejné.

Po nějakém zkoumání jsem zjistil, že viníkem je kompresní funkce Minify. Řešení je jednoduché:

Přístup k pluginu W3 Total Cache常规设置,zvedněte se"komprese"Zrušte zaškrtnutí této možnosti. Poté klikněte na malou šipku pod položkou „Uložit nastavení“ v pravém horním rohu a vyberte „...“Uložit nastavení a vymazat mezipaměťTento krok je klíčový; pokud nevymažete mezipaměť, stále se vám bude zobrazovat stará verze.

Po dokončení se vraťte k přizpůsobení motivu a živý náhled se vrátí do normálu.

Druhý problém: Vyhledávací pole šablony Astra nereaguje po kliknutí.

S tímto problémem jsem se setkal už docela dlouho. Používal jsem šablonu Astra a jednoho dne jsem najednou zjistil, že vyhledávací pole nereaguje, ať jsem na něj klikl jakkoli. Nejdřív jsem si myslel, že je problém se samotnou šablonou, ale později jsem zjistil, že je to způsobeno nastavením Minify ve W3TC.

Řešení je následující:

Přejděte do W3 Total Cache → Obecná nastavení → Pokročilá nastavení komprese → JS → Nastavení enginu Minify → Nastavení národního prostředí a změňte typ vkládání na jeden z těchto dvou:

1. Dříve se neblokování dosahovalo pomocí JavaScriptu.
2. Poté použijte JS pro neblokování

Podobně vymazání mezipaměti a obnovení stránky umožní správné fungování vyhledávacího pole.

Pokud jde o to, proč byly vybrány právě tyto dvě možnosti místo jiných, provedl jsem si menší průzkum. Jednoduše řečeno, front-endové komponenty šablony Astra jsou poměrně citlivé na načasování provádění skriptů a některé neblokující metody mohou způsobit selhání vázání událostí. Použití režimu „neblokování s JS“ zajišťuje, že se skript spustí až po dokončení načtení stránky, a zároveň se vyhne neuspořádanému provádění, které se vyskytuje u asynchronního režimu.

Seznam míst k návštěvě

Nakonec je zde kontrolní seznam, kterým se můžete přímo řídit:

Prvním krokem je ujasnit si svůj cíl. Chcete co nejrychlejší počáteční načtení stránky, nebo upřednostňujete stabilitu a bezchybný provoz? To určí, jaký typ vkládání byste měli použít.

Druhým krokem není měnit vše najednou. Nejprve najděte méně důležitou stránku k otestování, pozorujte ji den nebo dva a propagujte ji na celém webu pouze tehdy, pokud jste si jisti, že s ní nejsou žádné problémy.

Za třetí, po každé úpravě vždy vymažte mezipaměť. Mechanismus ukládání do mezipaměti W3TC vám zabrání v zobrazení nejnovějších změn, takže krok „vymazat mezipaměť a znovu otestovat“ je naprosto nezbytný.

Za čtvrté, porovnejte rychlost načítání před a po pomocí nástrojů pro vývojáře ve vašem prohlížeči nebo nástrojů, jako je PageSpeed ​​​​Insights. Nechte data mluvit sama za sebe, ne jen váš pocit.

Napište na konec

Abych byl upřímný, když jsem poprvé viděl toto nastavení vloženého typu, byl jsem dlouho ohromen. Výchozí blokovací režim se mi zdál příliš pomalý, zatímco asynchronní režim nezaručoval pořadí operací a odložení mohlo způsobit problémy s kompatibilitou. Nebyl jsem si jistý, kterou možnost zvolit.

Později jsem si ale uvědomil, že je to kompromis. Nemůžete mít zároveň nejrychlejší a nejstabilnější; vždy musíte obětovat jedno. Z mých zkušeností se nejdříve používá defer, což je v současnosti nejbezpečnější neblokující řešení, a poté se v případě problémů používá zpětné volání.

Pokud narazíte na podobné problémy, nebo pokud máte i po použití mé metody další potíže, neváhejte se o tom bavit. Vývoj webových stránek je o pokusech a omylech; nikdo není výjimkou.

Děkuji za přečtení mého článku. Uvidíme se příště.