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 (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?

Minificación significa que todos los elementos creados para la legibilidad del código (es decir, saltos de línea, espacios, sangrías, puntos y comas innecesarios y comentarios) 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 sencillas. Incluso se pueden acortar los identificadores de las variables, por ejemplo sustituyendo la variable númeroDeBotones por n.

tu El efecto de la minificación varía mucho, por supuesto, dependiendo de cuántos de estos elementos se incluyeran al escribir el código, pero el tamaño del archivo suele reducirse en un valor comprendido entre el 20 y el 40 por ciento, lo que en cualquier caso puede ser relevante para la clasificación en los motores de búsqueda. Minificar siempre tiene sentido y rara vez ocasiona problemas.

¿Qué significa comprimir?

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

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.

Reduce 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 tus utilizando 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:

Ejemplo 2 - Comprimido (reducido):

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 al fusionar 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.

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 plug-ins y temas- la fusión de archivos CSS y, especialmente, de archivos JavaScript también puede, por desgracia, provocar problemas. Esto también puede influir negativamente en el valor LCP u otros valores de Web Vitals.

tus sitio Si la fusión tiene un efecto positivo o provoca problemas es algo que simplemente tendrás 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 este 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 facilitan la compresión de HTML, CSS y JavaScript. 

#1 Autoptimizar

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. 

La optimización automática 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 las fuentes de Google.

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.

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 hacer más autooptimizaciones, por ejemplo para Google Fonts, para los emojis y para cargar archivos a través de dominios de terceros. 

Las funciones más importantes de la Autoptimización: 

• 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

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 PHP Minify. 

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.

Las funciones más importantes del plugin WP Super Minify: 

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

#3 Velocidad Rápida 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.

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 estáticos de caché
• Soporte WP-CLI
• Compatible con una variedad de plugins de caching

#4 WP Speed of Light

El plugin WP Velocidad de la luz también es un plugin de WordPress que combina archivos HTML, CSS y JavaScript. El potente plugin también dispone de compresión de caché y Gzip, un sistema de limpieza de la base de datos y también de 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.

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

	Fusionar + Minificar + Refrescar	WP Super Minify	Velocidad rápida Minify	Autoptimizar	WP Speed de luz
Gratis	sí	sí	sí	sí	sí
Adecuado para	Principiantes	Principiantes	Avanzados + Profesionales	Principiante + Avanzado	Principiante + Avanzado
Compresión HTML	no	no	sí	sí	sí
Compresión CSS	sí	sí	sí	sí	sí
Compresión en JavaScript	sí	sí	sí	sí	sí
Evaluación	4/5	3/5	4/5	5/5	4/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.