Minificador HTML
Páginas más pequeñas, mismo resultado visual
Este minificador HTML gratis funciona en línea, quita los comentarios y los espacios de tu marcado y te devuelve una página más pequeña. Primero, pega tu HTML o suelta tus archivos. Luego pulsa un botón. Por último, copia el resultado, porque todo el trabajo ocurre en esta pestaña.
- GratisPrecio
- No hace faltaCuenta
- NingunaSubidas
- En cada pasadaVerificado
Minificador de HTML
Pega tu código o suelta tus archivos — sin subir nada
Resultado minificado
- Original
- —
- Minificado
- —
- Ahorrado
- —
- Con gzip
- —
- Etiquetas
- —
- Tardó
- —
Listo. Pega tu HTML y pulsa Minificar o Embellecer.
¿Para qué sirve un minificador HTML?
Un minificador HTML reescribe una página escrita para personas en otra que el navegador descarga más rápido. Elimina tus comentarios y la sangría que solo ayuda a quien lee. Sin embargo, conserva cada etiqueta y cada palabra, así que la página se ve exactamente igual.
El ahorro llega pronto, y por eso importa. El HTML es lo primero que pide un navegador y aquello tras lo que esperan todas las demás peticiones. Por lo tanto, un documento que baja de 80 KB a 58 KB pone en marcha antes toda la cascada.
Hay quien llama a este trabajo compresor HTML. Ambos términos describen un mismo resultado: menos caracteres y la misma visualización. En resumen, publicas la página pequeña y te quedas con la legible.
Algunos espacios importan y la mayoría no. La especificación de sintaxis HTML traza esa línea justo donde la traza esta página.
Por qué el HTML es más difícil de minificar que CSS o JavaScript
En CSS y JavaScript, el espacio entre dos elementos es decoración. En HTML es texto que un lector puede ver. `bold italic` muestra un hueco entre esas palabras y `bolditalic` no, así que una herramienta que aprieta cada espacio reescribe en silencio tu frase.
Esa sola diferencia explica la mayoría de los avisos de "el minificador rompió mi página". Por eso esta herramienta mira qué hay a cada lado de cada hueco. Junto a una etiqueta en línea, el hueco se queda en un espacio, porque un lector lo vería. Junto a una etiqueta de bloque desaparece, porque ahí no se ve nada.
Lo que se queda exactamente como lo escribiste
Todo lo que hay dentro de `pre`, `textarea`, `script`, `style` y `code` sobrevive byte a byte, saltos de línea incluidos. Un espacio dentro de un bloque `pre` es salida visible, y un salto de línea dentro de un script puede terminar una instrucción.
Los comentarios condicionales también sobreviven. `
Por qué se conservan las comillas de los atributos
Algunas herramientas quitan las comillas de `class="card"`. Esos bytes existen pero son pocos, y que sea seguro depende del valor. Esta herramienta las deja, porque unos pocos caracteres nunca justifican ese tipo de error.
En esta página
- La herramienta
- ¿Para qué sirve un minificador HTML?
- Minifica HTML en cuatro pasos
- Un minificador HTML que respeta tus espacios
- Sacar el máximo partido a este compresor HTML
- Errores que rompen una página minificada
- Preguntas frecuentes sobre el minificador HTML
- Otras herramientas que puedes usar ya
Sigue leyendo
Minifica HTML en cuatro pasos
Ni programas, ni alta, ni colas. Basta con esta misma pestaña del navegador.
- 1
Añade tu marcado
Pega tu HTML en el editor o suelta tus archivos .html en la pestaña de subida. Ambas vías hacen el mismo trabajo.
- 2
Elige qué se va
Los comentarios se van por defecto y los condicionales se quedan. Además, decides si colapsar espacios y ordenar atributos.
- 3
Pulsa minificar
La herramienta recorre cada carácter, reescribe la página y luego vuelve a leer su propia respuesta antes de mostrarte nada.
- 4
Copia o descarga
Llévate el resultado como texto o guárdalo como archivo .min.html. Mientras tanto, tu original se queda exactamente como lo dejaste.
Un minificador HTML que respeta tus espacios
Una página rota rara vez se anuncia. Simplemente se ve un poco mal, y nadie descubre qué herramienta lo causó.
Distingue en línea de bloque
Un hueco junto a un span o un enlace se queda en un espacio, porque un lector lo ve. Un hueco junto a un div desaparece, porque ahí no se ve nada.
Los bloques en bruto quedan exactos
Lo que haya dentro de pre, textarea, script, style o code sale byte a byte, con saltos de línea y todo.
Verifica cada pasada
La herramienta vuelve a leer su propia salida y compara cada etiqueta, atributo y palabra con tu original. Una discrepancia se informa, nunca se oculta.
Los condicionales sobreviven
Un comentario condicional de IE es marcado disfrazado de comentario. Por lo tanto, se queda salvo que digas lo contrario.
Las imágenes nunca salen de esta pestaña de Denwix
Tu marcado nunca viaja a ningún sitio. No hay petición, ni almacenamiento, ni registro, así que puedes pegar aquí trabajo de clientes con seguridad.
Muestra la cifra real
Ves el tamaño con gzip junto al tamaño bruto, porque gzip es lo que realmente llega a tu visitante.
Sacar el máximo partido a este compresor HTML
Unos pocos hábitos mantienen predecible una página minificada.
- Conserva el original. Edita siempre el archivo legible. Así, la copia minificada es algo que generas, nunca algo que mantienes.
- Minifica al final. Ejecútalo después de tu motor de plantillas y de tus pruebas. De lo contrario, pruebas una página y publicas otra.
- Revisa una frase con enlaces. Mira un párrafo que contenga enlaces. Si las palabras siguen teniendo sus huecos, las reglas de espacios hicieron su trabajo.
- Sírvelo con gzip. Minificar y comprimir suman ahorros distintos. Como resultado, el tamaño transferido queda muy por debajo de lo que ocupa el archivo en disco.
- No toques los condicionales. Salvo que sepas que nada depende de ellos, deja ese interruptor activado. No cuestan casi nada.
- Fíjate en la marca de verificado. Si una pasada dice que no pudo verificar, no publiques ese archivo. En cambio, envíanos el caso y conserva tu original.
Errores que rompen una página minificada
Casi todas las historias de "ahora se ve mal" son una de estas tres.
Apretar los huecos en línea
Una herramienta que quita todos los espacios junta tus palabras. La página sigue validando, pero se lee mal.
Aplanar los bloques pre
Los ejemplos de código y los diseños ASCII dependen de sus saltos de línea. Si los colapsas, el ejemplo se convierte en una sola línea larga.
Editar el archivo minificado
Tus cambios desaparecen la próxima vez que compilas. Así que el arreglo siempre va en la plantilla de origen.
Preguntas frecuentes sobre el minificador HTML
¿Este minificador HTML cambiará el aspecto de mi página?
No debería, y lo comprueba en lugar de suponerlo. La herramienta conserva los espacios que se ven entre elementos en línea, elimina solo los que no se ven y después vuelve a leer su propia salida para confirmar que cada etiqueta y cada palabra sobrevivieron.
¿Qué pasa con mis bloques script y pre?
Salen byte a byte, saltos de línea incluidos. Eso importa por partida doble: un espacio dentro de un bloque pre es salida visible, y un salto de línea dentro de un script puede terminar una instrucción.
¿Cuánto más pequeña será mi página?
El marcado legible suele bajar entre un 15 y un 30 por ciento, y la herramienta muestra la cifra exacta de tu archivo. Sin embargo, una página creada por un empaquetador suele venir ya compacta, así que ahorra mucho menos.
¿Elimina mis comentarios condicionales de IE?
Solo si lo pides. Parecen comentarios pero se comportan como marcado, así que la herramienta los conserva por defecto y te da un interruptor para cuando estés seguro de que nada los necesita.
¿Mi HTML viaja a algún servidor?
No. Todo el minificador funciona dentro de la pestaña de tu navegador. No hay petición, ni almacenamiento, ni registro, así que puedes pegar sin riesgo trabajo que no puedes compartir.
¿Acepta más de un archivo por tanda?
Sí. Abre la pestaña de subida y suelta tantos archivos .html o .htm como quieras. La herramienta minifica cada uno por separado, y puedes descargarlos uno a uno.
Otras herramientas que puedes usar ya
Todas funcionan en tu navegador y no te piden nada.
Minificador CSS
Reduce una hoja de estilos sin romper calc() ni tus selectores.
Abrir herramienta →Minificador JavaScript
Reduce un script, con la misma comprobación de que el resultado sigue coincidiendo con tu código.
Abrir herramienta →Mide ancho, alto y peso de una imagen
Lee las dimensiones, el peso y el formato reales de todas tus imágenes a la vez.
Abrir herramienta →
Reduce tu próxima página en segundos
Pega tu marcado, pulsa un botón y comprueba tú mismo el ahorro. Nada viaja a ningún sitio y nada se queda guardado.