Snížení počtu požadavků pomocí DATAURL

3. 1. 2018 17:09:46

Zdravím, dotaz těm, co již mají s podobnou věcí zkušenost. Když se načítá můj web, mám celkem cca 88 požadavků na server. Koukal jsem, že z toho je asi 40 požadavků na stáhnutí mikro-obrázku o velikosti do 5kb. Mělo by smysl to pořešit přes dataURL a nebo ne? Myslíte, že by to něčemu pomohlo? Změna je to jednoduchá, ale také by mě zajímalo, zda by s tím neměly současné prohlížeče problém.

3. 1. 2018 17:09:46

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320528

node

(5 hodnocení)

3. 1. 2018 17:22:03

Riesit sprajty ma vyznam len v pripade velkeho mnozstva drobnych obrazkov(ikonky). 5kb je dost vela na 1ks takze je urcite lepsie to tahat paralelne.

Skor si poriadne nastav cache :)

3. 1. 2018 17:22:03

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320527

smrtka

(3 hodnocení)

3. 1. 2018 17:26:23

obrazky se delaji pres sprites uz peknou radku let. Vsechny JS, vsechny CSS se daji sloucit a pak jsou z toho v nejlepsim pripade 3 requesty (ne vsude to jde).

Treba je pekna kravina pro naprostou vetsinu webu oddelit par Kb CSS pro podstrnku do souboru zvlast a pak ho nacitat. Proste kdyz ma vysledne CSS pod 100Kb (vc. bootstrapu, ktery mam zkompilovany jen na 30kb) a nejde o uplne meganavstevnost, tak to slucuju do jednoho

3. 1. 2018 17:26:23

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320526

Otakar Pěnkava

(25 hodnocení)

3. 1. 2018 17:32:29

Sprites už nemá smysl řešit, když tu máme HTTPv2, ne?

3. 1. 2018 17:32:29

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320525

beraniste

(29 hodnocení)

3. 1. 2018 17:34:56

No já nevím, proto se ptám ... jestli to má smysl

3. 1. 2018 17:34:56

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320524

Otakar Pěnkava

(25 hodnocení)

3. 1. 2018 18:54:22

To nebylo na vás. Sprites je obrázek složený z menších obrázků do jednoho. Pomocí CSS se vždy ale zobrazuje jen jedna jeho část (vždy jeden z těch složených obrázků).

Pokud vím, tak DATAURL je obrázek zakódovaný do base64 a vložen do kódu, tedy nejde o samostatný soubor. Zatímco sprites je samostatný obrázek, který se skládá z menších obrázků.

Představte si to jako obrázek níže. Jde o jeden celistvý soubor, takže se nestahuje 50 souborů, ale jeden větší.

25505

3. 1. 2018 18:54:22

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320523

beraniste

(29 hodnocení)

3. 1. 2018 18:57:41

To ale není můj případ, nebo ano? Já ty malinké obrázky mám rozeseté po celém webu. Já to nemohu sloučit do jednoho. Nebo ano?

3. 1. 2018 18:57:41

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320522

Mishoo

3. 1. 2018 20:10:58

url?

3. 1. 2018 20:10:58

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320521

David Musil

(69 hodnocení)

3. 1. 2018 20:15:53

Napsal beraniste;1433728
To ale není můj případ, nebo ano? Já ty malinké obrázky mám rozeseté po celém webu. Já to nemohu sloučit do jednoho. Nebo ano?

Podle me by to slo, treba ikonka kosiku, ikonka pro uzivatele, ikonka jakakoli dalsi by se takto spojily. Problem je, ze by mely byt stejne velke. Takze bys je mozna musel nechat predelat.

3. 1. 2018 20:15:53

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320520

smrtka

(3 hodnocení)

3. 1. 2018 20:24:06

Napsal musil.david;1433749
Podle me by to slo, treba ikonka kosiku, ikonka pro uzivatele, ikonka jakakoli dalsi by se takto spojily. Problem je, ze by mely byt stejne velke. Takze bys je mozna musel nechat predelat.

to se i u spritu da obejit pres background-size, ale je to chatrny cheat + pri znalosti konkretni url muzu konstatovat, ze by bylo potreba zasahu do sablon, kde jsou ted img = muselo by se prejit na jine tagy + CSS = dost prace pro defakto jen dobry pocit ( tykalo se to 34 obrazku, 2CSS a 4 JS, takze uspora sice je, ale neni to zasadni problem)

3. 1. 2018 20:24:06

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320519

Petr Soukup

(5 hodnocení)

4. 1. 2018 09:15:02

Sprite neřešte - s HTTP2 jsou naopak pomalejší, když se to stahuje jednotlivě. Ono totiž HTTP2 dělá něco jako sprite automaticky - sice se to pak tváří jako 20 požadavků, ale reálně to šlo v jednom.

Datauri to nejspíš také nevyřeší. Má zásadní problém, že nejde cachovat, takže se ta ikonka bude stahovat při každém načtení. Dává to smysl akorát u SVG, které vložíte inline - SVG jsou obvykle mrňavá (v řádu bajtů) a narozdíl od datauri nejsou v base64, takže na ně bude krásně fungovat gzip

4. 1. 2018 09:15:02

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320518

Vladimír Smitka

(4 hodnocení)

4. 1. 2018 09:53:53

Nejlepší HTTP požadavek je žádný HTTP požadavek a to platí i pro HTTP2. Stahování spousty malých souborů má vliv na výkon i v HTTP2 - každý požadavek má nějaké své hlavičky (i když komprimované), klient musí vykonat nějakou práci aby si o něj řekl a server ho musí nějak zpracovat (třeba načít daný soubor z disku).

Otázkou je hranice velikosti zdroje, kdy práce kolem přestane být podstatná. Někdy v minulosti jsem viděl testy, které říkaly, že je to u HTTP2 kolem 20kB.

S HTTP2 nedává smysl používání takových těch spritů, kde byly všechny obrázky pro celý web i když se vyskytly jen na jedné stránce a výsledný soubor měl mega. Sloučit však pár ikonek, které jsou skoro na všech stránkách do jednoho smysl stále dává. Slučování a sprity tedy smysl stále dávají, ale není třeba to řešit tak násilně, jako u HTTP1.

Použil bych následující postup:

- opravdu malé jednoduché ikonky bych převedl do SVG a uložil je jako data URI (SVG není nutné dávat do base64 a zároveň se pak gzipne)

- ze složitějších obrázků pod 10kb bych vytvořil spirty, tak aby byly v nějakých logických celcích podle výskytu a velikostí třeba pod 150kb na jeden

4. 1. 2018 09:53:53

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320517

beraniste

(29 hodnocení)

4. 1. 2018 13:29:54

Všechny ty malé obrázky co se opakují jsou do 5kb. Takže se nemusím bát nějakých chyb zobrazování u DATAURL ani u důležitých ikonek jako jsou košík, tlačítko nakoupit apod?

4. 1. 2018 13:29:54

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320516

Dominik Hašek

(12 hodnocení)

4. 1. 2018 13:45:11

beraniste: Já používám dataurl poměrně často (právě na menší ikonky) a zatím jsem neměl problém.

smitka: Většinou je problém v tom že se stahuje velké množstí obrázků v tom že kvůli nim čeká na další požadavky/soubory. Což by mělo HTTP2 vyřešit přávě tím že stahuje paralelně a pokud mám například 50 obrázků kde každý se stahuje (plácnu) 0.1s tak se čeká na stažení 5s, zatímco u HTTP2 se stahují zároveň takže je mám stáhlé za 0.1s (či maličko déle, ale určitě ne 5s) je to tak? Alespoň takto jsem to pochopil.

Souki: Datauri se dají (já to tak používám) dát přímo do CSS souboru. V takovém případě cachované jsou ne?

4. 1. 2018 13:45:11

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320515

Petr Soukup

(5 hodnocení)

4. 1. 2018 16:17:53

Napsal Toliceek;1433889
Souki: Datauri se dají (já to tak používám) dát přímo do CSS souboru. V takovém případě cachované jsou ne?

Jsou, ale pak je zase obrovské CSS - nemůže se stahovat paralelně více requestů a všechno musí jít v jednom.

Mimochodem u datauri pozor na to, že se musí ještě dekódovat a to ve výsledku může být pomalejší, než kdyby se stahoval obrázek. Je to problém hlavně u levných telefonů. Zkusím někde vyhrabat článek, kde to měřili.

4. 1. 2018 16:17:53

https://webtrh.cz/diskuse/snizeni-poctu-pozadavku-pomoci-dataurl/#reply1320514