TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak wygenerować krytyczny CSS w witrynie WordPress?

16

W Internecie dostępnych jest wiele kreatorów stron internetowych typu „przeciągnij i upuść", aby stworzyć stronę internetową bez umiejętności technicznych. Musisz jednak nauczyć się pewnych technicznych aspektów SEO, aby Twoja witryna była na szczycie stron wyników wyszukiwania. Krytyczny CSS jest jednym z takich technicznych tematów optymalizacji dostarczania treści z kolei bezpośrednio wpływających na szybkość. Ekosystem WordPress sprawia, że ​​jest to bardziej skomplikowane dla zwykłych użytkowników, którzy korzystają z wielu wtyczek w swojej witrynie. W tym artykule przyjrzyjmy się, jak stworzyć krytyczny CSS dla witryny WordPress, aby poprawić wynik Google PageSpeed.

Zrozumienie podstaw

Zanim omówimy krytyczny CSS, konieczne jest zrozumienie niektórych terminologii, takich jak optymalizacja strony widocznej na ekranie i dostarczania treści. Ponadto musisz również zrozumieć podstawową metodę korzystania z zewnętrznych arkuszy stylów na WordPress.

Nad zawartością zgięcia

Gdy otwierasz witrynę na komputerze lub urządzeniu mobilnym, widoczna część, którą widzisz na ekranie, znajduje się nad obszarem zawartości strony widocznej na ekranie. Jest to tradycyjna terminologia gazetowa, w której na górze pierwszej strony można zobaczyć zawartość strony widocznej na ekranie. Ogólnie rzecz biorąc, ludzie przyzwyczajeni do składania gazety i powyżej obszaru składania oferują ważne treści. Podobnie górna widoczna część strony, która ładuje się jako pierwsza, powinna oferować użytkownikowi najcenniejsze treści. Dlatego powinieneś skupić się na optymalizacji widocznej górnej części, aby ładować się z niesamowitą prędkością.

Optymalizacja dostarczania treści

Wiele narzędzi zwiększających szybkość, takich jak Google PageSpeed ​​Insights, mierzy sposób, w jaki witryna dostarcza treści w części strony widocznej na ekranie. Możesz to zobaczyć jako miarę First Contentful Paint (FCP). Jeśli wykryją blokowanie, zobaczysz ostrzeżenie, aby usunąć blokujący element. Jedną z popularnych sugestii, które zobaczysz w narzędziu Google PageSpeed ​​Insights, jest wyeliminowanie zasobów blokujących renderowanie. Jeśli klikniesz tę sugestię, Google pokaże Ci optymalizację dostarczania krytycznego CSS/JS i odroczy wszystkie niekrytyczne CSS/JS.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Krytyczne sugestie CSS i JS

Naprawianie kodu JavaScript blokującego renderowanie (jQuery) jest dość łatwe, ponieważ motywy/wtyczki domyślnie ładują skrypty w sekcji stopki. jQuery to jedyny problem, który może być wymagany w przypadku wielu witryn, aby załadować zawartość strony widocznej na ekranie. Ponieważ WordPress używa również jQuery, możesz zignorować ten błąd, jeśli jest to spowodowane tylko jQuery. W przeciwnym razie użyj wtyczek, takich jak WP Rocket, aby połączyć i dostarczyć wszystkie skrypty, jeśli to nie zepsuje układu Twojej witryny.

Problem polega jednak na wygenerowaniu krytycznego CSS i załadowaniu go w pierwszej kolejności. W tym artykule wyjaśnimy, jak radzić sobie z optymalizacją CSS, aby poprawić wynik szybkości strony.

Powiązane: Właściwe ustawienia wtyczki WP Rocket, aby przyspieszyć działanie witryny.

Ładowanie CSS na stronach internetowych

Istnieje wiele sposobów wstawiania CSS na swoją stronę internetową. Możesz to zrobić w sposób wbudowany, wewnętrzny lub zewnętrzny. Najbardziej popularnym i zalecanym sposobem jest linkowanie zewnętrznych arkuszy stylów w sekcji nagłówka strony internetowej. Ponieważ treść w sekcji nagłówka ładuje się najpierw wraz ze stroną internetową, drastycznie wpływa to na ładowanie treści w części strony widocznej na ekranie, a tym samym na szybkość strony.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Ładowanie CSS w WordPress

WordPress używa style.css jako pliku zewnętrznego do dostarczania stylów motywu. Jest to plik obowiązkowy (oprócz functions.php) do prowadzenia witryny WordPress. Ponadto każda wtyczka w Twojej witrynie może dodać dodatkowy plik CSS. Otwórz swoją witrynę w przeglądarce Chrome i wyświetl kod źródłowy (upewnij się, że nie masz zainstalowanych wtyczek buforujących lub wyłączonego buforowania dla strony).

Jak wygenerować krytyczny CSS w witrynie WordPress?

Arkusze stylów w nagłówku

Możesz zobaczyć WordPress linki do wszystkich zewnętrznych arkuszy stylów w sekcji nagłówka strony. Może to powodować wiele problemów z punktu widzenia optymalizacji:

  • Niektóre motywy używają ciężkich stylów CSS o rozmiarze kilku MB. Nie musisz ładować wszystkich tych stylów, gdy użytkownik otworzy stronę internetową na komputerze lub urządzeniu mobilnym.
  • Istnieją różne typy postów, takie jak produkty, które mogą używać zupełnie różnych stylów. W takim przypadku nie potrzebujesz innego CSS do początkowego (powyżej strony) ładowania.

Każda strona w Twojej witrynie wymaga minimalnego kodu CSS, aby załadować zawartość strony widocznej na ekranie. Ten minimalny CSS potrzebny do załadowania strony nazywa się krytycznym CSS w terminologii technicznej. We wszystkich powyższych przypadkach Google PageSpeed ​​Insights i inne narzędzia wyświetlają ostrzeżenie, aby zoptymalizować dostarczanie CSS.

Pamiętaj, że usuwanie nieużywanych CSS i skryptów wiąże się również z używaniem zbyt dużej ilości CSS/skryptów na stronie. Jednak różni się to znacznie od krytycznej optymalizacji CSS. Nie możesz nawet używać niektórych wtyczek na określonej stronie. Na przykład nie potrzebujesz wtyczki CSS formularza kontaktowego na wszystkich stronach witryny. W takim przypadku pliki CSS/JS z plików formularzy kontaktowych są niepotrzebne w zwykłym poście na blogu i zobaczysz ostrzeżenie o usunięciu nieużywanego CSS/JS. Sprawdź nasz artykuł o tym, jak wyłączyć nieużywany CSS/JS w WordPressie i zoptymalizować strony WooCommerce pod kątem wywołań administracyjnych AJAX.

Jak wygenerować krytyczny CSS w WordPressie?

Teraz, gdy wiesz, jak ważny jest krytyczny CSS, aby poprawić szybkość ładowania strony. Istnieją dwa sposoby generowania krytycznego kodu CSS dla Twojej witryny.

  • Ręczne generowanie krytycznego kodu CSS i wstawianie go na swojej stronie
  • Użyj wtyczki WP Rocket, aby zoptymalizować dostarczanie treści

Szczegółowo wyjaśnimy zarówno ten proces, jak i będziesz mógł wybrać najlepszy, który sprawdzi się w Twojej witrynie.

Powiązane: Czy WP Rocket będzie działać z hostingiem SiteGround?

Ręczne generowanie krytycznego CSS

W Internecie dostępnych jest wiele narzędzi innych firm do ręcznego generowania krytycznych CSS. Ma to jednak sens, gdy wszystkie strony w Twoich witrynach są podobne i nie zawierają niestandardowej treści w części strony widocznej na ekranie. Możesz wypróbować inne bezpłatne krytyczne usługi generowania CSS, takie jak Sitelocity.

  • Przejdź do witryny Sitelocity i wprowadź adres URL swojej strony.
  • Kliknij przycisk „Generuj krytyczną ścieżkę CSS”.
  • Możesz uzyskać skrócony krytyczny kod CSS dla swojej strony.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Generuj krytyczny CSS

Teraz, gdy wygenerowałeś krytyczny kod CSS, następnym zadaniem jest wstawienie go w sekcji nagłówka witryny. Teoretycznie możesz wstawić style w pliku header.php pomiędzy tagami i. Istnieją wtyczki ułatwiające wstawianie stylów w sekcji nagłówka bez modyfikowania plików szablonów. Autoptimize to jedna z wtyczek, które możemy polecić do tego celu. Jeśli już używasz Autoptimize do buforowania, możesz również użyć tej samej wtyczki do wstawiania krytycznego CSS.

Możesz wstawić krytyczny kod CSS w „Opcjach CSS” wtyczki Autoptimize. Najpierw zaznacz pole wyboru „Inline and Defer CSS” i wklej krytyczny CSS w wyświetlonym polu tekstowym.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Opcje CSS

Jak widać, wtyczka Autoptimize może również automatycznie wstawiać CSS powyżej części widocznej na ekranie, jednocześnie odraczając inne style. Jednak szybko zwiększy to rozmiar pamięci podręcznej do 100% i nie masz opcji we wtyczce, aby automatycznie wyczyścić pamięć podręczną. Ponadto w większości przypadków zepsuje witrynę. Możesz wybrać dodatek Autoptimize CriticalCSS Power-Up, który pomoże ci w lepszy sposób. Aby skorzystać z tego dodatku, musisz pobrać API z Criticalcss.com za 10 USD miesięcznie.

Dlaczego ręczne generowanie krytycznego kodu CSS nie działa?

Chociaż powyższy proces ręcznego wstawiania wygląda na łatwy, nie jest to łatwe zadanie. Oto niektóre z powodów, dla których krytyczny CSS nie będzie działać.

  • Możesz mieć różne treści, takie jak strony, wpisy na blogu, produkty itp. Każdy typ treści w Twojej witrynie wymaga innego krytycznego kodu CSS, aby załadować się nad zawartością po przewinięciu. Korzystanie z wtyczki lub ręcznego wstawiania załaduje krytyczny CSS na wszystkich stronach i zepsuje część treści.
  • Musisz generować krytyczne CSS za każdym razem, gdy aktualizujesz motyw, wtyczkę i rdzeń WordPress. W przeciwnym razie użycie starego krytycznego kodu CSS zepsuje układ Twojej witryny. Jest to rodzaj niemożliwego zadania dla zwykłych użytkowników, aby stale aktualizować krytyczne CSS dla każdej aktualizacji w witrynie. Mając dostępne opcje automatycznej aktualizacji, musisz być bardzo ostrożny przed aktualizacją wtyczki/motywu/rdzenia instalacji.
  • Możesz potrzebować oddzielnego krytycznego kodu CSS dla urządzeń mobilnych i stacjonarnych.

Przy wszystkich tych problemach, jedyną pozostałą opcją jest użycie jakiejś wtyczki, która zajmie się nimi i dynamicznie i automatycznie wygeneruje krytyczne CSS.

Twórz krytyczny CSS dla WordPress za pomocą WP Rocket

Na szczęście masz wtyczkę buforującą, która dokładnie wykonuje to krytyczne generowanie CSS w WordPressie. WP Rocket to jedna z najpopularniejszych wtyczek do buforowania dla WordPressa ze względu na uproszczone ustawienia. Ponownie, krytyczne generowanie CSS jest jednym z uroków wtyczki, z której każdy normalny użytkownik może czerpać korzyści bez uszkadzania strony.

  • Najpierw musisz kupić wtyczkę premium WP Rocket.
  • Po zainstalowaniu i aktywacji WP Rocket przejdź do „Ustawienia> WP Rocket” i przejdź do sekcji „Optymalizacja plików”.
  • Przewiń w dół i zaznacz pole wyboru „Optymalizuj dostarczanie CSS”.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Włącz krytyczny CSS w WP Rocket

Umożliwi to wtyczce automatyczne generowanie krytycznego kodu CSS dla każdego typu postu w witrynie WordPress. Zawiera pierwszą stronę. Strona główna, strona, post i wszelkie inne niestandardowe typy postów, których używasz w swojej witrynie. W razie potrzeby możesz dodać awaryjny krytyczny kod CSS, który generujesz ręcznie za pomocą narzędzia innej firmy. Ogólnie rzecz biorąc, możesz pozostawić to pole awaryjnego krytycznego kodu CSS jako puste. Możesz także włączyć oddzielne mobilne buforowanie w sekcji „Pamięć podręczna”.

Zauważ, że WP Rocket to wtyczka premium z licencją na jedną stronę dostępną za 49 USD. Naszym zdaniem warto kupić tę wtyczkę, ponieważ oferuje kompleksowe rozwiązanie do buforowania w celu optymalizacji prędkości. Wtyczka ma roczne wsparcie i aktualizacje. Następnie będzie nadal działać i możesz korzystać z krytycznego CSS i innych funkcji bez odnawiania. Możesz odnowić z 30% zniżką, aby uzyskać wsparcie i uzyskać dodatkowe funkcje. Jest to znacznie lepsza opcja w porównaniu do 10 USD miesięcznie za API krytyczne do użycia z Autoptimize.

Regeneruj krytyczny CSS

Kiedy aktualizujesz motyw/wtyczkę/rdzeń WordPressa lub dodajesz niestandardowe typy postów w swojej witrynie, konieczne jest ponowne wygenerowanie krytycznego kodu CSS. W przeciwnym razie WP Rocket użyje starego krytycznego CSS i złamie układ witryny. Dlatego pamiętaj o ponownym wygenerowaniu krytycznego kodu CSS, nie zapominając o tym.

  • Kliknij menu „WP Rocket” na górnym pasku i wybierz opcję „Regeneruj krytyczny CSS”.
  • Alternatywnie możesz przejść do pulpitu nawigacyjnego wtyczki i kliknąć przycisk „Regeneruj krytyczny CSS”.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Regeneruj krytyczny CSS

Niestandardowy krytyczny CSS dla określonej strony

Jak wspomniano, możesz mieć stronę główną lub inną stronę utworzoną za pomocą wtyczki do tworzenia stron. Ta strona będzie miała zupełnie inny krytyczny kod CSS niż wszystkie inne posty na blogu w Twojej witrynie. W takim przypadku musisz utworzyć osobny krytyczny CSS i ładować warunkowo tylko na tej stronie. WP Rocket może pomóc Ci to osiągnąć za pomocą kilku kliknięć.

  • Przejdź do strony / edytora postów strony, na której chcesz wygenerować osobny krytyczny CSS.
  • Na panelu dokumentu na pasku bocznym znajdź panel "WP Rocket Options". Jeśli nie znajdziesz, kliknij przycisk z trzema kropkami w prawym górnym rogu i wybierz „Preferencje”. W wyskakującym okienku możesz włączyć wymagane panele dokumentów dostępne w Twojej witrynie.
  • Zaznacz pole wyboru „Optymalizuj dostarczanie CSS” i kliknij przycisk „Generuj określony CPCSS”.
  • Spowoduje to wygenerowanie określonego krytycznego kodu CSS dla tej strony, a wtyczka załaduje ten krytyczny kod CSS, gdy użytkownicy odwiedzą stronę.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Generuj krytyczny CSS dla określonej strony

Powiązane: Przegląd wtyczki buforowania WP Rocket.

Testowanie krytycznego CSS

Po wdrożeniu metody ręcznej lub użyciu wtyczki WP Rocket możesz przetestować stronę, wyświetlając źródło strony. Pamiętaj, aby wylogować się z panelu administracyjnego lub włączyć buforowanie dla zalogowanych użytkowników we wtyczce. Jak widać na poniższym zrzucie ekranu, WP Rocket dodaje krytyczny CSS w nagłówku.

Jak wygenerować krytyczny CSS w witrynie WordPress?

Krytyczny CSS dla rakiet WP

Możesz również sprawdzić strony w narzędziu Google PageSpeed ​​Insights. Jeśli wszystko pójdzie dobrze, zobaczysz, że wyeliminujesz zasoby blokujące renderowanie i inne błędy CSS w przekazanych wynikach. Oznacza to, że poprawnie zaimplementowałeś krytyczny CSS w witrynie.

Ostatnie słowa

Mamy nadzieję, że ten artykuł podkreśliłby znaczenie krytycznego CSS w witrynie WordPress. Możesz użyć opcji ręcznej, jeśli masz mniejszą witrynę, która zawiera kilka stron. Jednak w przypadku działającego bloga, który ma dużą liczbę postów i różne typy postów, możesz wypróbować wtyczkę WP Rocket. Chociaż kosztuje to trochę pieniędzy, możesz uzyskać kompletne rozwiązanie do buforowania dla swojej witryny.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów