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 prawidłowo wybrać właściwy typ osadzania Minify, unikając niespójności w stylu witryny i zawieszania się ładowania. Zawiera również niezawodne rozwiązanie konfiguracji, z którego z łatwością skorzystają nawet początkujący.WordPress Przyspieszaj, nie rozbijając się!

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 (blok)Nazywa się to blokowaniem domyślnym. To najprostsze podejście: przeglądarka zatrzymuje się po napotkaniu skryptu, 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 zostanie zablokowane; użytkownicy będą musieli poczekać na zakończenie działania skryptu, zanim zobaczą cokolwiek.

Używanie JS do nieblokowaniaTo całkiem interesujące. Zamiast bezpośrednio wpisywać znaczniki `<script>` na stronie, najpierw generuje krótki skrypt, a następnie dynamicznie wstrzykuje skrypty, które należy załadować na stronę za pomocą JavaScriptu po jej uruchomieniu. W ten sposób strona może zostać najpierw wyrenderowana, a skrypty mogą ładować 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żyj „asynchronicznego” dla nieblokowaniaWiąże się to z dodaniem atrybutu `async` do znacznika `<script>`. Skrypt zostanie pobrany asynchronicznie w tle i wykonany natychmiast po pobraniu, bez oczekiwania strony. Wadą jest jednak to, że kolejność wykonywania jest całkowicie niekontrolowana; skrypt, który zakończy pobieranie jako pierwszy, zostanie wykonany jako pierwszy, niezależnie od kolejności określonej w kodzie.

Użycie „opóźnienia” w celu nieblokowaniaWłaśnie to oznacza dodanie atrybutu `defer`. Skrypt poczeka, aż cała strona zostanie sparsowana, zanim zostanie wykonany i, co ważne, zachowa oryginalną kolejność, w jakiej został napisany. Jest to bardzo wygodne, ponieważ nie blokuje pierwszego ekranu ani nie zakłóca kolejności.

Którą opcję powinienem wybrać?

Mówiąc najprościej, te cztery opcje są jak pytanie wielokrotnego wyboru:Wolisz szybkość czy porządek?

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ść działania na pierwszym ekranie, a Twoje skrypty nie mają silnych zależności, takich jak „A musi zostać wykonane przed B”, określ priorytety...Użycie „opóźnienia” w celu nieblokowania(odroczyć). To obecnie niemal idealne rozwiązanie, ponieważ nie blokuje renderowania ani nie zakłóca kolejności.

Jeśli spróbujesz odroczyć i nadal okaże się, że niektóre funkcje mają problemy, rozważ...Używanie JS do nieblokowaniaTo rozwiązanie jest bardziej radykalne, ale jego kompatybilność jest nieco gorsza.

Użyj „asynchronicznego” dla nieblokowania(async) to opcja, którą najmniej polecam. Ponieważ kolejność wykonywania jest kompletnie pomieszana, łatwo o awarię, chyba że masz absolutną pewność, że wszystkie 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:

Uzyskaj dostęp do wtyczki W3 Total CacheUstawienia główne,zjawiać się"kompresja"Odznacz tę opcję. Następnie kliknij małą strzałkę pod „Zapisz ustawienia” w prawym górnym rogu i wybierz „...”.Zapisz ustawienia i wyczyść pamięć podręcznąTen krok jest kluczowy, ponieważ jeśli nie wyczyścisz pamięci podręcznej, nadal będzie wyświetlana stara wersja.

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.