Fix handling IMG tags with JS-based lazy-loading #1785
Draft
+137
−94
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
westonruter
added
[Type] Bug
westonruter
commented
Jan 9, 2025
| return false; | ||
| } | ||
|
|
||
| // Abort if the srcset is a data: URL since there is nothing to optimize. |
There was a problem hiding this comment.
Well, there could be something to optimize. We can't preload the URL, but we could still add fetchpriority=high to the IMG.
westonruter
commented
Jan 9, 2025
| @@ -53,13 +97,21 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool { | |||
| * @return bool Whether the tag should be tracked in URL Metrics. | |||
| */ | |||
| private function process_img( OD_HTML_Tag_Processor $processor, OD_Tag_Visitor_Context $context ): bool { | |||
| $src = $this->get_valid_src( $processor ); | |||
| if ( null === $src ) { | |||
| if ( ! $this->is_img_with_valid_src_and_srcset( $processor ) ) { | |||
There was a problem hiding this comment.
As noted below, this may be too conservative. We could still process this IMG. It's just we would skip any parts related to preloading the src or srcset.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## trunk #1785 +/- ##
==========================================
+ Coverage 57.43% 57.52% +0.08%
==========================================
Files 84 84
Lines 6508 6519 +11
==========================================
+ Hits 3738 3750 +12
+ Misses 2770 2769 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
On quite a few sites I found JS-based lazy-loading causing problems with Image Prioritizer. In particular, the Avada theme's Fusion Images lazy-loading functionality replaces
srcsetwithdata-srcsetbut it doesn't change thesrc, for example:This was resulting in an erroneous preload link being added, in particular the
imagesrcsetis pointing to adata:URL:So this PR adds checks to make sure that if an
IMGhas such asrcsetit is also excluded from processing.In a future PR we could consider undoing such JS-based lazy-loading, rewriting
data-srctosrc,data-srcsetback tosrcsetand so on, and then to process theIMGas normal. This would have a dramatic improvement to LCP especially when the such JS-based lazy-loading is being done for images in the initial viewport, especially for anIMGwhich is the LCP element. See #1746.