Eliminujemy zasoby blokujące renderowanie | Cykl 100 punktów w PageSpeed
Dzisiejszy wpis będzie bardziej frontendowy, jednak nie mniej ważny jak tematy związane z backendem. Postaramy się wyeliminować dzisiaj zasoby blokujące renderowanie.
Naszym pacjentem będzie strona https://beautysenses.pl. Jest to sklep z bielizną damską oparty na prestashop. Jednak zmiany jakie dokonamy, można przenieść dosłownie wszędzie.
Także przechodzimy do Google PageSpeed i naszym oczom okazuje się 1,5sekundy czekania na zasoby blokujące renderowanie.
Głównie są to pliki CSS, które standardowo ładujemy w ten sposób:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">także przeróbmy to na coś takiego:
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript><link rel="stylesheet" href=„https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></noscript>Przeróbka samego font-awsome na takie ładowanie polepszyło mi czas z 1,51s do 0.93s! Jeszcze znalazłem jedną rzecz. Zaciągałem niezminifikowany plik css. Dlatego pamiętaj też o tym, aby te pliki minifikować. Będą one wtedy o wiele mniejsze – czyli będą o wiele szybciej się ładować.
Podmiana wszystkich plików CSS w powyższy sposób pomogła mi skrócić czas ładowania z 1,51s do 0,13s Czyli już mamy świetny wynik.
I szczerze to jest wszystko, co możemy na ten moment zrobić z elementami opóźniającymi ładowanie (mowa oczywiście tylko o plikach CSS). Dlatego krótkie podsumowanie:
- Zminifikuj wszystkie pliki CSS, jakie wykorzystujesz na swojej stronie
- Wykorzystaj asynchroniczne ładowanie plików CSS
W następnym wpisie zajmiemy się obrazkami, czyli kolejny temat związany z frontendem.
Fajnie, choć najlepszym sposobem na zaoszczędzenie czasu przy Font Awesome jest używanie kodu SVG zamiast ikon-fontów z zewnętrznych serwerów. Aczkolwiek jest to rozwiązanie dobre, gdy mamy pewność, że tylko my zarządzamy stroną, a nie ktoś kto nie ma o tym bladego pojęcia. Poza tym Font Awesome daje możliwość tworzenia kolekcji, dużo lżejszych bibliotek z wybranymi ikonami.
Nie mniej jako ogólna zasada odblokowywania zasobów blokujących renderowanie – OK. Daj tylko znać jak to zaimplementować w wordpressie, gdzie nie linkujesz do zewnętrznych plików przez tudzież a przez wp_enqueue_style() i wp_enqueue_script()?
Musisz skorzystać z hooków np do skryptów: https://developer.wordpress.org/reference/hooks/script_loader_tag/