Firefox 75 gets lazy loading support for images and iframes
Mozilla plans to support lazy loading for images and iframes in Firefox 75. Lazy loading refers to a technique that defers the loading of elements on a page to improve loading and rendering of the webpage, reduce memory use and network data usage; these elements are usually below the fold on load (not visible to the user).
Lazy loading up until now required the use of JavaScript. A new attribute for images and iframes adds lazy loading support in browsers that support it. Google introduced support for the new lazy loading tag in Chrome 76 which it released last year.
Mozilla added support for lazy loading in recent versions of Firefox Nightly, the cutting edge development version of the browser. Lazy loading is not enabled by default but users may enable it in Firefox Nightly. The feature will make its way to Beta, Dev and eventually Stable versions of the Firefox web browser.
Control Lazy Loading in Firefox
Here is how you control lazy loading functionality in Firefox:
- Load about:config in the browser's address bar.
- Confirm that you will be careful if the intermediary warning page is displayed.
- Search for dom.
image-lazy-loading. enabled. - Toggle the preference so that its value is True (enabled).
You can disable lazy loading at any time by setting the preference to False in about:config. Load the following demo page to check if lazy loading support is working correctly.
Lazy loading, once enabled, works on sites that use the tag for images. WordPress plans to introduce support for the loading attribute for images in the popular blogging platform by default which would add support automatically to WordPress blogs once the change lands and the blog is updated to the new version.
Webmasters who don't use WordPress may need to add the tags manually or by using scripts. All it takes is to add loading="lazy" to images or iframes to make use of the new feature.
Closing Words
The native integration of lazy loading of images and iframes in web browsers, and support of the new attribute by WordPress, should push the feature significantly. JavaScript lazy loading has some issues associated with it but since the native integration limits support to image and iframes, it should not be affected by the majority of these.
Now you: what is your take on lazy loading? (via Techdows)
Thank you for this. I hate lazy loading, constant distracting flickering. Even done well it’s annoying. I avoid sites with it usually but recently it’s seems to be everywhere, now I know why.
Awful. Had to disable this for my sanity.
Hating. Few days ago I create lazy loading with preload based on data-src attribute replacement. It depends JS part and backend modification. Now it looks like native future. If this solution disabled by default it controlled by header or meta it’s good. If not it’s problem to synchronization future with chromium. My solution seems can’t be indexed by search engines because src attribute contains default preview.
What to do? I only need to preload and show first images on scroll area. Next images shows when screen scrolls to image tag position. Us browser side lazy good?
Also different sources of image is very bad for different screen sizes. I use View Port Units with autoscale images without media queries.
Need I remove part of my front-end and use native lazy?
this combined with infinite scrolling is how you get a terrible experience
Absolutely horrible feature. I do not want lazy loading anywhere. I hope there is a way to disable this. The current methods used by JavaScript and now this annoying native browser implementation – both must be controllable by the user. I couldn’t find any working addons that can disable lazy loading. They all seem to be broken now.
I suspect that it will be more an annoyance than an improvement for the users, and that it was designed more for the benefit of the sites than for the users.
It already exists. try any modern website that loads content dynamically bruh.
Many of the images (still photos and illustrations) online are in JPEG format. This lazy loading reminds me a little of a feature that’s been available for many years — an alternative/optional flavor of JPEG called a “progressive JPEG”. That’s a feature of the picture file format itself, not the web code or the browser.
With a progressive JPEG, the entire image loads very quickly, but initially in a blurry/pixelated form. Then as the rest of the data arrives, it sharpens up into the final image. I assume lazy loading has the advantage of working with other kinds of images too (and other media?) but, for ordinary JPEG photos, what advantage does it have over just using progressive JPEGs? That format has been very widely supported by every browser I know of for many years.
That’s a good feature in some use cases, but in forums it’s a hassle…
Interesting because the following article places the burden of lazy loading and its use on the website developer.
For example, just because a developer includes “loading” is his script, which I gather is all that is needed, and the browser uses “lazy loading” the results aren’t necessarily a “great” user experience.
The article covers more of what is needed for an optimal experience with lazy loading–tips for the developer:
https://imagekit.io/blog/lazy-loading-images-complete-guide/
What are you talking about? it is clearly a pussy cat
So now with Lazy loading I will have to wait 30min when loading a Google photos album ?
No. The image just won’t load while you’re not viewing it. If you scroll past it, it will load. Without lazy loading all the image on the page load at the same time.
It’s not perfect on Chrome I constantly get frustrated with lag especially at times when network traffic slows response time in fetching the content. It’s even worse on weak hardware that simply does not benefit from this sort of feature. What good is pre fetch then if nothing ever loads until your get to that part of page? Where is the advantage to this? I must be missing that ?
I have no idea what lazy loading is, but that lazily loaded sample image in the screenshot looks like something out of Japanese pr0n.
Image lazy loading is undeniably great, but if Google pushes for declarative infinite scroll next I’m going to flip a table.
Great for Dialup users and greedy companies.
Lazy loading is a disease killing the web.
Watching pages either jerk around or content flashing constantly as it comes into vision.
It is like a mental illness to watch sites load lazy. Especially when JPEGXL, HEIF, HEIC, AVIF and WEBP (already standard in every browser) allow to compress images even smaller with the same quality. And bandwidth gets cheaper each year as the CIX allow for more capacity and cheaper routing.
“Must save every fraction of a fraction of a cent!”
Sites that do this, I force non-lazy loading with custom userscripts or stop using them at all.
Stuff like that always kills me. It really does.
— Holden Caulfield, The Catcher in the Rye
@HoldenCaulfield, webp is cancer.
I disabled it & no website failed to load properly, UNTIL YouTube started to REQUIRE it on SOME of it’s thumbnails, so I was forced to enable webp if I wanted to see those thumbnails.
Lazy loading makes total sense. Not everyone is blessed with unlimited internet access (especially phone plans that limit data). Why would you want to download unnecessary resources that adds to your bandwidth problem?
If you don’t like lazy loading, turn it off, everything is customizable in Firefox.
@notanon
no, webp works fine in windows and linux out of the box
it has clear benefits if used right, i will embrace heic and avif over it though, but that is for the future
@techamok
“custom” written ones, for country specific sites i use, sorry that no solution for every website exists. i love coding userJS.
@HoldenCaulfield.
jpg works fine & it’s not created by Google.
No one wanted webp, except Google.
webp is superfluous, jpg is already the web standard & there’s nothing wrong with it.
Google actively supports censorship (censoring web searches for China, etc.), so I don’t want them to dictate web standards.
Hopefully, when Trump wins in 2020, & the U.S. House is controlled by Republicans, the Congress can pass legislation to end tech censorship by eliminating the safe harbor provision of the CDA.
If tech companies want to censor free speech, then eliminating the safe harbor in the CDA will allow everyone who is censored to file lawsuits in federal courts for monetary damages (every lawsuit could bring multi-million dollar judgements against companies like Google, Facebook, Twitter, the ADL, the SPLC, etc.
Jesus Christ gramps, go with the times. If you cannot see the ugly block artifacting in JPEG there is no help. Webp is a FLOSS free and open format.
Please leave your ugly politics out of this. Google is not a single person. Webp is developed by a team that got nothing to do with the search engine itself.
Your logic makes as much sense as saying every inhabitant of X is bad, because their leaders Y are bad.
Also I already mentioned JpegXL as alternative.
Hi,
What are the userscripts that you are using to block image lazy loading ? Interested in those to solve all of the jerky website problems that are present despite using a fast PC, and a fast Internet connection.
I must say that those are simply bad implemented sites, lazy loading is extremely useful but of course has the disadvantage that if done poorly the user exprience suffers. Hopefully with a native implementation everything will be optimized and taken care of by the browser, so no need to tweak anything during development.
The string “dom.image-lazy-loading.enabled” is present also on 74beta, on true the test is green on demo site.
But still I’m not sure if works effectively or not.
Every implementation has its own pros and cons, I’m really happy to see this natively supported however I’m also curious to see how well does it really perform or if it can be tweaked at all. I assume it will get better over time, but regardless this doesn’t necessarily remove the existing options.