Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

default to decoding: async #996

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Conversation

sanjaiyan-dev
Copy link

@sanjaiyan-dev sanjaiyan-dev commented Sep 19, 2023

Hi, this PR aims to achieve a minor performance improvement by implementing the following changes:

  1. Making the decoding attribute in the image tag asynchronous (similar to Next.js - https://nextjs.org/docs/app/api-reference/components/image#other-props):
    • This change improves performance by allowing images to be decoded asynchronously, similar to how it's done in Next.js. As a result, the browser can continue rendering the page without waiting for all images to be fully loaded, leading to faster initial page rendering.

@danielroe
Copy link
Member

note that there is already a PR open for fetchpriority implementation: #989

@sanjaiyan-dev
Copy link
Author

sanjaiyan-dev commented Sep 20, 2023

note that there is already a PR open for fetchpriority implementation: #989

Hi @danielroe, and I apologize for adding fetchpriority I have now removed it. Sorry for the inconvenience :)

@sanjaiyan-dev sanjaiyan-dev changed the title Boosting Performance: Async Image Decoding and Resource Fetch Priority Optimization 🏎 Boosting Performance: Async Image Decoding 🏎 Sep 20, 2023
@danielroe danielroe changed the title Boosting Performance: Async Image Decoding 🏎 default to decoding: async Sep 29, 2023
@Tragio
Copy link
Contributor

Tragio commented Oct 7, 2023

@sanjaiyan-dev @danielroe I wonder if an image that has the preload prop shouldn't have decoding: sync 🤔

@sanjaiyan-dev
Copy link
Author

@sanjaiyan-dev @danielroe I wonder if an image that has the preload prop shouldn't have decoding: sync 🤔

@sanjaiyan-dev @danielroe I wonder if an image that has the preload prop shouldn't have decoding: sync 🤔

Hi @Tragio,

Sorry for the late response.

Actually, the preload attribute is related to speeding up the loading of the response, while the decoding attribute helps in handling image rendering by the browser. So, using decoding: async in conjunction with preload is okay.

I believe you may have confused it with the loading="lazy" attribute.

@pi0
Copy link
Member

pi0 commented Oct 24, 2023

Thanks for this PR. Is there any benchmark reference btw that enabling async decoding enables overall performance? I like to see it because changing browser defaults should usually have strong reasons specially for a default.

@sanjaiyan-dev
Copy link
Author

sanjaiyan-dev commented Oct 24, 2023

Thanks for this PR. Is there any benchmark reference btw that enabling async decoding enables overall performance? I like to see it because changing browser defaults should usually have strong reasons specially for a default.

I'm extremely sorry, but currently, I don't have any benchmark results. However, this is set as the default in Next.js and Astro js.

Here is an article about deciding asynchronously: link for the article.
Next js Documentation-: https://nextjs.org/docs/pages/api-reference/components/image#other-props

@pi0
Copy link
Member

pi0 commented Oct 24, 2023

Thanks for the links. I think i remember the article by addy from past from few years ago and i guess we also made an experiment with @farnabaz that at least ~2 years ago it wasn't a positive improvement for images that are expected to be in the initial viewport with async decoding.

I will check this with chrome team in this week.

@Tragio
Copy link
Contributor

Tragio commented Oct 29, 2023

@sanjaiyan-dev @danielroe I wonder if an image that has the preload prop shouldn't have decoding: sync 🤔

Hi @Tragio,

Sorry for the late response.

Actually, the preload attribute is related to speeding up the loading of the response, while the decoding attribute helps in handling image rendering by the browser. So, using decoding: async in conjunction with preload is okay.

I believe you may have confused it with the loading="lazy" attribute.

Yes, my question is if we are preloading an image is because we want to to render it as fast as possible, for example, to reduce LCP. So how would it be affected? If we are preloading and saying to the browser it is not very important to render?

If I'm not mistaken, Firefox is the only one that defaults to async. Safari only sets to async in some specific scenarios.

@sanjaiyan-dev
Copy link
Author

@sanjaiyan-dev @danielroe I wonder if an image that has the preload prop shouldn't have decoding: sync 🤔

Hi @Tragio,
Sorry for the late response.
Actually, the preload attribute is related to speeding up the loading of the response, while the decoding attribute helps in handling image rendering by the browser. So, using decoding: async in conjunction with preload is okay.
I believe you may have confused it with the loading="lazy" attribute.

Yes, my question is if we are preloading an image is because we want to to render it as fast as possible, for example, to reduce LCP. So how would it be affected? If we are preloading and saying to the browser it is not very important to render?

If I'm not mistaken, Firefox is the only one that defaults to async. Safari only sets to async in some specific scenarios.

Hi @Tragio,

The decoding attribute in HTML instructs the browser to decode images in parallel with content, in a separate thread. Currently, images are decoded along with the main thread, causing small disruptions in the UI. By using the decoding="async" attribute, it helps to render both content and images simultaneously, improving performance and reducing lag.

For more references, please visit: https://cloudinary.com/blog/guest_post/asynchronously-load-and-decode-images#html_code_lt_img_gt_code_decoding_attribute

@rylanharper
Copy link

rylanharper commented Nov 18, 2023

Hey everyone! Just checking in to see if this be implemented next release?

I actually posted an issue about page rendering issues with nuxt-img and nuxt-picture due to the :sizes attribute exceeding ~2400 here (there is literally a visual rendering issue). It seems by adding decoding="async" the issue is resolved on both local and live environments.. It is still somewhat finicky on pages with a lot of images (with a larger srcset values) since the v1.0.0 release, but the issue seems to be connected to decoding the image in parallel with the other page content. I know not many devs have their srcset sizes going past ~640, but its pretty common to have have srcsets going up to ~2400.

Anyways, I hope this can be merged next release

@rylanharper
Copy link

Hey @pi0, just checking on updates for this. Thanks!:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants