Optymalizacja krytycznego CSS swojej witryny WordPress za pomocą LWSOptimize

Procédure

CSS krytyczny pozwala szybciej wyświetlać widoczną treść Twoich stron. Gdy odwiedzający otwiera stronę, jego przeglądarka musi najpierw pobrać różne pliki (obrazy, skrypty, arkusze stylów CSS itp.). [PERSON_NAME] są [PERSON_NAME], wyświetlanie może zostać opóźnione. Dzięki CSS krytycznemu niezbędne style do natychmiastowego wyświetlenia strony są ładowane w pierwszej kolejności. Reszta stylów jest ładowana później, w tle.

Dlaczego warto go używać?

Włączenie CSS krytycznego może poprawić szybkość wyświetlania Twojej witryny, zwłaszcza na urządzeniach mobilnych lub przy wolnym połączeniu internetowym.

Najczęstsze korzyści to:

• Szybsze wyświetlanie głównej treści strony.

• Lepsze doświadczenie użytkownika.

• Potencjalna poprawa wskaźników wydajności, takich jak LCP (Largest Contentful Paint).

W zależności od konfiguracji witryny zauważalny zysk może sięgać kilkuset milisekund.

Włączanie CSS krytycznego

WordPress na ten moment nie oferuje optymalizacji CSS stron i wpisów. [PERSON_NAME], istnieją dziesiątki różnych wtyczek WordPressa odpowiadających na tę potrzebę, w tym wtyczka LWS Optimize, stworzona przez LWS.

Domyślnie opcja jest w niej wyłączona, ponieważ zwiększa czas generowania pamięci podręcznej, [PERSON_NAME] bardziej, jeśli strona ładuje dużą liczbę plików CSS, i w rzadkich przypadkach może powodować problemy z wyświetlaniem.
Aby ją włączyć, przejdź do panelu LWS Optimize, a następnie wybierz tutaj ustawienia Maximum i zapisz; [PERSON_NAME] działania wtyczki, w tym CSS krytyczny.

Jeśli chcesz włączyć tylko CSS krytyczny, możesz również przejść do ustawień zaawansowanych, w sekcji Front-End, gdzie znajdziesz wiersz CSS Krytyczny.

Po zaznaczeniu opcji zostaniesz poproszony o wybór jednego z 3 trybów działania: Auto - lokalnie, Auto i Ręczny. Po dokonaniu wyboru zapisz zmiany, [PERSON_NAME] CSS krytyczny i wyczyści bieżącą pamięć podręczną.

Każdy tryb działa inaczej:

• Auto — generowanie lokalne

To domyślny tryb wtyczki; CSS stron jest analizowany, a następnie przetwarzany przez PHP Twojej witryny, bezpośrednio generując CSS krytyczny. Zaletą jest to, że działa całkowicie lokalnie i jest stosunkowo szybki, ale w zamian zużywa więcej zasobów na serwerze niż drugi tryb. Nadal jednak zaleca się go dla większości witryn.

Jeśli wydajność Twojego hostingu [PERSON_NAME], [PERSON_NAME] może powodować spowolnienia dla odwiedzających podczas generowania CSS. [PERSON_NAME], wydajność może się pogorszyć na czas generowania.

• Auto — usługa LWS

Ten tryb korzysta z usługi generowania CSS krytycznego LWS. Jest nieco wolniejszy niż generowanie lokalne, zwłaszcza jeśli API generujące jest przeciążone, ale jego główną zaletą jest to, że całe generowanie odbywa się poza serwerem, oferując znacznie lepszą wydajność niż generowanie lokalne. W przypadku dużego obciążenia generowanie może jednak być niedostępne, dlatego nie jest tak niezawodne jak tryb lokalny.

W przypadku tymczasowej niedostępności usługi wtyczka automatycznie przełącza się na generowanie lokalne. Ponadto, ponieważ generowanie odbywa się inaczej niż w trybie lokalnym, może ono dawać lepsze rezultaty w zależności od witryny.

Ręczny

Ten tryb jest przeznaczony dla zaawansowanych użytkowników.
Pozwala on ręcznie wprowadzić własny CSS krytyczny [ADDRESS] przeznaczonej do tego celu. Dodany CSS będzie używany w całej witrynie.

Kiedy CSS krytyczny staje się aktywny?

W trybie automatycznym CSS krytyczny jest generowany jednocześnie z resztą pamięci podręcznej i opcji ([PERSON_NAME]); [PERSON_NAME], kolejne wizyty będą korzystać z wygenerowanej pamięci podręcznej.

Warto wiedzieć

Niektóre elementy mogą utracić formatowanie

Po aktywacji niektóre komponenty, które ładują style dynamicznie (karuzele, okna modalne, popupy itp.), mogą nie wyświetlać się poprawnie.

[PERSON_NAME] zalecenie:

1. [PERSON_NAME] tryb Auto — usługa LWS.

2. Jeśli problem nadal występuje, użyj trybu Ręczny, aby dodać brakujące style.

Style zewnętrzne

Automatyczne generowanie uwzględnia tylko arkusze stylów hostowane w Twojej domenie.

Style ładowane z usług zewnętrznych (CDN, Google Fonts itp.) nie są uwzględniane w automatycznie generowanym CSS krytycznym.

Podsumowanie

CSS krytyczny to świetne narzędzie do przyspieszenia wyświetlania Twoich stron i poprawy doświadczeń odwiedzających 🚀. Nadając priorytet najważniejszym stylom, skracasz czas ładowania widocznej treści i potencjalnie optymalizujesz wskaźniki wydajności, [PERSON_NAME] LCP 📈.

Teraz już wiesz, jak: zrozumieć znaczenie CSS krytycznego, włączyć go w WordPressie za pomocą LWS Optimize, wybrać między trybami Auto — generowanie lokalne, Auto — usługa LWS i Ręczny, określić kiedy staje się aktywny oraz przewidzieć punkty wymagające uwagi związane z dynamicznymi komponentami i stylami zewnętrznymi 😉.

Stosując te dobre praktyki, możesz cieszyć się witryną bardziej szybką, bardziej płynną i przyjemniejszą w nawigacji dla użytkowników ✨.

Dziękujemy za lekturę 🙏 Nie wahaj się zostawić komentarza na temat usługi i podzielić się swoją opinią! 🙂