diff --git a/plugins/optimization-detective/class-od-link-collection.php b/plugins/optimization-detective/class-od-link-collection.php index 7391711cff..cb7d3a4817 100644 --- a/plugins/optimization-detective/class-od-link-collection.php +++ b/plugins/optimization-detective/class-od-link-collection.php @@ -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 + * 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 , the HTML + * 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: diff --git a/plugins/optimization-detective/tests/test-class-od-link-collection.php b/plugins/optimization-detective/tests/test-class-od-link-collection.php index 4c5e538686..a87c59507a 100644 --- a/plugins/optimization-detective/tests/test-class-od-link-collection.php +++ b/plugins/optimization-detective/tests/test-class-od-link-collection.php @@ -37,7 +37,7 @@ public function data_provider_to_test_add_link(): array { 'expected_html' => ' ', - 'expected_header' => 'Link: ; 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: ; rel="preload"; crossorigin="anonymous"; fetchpriority="high"; as="image"; media="screen"; integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"; referrerpolicy="origin"; type="image/jpeg"', 'expected_count' => 1, 'error' => '', ), @@ -56,7 +56,7 @@ public function data_provider_to_test_add_link(): array { 'expected_html' => ' ', - 'expected_header' => 'Link: ; 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: ; rel="preload"; as="image"; media="screen"', 'expected_count' => 1, 'error' => '', ), @@ -268,7 +268,7 @@ public function data_provider_to_test_add_link(): array { 'expected_html' => ' ', - 'expected_header' => 'Link: ; 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: ; rel="preload"; as="image"; fetchpriority="high"; crossorigin="anonymous"', 'expected_count' => 1, 'error' => '', ), @@ -469,7 +469,7 @@ public function data_provider_to_test_add_link(): array { 'expected_html' => ' ', - 'expected_header' => 'Link: ; 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: ; rel="preload"; as="image"', 'expected_count' => 1, 'error' => '', ),