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.

Sign up for GitHub

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

Jump to bottom

new_audit: flag if a resource is both preloaded and lazy-loaded #9516

Open
Malvoz opened this issue Aug 6, 2019 · 4 comments
Open

new_audit: flag if a resource is both preloaded and lazy-loaded #9516

Malvoz opened this issue Aug 6, 2019 · 4 comments
Labels
needs-complete-audit-proposal https://github.com/GoogleChrome/lighthouse/blob/master/docs/new-audits.md new_audit P2

Comments

@Malvoz
Copy link
Contributor

Malvoz commented Aug 6, 2019 •
edited
Loading

Consider:

<head>
  <link rel="preload" href="../image.png" as="image">
</head>
<body>
  ...
  <img src="../image.png" loading="lazy">

This is probably a developer mistake as it indicates both to preload and to defer the loading of the content which is contradictory, should Lighthouse care to warn in this case?

Currently lazy-loading is only applicable to <img> and <iframe> but I suspect other things will be added in the future, perhaps background-images, video poster, SVG <image> and <portal>.
@patrickhulce patrickhulce added needs-complete-audit-proposal https://github.com/GoogleChrome/lighthouse/blob/master/docs/new-audits.md needs-priority new_audit labels Aug 6, 2019
@Malvoz Malvoz mentioned this issue Oct 23, 2019
Closed
@paulirish
Copy link
Member

Sounds good to me. We don't know how common this is, but seems nice to have as a doublecheck.

@yoavweiss can you think of any valid reason to preload something that's set to loading=lazy?

@paulirish paulirish changed the title Warn if a resource is both preloaded and lazy-loaded? new_audit: flag if a resource is both preloaded and lazy-loaded May 26, 2020
@yoavweiss
Copy link

Not really. Seems fair to warn against it

@rockeynebhwani
Copy link

rockeynebhwani commented Oct 30, 2020 •
edited
Loading

Does the same principle apply on a JS resource which is pre-loaded but at the same time uses 'defer'? Live example on https://groceries.asda.com/

<link rel="preload" href="/browse_app_assets/js/bundle.vendor.154e50d4344c65592245.js" as="script"/>

<script defer="defer" src="/browse_app_assets/js/bundle.vendor.154e50d4344c65592245.js">

@patrickhulce
Copy link
Collaborator

patrickhulce commented Oct 30, 2020 •
edited
Loading

Does the same principle apply on a JS resource which is pre-loaded but at the same time uses 'defer'? Live example on https://groceries.asda.com/

I wouldn't think so @rockeynebhwani. defer is not an intentional lazy signal from the developer for the browser to load this script much later on the network side of things, it's mostly a contract about whether the document can be parsed before executing this script. If this defer script is discovered later via document.write or some other mechanism, it could still make sense to preload it (though with most situations that come to mind I wonder if defer is even having any effect at all).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs-complete-audit-proposal https://github.com/GoogleChrome/lighthouse/blob/master/docs/new-audits.md new_audit P2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@paulirish @yoavweiss @rockeynebhwani @patrickhulce @Malvoz