Temas del artículo
¿Por qué aplicar acciones de compresión web?
Lograr potenciar acciones de compresión web es ya una tarea obligada cara a la gran cantidad de información y recursos que se generan.
Al reducir el tamaño de archivos como imágenes, CSS y JavaScript disminuimos el tiempo de carga en la página mejorando la experiencia de usuario y aumentando la probabilidad de permanencia.
Aplicando técnicas de compresión como la minificación y la compresión gzip reduciremos el ancho de banda para transmitir los recursos al navegadoraligerando peso y uso de recursos. Muy importante sobretodo en dispositivos móviles o conexiones de red lentas donde acumular recursos puede suponer pérdidas de tráfico.
7 acciones de compresión web para mejorar el rendimiento
Minificación de CSS
Al eliminar los espacios en blanco, comentarios y caracteres sin uso en archivos CSS y JavaScript agilizas el tamaño de los archivos acelerando la carga de la página.
Los comentarios en CSS pueden ser útiles para los desarrolladores pero no para el navegador al igual que los espacios en blanco o las líneas en blanco son ignorados por los navegadores. Eliminarlos no afectará a la apariencia de la página y optimizará la velocidad de carga.
También si hay reglas CSS que se repiten en el archivo se pueden combinar en una sola regla para reducir duplicaciones.
Minificación de JavaScript
Al igual que con el CSS; los comentarios en JavaScript se pueden eliminar también sin que afecte para nada a la funcionalidad del código.
Los espacios y líneas en blanco que ralentizan la carga son innecesarios y pueden eliminarse para reducir el tamaño de archivo.
Dentro de todos éstos elementos que no alteran el diseño ni el funcionamiento; también los nombres de variables y funciones pueden abreviarse y reducir el tamaño del archivo.
Sin ser una tarea compleja, herramientas como UglifyJS, YUI Compressor o Closure Compiler resultan herramientas muy eficaces, con una automatización del proceso de minificación muy ágil.
¿Cómo comprimir CSS y Javascript?
El proceso de compresión para ambos archivos es sencillo:
1- Navega hasta la carpeta de tu tema y abre el archivo style.css en un editor de texto
2- Selecciona todo el código CSS contenido en el archivo, excluyendo cualquier comentario al inicio
3- Utiliza una herramienta de compresión de CSS como CSSCompressor, CSSMinifier o Minifier, que comprimen tanto CSS como JavaScript
Pega el código comprimido en el lugar del código original en el archivo style.css. Así, tu CSS estará ya comprimido y listo para mejorar el rendimiento. Si también has comprimido JavaScript, sigue el mismo proceso para los archivos JS relevantes
Compresión Brotli
Cuando descargas algo de Internet, ya sea en una web o aplicación, estás enviando y recibiendo datos comprimidos para ocupar menos espacio y hacer que todo funcione más rápido. Ahí es donde entra en juego Brotli, una de las acciones de compresión web más eficaces.
Brotli es, básicamente, una especie de complemento en la compresión de datos. Fue creado por Google para hacer más eficiente la carga en la web. En lugar de simplemente ajustar los datos, como hacen otros métodos de compresión, Brotli hace que esos datos ocupen menos espacio.
Cuanto menos espacio ocupen los datos, más rápido se cargan las páginas y aplicaciones. Además, también ayuda a ahorrar ancho de banda.
- Habilitar la compresión Brotli en Apache:
Para configurar la compresión Brotli necesitarás agregar éstas líneas a tu archivo de configuración de Apache (Httpd.conf o apache2.conf) de forma manual o a través de un editor de texto:
<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/javascript
</IfModule>
- Habilitar la compresión Brotli en Nginx:
Habillita el módulo “ngx_brotli”. En la configuración de servidor, agrega:
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
Compresión Gzip
La compresión Gzip ayuda mucho a que tus archivos de Internet sean más pequeños y rápidos de enviar. Básicamente, comprime el archivo quitando partes redundantes y haciéndolo más compacto para enviarlo más rápidamente y ocupar menos espacio en el servidor.
- Habilitar la compresión Gzip en Apache:
Para habilitarlo deberás abrir tu archivo de configuración de Apache ( Httpd.conf o apache2.conf ) y buscar la sección de configuración de compresión para asegurar que el módulo “mod_deflate” esté habilitado.
Después tan sólo agrega las siguientes líneas para habilitar la compresión Gzi:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript text/xml application/xml application/xhtml+xml application/rss+xml application/atom+xml image/svg+xml
</IfModule>
- Habilitar la compresión Gzip en Nginx:
Abre el archivo de configuración de Nginx (“/etc/nginx/nginx.conf”) y dentro del bloque “http”agrega las líneas:
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss application/xhtml+xml application/rss+xml application/atom+xml image/svg+xml;
Imágenes con WebP
Utiliza el formato de imagen WebP en lugar de JPEG o PNG. Como comentamos en un post anterior, El formato de imagen WebP está diseñado para ofrecer una mejor compresión sin pérdida de calidad en comparación con JPEG y una compresión más eficaz sin pérdida de calidad en comparación con PNG.
El formato WebP da una mejor compresión si buscas reducir el tamaño de archivo de una imagen sin empeorar la visualización. Además, permite obtener imágenes con transparencia similar a PNG, pero con un tamaños de archivo más pequeños.
Recuerda que, en cuanto a acciones de compresión web; reducir el tamaño de las imagenes es prioritario para optimizar el uso de ancho de banda y lograr tiempos de carga más rápidos y ágiles
Un formato con total compatibilidad con los navegadores principales: Chrome, Firefox, Edge y Opera.
Lazy Loading de Imágenes
Como os comenté en un post reciente; el “Lazy Loading” de imágenes es una técnica de compresión web que consiste en cargar imágenes en una página solo cuando son necesarias… es decir, cuando están a punto de aparecer en la ventana del navegador del usuario. Una acción que mejora significativamente los tiempos de carga reduciendo el consumo de ancho de banda.
Implementando el Lazy Loading mejorarás el rendimiento sobre todo si tu sitio cuenta con muchas imágenes. Combinando con otras técnicas de optimización como la compresión de imágenes y el uso de CDN (Content Delivery Network) se mejora enormemente la navegación.
En cuanto a optimización de imágenes y más allá de aplicar técnicas como la carga diferida siempre será prioritario echar una ojeada al tamaño de las imágenes; minimizar el tiempo de carga empezando por reducir el tamaño excesivo y comprimir el peso de carga de cada una.
Compresión web de Fuentes
Comprimir las fuentes en la web es otra técnica de optimización muy útil para reducir el tamaño de los archivos pero en éste caso de las fuentes tipográficas utilizadas en la web.
Estas fuentes tipográficas son archivos de datos que contienen la información necesaria para representar y visualizar correctamente el texto en la web. Al comprimirlas reducimos su tamaño en bytes sin afectar la calidad visual.
Por supuesto, en cuanto a SEO la compresión de fuentes tendrá siempre un impacto positivo. Google y cualquier motor de búsqueda priorizan enormemente la velocidad de carga de un sitio como un factor clave en la clasificación de resultados de búsqueda.
Aquí tienes algunos consejos para comprimir tus fuentes:
- Utiliza formatos de fuentes comprimidos como WOFF (Web Open Font Format) y WOFF2 que ya están comprimidos de forma nativa
- En lugar de incluir la fuente completa en tu web considera incluir solo los caracteres necesarios
- Al igual que con el código HTML, CSS y JavaScript, puedes minificar tus archivos de fuentes para eliminar caracteres innecesarios como espacios en blanco y comentarios
- Configura tu servidor para comprimir los archivos de fuentes utilizando gzip. De esta forma, reducirás el tamaño de los archivos antes de enviarlos al navegador del usuario
- Limita el número de fuentes diferentes que utilizas en tu la web y utiliza solo las que sean realmente necesarias. Cada fuente adicional aumenta el tamaño de la página y puede ralentizar los tiempos de carga.
- Configura el almacenamiento en caché para tus archivos de fuentes de forma que los archivos se almacenen localmente en el navegador del usuario después de la primera carga
- Utiliza un CDN para distribuir tus archivos de fuentes de manera que optimicen automáticamente la entrega de archivos estáticos, incluidas las fuentes
En conclusión...
La compresión web es una práctica clave para mejorar el rendimiento y la velocidad en la web.
Al optimizar el tamaño de los recursos aceleramos la velocidad de carga y mejoramos ése trato con el tráfico de visita que llamamos experiencia del usuario. Además, los motores de búsqueda como Google favorecen los sitios que ofrecen una experiencia de usuario más rápida y eficiente.
Comprimiendo recursos como imágenes, archivos CSS, JavaScript o fuentes podemos reducir significativamente el tiempo necesario para cargar una página por completo. Los archivos más pequeños requieren de menos recursos para ser transferidos desde el servidor al navegador y agiliza mucho más las visitas que, por ejemplo, acceden a la web desde móviles o conexiones de internet más lentas.
Con cada vez más competidores en cada nicho de mercado, cuidar hasta el último detalle es clave. ¿Alguna sugerencia que añadir…?