Jak pokazać zasoby niekrytyczne w devtools ?

pytanie zadane 27 lutego 2020 w JavaScript przez Lancer Użytkownik (980 p.)
edycja 28 lutego 2020 przez Lancer

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 )

1 odpowiedź

odpowiedź 28 lutego 2020 przez rafal.budzis Szeryf (85,260 p.)

F12 > (menu obok X po prawej) > More tools > Coverage

Ta zakładka powie Ci ile procent kodu zostało użyte dotychczas na stronie którą uruchomiłeś. Na start myślę że jest to dobre narzędzie. Jednak to czy kod jest krytyczny sam musisz stwierdzić.

Które kody są nie krytyczne?

Wszystkie kody odpowiedzialne za akcje wykonujące się po kliknięciu przycisków. Jak podepniesz je później nic się nie stanie.

Krytyczne są natomiast zasoby odpowiedzialne za dynamiczne tworzenie układu strony podczas jego wczytywania (slider z banerami np).

Jednak może problem na twojej stronie leży gdzieś indziej? Podaj adres strony chętnie pomogę z optymalizacją. Dodatkowo zapraszam na film jeśli jesteś zainteresowany tematyką :)

https://budzis.pl/Wpisy/Kursy/Optymalizacja-stron/Wydajnosc-stron-internetowych/

komentarz 29 lutego 2020 przez Lancer Użytkownik (980 p.)

Już wiem jak używać te narzędzie ale żeby wyodrębnić ten kod to jednak potrzeba biblioteke z kodem i coś tam jeszcze z tego co wyczytałem , na tym aż tak się nie znam . ( chociaz może coś pokombinuje ) https://webpack.js.org/guides/code-splitting/

Generatorów do wyodrębniania już nie użyje bo to totalne nieporozumienie jednak jest . Zrobiłem audyt i jedyne co przeszkadza to kod niekrytyczny bo aż 3,2 sekundy zajmuje . A ręcznie tego kodu klepać do styli w head nie chce bo tego jest zbyt duzo .

komentarz 29 lutego 2020 przez rafal.budzis Szeryf (85,260 p.)

Podaj link do strony :)

Jeśli chcesz przyśpieszyć stronę a nie chcesz wrzucać styli jako inline możesz zrobić HTTP PUSH z plikiem CSS. Jednak jest to dostępne tylko przy używaniu protokołu HTTP/2 który wymaga SSLa.

Określenie wielkości "dużo" nie za wiele mówi. Jeśli po skompresowaniu nie przekraczasz 32 kb to jest to mało bo dane zmieszczą się w jednym pakiecie sieciowym ;)