Optimised images defined using srcset and parameters not used in tests

Hi there,

We use Contentful CDN to optimise images dynamically based on viewport and browser. One of the enhancements we have is WebP if the browser supports it. The enhancements are added using parameters at the end of the image URL, which is usually a JPG.

It appears that the Webpagetest waterfall view only displays information for the jpg images, even if a test browser is selected which supports webp. The image asset used by Webpagetest is the fallback (jpeg) image and it hasn’t been been resized. An example test is here:

The optimised URL for the main product image I can see in Chrome on this page is: https://images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=550&fm=webp

and the one shown in the waterfall view is: https://images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=1750

Thanks in advance for any help & advice.

How are you detecting the browsers that support WebP? I’m going to go out on a limb and assume it is by UA-sniffing on the server for the HTML request. If so, your UA matching logic isn’t dealing well with the PTST/xxxx that WebPageTest adds to the end of the browser UA string by default.

In the advanced settings you can “Preserve UA string” to use the unmodified UA string but I’d recommend to not use sniffing and use the picture element (responsive images) and let the browser pick: Using WebP Images | CSS-Tricks - CSS-Tricks

Thanks for the fast moderation and reply. I’ve been looking at this (please bear in mind I’m a Business Analyst, not a developer) and it appears we are using the element. Even with preserving the original user agent it appears that the jpg images are being displayed, not webp.

Here is the snip of code used to display the image used in the above example (no trade secrets, this comes from Chrome Dev Tools). The only bit I’ve edited is to put “HTTP:” in front of each image URL so it will work locally. I saved this snip as an HTML file and have been able to run it locally and see a WebP image displayed in Chrome, and a JPEG in IE so this removes any user agent sniffing from our code base (I don’t know how the hosted image solution, Contentful, might work).

<picture class="c-picture">
<source srcset="http://images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=550&fm=webp" type="image/webp">
<img alt="Lydia Culotte Jumpsuit in Black/Cream by Bravissimo Dresses " src="http://images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=550" class="c-image">
</picture>

Here’s the link to the test with ‘Preserve original user agent’ set. WebPageTest - Running web page performance and optimization tests...

I ran a test that captures the delivered HTML response bodies (with preserve UA string): WebPageTest Test - WebPageTest Details

The actual HTML is here: https://www.webpagetest.org/response_body.php?test=200811_VP_548ef5cefbedee003ec26875d59fa75d&run=1&bodyid=28304CF85CE04C83EB13047332F56CE2

I’m not seeing a picture element in the HTML. There is a bunch of react stuff that has the jpeg urls and some actual images in div’s:

                        <div class="visually-hidden" itemscope="" itemType="http://schema.org/Product"><span
                                itemProp="name">Lydia Culotte Jumpsuit </span><span itemProp="brand">Bravissimo
                                Clothing</span><a
                                href="https://www.bravissimo.com/products/lydia-culotte-jumpsuit-pd859/"
                                itemProp="url">https://www.bravissimo.com/products/lydia-culotte-jumpsuit-pd859/</a><img
                                itemProp="image"
                                src="//images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=550"
                                alt="//images.ctfassets.net/bz0fvtkbk5r1/1RTV7epqaHfVe9hr1xOCfg/dd427dae55c6d6f208065f32da2bb865/PD859BCR-main.jpg?q=80&w=550" />

Is it possible that you are testing a dev version that isn’t being served to users or a cached version of a previous version of the code is stuck in your edge cache?

Thanks for the hint and I’ve now looked at this at with the Dev Team Leader for the website. The HTML won’t have the code in for WebP because of some of the features we have on the site such as client-side rendering so the responsive images and lazy loading are called from Javascript.

This is definitely the production website (when I’m testing I’m at home and not even on the VPN), the URL I’ve been running these tests against is this one: https://www.bravissimo.com/products/lydia-culotte-jumpsuit-pd859/ If you use the browser to view the sourcecode (HTML) you’re right there’s no picture element or references to webp, but looking at the same page using something like ‘inspect element’ in Chrome shows the complete code (on which I based the snippet in my previous post).

Well, that explains it. Must be server-side rendered react or something like that. Unfortunately that gives you the worst of both worlds. The browser will download and render the images defined in the HTML and then when the page is “hydrated” (the Javascript runs), it swaps out the images for the picture elements and…wait for it… the browser then ALOS downloads the webp images.

You can see this happen around request 42 in the waterfall where the webp versions of the images are downloaded: WebPageTest Test - WebPageTest Details

Thanks very much again - I hadn’t even seen on the trace that Jpeg AND WebP images were being delivered so I’ll investigate that today.