Firefox 75 gets lazy loading support for images and iframes - gHacks Tech News

ADVERTISEMENT

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

firefox lazy loading

Here is how you control lazy loading functionality in Firefox:

  1. Load about:config in the browser's address bar.
  2. Confirm that you will be careful if the intermediary warning page is displayed.
  3. Search for dom.image-lazy-loading.enabled.
  4. 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 test

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)

Summary
Firefox 75 gets lazy loading support for images and iframes
Article Name
Firefox 75 gets lazy loading support for images and iframes
Description
Mozilla plans to support lazy loading for images and iframes in Firefox 75 to reduce memory usage and speed up page loads.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

Previous Post: «
Next Post: »

Comments

  1. happysurf said on February 15, 2020 at 8:11 am
    Reply

    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.

    1. thebrowser said on February 15, 2020 at 10:06 am
      Reply

      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.

  2. HoldenCaulfield said on February 15, 2020 at 3:04 pm
    Reply

    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

    1. thebrowser said on February 15, 2020 at 4:09 pm
      Reply

      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.

    2. techamok said on February 16, 2020 at 8:45 am
      Reply

      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.

    3. notanon said on February 17, 2020 at 1:49 pm
      Reply

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

      1. HoldenCaulfield said on February 17, 2020 at 5:28 pm
        Reply

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

      2. notanon said on February 18, 2020 at 1:42 am
        Reply

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

      3. HoldenCaulfield said on February 18, 2020 at 3:34 pm
        Reply

        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.

  3. Anonymous said on February 15, 2020 at 3:30 pm
    Reply

    Image lazy loading is undeniably great, but if Google pushes for declarative infinite scroll next I’m going to flip a table.

    1. HoldenCaulfield said on February 17, 2020 at 5:29 pm
      Reply

      Great for Dialup users and greedy companies.

  4. Matti said on February 15, 2020 at 4:46 pm
    Reply

    I have no idea what lazy loading is, but that lazily loaded sample image in the screenshot looks like something out of Japanese pr0n.

  5. JohnIL said on February 15, 2020 at 5:22 pm
    Reply

    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 ?

  6. ilev said on February 15, 2020 at 6:06 pm
    Reply

    So now with Lazy loading I will have to wait 30min when loading a Google photos album ?

    1. Anonymous said on February 16, 2020 at 2:44 am
      Reply

      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.

  7. Salvini said on February 15, 2020 at 8:00 pm
    Reply

    What are you talking about? it is clearly a pussy cat

  8. VioletMoon said on February 15, 2020 at 10:10 pm
    Reply

    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/

  9. Anonymous said on February 16, 2020 at 2:45 am
    Reply

    That’s a good feature in some use cases, but in forums it’s a hassle…

  10. Jonas said on February 16, 2020 at 7:49 am
    Reply

    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.

  11. Anonymous said on February 16, 2020 at 11:57 am
    Reply

    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.

    1. Yuliyas_Wifes_Boyfriend said on February 16, 2020 at 3:21 pm
      Reply

      It already exists. try any modern website that loads content dynamically bruh.

  12. Jeff said on February 21, 2020 at 8:41 am
    Reply

    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.

  13. why said on February 25, 2020 at 10:14 pm
    Reply

    this combined with infinite scrolling is how you get a terrible experience

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.