As humans we often trust a product or tool, and innocently believe it works as expected. However, in today’s complex web world with multiple factors at play and products changing on daily basis, this trust could turn into a big blind spot.
Two of the most popular dynamic page optimization solutions are Google’s PageSpeed products, one a module for Apache, the other an online service.
Consider the following HTML:
This results in the following in the network panel in Chrome devtools:
The lesson here is that when making changes to a page, always measure before and after. Are the expected amount of requests being triggered, or are there more than there should be? Are more bytes being served than expected? Is there an impact on performance?
The other problem we noticed in the client’s page was that the second request did not always come from cache; sometimes Chrome on Mac loaded the same jQuery library twice.
We noticed this same issue occurring on various pages including PageSpeed’s own example page. In their case, the duplicate request also didn’t come from cache and the downloaded file size was the same (according to devtools).
One of the hard lessons we have learned at Catchpoint is to never trust a single tool, and one should always cross reference and check in a different tool to be safe. Therefore, we made sure Wireshark was running and repeated the test. Here is the packet capture that it provided:
The Wireshark capture confirmed that there were two requests made. In this example, the file size was small so the consequence of this problem is minimal, but had these duplicate requests been larger, and if this was on a mobile device, the impact would be even worse.
Sadly, for our client who reported this problem, the above scenario occurred with jQuery.
Downloading 33KB is a pretty significant impact both on the user and the site’s bandwidth bill. It is unclear what the impact is across the web, or what devices and browsers are exactly impacted. According to Datanyze, mod_page_speed is used by 100,895 sites.
Note: Ensure you test multiple times in the same browser and device, as the problem can happen intermittently. When testing ensure you do not enable “Disable cache” in the browser’s developer tools, as this feature will cause the second request to always load again from server – it is not what happens to actual end users. To defeat caching in between tests, simply delete the cache manually.