Critical CSS: a render-blokkoló stíluslap szelíd megregulázása

A böngésző a teljes CSS letöltése előtt nem rajzolja ki az oldalt, ezért a render-blokkoló stíluslap jelentősen rontja az LCP mutatót. A Critical CSS technika a hajtás feletti tartalomhoz szükséges stílusokat inline beilleszti a HTML head szekciójába közvetlenül. A többi CSS aszinkron töltődik be a media=print trükkel vagy a rel=preload attribútummal. A kritikus CSS jellemzően 14 kilobyte alatti, mert ekkora az első TCP csomag mérete az interneten. A Penthouse, a Critical és a CriticalCSS könyvtárak automatikusan kigyűjtik a hajtás feletti szelektorokat. A CSS minifikálás további 20 százalék megtakarítást ad fájlméretben. A módszer Lighthouse pontot azonnal javít.