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