Ustawienia wtyczki W3 Total Cache Minify: Jak wybrać typ osadzania? Moje doświadczenie z rozwiązywaniem problemów i porady ratujące życie

Masz problem z wyborem odpowiedniego typu osadzania dla W3 Total Cache Minify? Ten artykuł przedstawia praktyczne doświadczenia webmastera i zawiera przewodnik krok po kroku, jak precyzyjnie wybrać odpowiedni typ osadzania Minify, unikając problemów ze stylem strony i zawieszania się ładowania. Zawiera również niezawodne rozwiązanie konfiguracji, z którego mogą skorzystać nawet początkujący, zapewniając płynne i szybkie działanie WordPressa !

Optymalizowałem stronę internetową i kiedy otworzyłem ustawienia Minify w W3 Total Cache, oniemiałem. Menu rozwijane dla typu osadzonego zawierało cztery opcje: Domyślny (blokada), Użyj JS dla trybu nieblokującego, Użyj „asynchronicznego” dla trybu nieblokującego i Użyj „opóźnionego” dla trybu nieblokującego.

Zastanowiłem się przez chwilę, o co w tym wszystkim chodzi?

Zaufaj mi, nie jesteś sam. Te cztery opcje prawdopodobnie wprawią w osłupienie nawet nowicjusza, a co dopiero kogoś, kto korzysta z WordPressa od lat. Ten artykuł przedstawia pułapki, na które natrafiłem, i wnioski, jakie z nich wyciągnąłem, prosto do Ciebie. Nie musisz zaglądać do dokumentacji; po prostu postępuj zgodnie z moimi instrukcjami.

Czym dokładnie są te cztery typy osadzania?

Porozmawiajmy najpierw o tym, jakiego rodzaju charakterem charakteryzują się te cztery opcje.

Domyślne blokowanie to najprostsze podejście. Gdy przeglądarka napotka skrypt, zatrzymuje się, pobiera go i wykonuje w całości, a następnie kontynuuje renderowanie strony. Brzmi niezawodnie, prawda? Ale wadą jest to, że początkowe ładowanie strony będzie opóźnione; użytkownicy będą musieli poczekać na zakończenie działania skryptu, zanim zobaczą cokolwiek.

Wykorzystanie JavaScriptu do blokowania jest dość interesujące. Zamiast bezpośrednio wpisywać znaczniki `<script>` na stronie, najpierw generuje krótki skrypt, a następnie dynamicznie wstrzykuje niezbędne skrypty do strony za pomocą JavaScript po jej uruchomieniu. W ten sposób strona może najpierw się renderować, a skrypty ładują się stopniowo. Brzmi świetnie, prawda? Problem polega jednak na tym, że ten proces dynamicznego wstrzykiwania może zakłócić pierwotną kolejność wykonywania skryptów. Jeśli niektóre skrypty na stronie w dużym stopniu zależą od kolejności wykonywania, mogą pojawić się problemy.

Użycie „asynchronicznego” trybu wykonywania bez blokowania polega po prostu na dodaniu atrybutu `async` do znacznika `<script>`. Skrypt zostanie pobrany asynchronicznie w tle i wykonany natychmiast po zakończeniu, bez oczekiwania strony. Wadą jest jednak to, że kolejność wykonywania jest całkowicie niekontrolowana; niezależnie od kolejności określonej w kodzie, wykonywane jest to, co zostanie pobrane jako pierwsze.

Użycie „opóźnienia” do wykonania bez blokowania jest możliwe poprzez dodanie atrybutu `defer`. Skrypt będzie czekał, aż cała strona zostanie sparsowana, zanim zostanie wykonany, i co najważniejsze, zachowa oryginalną kolejność, w jakiej został napisany. Jest to bardzo wygodne rozwiązanie, ponieważ nie blokuje pierwszego ekranu ani nie zakłóca kolejności skryptu.

Którą opcję powinienem wybrać?

Mówiąc prościej, te cztery opcje są jak pytanie wielokrotnego wyboru: czy zależy ci na szybkości, czy na zamówieniu?

Moja sugestia jest następująca:

Jeśli Twoja strona jest mała, ma niewiele skryptów i nie masz bardzo wysokich wymagań co do szybkości ładowania, użycie domyślnego (zablokowanego) ustawienia jest najłatwiejszą opcją. Choć jest nieco wolniejsze, nie spowoduje żadnych problemów.

Jeśli chcesz poprawić szybkość renderowania na pierwszym ekranie, a Twoje skrypty nie mają silnych zależności, takich jak „A musi zostać wykonane przed B”, nadaj priorytet wykonaniu nieblokującemu za pomocą „defer” . To niemal idealne rozwiązanie, ponieważ pozwala uniknąć blokowania renderowania, zachowując jednocześnie kolejność wykonywania.

Jeśli po wypróbowaniu defer okaże się, że niektóre funkcje nadal mają problemy, rozważ użycie JavaScript do obsługi nieblokujących funkcji . To podejście jest bardziej agresywne, ale jego kompatybilność jest nieco gorsza.

Użycie trybu „asynchronicznego” w celu nieblokowania to opcja, którą najmniej polecam. Ponieważ kolejność wykonywania jest całkowicie pomieszana, łatwo o awarię, chyba że masz absolutną pewność, że skrypty działają niezależnie.

Dwie duże pułapki, w które wpadłem

Gadanie nic nie kosztuje. Wypisałem dwa błędy, które popełniłem; możesz je porównać z własnym doświadczeniem i sprawdzić, czy potrafisz ich uniknąć.

Pierwsza pułapka: Niestandardowych motywów WordPress nie można podglądać w czasie rzeczywistym.

Przez jakiś czas, podczas dostosowywania motywu, po kliknięciu „Zapisz” podgląd się nie odświeżał. Wprowadzałem zmiany, odświeżałem stronę i nic się nie zmieniało.

Po krótkim dochodzeniu odkryłem, że winowajcą była funkcja kompresji Minify. Rozwiązanie jest proste:

Przejdź do ustawień ogólnych wtyczki W3 Total Cache , znajdź opcję „Kompresja” i odznacz ją. Następnie kliknij małą strzałkę pod przyciskiem „Zapisz ustawienia” w prawym górnym rogu i wybierz „ Zapisz ustawienia i wyczyść pamięć podręczną ”. Ten krok jest kluczowy; bez wyczyszczenia pamięci podręcznej nadal będziesz widzieć starą wersję.

Po zakończeniu wróć do dostosowywania motywu, a podgląd na żywo powróci do normy.

Drugi problem: pole wyszukiwania motywu Astry nie reaguje po kliknięciu.

Napotkałem ten problem jakiś czas temu. Używałem motywu Astry i pewnego dnia nagle zauważyłem, że pole wyszukiwania nie reaguje, niezależnie od tego, jak je klikałem. Początkowo myślałem, że to problem z samym motywem, ale później odkryłem, że przyczyną są ustawienia Minify w W3TC.

Rozwiązanie jest następujące:

Przejdź do W3 Total Cache → Ustawienia ogólne → Zaawansowane ustawienia kompresji → JS → Ustawienia silnika Minify → Ustawienia regionalne i zmień typ osadzania na jeden z dwóch poniższych:

1. Wcześniej brak blokowania osiągano za pomocą JavaScript.
2. Następnie użyj JS, aby nie blokować

Podobnie wyczyszczenie pamięci podręcznej i odświeżenie strony umożliwi prawidłowe działanie pola wyszukiwania.

Przeprowadziłem pewne badania, dlaczego wybrano właśnie te dwie opcje. Mówiąc wprost, komponenty front-endowe motywu Astra są dość wrażliwe na czas wykonywania skryptu, a niektóre metody nieblokujące mogą powodować błędy wiązania zdarzeń. Użycie trybu „nieblokujące z JS” gwarantuje, że skrypt zostanie wykonany dopiero po załadowaniu strony, unikając jednocześnie nieuporządkowanego wykonywania obserwowanego w trybie asynchronicznym.

Lista miejsc do odwiedzenia

Na koniec przedstawiamy listę kontrolną, którą możesz od razu zastosować:

Pierwszym krokiem jest sprecyzowanie celu. Czy zależy Ci na najszybszym początkowym wczytaniu strony, czy priorytetem jest stabilność i bezbłędne działanie? To zadecyduje, jakiego typu osadzania powinieneś użyć.

Drugim krokiem jest nie zmienianie wszystkiego naraz. Najpierw znajdź mniej ważną stronę do przetestowania, obserwuj ją przez dzień lub dwa i promuj ją w całej witrynie dopiero wtedy, gdy masz pewność, że nie ma żadnych problemów.

Po trzecie, zawsze czyść pamięć podręczną po każdej modyfikacji. Mechanizm buforowania W3TC uniemożliwia zobaczenie najnowszych zmian, dlatego krok „wyczyść pamięć podręczną i przetestuj ponownie” jest absolutnie konieczny.

Po czwarte, skorzystaj z narzędzi programistycznych przeglądarki lub narzędzi takich jak PageSpeed ​​​​Insights, aby porównać prędkość ładowania przed i po. Niech dane mówią same za siebie, a nie tylko Twoja intuicja.

Napisz na końcu

Szczerze mówiąc, kiedy po raz pierwszy zobaczyłem to ustawienie typu embedded, byłem oszołomiony przez długi czas. Domyślny tryb blokowania wydawał się zbyt wolny, tryb asynchroniczny nie gwarantował kolejności operacji, a odroczenie mogło powodować problemy ze zgodnością. Nie byłem pewien, którą opcję wybrać.

Ale później zdałem sobie sprawę, że to kompromis. Nie można mieć jednocześnie najszybszego i najstabilniejszego rozwiązania; zawsze trzeba poświęcić jedno. Z mojego doświadczenia wynika, że ​​najpierw należy użyć funkcji defer, która jest obecnie najbezpieczniejszym rozwiązaniem nieblokującym, a następnie użyć wywołania zwrotnego, jeśli pojawią się problemy.

Jeśli napotkasz podobne problemy lub po zastosowaniu mojej metody nadal będziesz mieć inne, śmiało o tym porozmawiaj. Tworzenie stron internetowych to metoda prób i błędów; nikt nie jest wyjątkiem.

Dziękuję za przeczytanie mojego artykułu. Do zobaczenia następnym razem.