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

9 Min.
minificación css
Última actualización en

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 su sitio web. En este artículo, Sven Scheuerle 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 magro y cuáles WordPress plugins 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 decisivo para sus clasificaciones en los motores de búsqueda. 

Sólo WordPress no se sabe que tenga herramientas inherentes para optimizar el tiempo de carga. Por lo tanto, debe comprobar el rendimiento de su WordPress sitio revisa 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 PageSpeed Insightscuando 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 su sitio web, me gustaría mostrarle con un diagrama de cascada de mi blog bloggiraffe.com espectáculo. 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 recomprimido
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á utilizando para acceder a una página web en particular tiene que enviar menos solicitudes al servidor para mostrar la página 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 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 le proporcionará sus productos dentro de un estante, de modo que sólo tiene que ponerlos en el carrito de la compra y pagar en la caja. 

Resultado: Al poner todos los productos juntos en un solo estante, sólo tienes que caminar en una dirección a través del supermercado y ahorrar una increíble cantidad de tiempo. Es similar a la miniaturización de códigos y scripts individuales en su sitio web. Para que puedan ver cómo funciona todo en la práctica, me gustaría mostrarles esto 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 hacer su sitio web más sostenible. Por favor, lea las contribuciones a los temas ¿Qué tan verde esWordPress ? y el hospedaje ecológico a través de.

HTML

El HTML (Lenguaje de Marcas de Hipertexto) 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 WordPress usuario, el "MinifyPlugins" especial puede hacer el trabajo por ti. Esto no sólo ahorra tiempo, sino que funciona de forma totalmente automática.

5 Minimizar Pluginspara WordPress

En la siguiente lista, he enumerado cinco miniaturizaciones popularesPlugins que hacen el trabajo de comprimir HTML, CSS y JavaScript para ti. 

#1 Fusionar + Minificar + Refrescar

fusionar minifundir refrescar

Como el nombre del Plugins Fusionar + Minimizar + Refrescar (Fusionar + Minimizar + Actualizar) ya dice, el enfoque de esta herramienta está totalmente en la compresión de código CSS y JavaScript. 

Esto Plugincombina Hojas de Estilo en Cascada (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 enWordPress , el PluginFusionar + Minificar + Actualizar le ofrece una serie de ajustes para optimizar el tiempo de carga de su sitio web.

fusionar minify refrescar wordpresspng

Entre otras cosas, puedes elegir aquí si los archivos CSS y JS deben ser fusionados o no. Además, puede elegir si la compresión debe ser hecha por WP-Cron y si los datos deben ser almacenados en caché fuera 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 de Fusionar + Minimizar + Refrescar Plugins: 

  • 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 Plugines 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 WP Super Minify Plugins: 

  • Compresión / reducción de archivos CSS y Javascript
  • Minimizar el marco PHP

#3 Minimizar la velocidad rápida

la velocidad rápida se minimiza

El Plugin Minimizar la velocidad rápida 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 WordPress backend, 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 para que los no expertos lo plugin activen. 

Para usuarios y desarrolladores avanzados, PluginFast Velocity Minify ofrece muchos gadgets y posibilidades de optimización.

la velocidad rápida se minimiza WordPress

Además, esto Plugintambié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 Minimizar la velocidad rápida: 

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

#4 Autoptimizar

Auto-estimulación

El- WordPress Plugin Autoptimización le ofrece la fácil optimización de su sitio web. Con sólo unos pocos pasos puedes comprimir archivos HTML, CSS y JavaScript y así acelerar el tiempo de carga de tu página. 

La Autoptimización...Plugin en el 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. Además, el Plugin compatible con muchosPlugins sistemas de almacenamiento conocidos. 

Una vez que hayas WordPress instalado el Pluginin, 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 profanos.

Auto-estimulación 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" le permite optimizar automáticamente las imágenes y retrasar la carga de los archivos de imagen. 

Bajo el punto de 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 Autoptimización

  • 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 cachingPlugins

#5 WP Velocidad de la luz

wp velocidad de la luz

En el Plugin WP Velocidad de la luz también es unWordPress ...Pluginque combina archivos HTML, CSS y JavaScript. Los poderosos 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 de WP Speed of LightPlugins, están disponibles todas las funciones estándar para optimizar su sitio web. En la Pluginconfiguración puedes seleccionar los grupos individuales (HTML, CSS, JavaScript) que quieras minimizar y combinar.

wp velocidad de la luz WordPress

Además, la versión Pro de la Pluginstiene 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 de la Plugins: 

  • 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

PluginsEn comparación directa

 Fusionar + Minimizar
+ Refrescar
WP Super
Minimizar
velocidad rápida
Minimizar
AutoptimizaciónWP 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

Reducir el tamaño de los archivos HTML, CSS o JavaScript puede aumentar el tiempo de carga de su sitio web en unos pocos milisegundos. Puedes elegir entre varios WordPress muy útiles y gratuitosPlugins. 

Aunque este tornillo de ajuste es sólo una pequeña parte de la optimización de OnPage, siempre debe volver a comprobarse. De esta manera, puede asegurarse de que el tiempo de carga de su 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 business en línea y da a sus lectores consejos y trucos.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.