Wraz z wprowadzeniem Web Vitals czas renderowania strony staje się jednym z kluczowych czynników wpływających na widoczność strony w wyszukiwarce, ale wpływa także na odbiór strony przez użytkownika.

JavaScript
Część krytyczna kodu JavaScript powinna być umieszczona bezpośrednio w kodzie HTML, tak aby nie zaistaniała konieczność pobierania dodatkowych plików blokująca renderowanie strony.
Każdy niekrytyczny skrypt powinien być dołączony jednym z poniższych atrybutów:

  • async atrybut – pobieranie następuje asynchronicznie nie blokując renderowania strony, po pobraniu pliku renderowanie zostanie wtrzymane a zawartość pliku wykonana
  • defer atrybut – pobieranie następuje asynchronicznie nie blokując renderowania strony, jego zawartość zostanie wykonana dopiero po wyrenderowaniu strony.

CSS
Podobnie w przypadku stylów CSS powinniśmy wyodrębnić style konieczne przy pierwszym wyrenderowaniu strony i umieścić je bezpośrednio w sekcji HEAD.

Pozostałe natomiast dołączać z atrybutem rel="preload" tak, aby zostały wczytane asynchronicznie.

Warto rozważyć też podzielenie stylów na odrębne pliki w kontekście media queries – jeden podstawowy plik ze stylami, a dodatkowo osobne pliki dla różnych rodzajów ekranów (media="(max-width: 600px)") czy też trybów wyświetlania (media="print").

Jeżeli potrzebujemy wykonać złożony obliczeniowo kod bez wpływu na wydajność samej strony, powinniśmy go wykonać poza głównym wątkiem. W takim przypadku najlepiej sięgnąć po Web Workers.

Leave a Reply

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

Instagram