Dawid Panfil

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *