JCH Optimize - zajímavá zkušenost

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ů.

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.

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.