Jak łatwo zoptymalizować dostarczanie CSS w WordPress

Chcesz zoptymalizować dostarczanie CSS WordPress?

Pliki CSS kontrolują wizualne formatowanie i styl Twojej witryny WordPress. Ale jeśli twój kod CSS nie zostanie dostarczony w optymalny sposób, może to spowolnić Twoją witrynę.

W tym artykule pokażemy dwie proste metody optymalizacji dostarczania CSS WordPress.

How to Easily Optimize CSS Delivery in WordPress

Jak dostawa CSS WordPress wpływa na wydajność WordPress

Pliki CSS są używane do określenia wyglądu witryny WordPress. Twój motyw WordPress zawiera plik arkusza stylów CSS, a niektóre wtyczki mogą również korzystać z arkuszy stylów CSS.

CSS jest niezbędny w nowoczesnych witrynach internetowych, ale Pliki CSS mogą spowolnić szybkość i wydajność witryny w zależności od sposobu ich konfiguracji.

Nawet niewielkie opóźnienie prędkości witryny powoduje złe wrażenia użytkownika i może wpływać na rankingi wyszukiwania i konwersje, powodując mniejszy ruch i sprzedaż.

StrangeLoop study

Jednym ze sposobów, w jaki pliki CSS mogą spowolnić witrynę, jest ich załadowanie przed wyświetlaniem strony. Oznacza to, że odwiedzający zobaczą pustą stronę, dopóki plik CSS nie zostanie załadowany. Jest to znane jako CSS blokujący renderowanie.

Innym częstym powodem, dla którego pliki CSS mogą spowalniać witrynę, jest to, że zawierają więcej kodu niż jest potrzebne do wyświetlenia widocznej części bieżącej strony. Ten dodatkowy kod oznacza, że ładowanie ich zajmie więcej czasu.

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 bieżącej strony internetowej. Jest to znane jako krytyczny CSS.

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

Reszta CSS może zostać załadowana po tym, jak odwiedzający zobaczą zawartość strony. Jest to znane jako “odroczone Ładowanie”.

W tym samouczku pokażemy dwie metody optymalizacji dostarczania CSS WordPress i możesz wybrać tę, która działa najlepiej dla ciebie.

  • Metoda 1: Optymalizacja dostarczania WordPress CSS za pomocą wp Rocket
  • Metoda 2: Optymalizacja dostarczania CSS WordPress za pomocą Autoptimize

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

WP Rocket to najlepsza wtyczka buforująca WordPress na rynku. Oferuje najprostszy sposób na optymalizację dostarczania CSS WordPress. 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ć, to zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do Ustawienia ” wp Rocket strony i przejść do zakładki “Optymalizacja plików”.

Switch to the File Optimization Tab

Następnie musisz przewinąć w dół do sekcji Pliki CSS. Tam musisz zaznaczyć pole obok opcji “Optymalizuj dostarczanie CSS”.

Check Optimize CSS Delivery

Ta funkcja inteligentnie zidentyfikuje krytyczne CSS potrzebne do sformatowania części strony internetowej, którą odwiedzający widzą jako pierwsi. Twoje strony będą ładować się szybciej, a reszta CSS zostanie załadowana, gdy odwiedzający będą mogli zobaczyć jego zawartość.

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

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

Istnieje wiele innych sposobów, w jakie WP Rocket może pomóc Ci poprawić wydajność Twojej witryny. Aby dowiedzieć się więcej, Zobacz nasz przewodnik, jak poprawnie zainstalować i skonfigurować 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 JS Twojej witryny.

Podczas gdy Autoptimize jest darmową wtyczką, nie ma tak wielu funkcji jak WP Rocket i zajmuje więcej czasu na skonfigurowanie.

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

Jednak może to być dobra opcja, jeśli masz napięty budżet i nie potrzebujesz wszystkich innych funkcji wp Rocket, aby przyspieszyć swoją witrynę.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Autoptimize. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” Autoptimize strona konfiguracji ustawień wtyczki. Następnie przewiń w dół do sekcji Opcje CSS i zaznacz pole Optymalizuj kod CSS u góry.

Scroll Down to CSS Options

Gdy to zrobisz, upewnij się, że opcja “Agreguj pliki CSS” jest niezaznaczona, a następnie zaznacz opcję “wyeliminuj CSS blokujący renderowanie”.

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

Ale wtyczka nie będzie działać poprawnie, dopóki nie zarejestrujesz krytycznego konta CSS. Jest to usługa subskrypcji premium, która zapewni Autoptymizację krytycznego kodu CSS, którego potrzebuje, aby zoptymalizować dostarczanie CSS WordPress.

Aby to zrobić, przejdź do karty Critical CSS w Ustawieniach Autoptimize. Tutaj znajdziesz informacje potrzebne do zarejestrowania się w Critical CSS. Możesz zacząć, klikając link zarejestruj się w trzecim akapicie.

Sign Up for a Critical CSS Account

Po otrzymaniu krytycznego klucza CSS API przewiń w dół do sekcji klucz API, aby wkleić go do pola tekstowego “Twój klucz API”. Następnie kliknij przycisk Zapisz zmiany.

Paste Your Critical CSS API Key

Autoptimize zawiera teraz wszystkie informacje potrzebne do dodania krytycznego CSS i odroczenia ładowania arkuszy stylów do czasu renderowania strony. W rezultacie Twoja strona będzie ładować się szybciej.

Mamy nadzieję, że ten poradnik pomógł Ci dowiedzieć się, jak zoptymalizować dostarczanie CSS WordPress.

Możesz również zobaczyć nasz najlepszy przewodnik na temat tego, ile naprawdę kosztuje zbudowanie witryny WordPress, a także nasze porównanie najlepiej zarządzanych firm hostingowych WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…

Zarabianie Na Swoim Blogu: Tworzenie Odpowiednich Treści

W artykule: Przeczytaj inne posty z tej serii o zarabianiu pieniędzy na…

Jak utworzyć wyskakujące okienko WordPress na podstawie lokalizacji (krok po kroku)

W artykule: Czym Są Wyskakujące Okienka Oparte Na Lokalizacji?Po co dodawać wyskakujące…