Reducir HTML, CSS y JavaScript: Así de fácil funciona en WordPress

Sven Scheuerle Última actualización 21.10.2020
9 min.
minificación css
Última actualización 21.10.2020

La miniaturización de los archivos HTML, CSS y JavaScript es uno de los muchos pequeños ajustes para optimizar la velocidad de carga de tu sitio web. En este artículo, Sven te explica de qué se trata la miniaturización de CSS, HTML y Co., cuánto tiempo de carga te ahorras al usar código liviano y cuáles plugins de WordPress te ayudan con la implementación.

Si se observan los sitios web de la World Wide Web en la actualidad, rápidamente se comprueba que no son en absoluto comparables a las páginas de hace 10 años. En los primeros tiempos, un simple código HTML y un poco de texto era todo lo que se necesitaba. Hoy en día, sin embargo, los sitios web están compuestos por un extenso código, que a menudo consiste en HTML, CSS y JavaScript. Esto se debe, en parte, a la variedad 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 todos estos códigos en los archivos y poder mostrar la página web, el navegador web envía numerosas peticiones (las llamadas peticiones HTTP) al servidor. 

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, debe fusionar y comprimir los archivos.  

¿Qué significa la minificación de HTML, CSS y JavaScript?

La minimización, es decir, reducir el tamaño de los archivos HTML, CSS, etc. tanto como sea posible, es parte de toda buena optimización de OnPage. Aunque sólo representa una pequeña parte de los tiempos de carga, también puede ser decisiva para los rankings de los tu motores de búsqueda. 

WordPress no es conocido por tener herramientas inherentes para optimizar el tiempo de carga. Por lo tanto, debes comprobar el rendimiento de tu sitio en WordPress con regularidad.

Reducir los tiempos de carga

Cualquier propietario de un sitio web que haya utilizado una herramienta como PageSeepd Insights de Google está casi seguro de conocer esta sugerencia de optimización: "Reducir el 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. Una explicación detallada y explicaciones de otros mensajes en la herramienta, se puede encontrar en el artículo"Google Pagespeed - Los mensajes de error más importantes". 

Cómo la reducción de CSS puede afectar el tiempo de carga tus sitio web, me gustaría mostrar un diagrama de cascada de mi blog 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 (sin reducir):

css sin comprimir
Diagrama de cascada - sin compresión de archivos HTML, CSS y JavaScript

Ejemplo 2 - Comprimido (reducido):

css comprimido
Diagrama de cascada - con compresión de archivos HTML, CSS y JavaScript

Ya al recuperar el dominio principal, se puede ver que pude reducir el tiempo de carga de 1233 milisegundos a 860 milisegundos. También los tiempos de carga de los archivos individuales podrían reducirse mínimamente en algunos casos.

¿Qué ocurre al comprimir archivos HTML, CSS y JavaScript? 

Como se menciona brevemente en el artículo, la compresión de archivos como HTML, CSS y JavaScript, combina los archivos individuales en un solo archivo. 

Como resultado, el navegador que estás utilizando para acceder a una página web en particular tiene que enviar menos solicitudes al servidor para mostrar el sitio web y cargar los scripts necesarios.

Un ejemplo cotidiano para comprender

Imagina que vas al supermercado y tienes 10 productos en tu lista de compras . Pero estos están en diferentes pasillos y estantes. 

Consecuencia: se tarda una cantidad increíble de tiempo hasta que se encuentra cada producto y se pone en el carro de la compra. 

Solución: le dices al supermercado de antemano los productos que necesitas. El supermercado pone a su disposición los productos de tu en un estante, para que sólo tenga que ponerlos en el carrito de la compra y pagar en la caja. 

Resultado: Al poner todos los productos juntos en un mismo estante, sólo hay que recorrer un camino por el supermercado, lo que supone un increíble ahorro de tiempo. Esto funciona de manera similar con la minificación de códigos y scripts individuales tus sitio web. Para que puedas ver cómo funciona todo en la práctica, me gustaría mostrártelo con pequeños ejemplos. 

La economía de datos no sólo ayuda a optimizar el rendimiento.
Porque un uso consciente de los recursos también contribuye a que tu sea más sostenible. Lea los artículos sobre los temas ¿Qué tan verde es WordPress ? y Verde Hosting.

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>

Comprimido: 

 <!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;
}

Comprimido:

 /* 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 que se desarrolló originalmente para la salida de HTML dinámico en los navegadores web(wikipedia.org). Con ello, los operadores de sitios web tienen hoy la posibilidad de utilizar HTML y CSS de forma ampliada. 

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

Comprimido: 

 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 puede ver muy bien cómo funciona la minificación del código HTML, CSS y JavaScript. Como usuario avanzado y profesional, también puede realizar esta compresión manualmente y utilizar una herramienta como linkcode-generator.de. Como usuario de WordPress , el programa especial "Minify Plugins" puede hacer este trabajo por usted. Esto no sólo ahorra tiempo, sino que funciona de forma totalmente automática.

5 plugins minimizadores para WordPress

En la siguiente lista, he enumerado cinco plugins miniaturizadores populares que hacen el trabajo de comprimir HTML, CSS y JavaScript por ti. 

#1 Merge + Minify + Refresh

merge minify refresh

Como el nombre de la Plugins Combinar + Minificar + Refrescar (Merge + Minify + Refresh) dice, el enfoque de esta herramienta es totalmente en la compresión de CSS, así como el código de JavaScript. 

El plugin combina Cascading Style Sheets (CSS) y archivos Javascript en grupos individuales. Estos a su vez se minimizan con Minify para CSS y Google Closure para JavaScript. 

Después de la instalación en WordPress el Plugin Merge + Minify + Refresh le ofrece algunos ajustes para optimizar el tiempo de carga del sitio web tus .

merge minify refresh wordpresspng

Entre otras cosas, puedes elegir aquí si los archivos CSS y JS deben ser fusionados o no. Además, puedes elegir si la compresión debe ser hecha por WP-Cron y si los datos deben ser almacenados fuera del caché o comprimidos dentro de un archivo gzip. 

Una función muy útil es la llamada "HTTP2 Server Push". Aquí, el servidor envía múltiples respuestas para una consulta al navegador correspondiente. 

Las 3 funciones más importantes de Merge + Minify + Refresh Plugins: 

  • Fusión / Compresión de CSS y JavaScript
  • Push del servidor HTTP2
  • Multisitio

#2 WP Super Minify

wp super minify

Con la Plugin WP Super Minify puede utilizarse para reducir y almacenar en caché los archivos CSS y JavaScript. La carga acelerada de estos archivos se habilita posteriormente a través de Minify PHP Framework. 

Lo especial de este plugin es que es un software de código abierto. Por lo tanto, el código fuente de la herramienta es abierto y puede ser desarrollado por cualquier usuario.

En la configuración de WP Super Minify no hay muchas opciones para los usuarios. Sólo puede ver la configuración de la compresión de JavaScript y CSS.

wp super minif wordpress

Características principales de WP Super Minify Plugins: 

  • Compresión / reducción de archivos CSS y Javascript
  • Minify PHP Framework

#3 Fast Velocity Minify

fast velocity minify

El Plugin Minificación de la velocidad rápida permite optimizar el tiempo de carga para desarrolladores y usuarios avanzados. Reduce las peticiones HTTP fusionando los archivos CSS y javascript, por un lado, y minimizando los archivos con PHP Minify, por otro. 

Después de instalar Minify plugins, encontrarás numerosas configuraciones en el backend de WordPress, que pueden ser un poco abrumadoras para algunos usuarios. Lo bueno es que muchos de los ajustes predeterminados ya están predefinidos, así que es suficiente que los no expertos activen el plugin. 

Para los usuarios y desarrolladores avanzados, 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 principales características 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 de WP CLI
  • Compatible con una variedad de plugins de caching

#4 Autoptimize

autoptimize

El WordPress -Plugin Autoptimize le ofrece la optimización sencilla del sitio web tus . Con unos sencillos pasos puede comprimir archivos HTML, CSS y JavaScript y acelerar así el tiempo de carga de tus sitio . 

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

Importante para los clientes de RAIDBOXES

La optimización automática no es compatible con otras cachés, como la del servidor RAIDBOXES . Por lo tanto, ¡desaconsejamos encarecidamente el uso de Autoptimize en nuestro sistema!

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 los principiantes.

autoptimize 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. 

Bajo el menú "Extras" se pueden hacer más optimizaciones automáticas, por ejemplo para fuentes de Google, para Emojis así como 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 las fuentes de Google
  • Eliminar los emojis
  • Sincronizar JavaScript
  • Compatible con una variedad de plugins de caching

#5 WP Speed of Light

wp speed of light

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

En la versión gratuita de WP Speed of Light-Plugins están disponibles todas las características estándar para la optimización del sitio web tus . En los ajustes de Plugin puede seleccionar los grupos individuales (HTML, CSS, JavaScript) que desea 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, además de la pura compresión de archivos, muchas más funciones, que puedes utilizar de forma sencilla a través del backend claramente organizado. 

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 la imagen

Plugins en comparación directa

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

Conclusión

La reducción de los archivos HTML, CSS o JavaScript puede aumentar el tiempo de carga de tu sitio web en unos pocos milisegundos. Hay algunos plugins de WordPress muy útiles y gratuitos disponibles para que pedas hacer esto. 

Aunque este tornillo de ajuste es sólo 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 del tu sitio web no se vea afectado negativamente por los archivos mencionados.

Imagen aportada: Paula Schmidt | Unsplash

Sven Scheuerle es autónomo independiente y comercializador de afiliados por vocación, ha estado activo en el marketing online durante muchos años. Además, es bloguero y escribe con regularidad en su blog (en alemán), BLOGGiraffe.de, sobre la profesión del autónomo para negocios en línea. También aporta consejos y truquillos a sus lectores.

Artículos relacionados

Comentarios sobre este artículo

A
Andrés BC

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ódigo, 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

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.