Embed Optimizer: Switch cross-origin embeds from preconnect to dns-pr…

[dhruvang21]

Summary

Fixes #2247

Relevant technical choices

• Added a embed_optimizer_use_preconnect filter for flexibility.
• Default: use preconnect for same-origin, dns-prefetch for third-party.
• Verified in Chrome DevTools that fewer unnecessary preconnects occur.

[github-actions]

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: dhruvang21 <dhruvang21@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org>

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

[westonruter]

Thanks for the PR.

I left some feedback.

Note that for the unit test failures, you'll need to update the snapshots. You can do this by first running all the unit tests locally, for example via npm run test-php and then update the snapshots via npm run update-test-case-snapshots. At this point, you should be able to do npm run test-php again, and the tests should pass. You can then commit all the HTML file updates.

[dhruvang21]

@westonruter i did run command npm run test-php but it throws this error

RequestError
    at ClientRequest.<anonymous> (/var/www/wp-performance/wp-content/performance/node_modules/got/dist/source/core/index.js:970:111)
    at Object.onceWrapper (node:events:635:26)
    at ClientRequest.emit (node:events:532:35)
    at origin.emit (/var/www/wp-performance/wp-content/performance/node_modules/@szmarczak/http-timer/dist/source/index.js:43:20)
    at emitErrorEvent (node:_http_client:103:11)
    at TLSSocket.socketErrorListener (node:_http_client:506:5)
    at TLSSocket.emit (node:events:520:28)
    at emitErrorNT (node:internal/streams/destroy:170:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:90:21)AggregateError [ETIMEDOUT]: 
    at internalConnectMultiple (node:net:1117:18)
    at internalConnectMultiple (node:net:1185:5)
    at Timeout.internalConnectMultipleTimeout (node:net:1711:5)
    at listOnTimeout (node:internal/timers:596:11)
    at process.processTimers (node:internal/timers:529:7) {
  code: 'ETIMEDOUT',
  timings: {
    start: 1762327934784,
    socket: 1762327934784,
    lookup: 1762327934809,
    connect: undefined,
    secureConnect: undefined,
    upload: undefined,
    response: undefined,
    end: undefined,
    error: 1762327935060,
    abort: undefined,
    phases: {
      wait: 0,
      dns: 25,
      tcp: undefined,
      tls: undefined,
      request: undefined,
      firstByte: undefined,
      download: undefined,
      total: 276
    }
  }
}

[westonruter]

i did run command npm run test-php but it throws this error

@dhruvang21 Did you follow the setup steps on the handbook page?

[dhruvang21]

@westonruter yes

[westonruter]

OK, I'm not sure why it's not working for you. I've updated the snapshots in 16fa2b8

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.86%. Comparing base (f7846e4) to head (0f8f3f2).
⚠️ Report is 4 commits behind head on trunk.

Additional details and impacted files

@@           Coverage Diff           @@
##            trunk    #2256   +/-   ##
=======================================
  Coverage   68.86%   68.86%           
=======================================
  Files          90       90           
  Lines        7610     7610           
=======================================
  Hits         5241     5241           
  Misses       2369     2369           

Flag	Coverage Δ
multisite	68.86% <100.00%> (ø)
single	35.47% <0.00%> (ø)

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

☔ View full report in Codecov by Sentry.
📢 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.

[westonruter]

Based on @peterwilsoncc's comment, it seems I was overly aggressive in the switch to dns-prefeth. There would still be value to have some preconnect links, when they are used directly on the page and not exclusively in an iframe.

[dhruvang21]

@westonruter how should we move further here?