668 145 480 info@jacekjagusiak.pl

Jeden z największym problemów podczas optymalizacji (pod kątem szybkości ładowania) bloga na WordPressie, zresztą także i na innych CMS’ach, jest to, że nie można ładować natywnie CSS’ów asynchronicznie.

Ostatnio pisałem o sposobach na ładowanie JavaScript’ów asynchronicznie i tutaj sprawa wyglądała bardzo prosto – wystarczyło dopisać async do kodu i z głowy. Jednak w przypadku ładowania arkuszy stylów nie ma lekko, nie ma prostego rozwiązania.

Z drugiej strony, jeśli sprawdzimy prosty JavaScript, który przygotował dla Nas Scott Jehl to znajdziemy w nim rozwiązanie na tyle proste, że każdy, nawet początkujący blogger, poradzi sobie z jego implementacją.

Wielu z Was zastanawia się po jakiego groma ładować asynchronicznie CSS’y, przecież to może nieźle namieszać podczas generowania witryny. I macie poniekąd rację, choć z drugiej strony czemu nie zrobić tego jeśli mowa o ładowaniu czcionek? Można także zostawić w spokoju kod odpowiedzialny za ładowanie wszystkiego co jest w zasięgu tzw. „above the fold”, a całą resztę ładować asynchronicznie.

Możemy umieścić style w tzw. stopce strony, ale to nie sprawi, że będą one ładować się asynchronicznie. Metoda ta jedynie opóźni w czasie to co nieuniknione, czyli ich ładowanie, jeden arkusz za drugim.

Wreszcie powróćmy do tego co przyszykował na Scott Jehl, a dokładnie do funkcji loadCSS. Prosty kod JavaScript pozwalający ładować nam CSS’y asynchronicznie. Używałem tego kody na wielu stronach, niekoniecznie opartych o WordPressa i działa on doskonale, ale mimo wszystko używać go trzeba z głową.

Kod znajdziecie poniżej, skopiujcie go:

Następnie wklejcie to co skopiowaliście do sekcji head swojej strony, tuż przed innymi skryptami.

ZOBACZ:  Jak wyświetlić wpisy z innego bloga z miniaturkami?

Dobrze jest też dodać tag noscript, aby obsłużyć osoby sprzed epoki kamienia, które w przeglądarkach małą wyłączoną obsługę JavaScript i tym samym zaserwować im potrzebne style.

[sociallocker] Domyślnie funkcja wstawi arkusz stylów przed pierwszym tagiem <script> w DOM. Jeśli nie chcecie tam to możecie sami zdecydować gdzie funkcja ma go umieścić definiując parametr „before”:

Pozwoli wam to wstawić style po trzecim wystąpieniu tagu <script> zamiast przed pierwszym.[/sociallocker]

Parametr „media” to już chyba każdy kojarzy i funkcja domyślnie ustawia go jako media=”all”

Przykładowe użycie funkcji macie poniżej:

Także powodzenia.