wp-rocket icon indicating copy to clipboard operation
wp-rocket copied to clipboard

OCI: when using a CDN that's a subdomain cdn.site.com, imagesrcset urls inside preload tag are not replaced to use the CDN cname

Open alfonso100 opened this issue 1 year ago • 9 comments

Before submitting an issue please check that you’ve completed the following steps: yes - Made sure you’re on the latest version yes - Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug When the CDN is a subdomain of the site url, for example cdn.wphangar.com and we inject the OCI markup, the CDN replacement won’t be applied to the imagesrcset images, only to the href image:

CDN setting: cdn.wphangar.com

LCP entry in the DB: {"type":"img-srcset","src":"https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg","srcset":"https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg 1024w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-600x400.jpg 600w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-300x200.jpg 300w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-768x512.jpg 768w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341.jpg 1152w","sizes":"(max-width: 1024px) 100vw, 1024px"}

resulting markup: <link rel="preload" data-rocket-preload as="image" href="https://cdn.wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg" imagesrcset="https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg 1024w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-600x400.jpg 600w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-300x200.jpg 300w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-768x512.jpg 768w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341.jpg 1152w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">

To Reproduce Steps to reproduce the behavior:

  1. manually add the LCP entry in the db for a URL
  2. Set the CDN to use cdn.siteurl.com
  3. see the imagesrcset URLs not replaced in the preload tag

Expected behavior we should replace all the URLs when the CDN is used

Additional context

Slack thread: https://wp-media.slack.com/archives/C072P5EU5DF/p1725644143674919

Tickets: https://secure.helpscout.net/conversation/2700575552/511133/ https://secure.helpscout.net/conversation/2698303805/510752/

Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming

alfonso100 avatar Sep 06 '24 20:09 alfonso100

This is apparently not limited to CDNs that are subdomains of the origin domain, as I've got another case where the SRCSET is also not being written to the CDN, but the domain is third-party hosted:

TICKET: https://secure.helpscout.net/conversation/2708093350/512378/ SITE: https://www.ciotalknetwork.com/ CDN: https://eweajxggxf5.exactdn.com/

girlie avatar Sep 16 '24 16:09 girlie

In this case, on a site that is using Cloudflront, OCI is fetching the image from the site instead of Cloudfront. HS ticket: https://secure.helpscout.net/conversation/2775294808/526519

viobru avatar Nov 27 '24 22:11 viobru

I have what seems to be this same issue with one variation: the CDN isn't being applied to the HREF either, as this example shows:

<link rel="preload" data-rocket-preload as="image" href="https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-600x450.jpg" imagesrcset="https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-600x450.jpg 600w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-300x225.jpg 300w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-1024x768.jpg 1024w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-150x113.jpg 150w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-768x576.jpg 768w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-1536x1152.jpg 1536w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900.jpg 1600w" imagesizes="(max-width: 600px) 100vw, 600px" fetchpriority="high">

TICKET: https://secure.helpscout.net/conversation/2843323978/539694?viewId=1061330 SITE URL: https://www.aucoeurdujeu.fr/kidyalarm-melon-9900 CDN: https://static.aucoeurdujeu.fr/ SLACK: https://wp-media.slack.com/archives/C08N8J6VC/p1739204945346459

girlie avatar Feb 11 '25 19:02 girlie

Related: https://secure.helpscout.net/conversation/2849118557/540764

  • Is the same as the case just above - both href and imagesrcset are wrongly not using the CDN domain.

joejoe04 avatar Feb 18 '25 16:02 joejoe04

How/when will this issue be planned for a fix please?

mickboud2 avatar Feb 24 '25 19:02 mickboud2

Another case that's the same as the last two: https://secure.helpscout.net/conversation/2902968886/552387/

girlie avatar Apr 09 '25 15:04 girlie

another case here: https://secure.helpscout.net/conversation/3044180067/581504?viewId=2683093#thread-9282125574

alfonso100 avatar Aug 26 '25 21:08 alfonso100

Another case: https://secure.helpscout.net/conversation/3079703257/587367

suzoutlet avatar Sep 25 '25 07:09 suzoutlet

And another: https://secure.helpscout.net/conversation/3102045586/591322

girlie avatar Oct 08 '25 18:10 girlie