Cuando minimiza los archivos CSS, HTML y Javascript de su sitio web, puede reducir un tiempo valioso de la velocidad de carga de la página de su sitio. Ahora no estamos hablando de reducir la velocidad de carga de su página a la mitad ni nada, pero cuando se trata de la velocidad de su sitio web, cualquier cosa ayuda. La velocidad de carga de su sitio no solo es importante para los visitantes que lo visitan por primera vez, sino que también es importante para mover la clasificación de los motores de búsqueda.
El término «minificar» es una jerga de programación que describe los procesos de eliminación de caracteres innecesarios en el código fuente. Estos caracteres incluyen espacios en blanco, saltos de línea, comentarios y delimitadores de bloque que son útiles para los humanos pero innecesarios para las máquinas. Minimizamos los archivos de un sitio web que contiene código CSS, HTML y Javascript para que su navegador web pueda leerlos más rápido.
Aquí hay un ejemplo de cómo se ve la minificación de CSS.
CSS antes de la minificación
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
/* Layout helpers----------------------------------*/.ui-helper-hidden {display: none;}.ui-helper-hidden-accessible {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;} |
CSS después de la minificación
|
01
|
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} |
Obviamente, este es solo un pequeño ejemplo usando un fragmento de código CSS, pero puedes imaginar la cantidad de espacio que esto ahorraría al minimizar miles de líneas de código. Entonces, si quisieras hacer esto manualmente a mano, técnicamente podrías hacerlo. ¡Pero correría un alto riesgo de error y se afeitaría innecesariamente un valioso tiempo libre o su vida!
Sigue mi consejo y utiliza las herramientas a tu disposición.
Afortunadamente, no tienes que ser un desarrollador ni conocer ninguno de los lenguajes de programación para minimizar los archivos de tu sitio. La minificación se ha convertido en una práctica estándar en el mundo del diseño web, por lo que no debería sorprenderte saber que existen muchas herramientas maravillosas (y gratuitas) para hacer el trabajo por ti.
Aquí hay una lista de algunas herramientas útiles para comenzar. Dado que muchos de estos pueden minimizar más de un tipo de código, he incluido las opciones de tipo de código entre paréntesis.
- Closure Compiler (solo JS): Closure Compiler es parte de Closure Tools , un conjunto de herramientas de Google Developers. Le permite minimizar su Javascript junto con otras optimizaciones útiles. Puede obtener su Javascript ingresando la URL de la ubicación del archivo js y luego elegir cómo desea optimizar y formatear el código. Por ejemplo, elige optimizar su código para espacios en blanco solo si lo desea. Una vez que presione el botón de compilación, minificará (o compilará) el código por usted y también verificará su código en busca de errores.
- cssminifier.com y javascript-minifier.com (CSS y JS): estos dos minificadores de Andrew Chilton son fáciles de usar. Simplemente pegue su código y luego haga clic en el botón Minificar para generar el código minificado. Incluso puede descargar el código de salida como un archivo para mayor comodidad.
- csscompressor.net (solo CSS): este compresor de CSS en línea es rápido, fácil y de uso gratuito.
- jscompress.com (solo JS): esta herramienta de compresión de JavaScript le permite comprimir el código de JavaScript mediante Copiar y Pegar, pero también puede cargar varios archivos de JavaScript a la vez. Esto es excelente para combinar archivos JavaScript en un solo archivo para mejorar la velocidad de carga de la página.
- refresh-sf.com (HTML, CSS y JS): este compresor minimizará los tipos de código JavaScript, CSS y HTML. También incluye todas las opciones de compresor para cada tipo de código si las necesita.
- htmlcompressor.com (HTML, CSS y JS): esta herramienta compresora/minificadora en línea es compatible con los tipos de código HTML, CSS y JS. Incluso admite diferentes combinaciones de tipos de código como CSS + PHP y JavaScript + PHP. E incluso puede verificar el código comprimido en busca de errores.
- minifycode.com (HTML, CSS y JS): este sitio ofrece minificadores para JavaScript , CSS y HTML con una interfaz de usuario simple y limpia que minimiza su código con un solo clic de un botón. También incluye una herramienta de «embellecimiento» para descomprimir el código minimizado para que sea fácil de leer (básicamente lo contrario de la minimización).
- Dan’s Tools: Dan’s Tools ofrece un minificador de CSS y un minificador de JavaScript . Ambas herramientas tienen una interfaz de usuario realmente limpia y fácil de usar. No ofrecen ninguna opción avanzada, pero es perfecto para propósitos comunes de minificación.
Si está buscando algunas herramientas fuera de línea para minimizar su HTML CSS o JavaScript localmente, aquí hay algunas opciones:
- Más pequeño (HTML, CSS y JS)
- phpied.com/cssmin-js/ (solo CSS)
- yui.github.io/yuicompressor (JS y CSS)
Cómo minimizar el CSS, HTML y Javascript de su sitio web
Suscríbete a nuestro canal de Youtube
Cómo Minificar tu Minificar tu HTML, CSS y JavaScript usando una herramienta en línea
Muchas de estas herramientas en línea tienen un proceso similar que implica los siguientes pasos:
Pegue su código fuente o cargue el archivo del código fuente.
Optimice la configuración para una salida específica (si hay opciones disponibles)
Haga clic en un botón para minimizar o comprimir el código.
Copie la salida del código minificado o descargue el archivo de código minificado.
Para este ejemplo, usaré las herramientas minify de minifycode.com.
Primero, ubique el archivo css (comúnmente llamado style.css) en los archivos de su sitio y ábralo usando un editor de páginas. Luego copie todo el código css en su portapapeles.
Vaya a minifycode.com y haga clic en la pestaña del minificador de CSS. Luego pegue el código CSS en el cuadro de entrada y haga clic en el botón Minimizar CSS.
Después de generar el nuevo código minimizado, copie el código.
Luego regrese al archivo css de su sitio web y reemplace el código con la nueva versión minificada.
¡Eso es todo!
Repita el mismo proceso para minimizar los archivos HTML y JavaScript de su sitio.
Cómo minimizar HTML, CSS y JavaScript en WordPress usando complementos
La forma más fácil de minimizar su HTML, CSS y JavaScript en WordPress es usar un complemento. Esto le permite optimizar los archivos de su sitio de WordPress para reducir los tiempos de carga de la página automáticamente con unos pocos clics de un botón.
Hay muchos complementos que harán el trabajo, pero mencionaré brevemente algunos destacados.
Autooptimizar (GRATIS)
Autoptimize es probablemente el complemento minify más popular que existe. Es popular porque es fácil de usar y está lleno de potentes funciones de rendimiento. Puede agregar (combinar scripts), minimizar y almacenar en caché su código. Como beneficio adicional, tiene opciones adicionales para optimizar Google Fonts, imágenes y más.
Para usar Autoptimize, puede descargar, instalar y activar el complemento desde el Panel de WordPress en Complemento > Agregar nuevo.
Una vez que el complemento esté activado, navegue a Configuración> Optimización automática. Luego, en la pestaña de configuración principal, marque el código que desea optimizar (HTML, CSS y/o JavaScript) y haga clic en Guardar cambios.
También puede hacer clic en el botón Mostrar configuración avanzada en la parte superior de la página para personalizar aún más cómo desea que se optimice su código.
¡Eso es todo! Bastante simple y poderoso.
Minimización de velocidad rápida (GRATIS)
Fast Velocity Minify es otro complemento de WordPress popular, gratuito y potente que hace más que solo minimizar. Minimiza y combina su CSS y Javascript para reducir las solicitudes HTTP a su servidor, haciendo honor a su nombre para brindarle tiempos de carga de página de alta velocidad. Hay opciones de optimización adicionales disponibles, pero la configuración predeterminada funciona muy bien para la mayoría de los sitios.
Para usar el complemento, primero instálelo y actívelo desde su Panel de WordPress navegando a Complementos> Agregar nuevo. Luego busque «minify de velocidad rápida» y una vez que aparezca en los resultados de búsqueda, haga clic para instalarlo y activarlo.
Una vez que se activa el complemento, sus archivos se minimizarán y optimizarán automáticamente para obtener el mejor rendimiento. ¡Eso fue fácil!
Vaya a la página de configuración del complemento (Configuración> Minificar velocidad rápida) para ver todas las opciones disponibles. En la pestaña Estado, puede ver una lista útil de sus archivos JavaScript y CSS que se han procesado.
En la pestaña Configuración, puede personalizar la forma en que se optimizan sus archivos. Dado que la minificación de HTML, CSS y JavaScript ya está activa, puede usar esta configuración para ajustar las opciones predeterminadas o deshabilitar la minificación para ciertos tipos de código. Incluso hay opciones para optimizar Google Fonts y Font Awesome .
¡Eso es todo!
Caché total W3 (GRATIS)
W3 Total Cache es un excelente complemento de almacenamiento en caché que incluye la opción de minimizar su HTML, JS y CSS.
Caché más rápido de WP (GRATIS)
WP Fastest Cache : este complemento de almacenamiento en caché GRATUITO de WordPress es extremadamente popular con críticas altas. El complemento realiza varias optimizaciones de rendimiento, incluida la combinación y minimización de su HTML CSS y JavaScript para un mejor rendimiento.
Una vez que se haya instalado el complemento, simplemente haga clic en la pestaña WP Fastest Cache en la barra lateral del panel de WordPress (la que tiene el increíble ícono de guepardo). En la pestaña de configuración, encontrará opciones para combinar y minimizar archivos HTML y CSS. Aunque minificar JavaScript solo está disponible en la versión pro.
Pensamientos finales
Si desea tiempos de carga de página más rápidos y mejores puntajes de rendimiento, querrá minimizar sus archivos HTML, CSS y Javascript. Con todas las herramientas en línea disponibles, puede minimizar fácilmente su código para cualquier sitio web. Y para los usuarios de WordPress, hay algunos complementos potentes disponibles para minimizar esos archivos automáticamente con unos pocos clics. Los complementos anteriores son solo algunos de los excelentes complementos que manejan la minificación entre otras optimizaciones de rendimiento. De hecho, es posible que ya tenga un complemento de tipo de rendimiento que ya tenga disponible la minificación. Por ejemplo, muchos de los mejores complementos de almacenamiento en caché de WordPress incluyen la opción de minificación. Espero que este post te ayude a decidir cuál es la mejor opción para ti.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!