Compartir:
Cómo funciona el HTML comprimido y por qué puede necesitarlo
Si ejecuta un sitio web, ya debería saber cómo utilizar los formatos de imagen correctos y optimizar sus imágenes para la web. 10 Herramientas de imagen de lote en línea gratuitas para cambiar el tamaño, convertir y optimizar 10 Herramientas de imagen de lote en línea gratis para cambiar de tamaño, conversión y optimización que necesita Herramientas de edición por lotes cuando tienes muchas fotos para procesar y muy poco tiempo. Le presentamos los mejores resizers por lotes, optimizadores o convertidores disponibles en línea. Lee mas . Sin embargo, aunque la compresión de imágenes es una práctica bien conocida, la compresión HTML tiende a pasarse por alto, lo que es una pena porque los beneficios merecen la pena..
En este artículo, repasaremos los dos métodos principales para reducir los archivos HTML, por qué los archivos HTML deben reducirse y cómo hacerlo..
Compresión vs. Minificación
En cuanto a la optimización de archivos HTML, existen dos métodos principales para ello: compresión y minificación. Suenan similares en la superficie, pero en realidad son dos técnicas distintas, así que no confunda..
Minificación
Puede pensar en la minificación como la eliminación de caracteres y líneas innecesarios en el código fuente. Piense en sangría, comentarios, líneas vacías, etc. Ninguno de estos son necesarios en HTML; existen para hacer que el archivo sea más fácil de leer. Recortar estos detalles puede reducir el tamaño del archivo sin afectar nada.
Ejemplo de página HTML:
Su título aquí 
Este es un encabezado
Envíame un correo a [email protected].
Este es un nuevo párrafo.!
Este es un nuevo párrafo en negrita y cursiva..
Ejemplo de página HTML, minificado:
Su título aquí 
Este es un encabezado
Envíame un correo a [email protected].
Este es un nuevo párrafo.!
Este es un nuevo párrafo en negrita y cursiva..
Tamaño original: 354. Tamaño mínimo: 272. Ahorro: 82 (23.16%).
Muchos desarrolladores web y propietarios de sitios reservan la minificación solo para archivos JS y CSS, pero esta práctica obsoleta es un error. La minificación de HTML también es importante.
En la década de 2000, las herramientas de minificación eran raras. Tenías que minimizar manualmente los archivos cada vez que algo cambiaba. Dado que los archivos HTML cambian con más frecuencia que los archivos JS y CSS, era simplemente demasiado tedioso para reducirlos cada vez. Hoy en día, es un punto discutible..
Compresión
Cuando los usuarios visitan su sitio web, lo hacen utilizando el protocolo HTTP. El navegador envía una solicitud a su servidor web para una página específica, su servidor web encuentra la página y luego envía el contenido de esa página al navegador del visitante..
Pero debido a que el protocolo HTTP admite la compresión, su servidor web puede comprimir la página antes de enviarla al visitante (suponiendo que la compresión esté habilitada en la configuración de su servidor), y luego el navegador del visitante puede descomprimir la página a su estado original.
El esquema de compresión más común es GZIP, que es un formato de archivo que utiliza un algoritmo de compresión sin pérdida ¿Cómo funciona la compresión de archivos? ¿Cómo funciona la compresión de archivos? La compresión de archivos está en el núcleo de cómo funciona la web moderna, se podría argumentar, porque nos permite compartir archivos que, de lo contrario, tardarían mucho en transferir. pero como funciona? Leer más llamado DEFLATE.
El algoritmo busca repeticiones de texto en el archivo HTML y luego reemplaza esas repeticiones con referencias a una ocurrencia anterior. Cada referencia es simplemente dos números: a qué distancia está la referencia y a cuántos caracteres estamos haciendo referencia.
Considere una cadena de texto como esta (ejemplo tomado del sitio web de GZIP):
Bla, bla, bla bla bla.El algoritmo reconoce la siguiente repetición:
Bla, bla, bla bla bla.La primera aparición es nuestra referencia, así que déjala ser:
Bla, bla, bla bla bla.La segunda aparición se refiere a la primera aparición, que tiene cinco caracteres por detrás y cinco caracteres:
Blah b [5,5] lah b lah b lah.Pero en este caso, el algoritmo reconoce que la siguiente aparición es la misma secuencia de caracteres, por lo que extiende la longitud de referencia en otros cinco:
Blah b [5,10] lah b lah.Y otra vez:
Blah b [5,15] lah.Y el algoritmo es lo suficientemente inteligente como para darse cuenta de que los siguientes tres caracteres son los primeros tres caracteres en la referencia, por lo que se extiende en tres:
Bla b [5,18].Ahora piense en un archivo HTML típico y cuánta repetición existe dentro. Casi todas las etiquetas, tales como El único inconveniente es que el servidor web necesita un poco más de CPU para ejecutar la compresión cada vez que se solicita una página. Pero como la CPU no es una gran preocupación hoy en día, casi siempre es mejor habilitar GZIP que ir sin él, incluso si tiene alojamiento web de nivel básico Los mejores servicios de alojamiento web Los mejores servicios de alojamiento web Buscando el mejor servicio de alojamiento web para sus necesidades? Ya sea para un blog pequeño o un sitio web corporativo importante, aquí están nuestras mejores recomendaciones. Lee mas . Hay dos beneficios principales, los cuales son cruciales en el panorama actual de la web móvil.. En promedio, un minificador de HTML puede reducir el tamaño de un archivo en aproximadamente un 3 por ciento con la configuración básica. Con la configuración avanzada opcional, un archivo HTML se puede reducir de otro 3 a 7 por ciento, para una reducción potencial de hasta el 10 por ciento. Esto se traduce directamente en tiempos de carga de página más rápidos.. Digamos que tiene 10 archivos, cada uno reducido de 50 KB a 45 KB para una contracción total de 50 KB. Y digamos que su sitio web recibe un promedio de 1,000 visitantes por día, donde cada visita tiene un promedio de diez páginas. La minificación de HTML solo reduce el uso de ancho de banda en 50 MB por día (1.5 GB por mes). Como puede ver, la minificación de HTML es útil por sí misma, especialmente a medida que su sitio crece, los archivos aumentan de tamaño y el tráfico aumenta. Tenga en cuenta que las pautas de PageSpeed de Google recomiendan minimizar HTML, por lo tanto, si es escéptico, deje que eso lo convenza.. Pero lo bueno de la optimización HTML es que no tiene que elegir minificación o compresión. ¡Puedes hacer ambas cosas! De hecho tu debería Haz ambos. En promedio, puede esperar que la compresión GZIP reduzca el tamaño del archivo HTML en un 70 a 90 por ciento. Utilizando el ejemplo anterior con una estimación de compresión conservadora, los archivos HTML minificados irían de 45 KB a 13.5 KB cada uno, para una contracción total de 365 KB. En comparación con los no minados / no comprimidos, el ancho de banda de su sitio ahora se reduce en 365 MB por día (11 GB por mes). Y además del ahorro de ancho de banda, cada página se carga mucho más rápido porque el navegador del usuario final solo necesita descargar 13.5 KB en lugar de 50 KB por página. Afortunadamente, ninguno de los dos es muy difícil en estos días, y no se necesitan muchos conocimientos técnicos para configurarlos.. Si ejecuta un sitio de WordPress, todo lo que necesita hacer es instalar un complemento y puede obtener los beneficios de la compresión y la minificación.. La mayoría de los complementos de almacenamiento en caché hacen más que simplemente almacenar páginas en caché. Por ejemplo, WP Fastest Cache y W3 Total Cache tienen configuraciones de un solo clic que le permiten activar la minificación HTML y la compresión GZIP, entre otras funciones que aceleran la carga de páginas y reducen el uso del ancho de banda.. Si tu solamente Si desea minificación, le recomendamos el complemento HTML Minify. Es simple, admite HTML / CSS / JS y le permite ajustar un poco el método de minificación (por ejemplo, si desea eliminar Si sus archivos HTML son estáticos (es decir, no generados dinámicamente por un CMS o un marco web), entonces puede mantener dos conjuntos de archivos HTML: a “fuente” conjunto, que no está minado para facilitar la edición, y una “minificado” conjunto, que creas cada vez que haces un cambio en un archivo fuente. Para minimizar, usa una de estas herramientas: Esta es una técnica viable si se ha alejado de los CMS como WordPress y ahora usa los generadores de sitios estáticos. 7 Razones para deshacerse de su CMS y considere un generador de sitios estáticos. Un sitio web era difícil para muchos usuarios. Los CMS como WordPress cambiaron eso, pero todavía pueden ser confusos. Otra alternativa es un generador de sitio estático. Lee mas . Los pasos para habilitar la compresión GZIP pueden variar según el software del servidor web que esté utilizando. Ya que Apache es la opción más popular, veremos cómo habilitarlo usando .htaccess. Conéctese a su servidor web mediante FTP, luego cree un archivo llamado ¿No está seguro si la compresión está funcionando en su sitio web? Pruébalo con esta herramienta.. ¿Te resultó útil este artículo Ahora que está comprimiendo y minimizando, sus páginas web deberían cargarse más rápido y usar menos ancho de banda. Si tiene alguna pregunta, no dude en preguntarlas a continuación.! Explorar más sobre: HTML, Desarrollo Web., tiene una etiqueta de cierre correspondiente, como . Además, muchas etiquetas se repiten a lo largo, como , , Los atributos también se repiten a menudo, incluyendo clase, href, y src. Es fácil ver por qué la compresión GZIP es tan efectiva con HTML.¿Por qué debería comprimir y minimizar
Cargas de página más rápidas
Menos ancho de banda utilizado
Compresión + Minificación
Cómo comprimir y minimizar HTML
Plugins de WordPress
http: y https: de URLs).Minificadores de HTML estáticos
Habilitar la compresión GZIP
.htaccess en el directorio raíz. Edite el archivo .htaccess para tener la siguiente configuración: