Track lazyloaded images with JS above the fold#9
Merged
Conversation
Contributor
|
Lovely. I’ve also seen lazy loaded images with So probably also adding |
nucliweb
added a commit
that referenced
this pull request
Feb 12, 2026
Validate-Preload-Async-Defer-Scripts: - Add missing fetchpriority="low" to <link rel=preload> tag in Solution 1 This was a correctness bug - preload without fetchpriority="low" still escalates network priority even if script tag has fetchpriority="low" Prefetch-Resource-Validation (comprehensive improvements): Performance optimizations: - Pre-normalize all URLs once into a Map (eliminates O(N×M) URL parsing) - Use pre-built URL map for all matching operations - Remove redundant URL parsing in nested loops - Performance improvement: ~6000 URL objects → ~200 for typical cases New validations: - Detect invalid 'as' attribute values (typos like as="scriptt") - Detect duplicate prefetch hints (same URL prefetched multiple times) - Warn about large scripts (>1MB threshold, was missing) - Validate 'as' attribute against list of valid values Improved logic: - Better cache detection: distinguish "cached" vs "unknown (CORS)" Handles case where CORS blocks timing info (both sizes === 0) - Fixed inappropriateTypes to check scripts and provide detailed reasons - Optimized isCurrentPageResource check to use pre-built map - Added seenUrls Set to track duplicates Code quality: - Added validAsValues Set with all valid 'as' attribute values - Added THRESHOLDS.largeScriptSize (1MB) for script-specific checks - Better error messages with specific size/reason for inappropriateness - Comments explaining CORS edge cases and validation logic Documentation updates: - Added "Invalid as", "Duplicate prefetch" to issue categories table - Updated "Inappropriate type" description to mention scripts - Cache status can now show "unknown (CORS)" in output Addresses issues from comprehensive code review: - URL matching performance (#8, #9 from analysis) - Invalid 'as' validation (#7) - Duplicate detection (#14) - Large script detection (#4) - Cache detection for CORS (#3) - Current page detection optimization (#6)
nucliweb
added a commit
that referenced
this pull request
Feb 25, 2026
Track lazyloaded images with JS above the fold
nucliweb
added a commit
that referenced
this pull request
Feb 25, 2026
Validate-Preload-Async-Defer-Scripts: - Add missing fetchpriority="low" to <link rel=preload> tag in Solution 1 This was a correctness bug - preload without fetchpriority="low" still escalates network priority even if script tag has fetchpriority="low" Prefetch-Resource-Validation (comprehensive improvements): Performance optimizations: - Pre-normalize all URLs once into a Map (eliminates O(N×M) URL parsing) - Use pre-built URL map for all matching operations - Remove redundant URL parsing in nested loops - Performance improvement: ~6000 URL objects → ~200 for typical cases New validations: - Detect invalid 'as' attribute values (typos like as="scriptt") - Detect duplicate prefetch hints (same URL prefetched multiple times) - Warn about large scripts (>1MB threshold, was missing) - Validate 'as' attribute against list of valid values Improved logic: - Better cache detection: distinguish "cached" vs "unknown (CORS)" Handles case where CORS blocks timing info (both sizes === 0) - Fixed inappropriateTypes to check scripts and provide detailed reasons - Optimized isCurrentPageResource check to use pre-built map - Added seenUrls Set to track duplicates Code quality: - Added validAsValues Set with all valid 'as' attribute values - Added THRESHOLDS.largeScriptSize (1MB) for script-specific checks - Better error messages with specific size/reason for inappropriateness - Comments explaining CORS edge cases and validation logic Documentation updates: - Added "Invalid as", "Duplicate prefetch" to issue categories table - Updated "Inappropriate type" description to mention scripts - Cache status can now show "unknown (CORS)" in output Addresses issues from comprehensive code review: - URL matching performance (#8, #9 from analysis) - Invalid 'as' validation (#7) - Duplicate detection (#14) - Large script detection (#4) - Cache detection for CORS (#3) - Current page detection optimization (#6)
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Description
According to the 2022 Web Almanac, 9.8% of mobile pages with image-based LCP set loading=lazy on them. And 8,8% use custom lazy-loading.
The current snippet only tracks lazy-loaded images using the native
loading="lazy"attribute. Hence, it's only useful for 52% of mobile pages using any lazy-loading approach on LCP images.Proposed solution
With this update, the snippet also tracks lazy-loaded images via JS, looking for "data-src" attributes.
I've also updated the return statement to return an array with all the lazy-loaded elements or
falseif no image above the fold was lazy-loaded.