Comprimir archivos CSS y JavaScript con GZip (Todos los navegadores)

Las razones principales para reducir el peso de tus páginas web son evidentes:

- Cargan con mayor rapidez

- Ahorras ancho de banda

El problema es que no todos los navegadores soportan la codificación con gzip.

La solución que utilizo es subir una versión comprimida y una versión plana del mismo fichero, luego determino si el navegador soporta la codificación GZip y de esta maneja envío uno u otro archivo.

En este ejemplo cambio la extensión de los archivos comprimidos de Javascript .jsgz y la de los archivos CSS a .csgz.

1- Editando el .htaccess

Añadir las siguientes lineas al .htaccess

# Apache Content Negotiation http://bit.ly/cYepUl

Options MultiViews

# Compressed javascript and CSS files

AddEncoding x-gzip .jsgz .csgz

# Añadir los tipos (cómo se interpretará el fichero)

AddType application/x-javascript .jsgz

AddType text/css .csgz

2- Añadir la comprobación a las páginas que utilicen los archivos comprimidos (PHP)

$jsgz = substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')?'.jsgz':'.js';

$csgz = $jgz?'.csgz':'.css';

y finalmente, al momento de incluir los archivos CSS y JS pegar la extensión con PHP

<link type="text/css" href="style<?php echo $csgz; ?>" rel="stylesheet">
<script type="text/javascript" src="script<?php echo $jsgz; ?>"></script>

De esta forma se cargarán los archivos comprimidos solamente si el cliente los soporta.