Serve merged CSS from one url

Question

When I merge CSS it creates 3 merged files, and they are served separately as such

<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/32733c3332436554dae7e8f320cd2308.css" />
<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/500ec48f83d706fbd5d7f451d4dabae4.css" media="all" />
<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/ffb9623e4d4c994c96b4713dcfa604ca.css" media="print" /> 

How can I serve them all in one url like the Fooman Speedster. So they are like this.

<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/32733c3332436554dae7e8f320cd2308.css,media/css_secure/500ec48f83d706fbd5d7f451d4dabae4.css,media/css_secure/ffb9623e4d4c994c96b4713dcfa604ca.css" />

This is so that I can reduce the number of http requests.

Answer 1

Ok. So if you want to do it from magento only then you need to add group to those css files and those will be combined together.

Like in your example

<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/32733c3332436554dae7e8f320cd2308.css" />
<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/500ec48f83d706fbd5d7f451d4dabae4.css" media="all" />
<link rel="stylesheet" type="text/css" href="xyz.com/media/css_secure/ffb9623e4d4c994c96b4713dcfa604ca.css" media="print" />

Check the last 2 has groped version of merged css files.

Like if you add code like this

<action method="addJs"><script>prototype/prototype.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/jquery-1.11.2.min.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script><group>general</group></action>

All 3 files belong to the same group that means those will be merged together.

Now if you want to do it like fooman then i am exactly not sure how they are doing it but you can enable mod_pagespeed module from apache which will do exactly like the same. Check this link you will get better understanding https://modpagespeed.com/doc/filter-css-combine