Natywny Lazy Load w nowym Chrome! Zobacz jak włączyć

Do tej pory, aby zrobić efektowne lazy load przy obrazkach, trzeba było korzystać z zewnętrznych rozwiązań. Dla WordPressa powstały dzięki temu szeregi wtyczek i innych zapychaczy. Teraz Google wychodzi naprzeciw twórcom i przygotowuje natywne lazy load w najnowszej wersji Chrome.

Google Chrome 75 otrzyma rozwiązanie, nazywane jako „natywne lazy load”. Dzięki niemu masa stron, która zawiera dużą liczbę grafik, zostaną znacznie przyspieszone. Obrazki, znajdujące się poza widokiem ekranu, będą ładowane z opóźnieniem. Dodatkowo ograniczymy korzystanie z rozszerzeń, które w głównej mierze opierały się na JavaScript.

Z pozoru proste rozwiązanie może wpłynąć rewolucyjnie na współczesne strony internetowe, gdzie liczy się przede wszystkim szybkość. Jest to także znakomite ułatwienie dla twórców witryn, gdyż osadzenie takiej grafiki, ma być banalnie proste. Wystarczy dodać atrybut „lazy”, aby wymusić opóźnione ładowanie lub atrybut „auto”, aby pozwolić podjąć decyzję przeglądarce.

Jak działa lazy load w Chrome 75?

Nowinką taką podzielił się na swoim blogu Inżynier ds. Technicznych w Google, odpowiedzialny za Chrome, Addy Osmani. Zamieścił on przykłady zastosowania natywnego lazy load:

[code]

<!– Lazy-load an offscreen image when the user scrolls near it –>
<img src="unicorn.jpg" loading="lazy" alt=".."/>

<!– Load an image right away instead of lazy-loading –>
<img src="unicorn.jpg" loading="eager" alt=".."/>

<!– Browser decides whether or not to lazy-load the image –>
<img src="unicorn.jpg" loading="auto" alt=".."/>

<!– Lazy-load images in <picture>. <img> is the one driving image
loading so <picture> and srcset fall off of that –>
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" loading="lazy">
</picture>

<!– Lazy-load an image that has srcset specified –>
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf" loading="lazy">

<!– Lazy-load an offscreen iframe when the user scrolls near it –>
<iframe src="video-player.html" loading="lazy"></iframe>

[/code]

Jak włączyć lazy load w Chrome 75?

Jak twierdzi, celem rozwiązania jest, aby grafiki pobierane były dopiero w momencie zbliżania się do nich podczas scrollowaia. Jako osoba siedząca niejako w branży uważam to za genialne rozwiązanie, które znacznie ułatwi pracę. Oczywiście to na razie jest funkcja tylko w przeglądarce Chrome, pozostaje jeszcze szereg innych przeglądarek, ale znając życie, konkurencja lada chwila będzie wdrażać coś podobnego u siebie. Niemniej jednak minie jeszcze sporo czasu, zanim odejdziemy od zewnętrznych wtyczek i „javascriptowych” rozwiązań.

Możemy sprawdzić nową funkcję już teraz – wystarczy przejść do chrome://flags i zaznaczyć „Enable lazy frame loading” i „Enable lazy image loading”. Następnie trzeba zresetować przeglądarkę.