Saltar al contenido principal

Cómo comprimir tus archivos CSS, HTML y Javascript

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Cuando reduce los archivos CSS, HTML y Javascript de su sitio web, puede ahorrar un tiempo precioso en la velocidad de carga de las páginas de su sitio. Ahora, no estamos hablando de reducir la velocidad de carga de tu página a la mitad ni nada, pero cuando se trata de la velocidad de tu sitio web, cualquier pequeño gesto cuenta. La velocidad de carga de su sitio no solo es importante para los visitantes novatos, sino también para mover las clasificaciones de los motores de búsqueda.

El término "minimizar" es un lenguaje de programación que describe el proceso de eliminar caracteres innecesarios del código fuente. Estos caracteres incluyen espacios, saltos de línea, comentarios y delimitadores de bloque que son útiles para nosotros, humanos, pero inútiles para las máquinas. Minimizamos los archivos de un sitio web que contiene CSS, HTML y Javascript para que su navegador pueda leerlos más rápido.

Aquí hay un ejemplo de minificación CSS.

CSS antes de la minificación

/ * Un ejemplo de archivo CSS ---------------------------------- * / .user-profile-card { margen: 0px; fondo: #33E43} .user-profile-description {border: 0; posición: absoluta; ancho: auto; margen superior: 20px; }

CSS después de minificación

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Por supuesto, esto es solo un pequeño ejemplo del uso de un fragmento de código CSS, pero puede imaginar cuánto espacio ahorraría al reducir miles de líneas de código. Así que si quisieras hacerlo manualmente, técnicamente, podrías. ¡Pero correría un alto riesgo de error y perdería un tiempo precioso de su vida innecesariamente!

Sigue estos consejos y utiliza las herramientas a tu disposición.

Algunas herramientas para realizar la compresión.

Afortunadamente, no tiene que ser desarrollador ni conocer ninguno de los lenguajes de programación para reducir el tamaño de los archivos de su sitio. La minificación se ha convertido en una práctica común en el mundo del diseño web. No debe sorprenderse al saber que existen muchas herramientas maravillosas (y gratuitas) para hacer el trabajo por usted.

Aquí hay una lista de herramientas útiles para comenzar. Como muchos de ellos pueden minimizar varios tipos de código, he incluido las opciones de tipo de código entre paréntesis.

    • cssminifier.com et javascript-minifier.com (CSS y JS) - Estos dos minificadores Andrew Chilton son fáciles de usar. Simplemente pegue su código y haga clic en el botón Minimizar para mostrar el código reducido. Incluso puede descargar el código de salida como un archivo para su comodidad.
    • htmlcompressor.com (HTML, CSS y JS): esta herramienta de compresión / minificación en línea admite 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 comprobar el código comprimido para errores.
    • csscompressor.net (Solo CSS): este compresor CSS en línea es rápido, fácil y gratuito.
    • jscompress.com (Solo JS): esta herramienta de compresión de JavaScript le permite comprimir y copiar el código JavaScript, pero también puede descargar varios archivos JavaScript a la vez. Es genial para combinar archivos JavaScript en un solo archivo para una carga más rápida de la página.
    • Las herramientas de Dan - Herramientas de Dan proponer la ONU minify CSS y un para minimizar JavaScript . Ambas herramientas tienen una interfaz de usuario realmente limpia, fácil de usar. No ofrecen opciones avanzadas, pero es perfecto para objetivos comunes de minificación.
    • refresh-sf.com (HTML, CSS y JS): este compresor reducirá los tipos de código JavaScript, CSS y HTML. También incluye todas las opciones de compresión para cada tipo de código si lo necesita.
    • Compilador de cierre (Solo JS) - Compilador de cierre es parte de Herramientas de cierre , un conjunto de herramientas de Google Developers. Te permite minimizar tu Javascript con otras optimizaciones útiles. Puede usar su código Javascript ingresando la URL de la ubicación del archivo js, ​​luego elija cómo desea que se optimice y formatee el código. Por ejemplo, usted elige optimizar su código para espacios en blanco solo si lo desea. Una vez que haga clic en el botón de compilación, reducirá el código (o lo compilará) para usted, así como su código para encontrar errores.
    • minifycode.com (HTML, CSS y JS) - Este sitio ofrece minificadores para JavaScript , CO et HTML con una interfaz de usuario limpia y simple que minimiza su código con el clic de un botón. También incluye una herramienta "embellecedor" para descomprimir el código minificado para hacerlo más legible (lo opuesto a la minificación).

Si está buscando herramientas fuera de línea para minimizar su CSS o JavaScript HTML localmente, aquí hay algunas opciones:

Cómo reducir su tamaño Reduzca su código HTML, CSS y JavaScript con una herramienta en línea

Muchas de estas herramientas en línea tienen un proceso similar que involucra los siguientes pasos:

Pegue en su código fuente o descargue el archivo de código fuente.
Optimizar la configuración para una salida específica (si hay opciones disponibles)
Haga clic en un botón para ampliar o comprimir el código.
Copie la salida del código minificado o descargue el archivo de código minificado.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Para este ejemplo, usaré las herramientas de minify de minifycode.com.

Primero, ubique el archivo css (comúnmente llamado style.css) en los archivos de su sitio y ábralo con un editor de páginas. Luego copia todo el código CSS a tu portapapeles.

css style divi.jpg

Vaya a minifycode.com y haga clic en la pestaña Minifier CSS. Luego pegue el código CSS en el cuadro de entrada y haga clic en el botón Contraer CSS.

minification css.jpg

Una vez que se genere el nuevo código minified, cópielo.

Copia un codigo comprimido.jpg

Luego, vuelva al archivo css de su sitio web y reemplace el código con la nueva versión simplificada.

Es todo !

Repita el mismo proceso para reducir también los archivos JavaScript y HTML de su sitio.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Cómo minimizar HTML, CSS y JavaScript en WordPress usando complementos

La forma más sencilla de minimizar su HTML, CSS y JavaScript en WordPress es usar un complemento. Esto le permite optimizar automáticamente los archivos de su sitio de WordPress para reducir el tiempo de carga de la página con unos pocos clics.

Hay muchos complementos que harán el trabajo, pero mencionaré brevemente algunos ejemplos.

Autoptimizar (GRATIS)

autooptimizar wp.png
Autoptimizar es probablemente el plugin de minify más popular. Es popular porque es fácil de usar y está repleto de características potentes. Puede agrupar (combinar scripts), minimizar y almacenar en caché su código. Como un bono adicional, tiene opciones adicionales para optimizar las fuentes de Google, las imágenes y más.

Para usar Autoptimize, puede descargar, instalar y activar el complemento desde el Panel de WordPress en Complemento> Agregar nuevo.

autoptimize.jpg

Una vez que el complemento esté activado, vaya a Configuración> Optimización automática. Luego, en la pestaña Configuración principal, marque el código que desea optimizar (HTML, CSS y / o JavaScript) y haga clic en Guardar cambios.

optimización css.jpg

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 la optimización de su código.

css options advanced.jpg

Eso es todo! Bastante simple y potente.

W3 Total Cache (GRATIS)

v3 total cache.png
W3 Total Cache es un excelente complemento de almacenamiento en caché que incluye la capacidad de minimizar sus archivos HTML, JS y CSS.

parámetros generales w3 total cache.jpg

Guarda en caché el WP más rápido (GRATIS)

wp fast cache.png
WP caché más rápido - Estos complementos de almacenamiento en caché de WordPress GRATUITOS son extremadamente populares entre las revisiones altas. El complemento realiza varias optimizaciones de rendimiento, incluida la combinación y reducción de su CSS y JavaScript HTML para un mejor rendimiento.

Una vez que el complemento esté instalado, simplemente haga clic en la pestaña WP Quickest Cache en la barra lateral de WordPress Dashboard (la que tiene el increíble icono de Cheetah). En la pestaña Configuración, encontrará opciones para combinar y contraer los archivos HTML y CSS. Aunque la reducción de JavaScript solo está disponible en la versión pro.

configuración de caché wp más rápido.png

Para resumir

Si desea que su blog sea más rápido y tenga un mejor rendimiento, necesita reducir el tamaño de sus archivos HTML, CSS y Javascript. Con todas las herramientas en línea disponibles, puede reducir fácilmente su código para cualquier sitio web. Para aquellos que usan WordPress, tiene a su disposición potentes complementos disponibles para minimizar estos archivos automáticamente en unos pocos clics.

Eso es todo por este tutorial, espero que ahora sepa cómo reducir sus archivos CSS, HTML y JS.

Dejar un comentario

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

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
4 acciones
cuota4
Tweet
Siguiente
WhatsApp