JCH Optimize - zajímavá zkušenost

marvays
16. lis 2018 09:21 #137733
Dobré dopoledne. Tak mám zajímavou zkušenost s touto komponentou. Před dvěma dny jsem ji nahodil na dokončující web. Dnes ráno dělám zálohu a koukám, předchozí záloha měla 400 mega, dnešní má 1,8 giga!

Když jsem ji tedy stáhl, extrahoval na disku a procházel složky, tak jsem zjistil že složka \media\plg_jchoptimize\cache\js\ obsahuje 2509 soubor *.js o celkovém objemu 1,5 Gigia.

To je jako co? :)

Soubor přílohy:

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Ernst
16. lis 2018 10:03 #137737
no já bych to na web asi nedal. Zrychlilo to web?
nemáš ten web napadenej?

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od marvays
16. lis 2018 10:10 #137738
Nemělo by být čím ten web napadnout. Mám jen oficiální a nejnovější rozšíření.

Jako, nějaké užitečné věcičky to má, tahle komponenta. Používám to hlavně kvůli spojení CSS, protože jsem doposud nezjistil, jak si to spojit sám a ručně . . . . jako že bych to uměl moc rád. Pak zapínám Lazy Load Images,javascript asynchroně a na spodlku stránky. Nevím, cosi to zrychlí.

Možná kdybych se naučil ošefovat ty css ručně a proštudoval si, jestli by nepomohlo v rychlosti rozšíření jQuery easy, tak ybch to používat asi nemusel. Stejně mi už vypršelo předplatné :)

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Ernst
16. lis 2018 10:54 #137739
jak myslíš?

Používám to hlavně kvůli spojení CSS, protože jsem doposud nezjistil, jak si to spojit sám a ručně . . . . jako že bych to uměl moc rád.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od H13
16. lis 2018 12:35 #137742

no já bych to na web asi nedal. Zrychlilo to web?


Já to testuju delší dobu tady:
www.phoca.cz/phocacartdemo/premiere/

Přínos je v tom, že ti to spojí všechny CSS a všechny JS dohromady (CSS a JS samozřejmě zvlášť a jen ty položky, co jsou v hlavičce) a že (tuším) odstraní mezery, taby, prázdný řádky, apod. Tedy načítají se místo např. 15 souborů jen dva.

A z jakého důvodu, no hlavně z důvodu přetváření se. Trochu to vylepší audit stránky (Chrome - DevTools - Audits), což pak lépe vypadá pro lidi, co dělají rádi audity.

Jak moc je měřitelná změna, kdy se nenačítá např. 15 souborů, ale 15 souborů spojených do dvou (bez mezer, tabů, prázdných řádků, atd.), těžko říct.

Každopádně ty audity jsou zase jen na oko. Ještě lepšího výsledku se dá dosáhnout, když člověk přestěhuje všechny Javascripty z hlavičky dolů na konec stránky. Co se stane? Nic, vůbec nic, stránka načte úplně stejný počet knihoven, stejnou velikost kódu, stejně rychle, ale nástroj audit jako zázrakem o několik desítek procent zlepší hodnočení webu - v podstatě bez jakékoliv změny.

Phoca Gallery - http://www.phoca.cz/phocagallery - obrázková galerie (Joomla!)
Phoca Guestbook - http://www.phoca.cz/phocaguestbook - kniha návštěv (Joomla!)
Phoca Download - http://www.phoca.cz/phocadownload - stahování souborů (Joomla!)
Phoca Cart - http://www.phoca.cz/phocacart - e-shop,...

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od radek
16. lis 2018 12:48 #137743

H13 napsal:

no já bych to na web asi nedal. Zrychlilo to web?


Každopádně ty audity jsou zase jen na oko. Ještě lepšího výsledku se dá dosáhnout, když člověk přestěhuje všechny Javascripty z hlavičky dolů na konec stránky. Co se stane? Nic, vůbec nic, stránka načte úplně stejný počet knihoven, stejnou velikost kódu, stejně rychle, ale nástroj audit jako zázrakem o několik desítek procent zlepší hodnočení webu - v podstatě bez jakékoliv změny.


a jak to prestehujes? To uz hledam dlouho.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od marvays
16. lis 2018 13:02 - 16. lis 2018 13:02 #137744

radek napsal:
a jak to prestehujes? To uz hledam dlouho.


to je právě v té komponentě.

H13 napsal:

no já bych to na web asi nedal. Zrychlilo to web?

Co se stane? Nic, vůbec nic, stránka načte úplně stejný počet knihoven, stejnou velikost kódu, stejně rychle, ale nástroj audit jako zázrakem o několik desítek procent zlepší hodnočení webu - v podstatě bez jakékoliv změny.

Podle mě se stane to, že se ty skripty načítají ve chvílí, kdy ti pomalu nabíhá stránka s texty, obrázky, fonty a styly. Takže to vypadá pro uživatele líp, že se něco děje.

To je důvod, proč mi u joomla chybí nějaký "dobře fungující" preloader. Za ten bych vraždil :)

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od radek
16. lis 2018 13:24 - 16. lis 2018 13:24 #137745
No to jo, to vim, ze to je v te komponente, ale ja se neptal tebe, ale H13, protoze on psal, ze to presunuje a me by zajimalo jak, protoze z toho posledniho odstavce spis vyplyva, ze to neni pres tu komponentu (taky pise, ze by si to na web nedal).

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
16. lis 2018 14:03 #137750
Slučování CSS a JS do jednoho má smysl hlavně pro starší HTTP1.1, kdy se soubory stahujíá jeden po druhém. Pokud server jede na HTTP2.0, soubory se stahují paralelně, různé spojování CSS, JS a obrázků už pak může být spíš kontraproduktivní (ano ušetří se par bajtů na cookies a pod., ale nemyslím si že něco ultra výrazného).

Skripty v patičce se dávali proto, aby se načítali jako poslední. Tj. nejdřív dokument, styly v hlavičce, a až nakonec skripty. Skripty v hlavičce totiž prohlížeč načítá a spouští ještě před zpracováním těla dokumentu, což může způsobit prodlevu. Pokud ale skriptama měníte vzhled, bude to mít za efekt prvotní načtení a pak až "poskočení" po načtení skriptu. Skripty v patičce jsou ale dnes hlavně už jen z podpory starších prohlížečů. Moderní prohlížeče podporují atributy defer a async (a to dokonce již IE10), které umožní ponechat skripty v hlavičce, se stejnou funkčností jako by byly v patičce. Hezky je to popsáno např. zde .

"Preloader" je, alespoň jak to chápu, zase úplně něco jiného. Ten má za úkol na pozadí stránek nahrávat obrázky, nebo jiný obsah, který není na první pohled na webu viditelný, ale zobrazí se např. až na hover myši, v časovači ve slideru nebo pod. Preloader takový obsah "přednahraje", tak aby se nezačal nahrávat až v okamžiku zobrazení, pak by efekt nebyl dostatečně svižný.

Zajímavější je podle mne ale tzv. Lazy loading, kdy se obrázky vůbec nenahrávají, a nahrají se až skriptem, když mají být zobrazeny. Je to takový ten efekt, kdy se rychle zobrazí stránka a obrázky se na ní teprve "rozsvicejí", tak jak postupně skrolujete dolů.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od H13
16. lis 2018 14:45 - 16. lis 2018 14:46 #137751

radek napsal: No to jo, to vim, ze to je v te komponente, ale ja se neptal tebe, ale H13, protoze on psal, ze to presunuje a me by zajimalo jak, protoze z toho posledniho odstavce spis vyplyva, ze to neni pres tu komponentu (taky pise, ze by si to na web nedal).


Nemá to s tím pluginem nic společného, ten dokonce Javascript na konci stránky ignoruje. Udělal jsem to tuším pomocí systém pluginu - ten si projede stránku, zjistí, že v hlavičce je nějaký javascript, tak ho tam smaže a pak vloží před tag </body> - ale jen kvůli testování a jen kvůli lepším výsledkům v tom auditu. Je to "prasárna" založená na tom, že někdo naivně přikládá velký význam nějakému nástroji.

Javascript v hlavičce má v systémech jako je Joomla! velkou výhodu. Když se systém skládá z různých částí, různé části přidávají různé Javascriptové nebo CSS knihovy. Pokud vývojáři používají standardní metody, pak se nestane, že by jedna stejné knihovna byla vložená do stránky vícekrát - prostě komponenta požádá o vložení knihovny do stránky, a pokud už tam ta knihovna je (např. někdo požádal dřív), po druhé se nevkládá. To ale nefunguje, pokud někdo načítá Javascript přímo v body (na konci).

Cony
Souhlas s Lazy loadem. Když má někdo galerii a nahraje na stránku 100 obrázků a při lazy loadu se nahraje jen viditelných 6 (např.), pak je ten rozdíl hodně velkej. Ale pravděpodobně jako vše, bude to mít i své nevýhody.

Phoca Gallery - http://www.phoca.cz/phocagallery - obrázková galerie (Joomla!)
Phoca Guestbook - http://www.phoca.cz/phocaguestbook - kniha návštěv (Joomla!)
Phoca Download - http://www.phoca.cz/phocadownload - stahování souborů (Joomla!)
Phoca Cart - http://www.phoca.cz/phocacart - e-shop,...

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od marvays
16. lis 2018 15:40 #137753

H13 napsal: Cony
Souhlas s Lazy loadem. Když má někdo galerii a nahraje na stránku 100 obrázků a při lazy loadu se nahraje jen viditelných 6 (např.), pak je ten rozdíl hodně velkej. Ale pravděpodobně jako vše, bude to mít i své nevýhody.


Co vím, tak akorát je problém, že si obrázky nenačtou roboti, pokud se použije špatná metoda.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cony
16. lis 2018 15:53 #137755

marvays napsal: Co vím, tak akorát je problém, že si obrázky nenačtou roboti, pokud se použije špatná metoda.

To lze řešit pomocí <noscript>, kam se dá obrázek pro vyhledávače.

Na problémy jsem spíš narazil se stylováním, s velikostí obrázku vs. responsiva, ale i to lze řešit.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od marvays
16. lis 2018 16:06 #137757

marvays napsal:

H13 napsal: Cony
Souhlas s Lazy loadem. Když má někdo galerii a nahraje na stránku 100 obrázků a při lazy loadu se nahraje jen viditelných 6 (např.), pak je ten rozdíl hodně velkej. Ale pravděpodobně jako vše, bude to mít i své nevýhody.


Co vím, tak akorát je problém, že si obrázky nenačtou roboti, pokud se použije špatná metoda.


Pokud si tedy mám vzít předchozí řádky k srdci, tak je na čase udělat JCH papá a zvážit něco menšího. Drtivou css si umím zrachnout sám. Pokud tedy víc souborů css nevadí, stejně tak js tak pak už je to jen o zgrabování obrázků a lazy.

Tenhle borec nemá špatné udělátka: joomla-extensions.kubik-rubik.de/llfj-lazy-load-for-joomla

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Rudolf Baláš
17. lis 2018 02:14 #137767
H13:

Každopádně ty audity jsou zase jen na oko. Ještě lepšího výsledku se dá dosáhnout, když člověk přestěhuje všechny Javascripty z hlavičky dolů na konec stránky. Co se stane? Nic, vůbec nic, stránka načte úplně stejný počet knihoven, stejnou velikost kódu, stejně rychle, ale nástroj audit jako zázrakem o několik desítek procent zlepší hodnočení webu - v podstatě bez jakékoliv změny.


Nemáte pravdu.
Namůžete jen tak přestěhovat včechny JS do patičky.
Při optimalizaci (např. podle GTMetrix nebo Pingdom a nebo nejlépe podle Webpagespeedtest) musíte velice dobře vážit, který JS nastavíte jako async, defer == který dáte do patičky.

Je třeba si uvědomit proč se to dělá a pochopit. Dělá se to proto, aby se co nejdříve načetly informace "nad foldem" == na obrazovce viditelné, ale neztratila se funkcionalita.

A pro toto zobrazení nepotřebujete všechny JS a CSS. Ale některé ano (např. JS v případě že načítám font z Google pomocí JS - to je varianta, u které si mohu nastavit async a defer), proto když optimalizuji musím pečlivě volit co dám dolů a co ne.

Právě tohle ladění se nazývá optimalizace a díky ní se dá dosáhnout načtení Joomla webu z původní běžné instalace se šablonou od výrobce (18s) na až neuvěřitelných 1,6s při velikosti 2MB.

Jen ta optimalizace dlouho trvá :))))


Plugin JCH Optimize je první a rychlou volbou pro weby, které nemají v šabloně interní komprimaci.
My jej nepoužíváme a všechny metody máme řešené přímo v šabloně (JoomlArt nebo Easy) nebo raději na serverech (pagespeed, lazzyload), které k tomuto účelu máme speciálně pro joomla weby a eshopy vytuněné.

Pokud tedy chcete něco optimalizovat na úrovni webu, doporučuji se poohlédnout po šablonách, které mají v sobě tyto věci vyřešené (JoomlArt, Gawick...), rozhodně nekupovat ty z toho portálu, myslím TemplateMonster?

Další tunění je o tom, že šáhnete do jednotlivých kódů komponent a modulů.

I Virtuemart umožňuje při zavolání svých JS použít místo false true, jen musíte vědět kde to stojí za to :)

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od marvays
17. lis 2018 03:41 - 17. lis 2018 03:41 #137769

Rudolf Baláš napsal: Pokud tedy chcete něco optimalizovat na úrovni webu, doporučuji se poohlédnout po šablonách, které mají v sobě tyto věci vyřešené (JoomlArt, Gawick...), rozhodně nekupovat ty z toho portálu, myslím TemplateMonster?

Co konkrétně by ta šablona měla umět? V mém případě spíš tedy template builder. Protože css si grabuju sám přes online nastroje. Ale spojovat je už není tak snadné.

Rudolf Baláš napsal: Právě tohle ladění se nazývá optimalizace a díky ní se dá dosáhnout načtení Joomla webu z původní běžné instalace se šablonou od výrobce (18s) na až neuvěřitelných 1,6s při velikosti 2MB.

Jen ta optimalizace dlouho trvá :))))

No, tak já jsem na posledním připravovaném webu v polovině. Z 18 na 9. Teď jdu zrovna ladit obrázky. To odhaduji na výrazný posun dolů a následně pak budu zkoušet JCH, RokBooster nebo ScriptMerge. Moje znalosti nejsou tak daleko, abych věděl, jak přesouvat jednotlivé css a js dolů a nahoru po stránce, jak je potřeba.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.