Reducir HTML, CSS y JavaScript: Funciona tan simple como esto en WordPress

9 Min.
minificación css
Actualizado por última vez el 02/09/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 miras los sitios web de la World Wide Web hoy en día, rápidamente te darás cuenta de que no son de ninguna manera comparables a los sitios de hace 10 años. Al principio, un simple código HTML y un poco de texto era suficiente. Hoy en día, sin embargo, los sitios web se componen de un código extenso, a menudo consistente en HTML, CSS y JavaScript. Esto se debe en parte 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 extensos que se utilizan en el diseño web. 

Así que no es raro que los archivos HTML, CSS o Javascript crezcan rápidamente a cientos de kilobytes. Para procesar todos estos códigos en los archivos y poder visualizar el sitio web, el navegador web envía numerosas solicitudes (las llamadas solicitudes HTTP) al servidor. 

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

¿Qué significa la miniaturizació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.

RB Performance E-Book Newsletter 02

Reducir los tiempos de carga

Cada operador de un sitio web que ya ha utilizado una herramienta como PageSeepd Insights de Google, conoce con certeza esta sugerencia de optimización: "Reducir el CSS

Esta medida se recomienda por PageSpeed Insights cuando las peticiones de recuperación de los archivos CSS tienen una fuerte influencia 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 influir en el tiempo de carga de tu sitio web, me gustaría mostrarte con un diagrama de cascada de mi blog bloggiraffe.com . Los ejemplos son sólo pequeñas secciones, pero muestran claramente cómo se puede reducir el tiempo de carga.

Ejemplo 1 - No comprimido (no reducido):

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é sucede cuando se comprimen archivos HTML, CSS y JavaScript? 

Como se menciona brevemente en el artículo, cuando se comprimen archivos como HTML, CSS y JavaScript, los archivos individuales se combinan 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 entender

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

Consecuencia: Lleva mucho tiempo encontrar cada producto y ponerlo en el carrito de la compra. 

Solución: Le dices al supermercado por adelantado qué productos necesitas. El supermercado te proporcionará los productos en un estante, para que sólo tengas que ponerlos en el carrito de la compra y pagar en la caja. 

Resultado: Al poner todos los productos juntos en un estante, sólo tienes que caminar en una dirección a través del supermercado, ahorrando una increíble cantidad de tiempo. Funciona de manera similar con la miniaturización de los códigos y scripts individuales del tu sitio web. Para darte una idea de cómo funciona en la práctica, me gustaría mostrarte algunos 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 hacer tus sitios web más sostenibles. Lee las contribuciones a los temas ¿Qué tan verde es WordPress ? y Hosting ecológico a través de.

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>

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

El 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 los elementos individuales del sitio web. 

Por ejemplo, un código CSS estándar se ve así:

 /* 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 programación puro que fue originalmente desarrollado para la salida de HTML dinámico en los navegadores web (wikipedia.org). Por lo tanto, los operadores de páginas web tienen hoy la posibilidad de usar HTML y CSS extendido. 

Un código JavaScript estándar (wiki.selfhtml.org) se parece a lo siguiente:

 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 se puede ver muy bien cómo funciona la miniaturización del código HTML, CSS y JavaScript. Si eres un usuario avanzado y profesional, también puedes hacer esta compresión manualmente usando una herramienta como linkcode-generator.com uso. Como usuario de WordPress, el "Minify Plugins" especial puede hacer el trabajo por ti. 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 Fusionar + Minificar + Refrescar

merge minify refresh

Como el nombre del Plugin Merge + Minify + Refresh (Fusionar + Minimizar + Actualizar) ya dice, el enfoque de esta herramienta está totalmente en la compresión de código CSS y 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 del plugin Merge + Minify + Refresh te ofrece algunas opciones para optimizar el tiempo de carga de tu sitio web.

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 "Empuje del Servidor HTTP2". Aquí el servidor envía varias respuestas para una consulta al navegador correspondiente. 

Las 3 funciones más importantes del plugin + Merge + Minify + Refresh:  

  • Fusión / Compresión de CSS y JavaScript
  • Empuje del servidor HTTP2
  • Con capacidad para múltiples sitios

#2 WP Super Minify

wp super minify

Con el plugin WP Super Minify Los archivos CSS y JavaScript pueden ser redimensionados y almacenados. 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. Aquí sólo se pueden ver los ajustes para la compresión de JavaScript y CSS.

wp super minif WordPress

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

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

#3 Minimizar la velocidad rápida

fast velocity minify

El plugin Fast Velocity Minify permite la optimización del tiempo de carga para los desarrolladores y usuarios avanzados. 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 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 usuarios y desarrolladores avanzados, el plugin Fast Velocity Minify ofrece muchos gadgets y posibilidades 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 del Fast Velocity Minify

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

#4 Autoptimizar

autoptimize

El plugin de WordPress Autoptimize te ofrece una optimización simple de tu sitio web. Con sólo unos pocos pasos puedes comprimir archivos HTML, CSS y JavaScript y así acelerar el tiempo de carga del sitio. 

El script de auto-optimizaciónPlugin , por ejemplo, se mueve al pie de página y retrasa la carga de archivos, como HTML, CSS y JavaScript, o muchos otros archivos, como las fuentes de Google.

Importante para RAIDBOXES los clientes

Autoptimize no es compatible con otras cachés, por ejemplo la caché del servidorRAIDBOXES . Por lo tanto, aconsejamos encarecidamente no usar 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 la Autoptimize

  • Minimización / almacenamiento en caché de archivos HTML, CSS y JavaScript
  • Optimización de las imágenes
  • Eliminar las fuentes de Google
  • Quitar los emojis
  • Sincronizar JavaScript
  • Compatible con una variedad de plugins de caching

#5 WP Speed of Light

wp speed of light

En el Plugin WP Speed of Light también es un plugin de WordPress que combina archivos HTML, CSS y JavaScript. El poderoso plugin también cuenta con compresión de cache y gzip, un sistema de limpieza de base de datos y también optimización de htacces. 

En la versión gratuita del plugin WP Speed of Light, están disponibles todas las características 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 más funciones además de la compresión pura de archivos, que se pueden utilizar fácilmente a través del backend claramente dispuesto. 

Las funciones más importantes del plugin: 

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

Plugins en comparación directa

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
AutoptimizeWP Speed
de la luz
Gratis
Adecuado paraprincipiantesprincipiantesavanzados + profesionalesprincipiantes + avanzadosprincipiantes + avanzados
Compresión de HTMLnono
Compresión CSS
Compresión de JavaScript
Evaluació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.

Foto: Paula Schmidt | Unsplash

Sven Scheuerle - Autónomo independiente y comercializador de afiliados con una pasión, ha estado activo en el online marketing durante muchos años. Además, es bloguero y reporta regularmente en su blog BLOGGiraffe.de sobre el autoempleo en los negocios en línea y da a sus lectores consejos y trucos.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

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