GTmetrix: 25 puntos clave para entender tu informe de rendimiento y mejorarlo

GTmetrix es una de las herramientas más usadas para medir el rendimiento de un sitio web. Ofrece un análisis detallado y recomendaciones para ganar velocidad y eficiencia. Estos son 25 parámetros que evalúa y la manera de corregir cada uno. 1. Tiempo de carga de la página (Page Load Time) Qué es : el tiempo total que necesita una página para cargarse por completo. Cómo mejorarlo : optimizar las imágenes, reducir el peso de los archivos, usar una CDN y minimizar las peticiones HTTP. 2. Tamaño total de la página (Total Page Size) Qué es : el peso sumado de todos los recursos de la página. Cómo mejorarlo : comprimir imágenes y archivos, emplear formatos eficientes y minificar el CSS y el JavaScript. 3. Número de peticiones HTTP (Number of HTTP Requests) Qué es : las peticiones que hace el navegador para cargar todos los recursos. Cómo mejorarlo : combinar archivos CSS y JavaScript, usar sprites de imágenes y recortar el uso de plugins. 4. Tiempo hasta el primer byte (Time to First Byte, TTFB) Qué es : lo que tarda el servidor en enviar el primer byte de datos. Cómo mejorarlo : mejorar el rendimiento del servidor, elegir un servidor web rápido y optimizar la base de datos. 5. Optimización de imágenes (Optimize Images) Qué es : las imágenes sin optimizar alargan el tiempo de carga. Cómo mejorarlo : comprimirlas sin perder calidad con herramientas como TinyPNG o ImageOptim. 6. Minificación de CSS (Minify CSS) Qué es : los CSS sin minificar llevan espacios y comentarios que sobran. Cómo mejorarlo : minificarlos con herramientas como CSSNano o UglifyCSS. 7. Minificación de JavaScript (Minify JavaScript) Qué es : los archivos JavaScript sin minificar contienen caracteres innecesarios. Cómo mejorarlo : minificarlos con herramientas como UglifyJS. 8. Minificación de HTML (Minify HTML) Qué es : el HTML sin minificar puede arrastrar espacios en blanco y comentarios superfluos. Cómo mejorarlo : herramientas como HTMLMinifier ayudan a minificarlo. 9. Activar la compresión (Enable Compression) Qué es : la compresión reduce el tamaño de lo que el servidor envía. Cómo mejorarlo : activar Gzip o Brotli en el servidor web. 10. Aprovechar la caché del navegador (Leverage Browser Caching) Qué es : si los recursos no tienen una caché adecuada, el navegador debe descargarlos en cada visita. Cómo mejorarlo : configurar en el servidor las cabeceras de caché para imágenes, CSS y JavaScript. 11. Reducir el bloqueo por CSS (Reduce CSS Blocking Time) Qué es : el CSS que bloquea el renderizado puede retrasar la carga. Cómo mejorarlo : aplicar «Critical CSS» y cargar de forma asíncrona el CSS no crítico. 12. Reducir el bloqueo por JavaScript (Reduce JavaScript Blocking Time) Qué es : el JavaScript que bloquea el renderizado puede retrasar la carga. Cómo mejorarlo : cargarlo de forma asíncrona o diferida. 13. Dar prioridad al contenido visible (Prioritize Visible Content) Qué es : conviene que el contenido «above the fold» sea lo primero en cargarse. Cómo mejorarlo : aplicar «lazy loading» al contenido que no se ve y optimizar el CSS crítico. 14. Evitar redirecciones en la página de destino (Avoid Landing Page Redirects) Qué es : cada redirección extra suma tiempo de carga. Cómo mejorarlo : reducirlas usando enlaces directos y actualizando las URL. 15. Evitar los complementos del navegador (Avoid Plugins) Qué es : los complementos pueden alargar la carga y generar problemas de compatibilidad. Cómo mejorarlo : prescindir de Flash y de otros plugins y usar tecnologías nativas del navegador. 16. Reducir el tamaño de transferencia (Reduce Transfer Size) Qué es : el tamaño total de los recursos que viajan del servidor al navegador. Cómo mejorarlo : comprimir archivos, minimizar el código y usar una CDN. 17. Preconectar con los orígenes necesarios (Preconnect to Required Origins) Qué es : preconectar con dominios de terceros puede acelerar la carga. Cómo mejorarlo : usar la directiva para los recursos externos. 18. Usar la resolución previa de DNS (Use DNS Prefetching) Qué es : resolver el DNS por adelantado agiliza las peticiones a recursos externos. Cómo mejorarlo : añadir para los dominios externos. 19. Precargar los recursos clave (Preload Key Requests) Qué es : precargar los recursos importantes mejora la velocidad de carga. Cómo mejorarlo : usar en recursos críticos como fuentes y scripts. 20. Evitar cadenas de redirecciones (Avoid Redirect Chains) Qué es : encadenar varias redirecciones aumenta el tiempo de carga. Cómo mejorarlo : simplificarlas y apuntar siempre con enlaces directos. 21. Evitar un DOM excesivo (Avoid Excessive DOM Size) Qué es : un DOM demasiado grande ralentiza el renderizado. Cómo mejorarlo : optimizar la estructura del HTML y eliminar los elementos innecesarios. 22. Usar técnicas de renderizado eficientes (Use Efficient Rendering Techniques) Qué es : las técnicas ineficientes retrasan la visualización de la página. Cómo mejorarlo : aplicar la fragmentación del CSS y el renderizado asíncrono. 23. Optimizar la ejecución de JavaScript (Optimize JavaScript Execution) Qué es : un JavaScript sin optimizar puede perjudicar el rendimiento. Cómo mejorarlo : minimizar y diferir el JavaScript no crítico y recurrir a técnicas como el «tree shaking». 24. Reducir el tiempo de respuesta del servidor (Reduce Server Response Time) Qué es : un servidor lento alarga el tiempo de carga. Cómo mejorarlo : optimizar el backend, elegir un servidor rápido y mejorar la base de datos. 25. Vigilar la salud del sitio con regularidad (Monitor Site Health Regularly) Qué es : supervisar el rendimiento de forma periódica permite detectar problemas a tiempo. Cómo mejorarlo : hacer auditorías periódicas con GTmetrix, Google PageSpeed Insights y Lighthouse.