Jak łatwo zoptymalizować dostarczanie CSS WordPress (2 metody)

Chcesz zoptymalizować dostarczanie CSS w twoim WordPressie?

Pliki CSS kontrolują wizualne formatowanie i styl twojej witryny internetowej WordPress. Jeśli jednak twój kod CSS nie jest dostarczany w optymalny sposób, może to spowalniać twoją witrynę internetową.

W tym artykule pokażemy ci dwie proste metody optymalizacji dostarczania CSS w twoim WordPressie.

Jak dostarczanie CSS ma wpływ na wydajność WordPressa

Pliki CSS służą do definiowania wizualnego wyglądu twojej witryny internetowej WordPress. Twój motyw WordPress zawiera plik arkusza stylów CSS, a niektóre wtyczki mogą również używać arkuszy stylów CSS.

CSS jest niezbędny dla nowoczesnych witryn internetowych, ale pliki CSS mogą spowolnić szybkość i wydajność twojej witryny w zależności od tego, jak są skonfigurowane.

Nawet niewielkie opóźnienie w szybkości witryny internetowej powoduje złe wrażenia użytkownika i może mieć wpływ na rankingi wyszukiwania i konwersje, co skutkuje mniejszym ruchem i sprzedażą.

Jednym ze sposobów, w jaki pliki CSS mogą spowolnić twoją witrynę internetową, jest konieczność ich wczytywania przed wyświetleniem strony. Oznacza to, że odwiedzający twoją stronę zobaczą pustą stronę, dopóki plik CSS nie zostanie wczytywany. Jest to znane jako CSS blokujący renderowanie.

Innym częstym powodem, dla którego pliki CSS mogą spowalniać twoją witrynę internetową jest to, że zawierają one więcej kodu niż jest to potrzebne do wyświetlenia widocznej części obecnej, aktualnej strony. Ten dodatkowy niewykorzystany kod CSS oznacza, że czas ich wczytywania będzie dłuższy.

Dobrą wiadomością jest to, że możesz poprawić wydajność swojej witryny WordPress, optymalizując sposób dostarczania kodu CSS.

Odbywa się to poprzez określenie minimalnego kodu CSS potrzebnego do wyświetlenia pierwszej części obecnej, aktualnej strony internetowej. Jest to znane jako „krytyczny CSS”.

Ten krytyczny kod jest następnie dodawany inline do kodu HTML strony zamiast w oddzielnych arkuszach stylów, dzięki czemu kod może być renderowany bez konieczności wcześniejszego wczytywania pliku CSS.

Reszta CSS może być wczytywana po tym, jak odwiedzający twoją stronę zobaczą jej treść. Jest to znane jako „odroczone wczytywanie”.

Mając to na uwadze, przyjrzyjmy się dwóm metodom optymalizacji dostarczania CSS WordPress, a będziesz mógł wybrać tę, która działa najlepiej dla Ciebie:

Metoda 1: Optymalizacja dostarczania CSS WordPress za pomocą WP Rocket

WP Rocket to najlepsza pamięć podręczna WordPress na rynku. Oferuje najprostszy sposób na optymalizację dostarczania CSS twojego WordPressa. W rzeczywistości jest to tak proste, jak zaznaczenie pola.

WP Rocket to wtyczka premium, ale najlepsze jest to, że wszystkie funkcje są zawarte w ich najniższym planie.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki WP Rocket. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść do strony Ustawienia ” WP Rocket i przełączyć się na kartę „Optymalizacja plików”.

Następnie przewiń w dół do sekcji plików CSS.

Następnie należy zaznaczyć pole obok opcji „Optymalizuj dostarczanie CSS”.

Funkcja ta inteligentnie identyfikuje krytyczny CSS potrzebny do sformatowania części strony, którą odwiedzający twoją stronę widzą jako pierwszą. Twoje strony będą ładować się szybciej, a reszta CSS będzie wczytywana po tym, jak odwiedzający zobaczą jej treść.

Wszystko, co musisz teraz zrobić, to kliknąć przycisk „Zapisz zmiany” i poczekać, aż WP Rocket wygeneruje niezbędny plik CSS dla wszystkich twoich wpisów i stron.

Automatycznie wyczyści również pamięć podręczną twojej witryny internetowej, dzięki czemu odwiedzający zobaczą nową zoptymalizowaną wersję twojej witryny zamiast niezoptymalizowanej wersji przechowywanej w pamięci podręcznej.

Istnieje wiele innych sposobów, w jakie WP Rocket może pomóc poprawić wydajność twojej witryny internetowej. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat prawidłowej instalacji i konfiguracji WP Rocket w WordPress.

Metoda 2: Optymalizacja dostarczania CSS WordPress za pomocą Autoptimize

Autoptimize to darmowa wtyczka zaprojektowana w celu poprawy dostarczania plików CSS i JavaScript Twojej witryny internetowej.

Chociaż Autoptimize jest darmową wtyczką, nie ma tak wielu funkcji jak WP Rocket, a jej konfiguracja zajmuje więcej czasu.

Na przykład nie jest w stanie automatycznie zidentyfikować krytycznych CSS, tak jak WP Rocket. Zamiast tego Autoptimize wymaga pomocy usługi premium innej firmy, która jest dodatkowym kosztem i wymaga dodatkowego czasu na konfigurację.

Może to być jednak dobra opcja, jeśli masz napięty budżet i nie potrzebujesz wszystkich innych funkcji WP Rocket, aby przyspieszyć twoją witrynę.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Autoptimize. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” Autoptymalizacja, aby skonfigurować ustawienia wtyczki. Tam należy przewinąć w dół do sekcji Opcje CSS i zaznaczyć pole „Optymalizuj kod CSS” u góry.

Gdy to zrobisz, musisz upewnić się, że opcja „Agreguj pliki CSS” jest odznaczona, a następnie zaznacz opcję „Eliminuj CSS blokujące renderowanie”.

Możesz teraz kliknąć przycisk „Zapisz zmiany i opróżnij pamięć podręczna”, aby zapisać twoje ustawienia.

Wtyczka nie będzie jednak działać poprawnie, dopóki nie zarejestrujesz konta Critical CSS. Jest to usługa subskrypcji premium, która zapewni Autoptimize krytyczny kod CSS, którego potrzebuje, aby zoptymalizować twój WordPress CSS.

Aby to zrobić, przejdź do karty Critical CSS w ustawieniach Autoptimize. Tutaj znajdziesz informacje potrzebne do zarejestrowania się w Critical CSS. Możesz rozpocząć, klikając odnośnik do rejestracji w trzecim akapicie.

Po otrzymaniu klucza API Critical CSS przewiń w dół do sekcji Klucz API, aby wkleić go w polu tekstowym „Twój klucz API”.

Następnie kliknij przycisk „Zapisz zmiany”.

Autoptimize ma teraz wszystkie informacje, których potrzebuje, aby dodać krytyczny CSS inline i odroczyć wczytywanie arkuszy stylów do momentu wyrenderowania strony. W rezultacie twoja witryna internetowa będzie wczytywać się szybciej.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak zoptymalizować dostarczanie CSS WordPress. Warto również zapoznać się z naszym przewodnikiem na temat tego, ile naprawdę kosztuje zbudowanie witryny internetowej WordPress, a także z naszym wyborem najlepszych zarządzanych firm hostingowych WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.