Jak bezproblemowo zoptymalizować dostarczanie CSS w WordPressie

CSS może poprawić ogólny wygląd Twojej witryny i jest łatwy w użyciu, edycji i utrzymaniu. Jedyną wadą jest możliwość spowolnienia szybkości ładowania strony. Dlatego ten artykuł stworzony przez nasz zespół w WpDataTables pokaże Ci, jak zoptymalizować dostarczanie CSS w WordPress.

Jeśli CSS nie jest dostarczany prawidłowo, przeglądarka będzie musiała przetworzyć i pobrać dane przed zakończeniem renderowania strony. Oznacza to, że odwiedzający zobaczą Twoją stronę z opóźnieniem i mogą ją kliknąć, ponieważ wygląda na to, że się nie ładuje. Dlatego tak ważna jest optymalizacja dostarczania CSS, więc czytaj dalej, aby dowiedzieć się, jak uniknąć pułapek, które mogą spowolnić działanie Twojej strony internetowej.

Wszystko o dostawie CSS

Zasadniczo CSS, kaskadowy arkusz stylów, sprawia, że ​​strony internetowe wyglądają atrakcyjnie, a bez nich strony internetowe nadal utknęłyby w latach 90.

Strony internetowe, w tym strony internetowe WordPress, są stylizowane za pomocą CSS. Każdy motyw WordPress używa pliku style.cc, aby stworzyć elegancki wygląd. Dodanie wtyczek spowoduje dodanie większej liczby arkuszy stylów, na przykład, jeśli pobierzesz wtyczkę widżetu, doda dodatkowy plik CSS (arkusz stylów), aby uzyskać pożądany wygląd.

Skrypty CSS są ładowane, zanim Twoja witryna stanie się widoczna, co oznacza, że ​​Twoja przeglądarka nie wyświetli żadnej treści, dopóki podane informacje CSS nie zostaną przetworzone.. Powoduje to blokowanie renderowania, które występuje, gdy przeglądarka ładuje wszystkie skrypty CSS przed wyświetleniem witryny.

CSS może być używany na wiele sposobów do dostarczania w WordPress, z wieloma różnymi konfiguracjami.

Niezależnie od tego, jak skonfigurowałeś stronę internetową, CSS może faktycznie pomóc w szybszym renderowaniu witryny.

Blokowanie renderowania JavaScript i CSS – co to jest?

Szybko ładujące się witryny są oczekiwane w naszym społeczeństwie high-tech i ma to kluczowe znaczenie dla wysokiej pozycji SEO. Google PageSpeed ​​Insights może pomóc w zrozumieniu szybkości ładowania Twojej witryny. Czasami podczas korzystania z narzędzia pojawia się ostrzeżenie – „Wyeliminuj blokujące renderowanie JavaScript i CSS w części strony widocznej na ekranie", ale tutaj jest rozwiązanie tego problemu.

Renderowanie kodu HTML jest konieczne, zanim przeglądarka będzie mogła wyświetlić dowolną stronę internetową. Robiąc to, natknie się na skrypty i arkusze stylów i musi przestać żądać i pobrać ten plik. Następnie wykonuje go i kontynuuje przeglądanie kodu HTML. Większość motywów i wtyczek do WordPressa korzysta z wielu plików JavaScript i/lub CSS, co może powodować, że renderowanie nawet jednej strony witryny może zająć dużo czasu.

Uniemożliwia to odwiedzającym witrynę szybkie przeglądanie informacji o stronach internetowych, a co gorsza, skrypty te nie muszą być ładowane od razu.

Te niepotrzebne pliki są znane jako blokujące renderowanie CSS i JavaScript. Czytaj dalej, aby dowiedzieć się, czym one są i jak je wyeliminować ze swojej witryny WordPress.

Użyj Google Pagespeed Insights, aby odkryć blokujące renderowanie CSS i JavaScript

Powoli ładujące się przeglądarki zazwyczaj próbują przetworzyć znaczną ilość kodu CSS i dlatego nie mogą renderować strony, jednak nie każdy zasób CSS blokuje renderowanie.

Witryny pojawiają się jako puste lub tylko częściowo widoczne, jeśli CSS został załadowany nieprawidłowo lub jeśli CSS nie jest zoptymalizowany, co może skutkować niewłaściwymi czcionkami lub układami.

Ważne jest, aby zrozumieć, które elementy są niezbędne, a które nie, aby zoptymalizować dostarczanie CSS.

Aby rozpocząć proces blokowania renderowania, najpierw przetestuj szybkość swojej witryny za pomocą Google PageSpeed ​​Insights.

Oto jak:

• Przejdź do strony Google PageSpeed ​​Insights
• Skopiuj i wklej adres URL naszej witryny w odpowiednim polu
• Kliknij „Analizuj”
• Spowoduje to raport. Zwróć uwagę na skrypty, które pojawiają się jako „Wyeliminuj blokujące renderowanie JavaScript i CSS”

Zazwyczaj te CSS są kluczowe dla Twojej witryny:

• Style strony widocznej na ekranie
• Motywy
• Kolor tła
• Inne, w zależności od rodzaju strony

Te CSS są zwykle mniej ważne:

• Poniżej zakładki CSS
• CSS skierowany na inne urządzenia

Zmniejszenie skryptów blokujących renderowanie

Możesz zminimalizować liczbę skryptów blokujących renderowanie, które masz w swojej witrynie, poprzez:

• Zmniejszenie ilości CSS i JavaScript. Możesz usunąć niepotrzebne białe miejsca i komentarze
• Łączenie CSS i JavaScript. Weź różne pliki .css i .js i dodaj je razem, dzięki czemu będzie mniej plików.
• Odraczanie ładowania JavaScript. Możesz sprawić, by ładowały się jako ostatnie po załadowaniu wszystkiego innego, używając ładowania asynchronicznego.

WordPress używa jednego połączonego filtra do rejestrowania skryptów frontonu, dzięki czemu możesz zobaczyć przychodzące pliki CSS lub JavaScript. Możesz nie wiedzieć, czego szukać, więc korzystanie z wtyczki jest przydatne.

CSS nie jest potrzebny na wszystkich stronach przez cały czas. Jednak jest tam z jakiegoś powodu i na pewnym etapie użyjesz tego wszystkiego, gdzie wymagana jest krytyczna ścieżka renderowania.

Różne części CSS mogą być wymagane na stronie Kontakt z nami i na stronie Usługi, które oferujemy. Gdy ktoś ładuje stronę Usługi, które oferujemy, części CSS, które są tylko dla strony Kontakt z nami, nie są w tym momencie wymagane, jednak CSS jest nadal ładowany, ponieważ webmaster potrzebuje wszystkich załadowanych plików CSS do renderowania strony.

Dlatego strona internetowa potrzebuje całego CSS, ale nie całego CSS dla każdej strony. Dlatego krytyczny CSS jest inny na każdej stronie i dla każdego użytkownika Twojej witryny.

CSS i JavaScript blokujące renderowanie w części strony widocznej na ekranie to poważny problem, który należy jak najszybciej naprawić.

Nierealistyczne jest oczekiwanie, że Twoja witryna uzyska wynik 100/100, więc staraj się uzyskać dobry wynik, który zapewni odwiedzającym szybkie ładowanie strony.

Nie usuwaj skryptów potrzebnych do dobrego UX; są one ważniejsze niż próba osiągnięcia wyższego wyniku.

Optymalizacja krytycznej ścieżki renderowania w WordPress

Krytyczna ścieżka renderowania oznacza kolejność, w jakiej przeglądarka wykonuje zadania renderowania Twojej strony, tj. kolejność, w jakiej pobiera i przetwarza CSS, HTML i JavaScript oraz wyświetla je w przeglądarce.

Powyższa zawartość strony widocznej na ekranie jest ważna, ponieważ jest to pierwsza część, którą zobaczy użytkownik. Jest więcej czasu na wczytanie zawartości w części strony widocznej na ekranie, ponieważ użytkownik będzie musiał przewinąć, aby ją zobaczyć.

Aby jak najszybciej załadować powyższą sekcję składania, musisz:

• Utwórz kod HTML, aby nadać priorytet ładowaniu części powyżej części zawinięcia
• Zminimalizuj dane używane przez CSS, JS i HTML

Więcej wyjaśnień można znaleźć w przewodniku Google PageSpeed ​​. Czasami dane potrzebne do załadowania ATF to więcej niż okno przeciążenia (wynoszące 14,6 kb). W takim przypadku musi nastąpić więcej podróży sieciowych z serwera do przeglądarki iz powrotem. Sieci komórkowe, które mają duże opóźnienia, stwierdzą, że uniemożliwia to wczytanie strony.

DOM jest budowany pojedynczo przez przeglądarkę, co może skrócić czas potrzebny na renderowanie ATF. Uporządkuj kod HTML tak, aby zawartość strony widocznej na ekranie wczytywała się najpierw, a potem pozostała część strony.

Proces optymalizacji wymaga ciągłego doskonalenia, monitorowania i mierzenia.

Chociaż CSS można wykorzystać na wiele sposobów do tworzenia eleganckich stron internetowych, najważniejsze jest to, że ładuje się szybko. Wyczyść kod i wykonaj powyższe kroki, aby przyspieszyć ładowanie stron.

Jeśli podobał Ci się ten artykuł o tym, jak zoptymalizować dostarczanie CSS w WordPressie, powinieneś zapoznać się z tym, jak dodawać metatagi w WordPressie bez wtyczki.

Pisaliśmy również o kilku powiązanych tematach, takich jak jak osadzić plik PDF w WordPress, jak osadzić Excela w html, jak ukryć polecany obraz w poście WordPress, jak sprawdzić, czy witryna jest WordPress, jak odinstalować WordPress z cPanel i jak stworzyć stronę internetową taką jak Amazon.