Jak wygenerować krytyczny CSS w WordPress (metody 2)

Ludzie, którzy odwiedzają Twoją witrynę, nie chcą długo czekać, aby zobaczyć Twoje treści. Jeśli nie zoptymalizujesz swojego kodu, zasoby blokujące renderowanie, takie jak CSS, mogą przyczynić się do postrzegania przez odwiedzających wolniejszego czasu ładowania.

Na szczęście możesz łatwo wygenerować krytyczne CSS dla swojej witryny. Instalując wtyczkę, taką jak Jetpack Boost, będziesz mógł wyodrębnić wszystkie niezbędne CSS do wyświetlania treści w części strony widocznej na ekranie. Może to być kluczem do tego, aby Twoja witryna była szybsza i bardziej przyjazna dla użytkownika.

W tym poście wyjaśnimy krytyczne CSS i dlaczego warto rozważyć wygenerowanie go dla swojej witryny. Następnie pokażemy Ci dwa różne sposoby, aby to zrobić w WordPress.

Co to jest krytyczny CSS w WordPressie?

Gdy odwiedzający kliknie link do Twojej witryny, jego przeglądarka musi wykonać szereg zadań, aby w pełni wyświetlić zawartość. Wszystkie kroki związane z pobieraniem, przetwarzaniem i konwertowaniem kodu na piksele składają się na Krytyczną Ścieżkę Renderowania.

Przeglądarka odczytuje kod HTML, CSS i JavaScript witryny od góry do dołu podczas tego procesu ładowania. Ponieważ nie będzie ona automatycznie wiedzieć, które zasoby są najważniejsze w renderowaniu strony, przeglądarka może utknąć podczas przetwarzania niepotrzebnego kodu.

Jeśli określony plik CSS zatrzymuje renderowanie Twojej witryny, staje się zasobem blokującym renderowanie. Nawet jeśli nie jest to konieczne do wyświetlenia strony, odwiedzający nie zobaczą treści, dopóki ten CSS blokujący renderowanie nie zostanie w pełni przetworzony.

Krytyczny CSS odnosi się do wymaganego kodu CSS dla zawartości strony widocznej na ekranie. Zasadniczo jest to absolutne minimum kodu, którego przeglądarka potrzebuje, aby wyświetlić pierwszą sekcję treści odwiedzającym.

Korzyści z generowania krytycznego CSS

Generowanie krytycznego kodu CSS dla stron internetowych wymaga wyeliminowania kodu CSS blokującego renderowanie i umożliwienia przeglądarce przetwarzania tylko tego, co jest konieczne.

1. Zoptymalizuj dostarczanie treści

Optymalizacja dostarczania CSS dla witryny WordPress może poprawić proces renderowania. Odwiedzającemu stronę internetową może się nawet wydawać, że Twoje strony ładują się szybciej.

Gdy ktoś trafi na Twoją witrynę, pierwszą rzeczą, jaką zobaczy, jest zawartość strony widocznej na ekranie. To wszystko jest wyświetlane na stronie głównej bez konieczności przewijania.

Wyodrębniając krytyczny CSS, optymalizujesz pliki CSS potrzebne do wyświetlenia tej początkowej sekcji. Bez tego użytkownicy mogą zobaczyć częściowe elementy, które nie zostały w pełni wyrenderowane.

Powszechnym błędnym przekonaniem jest to, że krytyczne CSS skraca czas ładowania. Chociaż nie jest to prawdą, technika optymalizacji może poprawić postrzeganą wydajność.

Zasadniczo użytkownicy pomyślą, że Twoje strony ładują się szybciej, ponieważ przeglądarka może po prostu wydajniej wyświetlać elementy widoczne na ekranie.

Generując krytyczny CSS WordPress, odwiedzający będą mieli lepsze wrażenia użytkownika (UX) w Twojej witrynie. W rezultacie możesz zmniejszyć współczynniki odrzuceń i zachęcić do ponownych odwiedzin.

2. Popraw podstawowe wskaźniki internetowe

Chociaż krytyczny CSS WordPress nie wydłuża ani nie skraca czasu ładowania strony, może poprawić Twoje podstawowe wskaźniki internetowe. Te wskaźniki analizują wrażenia użytkownika witryny.

Oto podstawowe wskaźniki internetowe:

• Największe malowanie zawartości (LCP) : wydajność wczytywania strony internetowej
• Opóźnienie pierwszego wejścia (FID) : Interaktywność strony internetowej
• Skumulowana zmiana układu (CLS) : stabilność wizualna witryny

Po przeskanowaniu witryny pod kątem raportu Core Web Vitals możesz zobaczyć dodatkowe dane, takie jak First Contentful Paint (FCP) lub Time to First Byte (TTFB). Mają one wpływ na LCP i odgrywają ważną rolę w procesie załadunku.

Krytyczny CSS ma bezpośredni wpływ na FCP. Mówiąc prościej, FCP mierzy czas potrzebny do wyrenderowania pierwszego elementu na stronie internetowej po rozpoczęciu ładowania. Jeśli Twoja witryna ma niski wynik FCP, odwiedzający często widzą przez chwilę pustą stronę.

Jako właściciel witryny WordPress powinieneś dążyć do uzyskania FCP poniżej 1,8 sekundy, ale wiele elementów może negatywnie wpłynąć na ten wynik, w tym:

• JavaScript i CSS blokujące renderowanie
• Wolny serwer
• Duże pliki czcionek
• Rozmiar dużego modelu obiektowego dokumentu (DOM).

Ponieważ CSS blokujący renderowanie przyczynia się do FCP, wygenerowanie krytycznego CSS może poprawić ten wynik. W trakcie tego procesu wstawisz cały CSS potrzebny do renderowania treści widocznej na ekranie.

Jak przetestować swoją witrynę pod kątem CSS blokującego renderowanie

Przed wygenerowaniem krytycznego CSS WordPress musisz wiedzieć, czy jest to konieczne dla Twojej witryny. Ponieważ duże pliki CSS są uważane za zasoby blokujące renderowanie, możesz je wyszukać za pomocą narzędzia do optymalizacji szybkości.

Aby rozpocząć, wprowadź adres URL swojej witryny w PageSpeed ​​Insights. To oprogramowanie Google przeanalizuje wydajność Twojej witryny za pomocą różnych audytów szybkości.

U góry strony zobaczysz swoją ocenę podstawowych wskaźników internetowych. Obejmuje metryki dotyczące największego malowania zawartości, pierwszego opóźnienia wejścia, skumulowanej zmiany układu, pierwszego malowania treści, interakcji z następnym malowaniem i czasu do pierwszego bajtu.

Jak dowiedziałeś się wcześniej, CSS blokujący renderowanie jest ściśle powiązany z wynikiem FCP. Upewnij się, że wyniki testu dotyczące urządzeń mobilnych i komputerów stacjonarnych wynoszą maksymalnie 1,8 sekundy.

Jeśli otrzymasz słaby wynik, być może masz w swojej witrynie nieporęczne, niezoptymalizowane pliki CSS. Aby sprawdzić, czy to prawda, przewiń w dół do Możliwości . Ta sekcja zawiera konkretne sugestie dotyczące skrócenia czasu ładowania witryny.

Tutaj możesz zauważyć alert z poleceniem Wyeliminowania zasobów blokujących renderowanie . Chociaż ta wiadomość może odnosić się do pliku JavaScript, może również oznaczać, że musisz wygenerować krytyczny CSS.

Jak wygenerować krytyczny CSS w WordPress

Teraz, gdy wiesz więcej o krytycznym CSS WordPress i dlaczego jest to ważne, nadszedł czas, aby go wygenerować! Niezależnie od poziomu umiejętności, możesz łatwo nauczyć się optymalizować dostarczanie CSS w WordPress, postępując zgodnie z naszym samouczkiem przyjaznym dla początkujących.

Metoda 1: Wygeneruj krytyczny CSS za pomocą wtyczki

Chociaż możesz wygenerować go samodzielnie, optymalizacja dostarczania CSS za pomocą wtyczki WordPress jest często łatwiejsza. Odpowiednie narzędzie może automatycznie odłożyć mniej ważne CSS. Ponadto nie będziesz musiał ręcznie edytować żadnego kodu.

Jetpack Boost może szybko poprawić wydajność ładowania Twojej witryny. Po prostym procesie konfiguracji możesz użyć tej wtyczki do wygenerowania krytycznego kodu CSS, odroczenia nieistotnego kodu JavaScript i nie tylko.

Aby rozpocząć korzystanie z Jetpack Boost, zainstaluj i aktywuj go w WordPress. Następnie otrzymasz ocenę opartą na bieżącej wydajności Twojej witryny.

Dzięki bezpłatnej wtyczce zobaczysz opcję Optymalizuj ładowanie CSS . Alternatywnie możesz przejść na płatną subskrypcję, aby automatycznie generować krytyczne CSS. Pomoże to uniknąć konieczności ponownego generowania CSS za każdym razem, gdy wprowadzasz zmianę.

Aby włączyć krytyczne CSS, po prostu użyj przełącznika po lewej stronie. Podobnie możesz odroczyć nieistotny JavaScript i włączyć leniwe ładowanie obrazów. W połączeniu te ustawienia mogą znacznie skrócić czas ładowania strony i umożliwić odwiedzającym wcześniejsze zobaczenie treści.

Metoda 2: Ręcznie wygeneruj krytyczny CSS

Jeśli nie chcesz używać wtyczki, możesz także ręcznie wygenerować krytyczny CSS. Należy pamiętać, że ta metoda obejmuje edycję kodu witryny, więc dla początkujących może to być bardziej skomplikowany proces.

Krok 1: Utwórz kopię zapasową swojej witryny

Aby rozpocząć, utwórz kopię zapasową swojej witryny WordPress. Jeśli popełnisz błąd w plikach witryny, możesz łatwo wrócić do tej zapisanej wersji. W ten sposób nie stracisz żadnych ważnych danych.

Jeśli chcesz łatwo zarządzać kopiami zapasowymi, możesz zainstalować wtyczkę Jetpack VaultPress Backup. To narzędzie przechowuje kopie zapasowe poza witryną i zapewnia przywracanie jednym kliknięciem, nawet jeśli witryna jest całkowicie niedostępna.

Oto jak zacząć:

Przejdź do Wtyczki → Dodaj nowe na pulpicie nawigacyjnym WordPress. Wyszukaj „Jetpack VaultPress Backup” i kliknij Zainstaluj teraz → Aktywuj .

Następnie zobaczysz nowe okno, które pozwoli ci skonfigurować wtyczkę. Kliknij Skonfiguruj Jetpack .

Następnie połącz swoją witrynę z kontem WordPress.com. Po przekierowaniu z powrotem do Twojej witryny kliknij Uaktualnij teraz , aby wyświetlić kilka opcji planów tworzenia kopii zapasowych Jetpack VaultPress.

Jako minimum będziesz potrzebować planu Backup, ale Security and Complete zapewnia dodatkowe narzędzia do ochrony, rozbudowy i przyspieszenia Twojej witryny.

Twoja pierwsza kopia zapasowa rozpocznie się automatycznie i możesz sprawdzić jej postęp, przechodząc do Jetpack → Kopia zapasowa na pulpicie nawigacyjnym WordPress.

Jeśli w ciągu następnych kilku kroków wystąpią jakiekolwiek błędy, po prostu wróć na tę stronę i naciśnij Przywróć do tego punktu . Spowoduje to przywrócenie starszej wersji witryny i wyeliminowanie wszelkich błędów, które wystąpiły.

Krok 2: Użyj krytycznego generatora CSS

Gdy wiesz, że utworzono kopię zapasową Twojej witryny, możesz rozpocząć generowanie krytycznego kodu CSS. Jednym z najłatwiejszych sposobów na to jest użycie krytycznego generatora CSS. To narzędzie automatycznie utworzy krytyczny CSS, dzięki czemu nie będziesz musiał ręcznie tworzyć kodu.

Najpierw otwórz krytyczny generator CSS CoreWebVitals. Wprowadź adres URL swojej witryny lub konkretnej strony, którą chcesz zoptymalizować. Następnie naciśnij Wygeneruj krytyczny CSS .

Po zakończeniu ładowania zobaczysz wygenerowany kod CSS w polu tekstowym. Skopiuj ten kod.

Po zapisaniu tego kodu możesz umieścić go w swojej witrynie!

Krok 3: Wstaw krytyczny CSS

Gdy ktoś odwiedza Twoją witrynę, jego przeglądarka pobierze pliki Twojej witryny z serwera. Najpierw sprawdzi sekcję <head> pod kątem niezbędnej zawartości podczas procesu analizowania. Następnie będzie kontynuować renderowanie zawartości <body>.

Aby nadać priorytet krytycznemu kodowi CSS, umieść go w sekcji <head> swoich plików. Nazywa się to inlinowaniem. Gdy wstawiasz CSS w tekście, przeglądarka żąda pobrania tego arkusza stylów przed wyrenderowaniem reszty strony.

Zasadniczo wstawianie CSS umieści kod tam, gdzie należy go użyć. Tak więc przeglądarka odwiedzającego nie będzie musiała analizować plików blokujących renderowanie przed wyświetleniem treści docelowej.

Po skopiowaniu wygenerowanego krytycznego kodu CSS możesz umieścić go w swoich plikach. Przejdź do folderu public_html przez FTP. Następnie przejdź do wp-content → motywy → twój aktywny motyw i otwórz plik header.php .

W tym pliku nagłówkowym znajdź znacznik <title>. Pod nim dodaj krytyczny CSS za pomocą tagów <style>. Na koniec wybierz Aktualizuj plik .

Często zadawane pytania (FAQ)

Do tej pory omówiliśmy krytyczny CSS i sposób jego generowania. Jeśli nadal masz pytania dotyczące umieszczania CSS w swojej witrynie, odpowiemy na nie tutaj!

Czy generowanie krytycznego kodu CSS może zepsuć wygląd Twojej witryny?

Jeśli zostanie to zrobione nieprawidłowo, wygenerowanie krytycznego kodu CSS może negatywnie wpłynąć na wygląd i układ witryny. Na szczęście możesz cofnąć wszelkie zmiany, po prostu przywracając zapisaną kopię zapasową witryny WordPress. Korzystając z Jetpack VaultPress Backup, jednym kliknięciem możesz przeglądać dziennik aktywności i przywracać stare wersje swojej witryny.

Ponadto możesz użyć wtyczki, takiej jak Jetpack Boost, aby w razie potrzeby włączać i wyłączać krytyczne CSS. Te proste ustawienia zostały utworzone zgodnie z najlepszymi praktykami WordPress, więc jest mniej prawdopodobne, że wpłyną na Twoją witrynę z przodu.

Co jeszcze mogę zrobić, aby zoptymalizować mój kod CSS?

Jeśli chcesz jeszcze bardziej zoptymalizować CSS w swojej witrynie, rozważ jego zmniejszenie. Usuniesz niepotrzebny kod podczas minimalizacji CSS, aby zmniejszyć rozmiary plików CSS.

Twój kod CSS prawdopodobnie zawiera spacje i podziały linii, aby ułatwić czytanie. Ponieważ przeglądarka może przetwarzać kod bez tych dodatkowych elementów, możesz je usunąć. Zmniejsza to zasoby i czas potrzebny do uruchomienia plików.

Możesz także całkowicie usunąć nieużywany CSS. Zmniejszając pliki do niezbędnego kodu, Twoja witryna zacznie ładować się szybciej.

Co jeszcze mogę zrobić, aby poprawić szybkość strony?

Jednym z najlepszych sposobów na przyspieszenie witryny jest poprawa podstawowych wskaźników internetowych. Korzystając z narzędzia takiego jak PageSpeed ​​Insights, możesz zidentyfikować niezoptymalizowane elementy, takie jak zasoby blokujące renderowanie.

Ponieważ przeglądarki wczytują kod Twojej witryny od góry do dołu, JavaScript może łatwo przerwać ładowanie. Dzięki odroczeniu przetwarzania kodu JavaScript odwiedzający nie będą musieli czekać na załadowanie skryptów, zanim zobaczą Twoje treści.

Ponadto rozważ wdrożenie leniwego ładowania obrazów. Dzięki temu ustawieniu w Jetpack Boost zdjęcia poniżej zakładki nie będą ładowane, dopóki odwiedzający nie przewiną strony w dół. Może to uniemożliwić Twojej witrynie jednoczesne ładowanie wszystkich obrazów, co opóźni proces renderowania.

Wreszcie sieć dostarczania treści (CDN) może znacznie przyspieszyć Twoją witrynę. Zamiast polegać na jednym serwerze, CDN korzysta z systemu centrów danych na całym świecie. Opcja taka jak CDN Jetpack może poprawić dostarczanie treści dla obrazów i plików statycznych.

Zoptymalizuj dostarczanie CSS w WordPress

Jeśli chcesz poprawić dostarczanie treści w witrynie, ważne jest wyeliminowanie wszelkich zasobów blokujących renderowanie. Ponieważ niezoptymalizowany CSS może opóźnić proces renderowania, warto wygenerować krytyczny CSS. Chociaż nie wpłynie to bezpośrednio na skrócenie czasu ładowania, umożliwi odwiedzającym znacznie szybsze wyświetlanie treści w części strony widocznej na ekranie.

Aby przejrzeć, oto jak wygenerować krytyczny CSS w WordPress:

1. Generuj krytyczny CSS za pomocą wtyczki, takiej jak Jetpack Boost.
2. Użyj krytycznego generatora CSS.

Dzięki Jetpack Boost możesz zoptymalizować CSS bez edytowania kodu. Po pobraniu i aktywacji wtyczki będziesz mógł wygenerować krytyczny CSS za pomocą jednego kliknięcia!