Skip to content

Exclude imagesrcset links from Link response header#2578

Open
faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:fix/2304-image-preload-link-header-size
Open

Exclude imagesrcset links from Link response header#2578
faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:fix/2304-image-preload-link-header-size

Conversation

@faisalahammad

@faisalahammad faisalahammad commented Jul 12, 2026

Copy link
Copy Markdown

Summary

Fixes #2304

Relevant technical choices

  • OD_Link_Collection::get_response_header() now excludes any link with imagesrcset set (responsive image preloads) from the Link: HTTP response header. These links already get an HTML <link rel="preload" imagesrcset="..." ...> tag unconditionally via get_html(), so no functionality is lost — the responsive preload just moves to HTML-only delivery.
  • Non-responsive preload links (plain href, e.g. video posters, background images) are unaffected and still go into both the header and the HTML.
  • No changes needed in Image Prioritizer or any other extension plugin: they only call $context->link_collection->add_link() with attributes; the header/HTML emission choice is made entirely in this one method in Optimization Detective.
  • Root cause: responsive image preloads with long/non-ASCII filenames and multiple srcset variants can push the combined response header size past common reverse-proxy limits (Nginx/Apache default buffers), causing intermittent 502 Bad Gateway errors — worse for logged-in users where cookies add to the header total.
  • Per the maintainer's guidance on the issue, citing web.dev's preload responsive images guidance: responsive image preloads should use <link rel="preload"> elements rather than Link: response headers.
  • Scope: intentionally limited to this header/HTML behavior. A separate idea from the issue thread (repositioning preload <link> tags to right after <meta charset>/<title> in <head>) is left as a possible follow-up, not included here.

How to test

  1. Enable Image Prioritizer + Optimization Detective on a page with a large responsive image (srcset/sizes, ideally long/non-ASCII filename) detected as the LCP element.
  2. Visit the page uncached (e.g. logged in as admin).
  3. Inspect response headers — confirm no Link: ...imagesrcset=... entry.
  4. View page source — confirm the <link rel="preload" imagesrcset="..." ...> tag is still present in <head> and the image still loads with priority.

Testing already done

  • npm run phpstan — clean
  • composer lint:optimization-detective (phpcs) — clean
  • coderabbit review --agent — 0 findings on changed files
  • Updated/added PHPUnit cases in test-class-od-link-collection.php covering the excluded-from-header behavior

Use of AI Tools

Confirmed I've used Claude AI to generate this PR. Claude Code was used for the full workflow: investigating the issue and root cause across optimization-detective and image-prioritizer, drafting and implementing the fix, updating tests, and running lint/static analysis. I reviewed the diff, the reasoning, and the test changes, and take responsibility for the change as submitted.

Responsive image preloads (imagesrcset/imagesizes) can make the Link
response header exceed reverse-proxy header size limits, causing
intermittent 502s. These links already get an HTML <link rel=preload>
tag unconditionally, so exclude them from the Link header and rely on
the HTML tag instead.

Refs WordPress#2304
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: faisalahammad <faisalahammad@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: ttwrpz <sigmarubyz@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added the [Plugin] Optimization Detective Issues for the Optimization Detective plugin label Jul 12, 2026
@codecov

codecov Bot commented Jul 12, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 70.31%. Comparing base (bc9e349) to head (7acc2c2).

Files with missing lines Patch % Lines
...ptimization-detective/class-od-link-collection.php 75.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##            trunk    #2578      +/-   ##
==========================================
- Coverage   70.35%   70.31%   -0.05%     
==========================================
  Files          91       91              
  Lines        7867     7858       -9     
==========================================
- Hits         5535     5525      -10     
- Misses       2332     2333       +1     
Flag Coverage Δ
multisite 70.31% <75.00%> (-0.05%) ⬇️
single 35.21% <0.00%> (+0.04%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@faisalahammad

Copy link
Copy Markdown
Author

@westonruter Closing #2572 as a duplicate of this PR. This one fully excludes imagesrcset links from the Link response header (HTML <link rel="preload" imagesrcset="…" imagesizes="…"> only), which matches your feedback on #2304 and the web.dev guidance more cleanly than the strip-attrs residual-header approach on #2572.

Ready for review when you have a moment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Plugin] Optimization Detective Issues for the Optimization Detective plugin

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image Prioritizer causes 502 Bad Gateway due to oversized Link response headers (Nginx reverse proxy)

1 participant