Combining static assets to reduce requests lowers PageSpeed score

[Aaron Cicali]

A website I maintain received a PageSpeed score of 72 (mobile). While none of PageSpeed's recommendations mentioned reducing requests, I decided to start there since I believe it would have the biggest return on investment.

The first thing I did was to combine JS and CSS assets. The site contained 6 external css requests and 4 external javascript requests, but now has only 1 css request and 1 javascript request (both hosted on the same domain). The position of these includes within the document has not changed (they're in the head). The combining of assets was done manually, to ensure that the combining of assets is not causing a slower server-response time.

To my surprise, this change caused the PageSpeed score to drop to 71 (mobile).

The HTML in question was this:

==========================================================

<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:800,400|Gentium+Book+Basic:400italic'/>

<link rel='stylesheet' type='text/css' href='styles1.css'/>

<link rel='stylesheet' type='text/css' href='font-awesome.min.css'/>

<link rel='stylesheet' type='text/css' href='bootstrap.min.css'/>

<link rel='stylesheet' type='text/css' href='jquery-ui.min.css'/>

<link rel='stylesheet' type='text/css' href='styles2.css'/>

<script src='jquery-1.11.2.min.js'></script>

<script src='navigation.js'></script>

<script src='validation.js'></script>

<script src='jquery-ui.min.js'></script>

And is now this:

==========================================================

<link rel='stylesheet' type='text/css' href='cache.css'/>

<script src='cache.js'></script>

It seems to me that this would only stand to improve the website's performance. Can anyone explain a reason why this would reduce the PageSpeed score?

[Rick Steinwand]

Without a URL we can only guess.

Try restoring this to external since it should be fast and cacheable. <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:800,400|Gentium+Book+Basic:400italic'/>

[Aaron Cicali]

I understand now (after watching this: https://www.youtube.com/watch?v=6m_E-mC0y3Y) that by combining those blocking resources, the time to paint was actually increased. By having them separate, the browser is able to fetch them in parallel. This likely caused a slightly higher DOMLoaded time in my case. Still, in the real world I believe that reducing the round trips is important, especially on mobile devices and/or in unreliable network conditions.

[Rick Steinwand]

HTTP/2 will help too.