Optimizar archivos CSS

Fecha Publicación:       25 de Mayo de 2020
Fecha Modificación:       31 de Mayo de 2020

Archivos Sass y Dreamweaver

 Si usamos archivos Sass y utilizamos DreamWeaver cuando generamos el archivo css podemos configurar para que el archivo css este optimizado y comprimido.

Ver : Dreamweaver CC 2017 compatible con preprocesadores de CSS    

CSS en cache

Podemos definir el tiempo que se almacena en cache

Ver : Optimizar nuestra web almacenar en caché    

Agregando la etiqueta  media="none" onload="if(media!='all')media='all'

<link rel="stylesheet" href="miarchivo.css" media="none" onload="if(media!='all')media='all'"> 

 

Probar con esto:

fuente : https://diskuse.jakpsatweb.cz/?action=vthread&forum=13&topic=170813

<script>
function nacistCSS(url) {
  var styl = document.createElement("link");
  var skript = document.getElementsByTagName("script")[0];
  styl.rel = "stylesheet";
  styl.href = url;
  setTimeout(function() {
    skript.parentNode.insertBefore(styl, skript);
  });
}
nacistCSS("css.css");
</script>
 
<noscript>
  <link rel="stylesheet" href="css.css">
</noscript>

o esto

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>

Código para crear un compresor CSS

Eliminar comentarios , Eliminar espacios en blanco

<?php
$cssFile = "archivo.css"; 
$buffer = "";
$buffer .= file_get_contents($cssFile);
// Eliminar comentarios
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Eliminar espacios despues de los colons
$buffer = str_replace(': ', ':', $buffer);
// Eliminar espacios en blanco
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
$buffer = preg_replace( "/\s*([\{\}>~:;,])\s*/", "$1", $buffer );
echo($buffer);
?>

Combinar varios archivos CSS

Para combinar varios archivos css en uno simple, sustituye las primeras 3 línea del código por las siguientes:

$cssFiles = array(
"archivo1.css",
"archivo2.css"
);
$buffer = "";
foreach ($cssFiles as $cssFile) {
$buffer .= file_get_contents($cssFile);}

Fuente: https://norfipc.com/codigos/como-minimizar-optimizar-css-para-web.php  

Articulo : 949 - Veces Leidas
Compartir Articulo: