htaccess - concatenation of js and css files

Concatenation of *.js and *.css is important as using it does fewer requests from client browser to the server. That's another important method of optimize and speed your website visitor experience.

Look, imagine this scenario: you have those 9 css styles and 8 js plugins in your index.htm 

<link rel="stylesheet" href="somestyle.1.css">
<link rel="stylesheet" href="somestyle.2.css">
<link rel="stylesheet" href="somestyle.3.css">
<link rel="stylesheet" href="somestyle.4.css">
<link rel="stylesheet" href="somestyle.5.css">
<link rel="stylesheet" href="somestyle.6.css">
<link rel="stylesheet" href="somestyle.7.css">
<link rel="stylesheet" href="somestyle.8.css">
<link rel="stylesheet" href="somestyle.9.css">
<script type="text/javascript" src="jqueryplugin.1.js">{/script>
<script type="text/javascript" src="jqueryplugin.2.js">{/script>
<script type="text/javascript" src="jqueryplugin.3.js">{/script>
<script type="text/javascript" src="jqueryplugin.4.js">{/script>
<script type="text/javascript" src="jqueryplugin.5.js">{/script>
<script type="text/javascript" src="jqueryplugin.6.js">{/script>
<script type="text/javascript" src="jqueryplugin.7.js">{/script>
<script type="text/javascript" src="jqueryplugin.8.js"{/script>

It makes client's browser do 17 requests. And you could do only 2! How?

First create file named style.combined.css and put there all style files which you use:

<!--#include file="somestyle.1.css" -->
<!--#include file="somestyle.2.css" -->
<!--#include file="somestyle.3.css" -->
<!--#include file="somestyle.4.css" -->
<!--#include file="somestyle.5.css" -->
<!--#include file="somestyle.6.css" -->
<!--#include file="somestyle.7.css" -->
<!--#include file="somestyle.8.css" -->
<!--#include file="somestyle.9.css" -->

Next create file named script.combined.js and put here all js files you use:

<!--#include file="jqueryplugin.1.js" -->
<!--#include file="jqueryplugin.2.js" -->
<!--#include file="jqueryplugin.3.js" -->
<!--#include file="jqueryplugin.4.js" -->
<!--#include file="jqueryplugin.5.js" -->
<!--#include file="jqueryplugin.6.js" -->
<!--#include file="jqueryplugin.7.js" -->
<!--#include file="jqueryplugin.8.js" -->

Instead of those css and js files from the start only include those two new files:

<link rel="stylesheet" href="style.combined.css">
<script type="text/javascript" src="script.combined.js">{/script>

And most important: add this code to the .htaccess file to make things work:

<FilesMatch "\.combined\.js$">
Options +Includes
AddOutputFilterByType INCLUDES application/javascript application/json
SetOutputFilter INCLUDES

<FilesMatch "\.combined\.css$">
Options +Includes
AddOutputFilterByType INCLUDES text/css
SetOutputFilter INCLUDES

To check if it works put the URL to the style.combined.css or script.combined.js into your browser address bar, hit 'Enter' and instead of includes text you will see included contents.