[ Zavřít ] 


 

RSS Kanál

 

Lazy loading - nativní podpora v Chrome 76 KE STAŽENÍ

Odložené načítání (alias lazy loading) se v Chrome dočkalo nativní podpory na straně prohlížeče. Přímo, bez dodatečných technologií, bez zásahů do experimentálních nastavení prohlížeče. Co toto odložené načítání nejen obrázků přinese?

 

Ikona načítajícího se objektu způsobem lazy loading

Co to je lazy loading?

Lazy loading znamená odložené načítání. Právě v tuto chvíli se týká především obrázků a tzv. vloženého obsahu (alias iframů). Fungování lazy loading je prosté. Odkládá načítání datově náročného obsahu, aby se rychleji načetl a zobrazil obsah, který už má být zobrazen displejem zařízení. Pokud jste někdy otevřeli stránku plnou neoptimalizovaných obrázků, které nejsou prezentovány svými datově menšími náhledy, pak velmi dlouho trvalo její načtení. Mnohem lépe si to dokáží představit pamětníci vytáčeného spojení - mnohdy jste si stihli udělat kafe, než se stránka načetla.

Postupné načítání obrázků principem lazy loading - obrázky se načítají v momentu, kdy dosáhnou kritické vzdálenosti od viewportu (Zdroj: Web.dev)

To se s lazy loading nestane - ani na stránce s 555 neoptimalizovanými obrázky, ani na vytáčeném spojení. Lazy loading totiž načte jen to, co se právě zobrazuje na displeji - vše ostatní odloží - a vy vidíte vše relativně bez čekání. A co víc - lazy loading nevyžaduje složitou implementaci na straně vývoje webu. S patřičným příkazem si poradí každý, kdo má i jen bazální znalost HTML. Funkcionalitu podporující prohlížeče porozumí, když do tagu IMG či IFRAME přidáte parametr LOADING a nastavíte mu jednu z hodnot:

  • lazy - „odloží načítání zdroje, dokud nedosáhne kritické vzdálenosti od zobrazovaného výřezu stránky“;
  • eager - „načte zdroj okamžitě bez ohledu na jeho umístění na stránce“;
  • auto - „ponechá využití funkce odloženého načítání na výchozím nastavení prohlížeče, které je fakticky stejné jako bez použití této hodnoty,“ vysvětlují možnosti využívání lazy loading Houssein Djirdeh, Addy Osmani, Mathias Bynens, vývojáři Googlu.

Djirdeh, Osmani a Bynens zároveň vývojářům webu doporučují, aby u odloženě načítaných objektů nezapomínali na definování rozměrů objektů pomocí:

  • atributů WIDTH a HEIGHT;
  • nebo inline stylu STYLE="height:XXXpx; width:XXXpx;";
  • případně pomocí zatím vyvíjeného atributu INTRINSICSIZE.

Díky definovaným rozměrům obrázku se zabrání přetékání webu a jeho následnému poskakování v místech, kde mají být odloženě načítané objekty.

Výsek nastavení Chrome 76 týkající se lazy loading obrázků a iframes

Vypnutí lazy loading v Chrome

Nechcete-li, aby váš Google Chrome zbytečně odkládal načítání obrázků a iframů, můžete to na úrovni prohlížeče zakázat. Stačí jen:

  • otevřít pokročilá nastavení pomocí příkazu chrome://flags zadaného do adresního řádku;
  • navigovat k položkám Enable lazy image loading a Enable lazy frame loading;
  • zvolit Disabled;
  • restartovat Chrome.

Tímto způsobem přestane Google Chrome sám odloženě načítat požadované objekty. Nicméně stále docházet k odloženému načítání, pokud je implementováno na straně webu JavaScriptem či jinou metodou. Zajímavou změnou od doby testování je nová možnost nastavení Enabled (Automatically lazily load where safe even if not marked ‘loading=lazy’), která by mohla umožnit uživateli přepsat nastavení webu.

Jaká je budoucnost lazy loading?

Vývojáři Chrome se chystají experimentovat především s kritickou vzdáleností objektu od výřezu zobrazení. S tím, jak se implementace dostává do Chromia, se dostane i do všech forků Chromia - namátkou Opery, Vivaldi, Microsoft Edge. A s tím, jak se jádru Chromia dostává hegemonie na poli browserů, lze lazy loading s oficiálním uvedením podpory v Chrome považovat za většinově rozšířený. Jediný velký a zbývající alternativní browser Mozilla Firefox na nativní podpoře lazy loading již pracuje.

Jednou z oblastí, kde se lazy loading ještě neuplatňuje, jsou obrázky pozadí CSS.

Zdroje

 

 

Tento program naleznete ke stažení v našem katalogu www.instaluj.cz

 

 

 

 

 

Google Chrome označí pomalé weby

Vývojáři prohlížeče Chrome následují příklon ostatních vývojových oddělení Googlu k rychlosti a chystají se označovat pomalé weby. Obdobného označování se v rámci služeb Googlu už dostalo nezabezpečeným webům běžícím...

Firefox 70: zrychlení a větší soukromí

Firefox si k sedmdesátce nadělil nové logo. A aby ani uživatelé nepřišli zkrátka, inovuje hned tři technologie pro zrychlení načítání webů. Veškerý vývoj pak směřuje proti trendu neustálého špiclování. Firefox se snaží...

Opera se přidává k DNS-over-HTTPS

Šifrování překladu názvu domén je buď nosný koncept zabezpečení internetové komunikace - nebo alespoň dostatečně trendy. Každopádně po Firefoxu, v jehož nastavení a vývoji se DNS-over-HTTPS skrývalo již delší dobu, a Chrome se k jeho implementaci...

CZ.NIC vypne původní ODVR

Kdo využívá DNS servery CZ.NIC - možná je znáte spíše pod méně lidovým a technicky správným názvem otevřené DNSSEC validující resolvery (ODVR) - měl by zbystřit. Ty původní odcházejí do křemíkového nebe a...


 
© 2005-2019 PS Media s.r.o. - digital world