Zrozumienie CSS WordPress
Zanim zagłębimy się w temat, zrozummy, jak działa zwykły CSS w WordPressie.
Każdy motyw WordPress składa się z style.css, który zawiera cały kod potrzebny do stylizacji Twojej witryny. Twórcy motywów powinni obsługiwać wszystkie funkcje WordPress, które obejmują posty na blogu, komentarze, stronę produktów, stronę członkostwa, formularze itp. Inne zainstalowane wtyczki mogą również dodawać podobne arkusze stylów CSS.
Może to sprawić, że pliki css będą rozdęte i duże do 200kb lub nawet więcej.
Co to jest CSS ścieżki krytycznej?
W miarę wzrostu plików CSS Twoja przeglądarka musi pobierać te duże pliki, analizować je i renderować. Nazywany również blokowaniem renderowania. Spowoduje to również zwiększenie pierwszego znaczącego renderowania i pierwszego znaczącego renderowania.
Krytyczna ścieżka CSS to CSS wymagany do renderowania powyższej treści na każdej stronie internetowej. Jak sama nazwa wskazuje, „krytyczny” CSS, który pomaga przeglądarce szybko rysować i renderować przed załadowaniem pełnych plików CSS.
Zwykle css ścieżki krytycznej jest osadzony w nagłówku, a źródłowy plik css jest ładowany asynchronicznie lub w stopce, aby ułatwić obsługę.
Dlaczego CSS ścieżki krytycznej jest tak ważny?
Musiałeś już widzieć ostrzeżenie z narzędzi takich jak Google PageSpeed Insights lub GTmetrix mówiące „optymalizuj dostarczanie CSS” lub „odrocz nieużywany css”.
Krytyczny CSS nie ma nic wspólnego z czasem ładowania strony. Nie wydłuża/nie zmniejsza czasu ładowania. Ale daje znacznie lepsze wrażenia użytkownika. Pomaga szybko „renderować” lub „koloryzować” stronę internetową.
- Poprawia pierwsze pobieranie zawartości (FCP)
- Poprawia pierwszą znaczącą płatność (FMP)
- Usuń nieużywany CSS (technicznie nie usuwaj go, ale nadaj priorytet „użytecznemu” CSS)
Oto dwa zrzuty ekranu mojego bloga z krytycznym CSS i bez niego.
Jak widać w sekcji „brak krytycznej ścieżki css”, pokazanie użytkownikowi czegoś przydatnego na urządzeniu mobilnym zajęło prawie 5 sekund. Przeglądarka musi wykonać dodatkowe żądanie HTTP do pliku css, pobrać go, przeanalizować w celu rozpoczęcia renderowania. Jednak w przypadku korzystania z krytycznego css wszystkie niezbędne css muszą być wbudowane, a przeglądarka może rozpocząć renderowanie natychmiast po załadowaniu pliku HTML w ciągu sekundy lub krócej.
Jak stworzyć krytyczny CSS w WordPressie?
Istnieje kilka sposobów generowania krytycznego kodu CSS w WordPressie.
Korzystanie z wtyczek buforujących
WP Rocket to wtyczka do buforowania premium, która działa naprawdę dobrze.
Jednym z powodów, dla których używam WP Rocket na każdej stronie, jest samo krytyczne generowanie CSS. Generują krytyczny CSS osobno dla strony głównej, strony postów, strony kategorii, strony produktu itp. I osadzają go. Przywrócą krytyczne CSS, jeśli nastąpią zmiany w motywie lub ustawieniu.
Wszystko można zrobić za dotknięciem przycisku.
Inne wtyczki do buforowania, które mogą generować krytyczne CSS
Swift Performance i LiteSpeed (wymaga serwera LiteSpeed/OpenLiteSpeed) to podobne wtyczki, które mogą generować krytyczne CSS. Obie te wtyczki mają wbudowaną chmurę i pełną pamięć podręczną na swoich serwerach.
Korzystanie z funkcji Autoptimize + bezpłatnego krytycznego generatora CSS
Istnieją narzędzia online innych firm, które zapewniają ważne css, wprowadzając adres URL witryny. pegasaas to świetne darmowe narzędzie.
Oto jak to zrobić:
Krok 1. Przejdź do https://pegasaas.com/critical-path-css-generator/ i wprowadź swój adres URL. Skopiuj wygenerowany „Critical Path CSS”.
Krok 2 W ustawieniach automatycznej optymalizacji (włącz ustawienia zaawansowane) w sekcji „Opcje CSS” zaznacz „Inline and Defer CSS” i wklej skopiowany CSS.
Plusy:
- Jest wolny
Minusy:
- Brak oddzielnych krytycznych CSS dla różnych typów stron (np.: strona główna, strona postów, strona kategorii, strona produktu itp.)
- Nie przebudowuj automatycznie po zmianie motywu/ustawienia
Dlaczego sam WordPress nie może generować krytycznego kodu CSS?
Jak mogłeś zauważyć, utworzenie ścieżki krytycznej css umożliwia korzystanie z usług zewnętrznych. Dlaczego więc sam WordPress nie może go wygenerować?
Tworzenie Critical CSS jest możliwe dzięki projektom open source, takim jak Critical (by Google), CriticalCSS czy penthouse. Wszystkie te projekty są oparte na NodeJS, a nie PHP. Musisz więc zainstalować NodeJS na swoim serwerze. Większość dostawców hostingu współdzielonego/zarządzanego nie zezwala na to z kilku powodów.
