Optimizely DXP is a cloud-first approach to customer engagement including high availability and performance, easy connectivity with other cloud services and existing systems, ability to manage spikes in customer demand, and a platform that is ready to seamlessly adopt the latest technology updates.
Optimizely DXP also includes a Content Delivery Network provided by Cloudflare for performance and security optimization.
I want to focus upon the optimization side of Cloudflare, more specifically image optimization.
Cloudflare has 3 products to help with image optimization, Cloudflare Image, Cloudflare Image Resizing, Cloudflare Polish. For the purpose of this post I will focus on Cloudflare Polish as this is enabled by default in Optimizely DXP, you can read more about the other products here.
Cloudflare polish automatically optimizes images upon your site whenever is is fetched from you site.
Whenever you make the first request to retrieve and image you will notice within the headers the 'cf-cache-status' will be set to 'MISS'. Cloudflare is telling us it tried to retrieve the image from cache, however it did not find it and so requested it from the origin.
If you were to wait a few seconds and refresh the image you will notice that the 'cf-cache-status' is now 'HIT'.
To confirm that Polish has been applied we can check the 'cf-bgj' header returns the image quality setting 'imgq'. We can also check the 'cf-polished' header to confirm Polish status and returns the image quality setting (qual) and original size (origSize).
The above headers can confirm that polish is working working, however we can do better and ensure that images are being served in next generation format. To do this we can review the 'content-type' header and ensure this is returning 'image/webp', comparing this to the 'cf-polished' original format (origFmt) we can see the original format of the image was png and has been converted to webp.
While Cloudflare Polish automatically optimizes images, it will only optimize the image if the webp image is smaller than the original image.
If we review the below 'cf-polished' header below. We can see the status is set to 'webp_bigger' this is informing us that the image optimization on this image would provide no benefit.
Hopefully someone else finds this information useful. If you have any questions please drop a comment below.
Top comments (2)
To bad they don't support responsive images yet though. Would have been nice to use it together with srcset.
I've already covered this quite thoroughly already here world.optimizely.com/blogs/scott-r...