Jak włączyć zasoby TYLKO zasoby niekrytyczne w Devtools ?

Question

W jaki sposób mogę pokazać tylko zasoby plików niekrytyczne , chciałbym podzielić kod na dwa pliki css i js  aby głowny czyli krytyczny był wykonywany na początku  niekrytyczny jako drugi  ale kod oczywiście jest pomieszany więc nie będę tego ręcznie wyodrębniać ponieważ zajmie mi to lata świetle , szukam informacji jak to można wyodrębnić bądź zmienić w ustawieniach tego devtools  w zakładce SIEĆ ale nie wiem jak  . ( oczywiście audyt strony zrobiony )

Answer 1

Nie kojarzę twardej definicji "zasobów niekrytycznych", ale... zgaduję że to pomoże Ci w osiągnięciu celu?

https://developers.google.com/web/tools/chrome-devtools/coverage

Włączasz, otwierasz stronę, patrzysz które linie CSS faktycznie są używane na nowo otwartej stronie; te nieużywane albo będą użyte później, albo aplikują się tylko do np innych rozdzielczości, albo są martwe.

(z ciekawości: jak duże masz CSSy, że znacząco wpływają na load strony?)

Comments

no właśnie z tego narzędzia korzystam ale tam jest dużo kodu przeplecionego krytycznego i niekrytycznego , oglądam teraz właśnie poradnik na Youtube więc jakoś chyba się będzie dało wyodrębnić ten kod . Dam znać jak się uda ;)

---

Ok , temat do zamknięcia był generator , https://www.sitelocity.com/critical-path-css-generator