Home-theater-designers
Si tiene un sitio web, ya debería saber cómo utilizar los formatos de imagen adecuados y optimice sus imágenes para la web. 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 lástima porque los beneficios valen la pena.
En este artículo, repasaremos los dos métodos principales para reducir 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 las 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ías, comentarios, líneas vacías, etc. Ninguno de estos es necesario en HTML; existen para facilitar la lectura del archivo. Recortar estos detalles puede reducir el tamaño del archivo sin afectar nada.
Ejemplo de página HTML:
|_+_|
Tamaño original: 354. Tamaño reducido: 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 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, en ese entonces era demasiado tedioso para minimizarlos. Hoy en día, es un punto discutible.
Compresión
Cuando los usuarios visitan su sitio web, lo hacen mediante 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 (asumiendo 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érdidas llamado DEFLATE.
El algoritmo busca ocurrencias repetidas de texto en el archivo HTML, luego reemplaza esas ocurrencias repetidas 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 de GZIP):
|_+_|El algoritmo reconoce la siguiente repetición:
|_+_|La primera aparición es nuestra referencia, así que déjelo así:
|_+_|La segunda aparición se refiere a la primera aparición, que tiene cinco caracteres detrás y cinco caracteres de longitud:
|_+_|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:
|_+_|Y otra vez:
|_+_|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 en tres:
|_+_|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
|_+_|,
|_+_|, y
|_+_|. 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 prescindir de él, incluso si tiene un alojamiento web de nivel de entrada.
Por qué debería comprimir y minificar
Hay dos beneficios principales, los cuales son cruciales en el panorama actual de la web con gran cantidad de dispositivos móviles.
Cargas de páginas 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 configuraciones básicas. Con la configuración avanzada opcional, un archivo HTML se puede reducir entre un 3 y un 7 por ciento, para una reducción potencial de hasta un 10 por ciento. Esto se traduce directamente en tiempos de carga de página más rápidos.
Menos ancho de banda utilizado
Digamos que tiene 10 archivos, cada uno reducido de 50 KB a 45 KB para una reducción total de 50 KB. Y digamos que su sitio web atiende a un promedio de 1,000 visitantes cada día, donde cada visita tiene un promedio de diez páginas. La minificación HTML por sí sola reduce el 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 de 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 recomiendo minificar HTML, así que si eres escéptico, deja que eso te convenza de lo contrario.
cómo sacar archivos del disco duro viejo
Pero lo bueno de la optimización HTML es que no tiene que elegir entre minificación o compresión. ¡Puedes hacer ambas cosas! De hecho, tu deberían Haz ambos.
En promedio, puede esperar que la compresión GZIP reduzca un archivo HTML entre un 70 y un 90 por ciento. Usando el ejemplo anterior con una estimación de compresión conservadora, los archivos HTML minimizados pasarían de 45 KB a 13,5 KB cada uno, para una reducción total de 365 KB. En comparación con el ancho de banda sin minificar / 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 mucho 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 almacenar páginas en caché. Por ejemplo, Caché más rápido de WP y Caché total de W3 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 la carga de la página y reducen el uso de ancho de banda.
Si tu solamente quiere minificación, recomendamos el Minificar HTML enchufar. Es simple, admite HTML / CSS / JS y le permite modificar un poco el método de minificación (por ejemplo, si desea eliminar
|_+_|y
|_+_|de las URL).
Minificadores de HTML estático
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: un conjunto de 'fuente', que no está minimizado para facilitar la edición, y un conjunto 'minimizado', que crea cada vez que realiza un cambio en un archivo de origen.
Para minificar, use una de estas herramientas:
- HTMLCompresor
- Minificador de HTML
- Minificador de HTML (diferente al de arriba)
Esta es una técnica viable si se ha alejado de los CMS como WordPress y ahora usa generadores de sitios estáticos.
Habilitar la compresión GZIP
Los pasos para habilitar la compresión GZIP pueden diferir según el software de servidor web que esté utilizando. Dado que 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
|_+_|en el directorio raíz. Edite el archivo .htaccess para tener la siguiente configuración:
|_+_|¿No está seguro de si la compresión funciona en su sitio web? Pruébelo con esta herramienta .
Para obtener la máxima eficiencia, también debe aprenda a comprobar, limpiar y optimizar su CSS .
Cuota Cuota Pío Correo electrónico ¿Debería actualizar a Windows 11 inmediatamente?Windows 11 llegará pronto, pero ¿debería actualizar lo antes posible o esperar unas semanas? Vamos a averiguar.
Leer siguiente Temas relacionados- Programación
- HTML
- Desarrollo web
Joel Lee es el editor en jefe de MakeUseOf desde 2018. Tiene un B.S. en Ciencias de la Computación y más de nueve años de experiencia profesional en redacción y edición.
Más de Joel LeeSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse