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

Set fetchpriority to low if image is in the initial viewport #1320

Closed
wants to merge 2 commits into from
Closed

Set fetchpriority to low if image is in the initial viewport #1320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e158d3
Set fetchpriority to low if image is in the initial viewport but is n…
devansh016 Jun 25, 2024
6df9477
Update testcase for fetchpriority low in inital viewpoint and not vis…
devansh016 Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ public function __invoke( OD_HTML_Tag_Walker $walker ): bool {
} elseif ( ! $is_visible && 'lazy' !== $loading ) {
$walker->set_attribute( 'loading', 'lazy' );
}
// If the element is not visible in the initial viewport, set fetchpriority to low.
if ( ! $is_visible ) {
$walker->set_attribute( 'fetchpriority', 'low' );
}
}
// TODO: If an image is visible in one breakpoint but not another, add loading=lazy AND add a regular-priority preload link with media queries (unless LCP in which case it should already have a fetchpriority=high link) so that the image won't be eagerly-loaded for viewports on which it is not shown.

Expand Down
6 changes: 3 additions & 3 deletions plugins/image-prioritizer/tests/test-helper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,9 @@ public function data_provider_test_filter_tag_walker_visitors(): array {
<p>Pretend this is a super long paragraph that pushes the next image mostly out of the initial viewport.</p>
<img data-od-removed-fetchpriority="high" data-od-removed-loading="lazy" src="https://example.com/bar.jpg" alt="Bar" width="10" height="10" >
<p>Now the following image is definitely outside the initial viewport.</p>
<img data-od-added-loading data-od-removed-fetchpriority="high" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" >
<img data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" loading="lazy">
<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
<img data-od-added-fetchpriority data-od-added-loading data-od-removed-fetchpriority="high" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" fetchpriority="low">
<img data-od-added-fetchpriority data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" fetchpriority="low" loading="lazy">
<img data-od-added-fetchpriority fetchpriority="low" src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->
</body>
</html>
',
Expand Down
Loading