UA Sniffing issue: Outdated PageSpeed sending WebP images to Microsoft Edge
Monday, June 8th, 2015 at 8:36 pmPageSpeed by Google is a great way to add clever performance enhancements to your site without having to do a lot by hand. Not surprisingly, a lot of people used it when it came out. Sadly enough, people then don’t upgrade it when Google does which means there are a lot of sub-optimal installations out there.
This wouldn’t be an issue, if the old versions didn’t use user agent sniffing to try to detect a browser, which leads to a lot of false positives.
One of these false positives is that Microsoft Edge Mobile is detected as Chrome, which means that PageSpeed converts images to WebP. MS Edge does not support WebP, which is why you’ll have broken images:
The fix: upgrade PageSpeed
The fix is easy: just upgrade your PageSpeed to the latest version as the team moved on from UA Sniffing. There should not be any backwards compatibility issues. Upgrading can be done via package managers on Apache, but with NGINX, it requires compilation. Version 1.8 was the first version that turned on WebP transcoding by default. Version 1.9 fixed it by making sure it worked off of accept header rather than UA string.
How to test if your server does it right
If you want to test if a server does the right thing (which is using accept headers instead of UA sniffing), use MS Edge.
A quick and dirty way is also to change your user agent string to the following and surf to the site. This is effectively doing reverse sniffing, so it is OK to detect falsy detection scripts, but not a good idea to do real capability/interoperability testing.
Mobile UA String for Edge (please, don’t use for sniffing)
Mozilla/5.0 (Windows Phone 10; Android 4.2.1; Microsoft; NOKIA) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Mobile Safari/537.36 Edge/12.0
Desktop UA String for Edge (please, don’t use for sniffing)
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
You can do this in most developer tools (I use the User Agent Switcher extension in Firefox which is also available for Chrome). If you are on Windows/IE or MS Edge, you can go to the F12 developer tools and change the browser profile to “phone”.
Got it fixed? Thanks! Tell us so we can praise you
If you upgraded and fixed this interop issue, feel free to ping me or @MSEdgeDev and we’ll be happy! Let’s fix the web, one bad sniff at a time.