Compartir en Facebook

Optimizacion avanzada de CSS

Articulos sobre hosting y tecnologia en Argentina

Optimizacion avanzada de CSS
Optimizacion avanzada de CSS    | Optimizacion Avanzado, Wordpress    | Visto 3218 veces

Enviar CSS al navegador en un unico archivo, minificado y con contenido dinamico. Parecia imposible pero se puede!

Porque y para que

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.

Codigo para enviar Todo el CSS en unico archivo

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. 

CSS creado por scripts

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);

Escrito por Mtech (25/11/2017)
Puntaje del articulo:10/10

Calificar este articulo

Comparte tus articulos

Crea o envia articulos a Top Hosting Argentina.
Simplemente registrate

Comparte tu opinion o comenta

Cuenta tu opinion o amplia el contenido del articulo

Hosting & Tecnologia Argentina

Principales categorias sobre hosting y tecnologia para Webmasters en Argentina, tutoriales para optimizar tus sitios web, seguridad informatica, hardware para servidores y los mejores metodos para rentabilizar tus sitios web.

Articulos sobre inversiones Online

Informacion sobre los principales sitios y formas de generar ingresos de forma online.

Tips sobre Seguridad en websites.

Noticias de interes y recomendaciones para proteger tus sitios web.

Posicionamiento web y optimizacion SEO.

Los mejores tips para optimizar y posicionar tus sitios web

Nuevos articulos sobre hosting y tecnologia.

Nuevos articulos sobre hosting en tophostingargentina.com

Publicaciones mas vistas sobre web hosting.

Los articulos mas vistos por nuestros usuarios.

Servidores dedicados y VPS.

Articulos y tutoriales sobre administracion de servidores.