[Folmi]

Miałem dziś takie nietypowe pytanie odnośnie wydajności #frontend #webdev

Załóżmy że jest strona z zbędnymi 50kB CSSa i zbędnym 50kB obrazkiem, usunięcie którego z nich bardziej przyspieszy stronę?

Chłopski rozum podpowiada, że to jak z tą toną pierza i toną żelaza, tzn. nie ma znaczenia bo ważą tyle samo, ale po ściągnięciu jest jeszcze przecież kwestia przetworzenia, tj. #css do CSSOM, co może odświeżyć wszystkie fazy renderingu i w przypadku jakichś skomplikowanych cienii czy gradientów nie będzie takie błyskawiczne, a z kolei statyczny obrazek nie wydaje się żeby wpływał jakoś szczególnie na resztę strony. Chyba, że o czymś nie wiem?

[brakloginuf]

Załóżmy że jest strona z zbędnymi 50kB CSSa i zbędnym 50kB obrazkiem, usunięcie którego z nich bardziej przyspieszy stronę?

@Folmi: to zalezy co chcesz przyspieszac, css jest interpretowany co jest na minus, ale to tekst ktory w locie moze zostac skompresowany, wiec jego rozmiar moze byc mniejszy niz obrazka, zatem pobranie go bedzie szybsze. Obrazki sa juz skompresowane i tam sie nic nie skompresuje.

[GeDox]

Załóżmy że jest strona z zbędnymi 50kB CSSa i zbędnym 50kB obrazkiem, usunięcie którego z nich bardziej przyspieszy stronę?

@Folmi: skoro obrazek jest zbędny, to raczej nie ma go w kodzie i go nie pobiera? Więc na starcie już mamy odpowiedz ( ͡° ͜ʖ ͡°)

[brakloginuf]

skoro obrazek jest zbędny, to raczej nie ma go w kodzie i go nie pobiera?

@GeDox: w sumie tutaj jeszcze podsunales temat lazyload

[GeDox]

@Folmi: a tak na serio. Jak dla mnie, usunięcie obrazka przyśpieszy stronę bardziej. Why? Nieużywane kilkanascie linijek w CSS są w jednym pliku CSS, który pobierany jest o strzał. Obrazki natomiast pobierane są falowo, każdy osobno. No ogółem temat ciekawy, najpewniej rozmawiałbym przez dluższy czas z osobą zadającą to pytanie, bo odpowiedź nie jest jednoznaczna. Dodatkowo jak wspomniał @brakloginuf - jeśli wziąć pod uwagę lazyload, to usunięcie CSS może bardziej przyśpieszyć

[Folmi]

tekst ktory w locie moze zostac skompresowany, wiec jego rozmiar moze byc mniejszy niz obrazka, zatem pobranie go bedzie szybsze

@brakloginuf: Racja, do tego gzip w przypadku CSS robi dużą różnicę, w przypadku .jpg prawie żadną, a może nawet powiększyć plik. Tylko nie wydaje mi się, aby do tego pił typ, skupiacie się na tej początkowej fazie pobierania, raczej zakładamy że oba requesty to 50kB i trwają tyle samo, za to

[kubako]

@Folmi: najbardziej przyspieszy jak usuniesz zbędny css i zbędny obrazek - skoro są zbędne ;)

[czlowiekboruta]

@Folmi: Myślę że ciężko odpowiedzieć jednoznacznie, bo jeśli wspomniany CSS był "zbędny", to znaczy że nie odnosił się do żadnego widocznego elementu drzewa DOM? W takim układzie przetwarzanie go raczej nie wpłynie na odczuwaną przez użytkownika szybkość ładowania strony. W każdym razie jeśli interesują cię takie tematy to polecam serię artów tutaj:
https://web.dev/learn-core-web-vitals/
Opisują tam też narzędzia które potrafią zmierzyć co i w jaki sposób wpływa na wspomniane ładowanie