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:
asyncatrybut – pobieranie następuje asynchronicznie nie blokując renderowania strony, po pobraniu pliku renderowanie zostanie wtrzymane a zawartość pliku wykonanadeferatrybut – 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.
