minificar css html

"Minify": Reducir CSS, HTML y JavaScript

La reducción de HTML, CSS y JavaScript es una de las muchas pequeñas palancas que pueden utilizarse para optimizar la velocidad de carga de tus sitios web. Si se observan varias páginas de la web hoy en día, rápidamente nos damos cuenta de que no son en absoluto comparables a los sitios web de hace 10 años. En los primeros tiempos, bastaba con un simple código HTML y un poco de texto. Sin embargo, hoy en día los sitios web se componen de un extenso código, que a menudo incluye HTML, CSS y JavaScript. Esto se debe, por un lado, a la gama de funciones que ahora están disponibles para los sitios web, pero también a los diseños y plantillas cada vez más amplios que se utilizan en el diseño web. 

No es raro que los archivos HTML, CSS o JavaScript tengan un tamaño de cientos de kilobytes. Para procesar todo este código en los archivos y mostrar el sitio web, el navegador web envía numerosas peticiones (las llamadas peticiones HTTP) al servidor. 

WordPress, en particular, no es conocido por sus herramientas inherentes de optimización del tiempo de carga. Por lo tanto, deberías comprobar regularmente el rendimiento de tu sitio WordPress.

Cuantas más "peticiones" se envíen, mayor será el tiempo de carga. Para mantener el número de peticiones lo más bajo posible, y por lo tanto también el tiempo de carga del sitio web, debes comprimir los archivos y fusionarlos si es necesario.

¿Qué queremos decir con el término "minify" o minificar?

La "minificación" implica que todos los elementos creados para la legibilidad del código (es decir, saltos de línea, espacios, sangrías, puntos y comas innecesarios) se eliminan del archivo para reducir su tamaño. Esto incluye también la conversión de expresiones más complejas en expresiones más simples. Incluso los identificadores de las variables pueden acortarse, por ejemplo sustituyendo la variable numberOfButtons por n. El efecto de la minificación varía mucho, por supuesto, dependiendo de cuántos de estos elementos se hayan incluido al escribir el código, pero el tamaño del archivo suele reducirse en un valor de entre el 20 y el 40 por ciento, lo que puede ser relevante para tu clasificación en los motores de búsqueda en cualquier caso. La minificación siempre tiene sentido y rara vez genera problemas.

¿Qué significa comprimir?

El código se comprime utilizando la codificación gzip en el lado del servidor. 

gzip en Raidboxes

En Raidboxes se utiliza Brotli en lugar de gzip. En qué consiste la diferencia, lo explicamos en nuestro artículo.

Aquí, las cadenas que ya han aparecido con anterioridad se sustituyen por un puntero. Estos punteros tienen mucho menos contenido que la cadena real. Esto se debe a queya no es una cadena para el navegador, sino una referencia a la cadena anterior. El encabezado de la respuesta HTTP contendrá entonces "content-encoding: gzip". El efecto de la compresión es extremo; puede reducir el tamaño del archivo a un 20% de su tamaño original.

Reducir los tiempos de carga

Si alguna vez has utilizado una herramienta como PageSpeed Insights de Google, seguro que conoces esta sugerencia de optimización: "Minificar CSS".

Esta medida es recomendada por PageSpeed Insights si las peticiones para recuperar los archivos CSS influyen mucho en el tiempo de carga del sitio web. En el artículo"Google Pagespeed - Los mensajes de error más importantes" encontrarás una explicación detallada y explicaciones de otros mensajes de la herramienta. 

Me gustaría mostrarte cómo la reducción de CSS puede influir en el tiempo de carga de tusutilizando un diagrama de cascada de mi bloggiraffe.de. Los ejemplos son sólo pequeñas secciones, pero muestran claramente cómo se puede reducir el tiempo de carga.

Ejemplo 1 - Sin comprimir:

"Minify": Reducir CSS, HTML y JavaScript

Ejemplo 2 - Comprimido (reducido):

"Minify": Reducir CSS, HTML y JavaScript

Incluso cuando se accede al dominio principal, se puede ver que fui capaz de reducir el tiempo de carga de 1233 milisegundos a 860 milisegundos. Los tiempos de carga de los archivos individuales también podrían reducirse mínimamente en algunos casos.

¿Qué ocurre cuando se fusionan los archivos CSS y JavaScript? 

Como ya se ha mencionado brevemente en el artículo, al fusionar archivos CSS y JS, los archivos individuales se combinan en un único archivo. 

Esto significa que el navegador, a través del cual se accede a un sitio web concreto, tienes que enviar menos peticiones al servidor para poder mostrar el sitio web y cargar los scripts necesarios.

Fusión de archivos

Cuantas más "peticiones" se envíen, mayor será el tiempo de carga. Para mantener el número de peticiones y, por tanto, el tiempo de carga del sitio web lo más bajo posible, debe fusionar los archivos.

Un ejemplo cotidiano para una mejor comprensión

Imagínate que vas al supermercado y tienes 10 productos en tu lista de compra, pero estos se encuentran en diferentes pasillos y estantes. 

El resultado: se tarda una cantidad increíble de tiempo en encontrar cada producto y ponerlo en la cesta de la compra. 

Solución: comunicas de antemano los productos que necesitas. El supermercado pone a tu disposición productos en un estante para que solo tengas que añadirlos en el carrito de la compra y pagar en la caja. 

Resultado: al agrupar todos los productos en un mismo estante, solo hay que recorrer un camino por el supermercado y se ahorra así una cantidad increíble de tiempo. Esto funciona de manera similar con la combinación de códigos individuales y scripts de tu sitio web. Para que puedas ver cómo funciona todo en la práctica, me gustaría mostrarte algunos pequeños ejemplos. 

Guardar los datos no solo ayuda a optimizar el rendimiento.
Un uso consciente de los recursos también contribuye a que tu web sea más sostenible. Lee los artículos sobre los temas ¿Qué tan ecológico es WordPress? y Diseño web sostenible.

Con algunas configuraciones, por ejemplo, combinaciones de plugins y themes, la fusión de archivos CSS y, especialmente, de archivos JavaScript también puede dar lugar a problemas. El valor LCP u otros valores de Web Vitals también pueden verse afectados negativamente por esto. Si la fusión tiene un efecto positivo en tu sitio o si da problemas es algo que simplemente hay que probar al final. No te preocupes, puedes invertir la configuración en cualquier momento.

HTML

El HTML (Hypertext Markup Language) es necesario para la estructura básica de un sitio web. Así es como se muestran los textos, los enlaces o incluso las imágenes. 

Por ejemplo, un código HTML estándar tiene el siguiente aspecto: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Minificado:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) no es un verdadero lenguaje de programación. Sin embargo, el llamado lenguaje de hojas de estilo se utiliza para cambiar la apariencia de elementos individuales del sitio web. 

Por ejemplo, un código CSS estándar tiene este aspecto: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Minificado:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript es un lenguaje de scripting puro desarrollado originalmente para la salida de HTML dinámico en los navegadores web(wikipedia.org).

Un código JavaScript estándar (wiki.selfhtml.org) tiene este aspecto, por ejemplo:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Minificado:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Con la ayuda de los ejemplos anteriores, puedes ver muy claramente cómo funciona la minificación del código HTML, CSS y JavaScript. Los usuarios avanzados y profesionales también pueden llevar a cabo esta compresión manualmente utilizando una herramienta como linkcode-generator.de. Los "plugins minify" o minificadores especiales pueden hacer este trabajo por ti. Esto no solo ahorra tiempo, sino que funciona de forma totalmente automática.

4 plugins de minificación para WordPress

En la siguiente lista, he enumerado cinco plugins de minificación populares que se encargan de comprimir HTML, CSS y JavaScript. 

Los plugins y la caché

Debes borrar la caché de tu sitio después de instalar nuevos plugins o realizar cambios en la configuración.

#1 Autoptimize

Autoptimize

El plugin WordPress Autoptimize te ofrece la optimización sencilla de tu sitio web. Con unos sencillos pasos, puedes comprimir los archivos HTML, CSS y JavaScript y acelerar así el tiempo de carga de tu sitio web. 

Autoptimize mueve los scripts al pie de página, por ejemplo, y retrasa la carga de archivos como HTML, CSS y JavaScript, o muchos otros archivos como Google Fonts.

Autoptimización en Raidboxes

Durante mucho tiempo, Autoptimize no era compatible con otras cachés, incluida la caché del servidor Raidboxes . Este problema ya está resuelto: la optimización automática puede volver a utilizarse junto con Raidboxes sin ninguna duda.

Una vez que hayas instalado el plugin en WordPress, encontrarás varias pestañas en los ajustes como "JS, CSS, HTML", "Imágenes" y "Extras". Las posibilidades y opciones individuales están muy bien descritas aquí y también son muy fáciles de entender para principiantes.

Optimización automática de WordPress

En la pestaña "JS, CSS & HTML" puedes elegir entre diferentes opciones de optimización para los archivos JavaScript, CSS y HTML. La pestaña "Imágenes" te permite optimizar automáticamente las imágenes y retrasar la carga de los archivos de imagen. 

En la opción de menú "Extras" se pueden realizar otras autooptimizaciones, por ejemplo para Google Fonts, para los emojis y para la carga de archivos a través de dominios de terceros. 

Las funciones más importantes de Autoptimize

  • Minimización / Almacenamiento en caché de archivos HTML, CSS y JavaScript
  • Optimización de la imagen
  • Eliminar fuentes de Google
  • Eliminar los emojis
  • Sincronizar JavaScript
  • Compatible con una variedad de plugins de caching

#2 WP Super Minify

WP Super Minify

Con el plugin WP Super Minify Los archivos CSS y JavaScript pueden reducirse en tamaño y almacenarse en caché. La carga acelerada de estos archivos es posible a través del framework Minify PHP

Lo especial de este plugin es que es un software de código abierto. El código fuente de la herramienta es, por tanto, abierto y puede ser desarrollado por todos/as.

No hay muchas opciones en la configuración de WP Super Minify. Solo puedes ver los ajustes para la compresión de JavaScript y CSS.

WP Super Minify WordPress

Las funciones más importantes del plugin WP Super Minify

  • Compresión / Reducción de archivos CSS y JavaScript
  • Minify PHP Framework

#3 Fast Velocity Minify

Fast Velocity Minify

El plugin Fast Velocity Minify permite optimizar el tiempo de carga para usuarios/as avanzados/as. Por un lado, reduce las peticiones HTTP fusionando los archivos CSS y JavaScript, y por otro lado, minimiza los archivos con PHP Minify. 

Después de instalar el plugin Minify, encontrará numerosas opciones de configuración en el backend WordPress, que pueden ser un poco abrumadoras para algunos/as. Lo bueno es que muchos de los ajustes por defecto ya están predefinidos, por lo que es suficiente para que los/as no profesionales activen el plugin. 

Para usuarios/as avanzados/as, el plugin Fast Velocity Minify ofrece muchos trucos y opciones de optimización.

Fast Velocity Minify WordPress

Además, este plugin también ofrece una versión Pro. En esta versión tienes funciones para excluir varios archivos CSS y JavaScript. 

Las funciones más importantes de Fast Velocity Minify

  • Compresión / Reducción de archivos HTML, CSS y JavaScript
  • PHP Minify
  • Excluir archivos y guiones
  • archivos de caché estáticos
  • Soporte WP-CLI
  • Compatible con una variedad de plugins de caching

#4 WP Speed of Light

WP Velocidad de la luz

El plugin WP Velocidad de la luz es también un plugin para WordPress que combina archivos HTML, CSS y JavaScript. El potente plugin también cuenta con caché y compresión Gzip, un sistema de limpieza de la base de datos y también optimización de htacces. 

En la versión gratuita de WP Speed of Light, están disponibles todas las funciones estándar para la optimización de tu sitio web. En la configuración del plugin, puedes seleccionar los grupos individuales (HTML, CSS, JavaScript) que deseas minimizar y combinar.

WP Speed of Light WordPress

Además, la versión Pro del plugin tiene algunas funciones más, como excluir o mover guiones. 

WP Speed of Light ofrece muchas otras funciones además de la pura compresión de archivos, que puedes utilizar de forma sencilla a través del backend claramente dispuesto. 

Las funciones más importantes del plugin: 

  • Compresión de archivos HTML, CSS y JavaScript
  • Caché y compresión gzip
  • Herramientas de grupo
  • Limpieza de la base de datos
  • Optimización de imagen

Plugins en comparación directa

 Combinar + Minificar
+ Refrescar
WP Super
Minify
Velocidad rápida
Minify
AutoptimizeWP Speed
of Light
Gratis
Adecuado paraPrincipiantesPrincipiantesAvanzados + ProfesionalesPrincipiante + AvanzadoPrincipiante + Avanzado
Compresión HTMLnono
Compresión CSS
Compresión en JavaScript
Evaluación4/53/54/55/54/5

Conclusión

Reducir los archivos HTML, CSS o JavaScript puede aumentar el tiempo de carga de tu sitio web en unos pocos milisegundos. WordPress ofrece una serie de plugins muy útiles y gratuitos para este fin. 

Aunque este tornillo de ajuste es solo una pequeña parte de tu optimización OnPage, siempre debe ser revisado de nuevo. De esta manera se asegura que el tiempo de carga de tu sitio web no se vea afectado negativamente por los archivos mencionados.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Un comentario sobre"Cómo minificar: reducir CSS, HTML y JavaScript".

  1. Hola, interesante artículo, muchas gracias.

    Por mi parte estaba intentando utilizar Autoptimize junto a W3 Total Caché en un sitio WordPress que también tiene instalado WooCommerce. En W3TC tengo desactivadas todas las opciones de minificación de código JS, CSS y HTML con la intención de solo usar este pluguin para el tema de cachés y usar Autoptimize para minificar el códido, pero al acceder a la opción minificar en Autoptimize me presenta el mensaje de error: ‘No se puede cargar la minimización porque se ha encontrado un plugin incompatible: W3 Total Cache’

    ¿Alguna idea o sugerencia para solucionarlo?

    Muchas gracias,

    Saludos cordiales

Escribe un comentario

Tu dirección de correo electrónico no se publicará.