Skip to content

Skip oversized Link preload header in Optimization Detective #2572

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

Closed
faisalahammad wants to merge 2 commits into from
+15 −25
Closed

Skip oversized Link preload header in Optimization Detective #2572

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
d488736
fix(optimization-detective): skip oversized Link preload header
faisalahammad Jul 5, 2026
381aaf8
fix(optimization-detective): omit imagesrcset/imagesizes from Link he…
faisalahammad Jul 12, 2026
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
32 changes: 11 additions & 21 deletions plugins/optimization-detective/class-od-link-collection.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,32 +270,22 @@ public function get_response_header(): ?string {
if ( isset( $link['href'] ) ) {
$link['href'] = $this->encode_url_for_response_header( $link['href'] );
} else {
// The about:blank is present since a Link without a reference-uri is invalid so any imagesrcset would otherwise not get downloaded.
// The about:blank is present since a Link without a reference-uri is invalid.
$link['href'] = 'about:blank';
}

// Encode the URLs in the srcset.
if ( isset( $link['imagesrcset'] ) ) {
$link['imagesrcset'] = join(
', ',
array_map(
function ( $image_candidate ) {
// Parse out the URL to separate it from the descriptor.
$image_candidate_parts = (array) preg_split( '/\s+/', (string) $image_candidate, 2 );

// Encode the URL.
$image_candidate_parts[0] = $this->encode_url_for_response_header( (string) $image_candidate_parts[0] );

// Re-join the URL with the descriptor.
return implode( ' ', $image_candidate_parts );
},
(array) preg_split( '/\s*,\s*/', $link['imagesrcset'] )
)
);
}

$link_header = '<' . $link['href'] . '>';
unset( $link['href'] );

/*
* Omit imagesrcset/imagesizes from the Link response header. These are only relevant to the HTML
* <link> tag (see get_html()) and are the primary contributor to oversized headers when responsive
* images have long or non-ASCII srcset URLs across multiple viewport breakpoints, which can cause
* some reverse proxies (e.g. Nginx) to reject the response with "upstream sent too big header".
* Per <https://web.dev/articles/preload-responsive-images#imagesrcset-imagesizes>, the HTML <link>
* element is the recommended way to preload responsive images anyway.
*/
unset( $link['imagesrcset'], $link['imagesizes'] );
foreach ( $link as $name => $value ) {
/*
* Escape the value being put into an HTTP quoted string. The grammar is:
Expand Down
8 changes: 4 additions & 4 deletions plugins/optimization-detective/tests/test-class-od-link-collection.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ public function data_provider_to_test_add_link(): array {
'expected_html' => '
<link data-od-added-tag rel="preload" href="https://example.com/foo.jpg" imagesrcset="https://example.com/foo-400.jpg 400w, https://example.com/foo-800.jpg 800w" imagesizes="100vw" crossorigin="anonymous" fetchpriority="high" as="image" media="screen" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" referrerpolicy="origin" type="image/jpeg">
',
'expected_header' => 'Link: <https://example.com/foo.jpg>; rel="preload"; imagesrcset="https://example.com/foo-400.jpg 400w, https://example.com/foo-800.jpg 800w"; imagesizes="100vw"; crossorigin="anonymous"; fetchpriority="high"; as="image"; media="screen"; integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"; referrerpolicy="origin"; type="image/jpeg"',
'expected_header' => 'Link: <https://example.com/foo.jpg>; rel="preload"; crossorigin="anonymous"; fetchpriority="high"; as="image"; media="screen"; integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"; referrerpolicy="origin"; type="image/jpeg"',
'expected_count' => 1,
'error' => '',
),
Expand All @@ -56,7 +56,7 @@ public function data_provider_to_test_add_link(): array {
'expected_html' => '
<link data-od-added-tag rel="preload" imagesrcset="https://example.com/foo-400.jpg 400w, https://example.com/foo-800.jpg 800w" imagesizes="(max-width: 600px) 480px, 800px" as="image" media="screen">
',
'expected_header' => 'Link: <about:blank>; rel="preload"; imagesrcset="https://example.com/foo-400.jpg 400w, https://example.com/foo-800.jpg 800w"; imagesizes="(max-width: 600px) 480px, 800px"; as="image"; media="screen"',
'expected_header' => 'Link: <about:blank>; rel="preload"; as="image"; media="screen"',
'expected_count' => 1,
'error' => '',
),
Expand Down Expand Up @@ -268,7 +268,7 @@ public function data_provider_to_test_add_link(): array {
'expected_html' => '
<link data-od-added-tag rel="preload" href="https://example.com/bar.jpg" as="image" fetchpriority="high" imagesrcset="https://example.com/&quot;bar&quot;-480w.jpg 480w, https://example.com/&quot;bar&quot;-800w.jpg 800w" imagesizes="(max-width: 600px) 480px, 800px" crossorigin="anonymous">
',
'expected_header' => 'Link: <https://example.com/bar.jpg>; rel="preload"; as="image"; fetchpriority="high"; imagesrcset="https://example.com/%22bar%22-480w.jpg 480w, https://example.com/%22bar%22-800w.jpg 800w"; imagesizes="(max-width: 600px) 480px, 800px"; crossorigin="anonymous"',
'expected_header' => 'Link: <https://example.com/bar.jpg>; rel="preload"; as="image"; fetchpriority="high"; crossorigin="anonymous"',
'expected_count' => 1,
'error' => '',
),
Expand Down Expand Up @@ -469,7 +469,7 @@ public function data_provider_to_test_add_link(): array {
'expected_html' => '
<link data-od-added-tag href="https://example.com/wp-content/uploads/2025/02/البيسون-1024x668-jpg.webp" rel="preload" as="image" imagesizes="(width &lt;= 480px) 316px, (480px &lt; width &lt;= 600px) 489px, (600px &lt; width &lt;= 782px) 644px, (782px &lt; width) 644px" imagesrcset="https://example.com/wp-content/uploads/2025/02/البيسون-1024x668-jpg.webp 1024w, https://example.com/wp-content/uploads/2025/02/البيسون-300x196-jpg.webp 300w, https://example.com/wp-content/uploads/2025/02/البيسون-768x501-jpg.webp 768w, https://example.com/wp-content/uploads/2025/02/البيسون-1536x1002-jpg.webp 1536w, https://example.com/wp-content/uploads/2025/02/البيسون-2048x1336-jpg.webp 2048w">
',
'expected_header' => 'Link: <https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-1024x668-jpg.webp>; rel="preload"; as="image"; imagesizes="(width <= 480px) 316px, (480px < width <= 600px) 489px, (600px < width <= 782px) 644px, (782px < width) 644px"; imagesrcset="https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-1024x668-jpg.webp 1024w, https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-300x196-jpg.webp 300w, https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-768x501-jpg.webp 768w, https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-1536x1002-jpg.webp 1536w, https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-2048x1336-jpg.webp 2048w"',
'expected_header' => 'Link: <https://example.com/wp-content/uploads/2025/02/%D8%A7%D9%84%D8%A8%D9%8A%D8%B3%D9%88%D9%86-1024x668-jpg.webp>; rel="preload"; as="image"',
'expected_count' => 1,
'error' => '',
),
Expand Down
Loading