Jak wstępnie załadować pliki CSS na mojej stronie WordPress za pomocą LWS Optimize?

Procédure

Czym jest wstępne ładowanie CSS?

Podczas ładowania strony internetowej pliki CSS powiązane z tą stroną są ładowane stopniowo, w kolejności, w jakiej są wywoływane w kodzie. Wstępne ładowanie pliku oznacza uruchomienie go najpierw, aby był gotowy do początkowego załadowania strony, zamiast czekać przez krótki czas, aż plik załaduje się naturalnie.

Wstępne ładowanie jest najczęściej używane w przypadku czcionek tekstowych, ponieważ są one często ładowane po wyświetleniu strony, w wyniku czego tekst nie pojawia się lub nie pojawia się we właściwej czcionce przez kilka chwil po załadowaniu strony. Wstępne ładowanie tych czcionek pozwala na ich załadowanie w tym samym czasie co strona: czcionka jest wyświetlana bezpośrednio, dzięki czemu ładowanie wydaje się szybsze.

Aby wstępne ładowanie było skuteczne, nie wszystkie pliki CSS powinny być wstępnie ładowane, w przeciwnym razie wydajność witryny ucierpi, a nie poprawi się.

Może być trudno określić, które elementy witryny powinny być wstępnie załadowane, aby uzyskać najlepszą wydajność; będzie to w dużej mierze zależeć od witryny, zainstalowanych wtyczek i struktury strony, ale z reguły będą to zasoby niezbędne do początkowego załadowania strony, tj. pliki, które załadują elementy, które użytkownik zobaczy natychmiast po załadowaniu strony: czcionki, główne elementy CSS (kolory, tło itp.), obrazy itp.

Popraw początkowe wyświetlanie swoich stron dzięki funkcji wstępnego ładowania CSS oferowanej przez LWS Optimize, która nadaje priorytet ładowaniu plików niezbędnych do natychmiastowego wyświetlenia, takich jak krytyczne style i czcionki. Dzięki intuicyjnemu interfejsowi możesz aktywować opcję "Preload CSS files" w zakładce Front-End (tryb zaawansowany), dodać dokładne adresy URL, które mają zostać wstępnie załadowane i zapisać ustawienia za pomocą zaledwie kilku kliknięć. Aby uzyskać pełną optymalizację, która jest łatwa do zainstalowania, zastosuj najlepszą wtyczkę pamięci podręcznej WordPress. Ta sama wtyczka jest wymieniona w rozszerzeniach jako najlepsza darmowa wtyczka pamięci podręcznej WordPress.

Jak wstępnie załadować pliki CSS mojej witryny?

Możesz wstępnie załadować tagi , które są używane głównie do ładowania czcionek lub arkuszy stylów, ale mogą być również używane do ładowania obrazów. Aby to zrobić, należy zastąpić atrybut "rel" i dodać atrybut "as" do tagu. To musi wydawać się niezrozumiałe, jeśli wiesz niewiele lub nic o programowaniu. Przyjrzyjmy się temu bardziej szczegółowo na przykładzie:

Aby wstępnie załadować ten arkusz stylów, można zmodyfikować tag w następujący sposób:

Jak widać, wystarczy zmienić "stylesheet" na "preload", ale ważne jest, aby nie zapomnieć o dodaniu atrybutu "as", w przeciwnym razie plik zostanie załadowany dwukrotnie, co będzie miało szkodliwy wpływ na wydajność, co jest sprzeczne z samym celem wstępnego ładowania.

W przypadku obrazu załadowanego z , obsługa jest taka sama, z wyjątkiem tego, że "styl" staje się "obrazem":

Wreszcie, w przypadku czcionek, procedura jest podobna, z wyjątkiem jednego szczegółu: atrybut "crossorigin" musi zostać dodany do :

<link rel='preload' as='font' href='https://example.fr/mafont.woff2' corssorigin='anonymous' />.

Celem "crossorigin" jest poinformowanie przeglądarki, że ta czcionka musi być pobierana anonimowo. W rzeczywistości wszystkie czcionki muszą być pobierane w ten sposób; zapomnij o atrybucie, a przeglądarka nie przetworzy tej czcionki ani nie weźmie pod uwagę wstępnego ładowania.

Niezależnie od rodzaju witryny, wstępne ładowanie plików CSS może przynieść wiele korzyści. Jednak konfiguracja może być skomplikowana dla początkujących, dlatego zalecamy korzystanie z rozszerzenia WordPress, które wstępnie załaduje pliki za Ciebie, takiego jak nasze rozszerzenie LWS Optimize, opracowane przez LWS.

Wstępne ładowanie plików CSS za pomocą LWS Optimize

Oprócz bardziej standardowych optymalizacji, takich jak minifikacja i łączenie, LWS Optimize umożliwia minifikację wybranych plików CSS i czcionek za pomocą zaledwie kilku kliknięć. Aby to zrobić, przejdź do ustawień rozszerzenia, trybu zaawansowanego, a następnie zakładki Front-End:

Tutaj należy aktywować opcję "Preload CSS files". Następnie kliknij przycisk "Dodaj pliki" znajdujący się obok tej opcji, co spowoduje otwarcie okna modalnego:

W polu nowo otwartego modalu wprowadź pełny adres URL pliku, który chcesz dołączyć. Możesz kliknąć zielony przycisk "+", aby dodać więcej adresów URL lub czerwony przycisk "-", aby je usunąć. Możesz dodać dowolną liczbę adresów URL, ale bezwzględnie musisz wprowadzić dokładny adres URL pliku, w przeciwnym razie wstępne ładowanie nie zostanie wykonane. Po zakończeniu kliknij przycisk "Zapisz", aby zapisać zmiany.

Powtórz poprzednie czynności z opcją "Preload Fonts", aby dołączyć czcionki, które mają zostać wstępnie załadowane. Ponownie upewnij się, że wprowadziłeś poprawny i kompletny adres URL, w przeciwnym razie czcionka nie zostanie wstępnie załadowana.

Nie zapomnij kliknąć zielonego przycisku w prawym dolnym rogu, "Zapisz nową konfigurację", aby zatwierdzić zmiany.

Wnioski

Wiesz już jak :

• Zidentyfikować niezbędne zasoby do wstępnego załadowania, aby zoptymalizować wyświetlanie strony od pierwszego załadowania 🌐.
• Używać tagu aby efektywnie wstępnie załadować pliki CSS, obrazy i czcionki, uważając, aby nie przeciążyć przeglądarki 🖥️.
• Skorzystaj z rozszerzenia LWS Optimize, aby ułatwić wstępne ładowanie na stronach WordPress bez konieczności posiadania zaawansowanych umiejętności technicznych 🔧.

Mamy nadzieję, że ten artykuł przybliżył Ci korzyści i implementację wstępnego ładowania zasobów w Twojej witrynie. Dziękujemy za uważną lekturę! Jeśli masz jakieś pytania lub chciałbyś podzielić się swoimi doświadczeniami z preloadingiem CSS, prosimy o pozostawienie komentarza. Twoja opinia jest zawsze mile widziana i pozwala nam nadal ulepszać nasze usługi dla Ciebie 🌟.