Anuncio

Si ejecuta un sitio web, ya debería saber cómo usa los formatos de imagen correctos y optimiza tus imágenes para la web 10 herramientas gratuitas de imagen de lote en línea para cambiar el tamaño, convertir y optimizarNecesita herramientas de edición por lotes cuando tiene muchas fotos para procesar y muy poco tiempo. Le presentamos los mejores redimensionadores, optimizadores o convertidores de lotes 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 cual es una pena porque los beneficios valen 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, hay dos métodos principales para ello: compresión y minificación. Parecen similares en la superficie, pero en realidad son dos técnicas distintas, así que no los confundas.

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 es necesario 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.

Página HTML de muestra:

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, minificada:

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 minificado: 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 desactualizada 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 minificar manualmente los archivos cada vez que algo cambiaba. Dado que los archivos HTML cambian con más frecuencia que los archivos JS y CSS, simplemente era demasiado tedioso para minificar 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 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érdidas ¿Cómo funciona la compresión de archivos?¿Cómo funciona la compresión de archivos? Aprenda los conceptos básicos de la compresión de archivos y la diferencia entre la compresión con pérdida y la compresión sin pérdida. Lee mas llamado DEFLATE.

El algoritmo busca repeticiones de texto en el archivo HTML, luego reemplaza esas repeticiones con referencias a una ocurrencia anterior. Cada referencia es simplemente dos números: qué tan atrás está la referencia y cuántos caracteres estamos haciendo referencia.

Considere una cadena de texto como esta (ejemplo tomado del sitio web 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éjalo así:

Bla, bla, bla bla bla.

La segunda aparición hace referencia a la primera aparición, que tiene cinco caracteres detrás y cinco caracteres de longitud:

Blah b [5,5] {lah b} {lah b} lah.

Pero en este caso, el algoritmo reconoce que la próxima 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:

Bla 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 de la referencia, por lo que se extiende por tres:

Bla b [5,18].

Ahora piense en un archivo HTML típico y cuánta repetición existe dentro. Casi todas las etiquetas, como, tiene una etiqueta de cierre correspondiente, como. Además, muchas etiquetas se repiten en todo momento, como, , , etc. Los atributos también se repiten con frecuencia, incluidos clase, hrefy src. Es fácil ver por qué la compresión GZIP es tan efectiva con HTML.

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 dado que la CPU no es una gran preocupación hoy en día, casi siempre es mejor habilitar GZIP que quedarse sin él, incluso si tiene alojamiento web de nivel de entrada Los mejores servicios de alojamiento web: compartido, VPS y dedicado¿Busca el mejor servicio de alojamiento web para sus necesidades? Aquí están nuestras mejores recomendaciones para su blog o sitio web. Lee mas .

Por qué deberías comprimir y minimizar

Hay dos beneficios principales, los cuales son cruciales en el panorama actual de la web móvil.

Cargas de página más rápidas

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 configuraciones avanzadas opcionales, un archivo HTML se puede reducir en otro 3 a 7 por ciento, para una reducción potencial de hasta 10 por ciento. Esto se traduce directamente en tiempos de carga de página más rápidos.

Menos ancho de banda utilizado

Supongamos que tiene 10 archivos, cada uno minimizado de 50 KB a 45 KB para una reducción total de 50 KB. Y supongamos que su sitio web recibe un promedio de 1,000 visitantes cada día, donde cada visita tiene un promedio de diez páginas. La minificación HTML sola reduce su uso de ancho de banda en 50 MB por día (1.5 GB por mes).

Compresión + Minificación

Como puede ver, la minificación HTML es útil por sí sola, especialmente a medida que su sitio crece, los archivos se hacen más grandes y el tráfico aumenta. Tenga en cuenta que Directrices de PageSpeed ​​de Google recomendamos minimizar HTML, así que si eres escéptico, deja que eso te convenza de lo contrario.

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 un archivo HTML en un 70 a 90 por ciento. Usando el ejemplo anterior con una estimación de compresión conservadora, los archivos HTML minificados pasarían de 45 KB a 13.5 KB cada uno, para una reducción total de 365 KB. En comparación con no minificado / sin comprimir, 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 dramáticamente más rápido porque el navegador del usuario final solo necesita descargar 13.5 KB frente a 50 KB por página.

Cómo comprimir y minimizar HTML

Afortunadamente, ninguno de los dos es muy difícil en estos días, y no necesita muchos conocimientos técnicos para configurarlos.

Complementos de WordPress

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 páginas de caché. Por ejemplo, WP Caché más rápido y W3 Caché total ambos tienen configuraciones de un clic que le permiten activar la minificación HTML y la compresión GZIP, entre otras características que aceleran aún más las cargas de página y reducen el uso de ancho de banda.

Si tu solamente quiere minificación, recomendamos el Minify HTML enchufar. Es simple, admite HTML / CSS / JS y le permite ajustar un poco el método de minificación (por ejemplo, si desea eliminar http: y https: de URL).

Minificadores estáticos de HTML

Si sus archivos HTML son estáticos (es decir, no se generan dinámicamente por un CMS o un marco web), puede mantener dos conjuntos de archivos HTML: un conjunto "fuente", que no está minimizado para facilitar la edición, y un conjunto "minificado", que crea cada vez que realiza un cambio en un archivo fuente.

Para minificar, use una de estas herramientas:

• Compresor HTMLC
• HTML Minifier
• HTML Minifier (diferente del anterior)

Esta es una técnica viable si se ha alejado de los CMS como WordPress y ahora usa generadores de sitio estático 7 razones para deshacerse de su CMS y considerar un generador de sitio estáticoDurante muchos años, publicar un sitio web fue difícil para muchos usuarios. Los CMS como WordPress lo cambiaron, pero aún pueden ser confusos. Otra alternativa es un generador de sitio estático. Lee mas .

Habilitar compresión GZIP

Los pasos para habilitar la compresión GZIP pueden variar según el software del servidor web que esté utilizando. Como Apache es la opción más popular, cubriremos cómo habilitarlo usando .htaccess.

Conéctese a su servidor web mediante FTP, luego cree un archivo llamado .htaccess en el directorio raíz Edite el archivo .htaccess para tener la siguiente configuración:

 mod_gzip_on Sí mod_gzip_dechunk Sí mod_gzip_item_include file. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Codificación de contenido:. * Gzip. *
 SetOutputFilter DEFLATE. 

¿No está seguro si la compresión funciona en su sitio web? Pruébalo con esta herramienta.

Para la máxima eficiencia, también debe aprenda sobre cómo verificar, limpiar y optimizar su CSS 11 herramientas útiles para verificar, limpiar y optimizar archivos CSS¿Quieres mejorar tu código CSS? Estos verificadores y optimizadores CSS ayudarán a mejorar el código CSS, la sintaxis y minimizar sus páginas web. Lee mas .