JCH Optimize - zajímavá zkušenost
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?
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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.
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.
radek napsal:
a jak to prestehujes? To uz hledam dlouho.
to je právě v té komponentě.
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.H13 napsal:
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.no já bych to na web asi nedal. Zrychlilo to web?
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.
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
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.
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.
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.
To lze řešit pomocí <noscript>, kam se dá obrázek pro vyhledávače.marvays napsal: Co vím, tak akorát je problém, že si obrázky nenačtou roboti, pokud se použije špatná metoda.
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.
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.
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.
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: 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?
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.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á
Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.
