Cómo minimizar el CSS, HTML y JavaScript de su sitio de WordPress

La minificación es un concepto simple que a menudo se recomienda como un paso para acelerar su sitio web. Pero la realidad es que a muchos propietarios de sitios les frustra muchísimo cuando intentan minimizar sus archivos y terminan dañando su sitio.

Entonces, ¿qué pasa?

La minificación a menudo requiere mucha experimentación. Si bien hay muchas soluciones disponibles, su comportamiento variará de un sitio a otro según el tema y los complementos que esté utilizando.

En esta publicación, exploraremos qué es la minificación, sus beneficios y algunas de las soluciones de minificación más populares disponibles, tanto manuales como de complementos, para ayudarlo a encontrar la solución adecuada para su sitio.

¿Qué es la minificación?

Los sitios web se componen de muchos archivos diferentes. Si prueba la velocidad de su sitio con Google PageSpeed ​​Insights, es posible que reciba la recomendación de minimizar sus archivos HTML, CSS y JavaScript.

¿El problema? Como humanos, escribimos el código contenido en estos archivos para poder leerlos, pero a las computadoras no les importan los caracteres como los comentarios, el formato, los espacios en blanco y las nuevas líneas. Entonces, cuando encuentran estos caracteres innecesarios en los archivos del sitio web, los ignoran.

Ahí es donde la minificación entra en escena. Minificación es un término de programación que básicamente significa eliminar cualquier carácter innecesario que no sea necesario para que se ejecute el código. La minificación funciona analizando y reescribiendo código para reducir el tamaño total de sus archivos, reduciendo así el tamaño total de su sitio para que se cargue más rápido en el navegador del usuario.

Por ejemplo, aquí tienes algo de CSS que puedes encontrar en una hoja de estilo:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

Y aquí está la versión minimizada del ejemplo CSS anterior:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

¿Ves cuánto más comprimido está el código?

La minificación se realiza en un servidor web antes de enviar una respuesta. Después de la minificación, el servidor web utiliza archivos minificados más pequeños (y mucho más rápidos) en lugar de los originales, lo que genera un menor ancho de banda sin sacrificar la funcionalidad.

Como explica el experto en SEO Yoast, minimizar archivos puede ahorrar hasta un 30-40%, o incluso un 50% del tamaño del archivo en algunos casos.

Por qué debería minimizar sus archivos HTML, CSS y JavaScript

Tener un sitio web rápido no sólo hace feliz a Google (y ayuda a que su sitio web tenga una clasificación más alta en las búsquedas), sino que también brinda una mejor experiencia de usuario a los visitantes de su sitio.

La minificación tiene muchos beneficios:

• Los archivos más pequeños significan que el tamaño total de descarga de su sitio se reduce.
• Los visitantes del sitio podrán cargar y acceder a sus páginas más rápido,
• Los visitantes del sitio tendrán una experiencia de usuario idéntica sin tener que descargar archivos más grandes, y
• Los propietarios de sitios obtendrán menores costos de ancho de banda ya que se transmiten menos datos a través de la red.

Cómo minimizar sus archivos HTML, CSS y JavaScript

Antes de minimizar los archivos de su sitio, es una buena idea realizar una copia de seguridad. Mejor aún, minimice sus archivos en un sitio provisional para que pueda comprobar que todo funciona correctamente antes de realizar cambios en su sitio activo.

También es importante comparar la velocidad de tu página antes y después de minimizar tus archivos para que puedas comparar los resultados y ver si la minificación ha tenido algún impacto.

Mi sitio de pruebas de velocidad favorito es GTmetrix. Analiza el rendimiento de la velocidad de su página utilizando Google PageSpeed ​​Insights e YSlow, una herramienta de prueba de rendimiento de código abierto. Luego genera puntuaciones y proporciona recomendaciones para mejorar la optimización del sitio.

Otras excelentes herramientas de prueba de velocidad que puedo recomendar incluyen Pingdom Website Speed ​​Test y WebPageTest y Test your mobile speed.

Minimizar archivos manualmente

Minimizar archivos manualmente requiere una cantidad considerable de tiempo y esfuerzo. Quiero decir, ¿quién tiene tiempo para eliminar espacios en blanco individuales, líneas y código innecesario de los archivos? ¡Aburrido! Además, deja más margen para el error humano. Por tanto, no recomendaría este método para minimizar archivos.

Afortunadamente, existen muchas herramientas de minificación en línea gratuitas disponibles que le permiten copiar y pegar código desde y hacia su sitio. Aquí hay una breve lista de herramientas y lo invito a investigar otras opciones que podrían funcionar mejor para su sitio.

1. Minificador de HTML de Will Peavy

HTML Minifier es una herramienta en línea gratuita para minificar HTML construida con PHP. Para utilizar la herramienta, simplemente pegue su HTML en el área de texto, incluido cualquier CSS de JavaScript en su marcado, y haga clic en el botón "Minimizar". Para garantizar que sus scripts funcionen después de la minificación, se recomienda terminar las declaraciones de JavaScript con un punto y coma y usar la sintaxis* *para los comentarios.

2. Minificador de CSS

Otra herramienta gratuita, CSS Minifier, funciona minimizando el CSS que copia y pega en el área de texto "Ingreso CSS". Hay opciones para descargar la salida minimizada como un archivo. Para los desarrolladores, esta herramienta también proporciona una API.

3. JSComprimir

JSCompress es un compresor de JavaScript en línea que le permite comprimir y minimizar sus archivos JS hasta en un 80% de su tamaño original. Para usarlo, copie y pegue su código o cargue y combine varios archivos y luego haga clic en "Comprimir JavaScript". Esta herramienta está basada en UglifyJS 3 y babili-standalone.

Herramientas de minificación manual para desarrolladores

Para los desarrolladores que buscan opciones más avanzadas, Google recomienda estos recursos de minificación de HTML, CSS y JavaScript:

• HTMLMinifier: un compresor/minificador de HTML basado en Javascript (con soporte para Node.js).
• CSSNano: un minificador modular, construido sobre el ecosistema PostCSS.
• csso: un minificador de CSS con optimizaciones estructurales.
• UglifyJS: un conjunto de herramientas de analizador, destructor, compresor y “embellecedor” de JavaScript.

El compilador de cierre de Google es una herramienta de optimización para JavaScript. En lugar de compilar desde un lenguaje fuente a código de máquina, compila desde JavaScript para mejorar JavaScript. Analiza su código, lo analiza, elimina el código inactivo y reescribe y minimiza lo que queda. Esta herramienta también verifica la sintaxis, las referencias de variables y los tipos, y advierte sobre errores comunes de JavaScript.

Minimizar archivos con complementos

Hay algunos complementos fantásticos disponibles, tanto gratuitos como premium, que pueden minimizar tus archivos sin que tengas que realizar pasos manuales.

Nota: Para esta lista, solo he incluido complementos gratuitos que están disponibles en el Repositorio de complementos de WordPress que están actualizados y han sido probados comocompatibles con las últimas versiones de WordPress. Para opciones premium, desplácese hacia abajo./

1. Minimizar HTML

Este complemento simple, liviano y sin complicaciones le permite minimizar la salida HTML de su sitio. Para usarlo, todo lo que necesita hacer es instalar y activar el complemento y automáticamente minimizará su marcado sin la necesidad de configurar ningún ajuste.

2. Minimizar HTML

Me encanta la descripción de WordPress.org para este complemento: "¿Alguna vez has mirado el formato HTML de tu sitio web y has notado lo descuidado y amateur que se ve?" Este complemento limpia y minimiza el marcado descuidado.

A diferencia del complemento HTML Minify, esta herramienta ofrece más opciones. Incluye minificación opcional para JavaScript y CSS, aunque no interfiere con áreas de texto o texto preformateado. También hay opciones para eliminar comentarios HTML, CSS y JavaScript (dejando comentarios condicionales MSIE), eliminar etiquetas de cierre XHTML innecesarias de elementos vacíos HTML5 y eliminar dominios y esquemas relativos innecesarios de los enlaces.

3. Fusionar + Minimizar + Actualizar - Complementos de WordPress

Este complemento hace más que simplemente minimizar su código. Combina sus archivos CSS y JavaScript yluegominimiza los archivos generados usando Minify (para CSS) y Google Closure (para JavaScript). La minificación se realiza a través de WP-Cron para que no afecte la velocidad de su sitio.

Cuando el contenido de sus archivos CSS o JS cambia, se vuelven a procesar, por lo que no es necesario vaciar su caché. Los usuarios de varios sitios estarán felices de saber que este complemento funciona bien en las redes.

4. Optimización de JCH

JCH Optimize tiene un montón de características interesantes para un complemento gratuito: combina y minimiza CSS y JavaScript, minimiza HTML, hay compresión GZip para archivos combinados, generación de sprites para imágenes de fondo y puede excluir ciertos archivos de la combinación para resolver conflictos.

Hay una versión pro disponible con más funciones de optimización, incluida la carga de JavaScript de forma asincrónica, la optimización de la entrega de CSS para eliminar el bloqueo de renderizado, soporte de dominio CDN/sin cookies y carga diferida y optimización de imágenes.

5. Minimizar CSS

Minimizar su CSS con este complemento no podría ser más fácil: simplemente instálelo, actívelo, vaya aConfiguración > Minificar CSSpara habilitar solo una opción: Optimizar y minimizar el código CSS.

El código de este complemento se ha bifurcado del popular complemento Autoptimize (más información sobre este complemento a continuación). El autor del complemento, Peter Pfeiffer, tiene un complemento similar disponible para JavaScript, Minify JavaScript.

6. Minimizar velocidad rápida

Con más de 20.000 instalaciones activas y una calificación de cinco estrellas, esta es una de las opciones más populares disponibles para minimizar archivos. Para usarlo, instale y active el complemento y vaya aConfiguración > Fast Velocity Minify. Allí encontrará una gran cantidad de opciones para configurar el complemento, incluidas opciones avanzadas para desarrolladores, excepciones de JavaScript y CSS, opciones de CDN e información del servidor. Sin embargo, la configuración predeterminada funciona bien para la mayoría de los sitios.

El complemento realiza la minificación en tiempo real en el front-end y solo durante la primera solicitud no almacenada en caché. Una vez que se procesa la primera solicitud, cualquier otra página que requiera el mismo conjunto de CSS y JavaScript recibirá el mismo archivo de caché estático.

7. Optimizar automáticamente

Con más de 400 000 instalaciones activas, Autoptimize es fácilmente la herramienta de minificación más popular en el repositorio de complementos de WordPress.

Autoptimize puede agregar, minimizar y almacenar en caché scripts y estilos, inyectar CSS en el encabezado de la página de forma predeterminada y también mover y diferir scripts al pie de página. Hay muchas opciones avanzadas para desarrolladores y una API extensa disponible para que pueda personalizar Autoptimize para satisfacer las necesidades específicas de su sitio.

8. Optimización de la velocidad de la página Hummingbird

Hummingbird es un complemento relativamente nuevo para el repositorio de complementos de WordPress, que comenzó como un complemento premium. La versión gratuita presenta una gran colección de herramientas de optimización de sitios, incluida la minificación, que le permite minimizar, posicionar y combinar archivos para obtener el máximo rendimiento.

También hay una excelente función de escaneo que le permite probar el rendimiento de su sitio y obtener recomendaciones prácticas para mejorarlo, directamente desde el complemento.

Minificación como característica en los complementos de almacenamiento en caché de WordPress

La minificación es generalmente una función estándar que encontrará en los complementos de almacenamiento en caché. Aquí están los complementos que he probado y puedo recomendar:

• Cohete WP
• Caché total W3
• Súper caché de WP

Conclusión

Espero que este artículo haya desmitificado la minificación y le haya proporcionado una comprensión sólida de qué es y cómo puede aplicarla a su sitio web.

Es importante tener en cuenta que la minificación es más bien un paso de ajuste: es posible que veas una pequeña mejora en la velocidad de tu sitio, pero no será significativa. Dicho esto, es una práctica recomendada que vale la pena implementar además de otras técnicas de rendimiento y optimización, como combinar archivos.

Además, asegúrese de configurar, probar, reconfigurar, volver a probar, modificar y verificar qué funciona mejor para su sitio web al minimizar sus archivos porque cada sitio web es diferente.

Si le gustó esta publicación, consulte los 6 mejores complementos de almacenamiento en caché de WordPress comparados para obtener más consejos sobre cómo acelerar su sitio.

¿Has intentado minimizar tu código? ¿Qué otros métodos has usado para hacer que tu sitio web sea más rápido? ¡Háganos saber en la sección de comentarios!