Optimizacion avanzada de CSS Por Admin (25/11/2017)

Si te gusta optimizar tus sitios al maximo habras notado que al validarlo en Webmaster Page Speed o GTmetrix suele aparecer una alerta para unificar archivos CSS y minificarlos. Si utilizas varios archivos CSS al momento de cargar el sitio se realizara una peticion http por cada archivo aumentando el tiempo de carga de la pagina y si el contenido esta minificado significa que no hay espacios en blanco, ni comentarios quedando el codigo ilegible pero mucho mas liviano disminuyendo el tiempo de carga del sitio. A continuacion encontraras un metodo algo complejo que te ayudara a tener un codigo legible, entregar un unico archivo CSS, minificado e incluso con contenido dinamico.

A codigo dinamico me refiero con agregar fragmentos de codigo CSS que sean modificados mediante srcipts regularmente. Esto serviria por ejemplo para incluir estilos de SPRITES generados dinamicamente. Osea si generas un SPRITE de las imagenes de las ultimas 10 publicaciones, cada sprite tendria un estilo tambien generado mediante php. Estos estilos puedes incluirlos en el mismo CSS.

La forma de implementar es sencilla pero deberemos editar el archivo .htaccess, los archivos CSS y si incluiras contenido dinamico deberas crear el codigo que genera css, tambien explicado aqui.

Suponiendo que tenemos los siguientes estilos: estilos.css, responsive.css, fuentes.css y bootstrap.css. el funcionamiento basico seria el siguiente:

1 - En nuestra pagina donde se indica la direccion de nuestro archivo CSS lo modificaremos a:

<link rel="stylesheet" type="text/css" href="/css/estilos.css" />

2 - En nuestro servidor no existira el archivo estilos.css, en cambio crearemos un archivo llamado estilos.php. Mediante .htaccess cuando el navegador solicite el archivo estilos.css recibira estilos.php. Para lograr esto debes crear o editar el archivo .htaccess y agregar las siguientes lineas:

RewriteEngine On
RewriteRule ^css/estilos.css$ css/estilos.php [L]

3 - Editar css/estilos.php, aqui basicamente debemos añadir include a cada archivo pero no funcionara. Para que funcione sera necesario enviar un header PHP indicando al navegador que el codigo es CSS y algunos header para que el archivo sea almacenado en cache. El codigo ejemplo completo sera:

$tsstring = gmdate('D, d M Y H:i:s ', $timestamp) . 'GMT';
header('Expires:'.gmdate('D, d M Y H:i:s', 1407595380 + 3600 * 24 * 90).' GMT');
header("Content-type: text/css");
header("Last-Modified: $tsstring");
echo '@charset "utf-8";';
$css = file_get_contents('estilos.css');
$css .= file_get_contents('responsive.css');
$css .= file_get_contents('fuentes.css');
$css .= file_get_contents('bootstrap.css');
$css .= file_get_contents('dinamico.css');
echo $css;Hasta aqui nuestro codigo en vez de realizar 5 peticiones http solo realizara una. Tendremos el codigo facil de entender ya que no hemos unificado realmente todo. 

Para minificar el contenido podriamos realizarlo desde PHP en forma automatica pero no seria recomendable para CSS. Esto demoraria el tiempo de carga e incluso algunos estilos podrian no funcionar. 

Lo ideal va a ser minificarlos en minifier.org, de esta forma tendremos 2 archivo por cada estilo. Para mejor administracion de los archivos guardaremos el CSS original como estilos_max.css y el minificado como estilos.css. Igual para los otros archivos.

Cuando estamos trabajando en el sitio solo deberiamos reemplazar en estilos.php, el include de estilos.css por estilos_max.css y podremos trabajar en un codigo legible. Al finalizar actualizamos nuestro archivo minificado y volvemos estilos.php a como estaba. 

Para utilizar CSS creado por scripts debes tener en cuenta la cache del navegador, osea si generaras CSS mediante codigo debes incluirlo en la cabezera del sitio o añadir un parametro a estilos.css que cambie al iniciar el script. 

En nuestro ejemplo podriamos tener un script php que se ejucute diariamente para generar el archivo dinamico.css, el codigo seria sencillo y a continuacion un ejemplo en PHP donde se recorre una tabla de marcas donde a cada marca se indica un color de fondo, al variar el color en mysql se generarian los nuevos estilos.

   foreach ($rs_marcas as $marca) {
      $css.="." . $marca->nombre . " {
          background:#" . $marca->color . ";
      }";    
    $archivo = fopen('css/dinamico.css', 'w');        
    fwrite($archivo, $css);
     fclose($fp);         
   }Si quisieramos añadir este codigo CSS en el head solo deberiamos cambiar la linea fwrite por fwrite($archivo, '<style>' . $css . '</style>'); y luego realizar un include en head.
<?php include (/css/dinamico.css);