Disminuir el tiempo de carga de una página web

¿Qué mide Google PageSpeed Insights?

1. Antes de entrar en los detalles, es importante entender que PageSpeed Insights se enfoca en dos cosas principales: la velocidad de carga (qué tan rápido aparece el contenido en pantalla) y la experiencia del usuario (qué tan fácil y agradable es usar la página). Para lograrlo, analiza muchos aspectos técnicos de su sitio web y dice qué puede mejorar.

2. Tiempo de carga de la página (Speed index)

Este es uno de los parámetros más básicos y mide cuánto tiempo tarda en cargarse todo el contenido de la página, incluyendo texto, imágenes, videos y scripts. Si va a una tienda y tiene que esperar a que abran la puerta: si tarda mucho, se va. Lo mismo pasa con una página web. Si se carga rápido (en dos segundos), los usuarios están felices; si tarda demasiado, podrían irse. PageSpeed Insights dice cómo está su página en este aspecto y qué puede hacer para acelerarla.

3. Índice de velocidad (First Contenful paint)

Este parámetro evalúa qué tan rápido aparece el contenido visible en la pantalla. No se trata de cuánto tarda todo en cargarse, sino de cuánto tiempo pasa antes de que vea algo útil. Por ejemplo, si entra a una página y en un segundo ya ve el título y una imagen. Un índice de velocidad bajo (pocos segundos) es ideal para que los usuarios no se aburran esperando.

4. Tiempo de interactividad (Total blocking time)

Aquí se mide cuánto tarda la página en estar lista para que haga cosas con ella, como hacer clic en un botón, scrolling o escribir algo. Si quiere comprar algo, pero los botones no responden porque aún no carga todo. Eso es frustrante. PageSpeed Insights dice si su página se vuelve interactiva rápido o si hay que esperar demasiado.

5. Tiempo de carga del contenido principal (Renderizado)

Este parámetro se enfoca en cuánto tarda en cargarse lo más importante de la página, como el texto principal o la imagen destacada. Por ejemplo, si lee un artículo, lo primero que quiere ver es el título y el contenido, no los anuncios del fondo. Si el contenido principal aparece rápido, los usuarios sienten que la página es útil desde el inicio.

6. Tamaño total de la página

Este mide cuánto "pesa" su página web, es decir, el tamaño en megabytes de todos los archivos que la componen (imágenes, videos y código). Si la página es muy pesada, como una maleta llena de cosas, tardará más en cargarse, especialmente en conexiones lentas como las de un celular con pocos datos. Una página ligera se carga más rápido y usa menos internet.

7. Número de solicitudes

Cada vez que su navegador carga una página, tiene que pedir muchos archivos: una imagen, un video, un archivo de diseño. El número de solicitudes es cuántas veces tiene que pedir algo al servidor. Es como si fuera al supermercado y tuviera que hacer 50 viajes para traer todo. Si reduce las solicitudes (por ejemplo, combinando archivos), la página carga más rápido.

8. Optimización de imágenes

Las imágenes suelen ser lo más pesado de una página. Este parámetro revisa si están bien preparadas para la web. Por ejemplo:

• Compresión: ¿Se pueden hacer más pequeñas sin que se vean mal?
• Formato: ¿Usa formatos ligeros como WebP en lugar de PNG o JPG pesados?
• Tamaño: ¿Las imágenes son del tamaño justo para la pantalla o son gigantes innecesarios?

Optimizarlas hace que la página sea más rápida y ahorre datos.

9. Uso de caché

Caché es como una memoria del navegador que guarda archivos de la página en su dispositivo. Este parámetro evalúa si su sitio usa bien esta función para que, cuando alguien regrese, no tenga que descargar todo otra vez. Es como guardar apuntes para no tener que escribirlos de nuevo. Un buen uso de la caché acelera las visitas repetidas.

10. Minificación de recursos

Esto se refiere a "limpiar" los archivos de código (HTML, CSS y JavaScript) quitando cosas innecesarias como espacios en blanco o comentarios que los humanos usamos para leer, pero que el navegador no necesita. Es como reducir una enciclopedia a solo lo esencial en un diccionario. Archivos más pequeños se descargan más rápido.

11. Eliminación de recursos que bloquean el renderizado

A veces, archivos como estilos (CSS) o scripts (JavaScript) impiden que la página se muestre hasta que se cargan por completo. Esto es como esperar a que pinten una casa antes de entrar. PageSpeed Insights sugiere cómo cargar estos archivos sin que demoren la aparición del contenido.

12. Priorización del contenido visible

Este parámetro revisa si la página carga primero lo que ve sin desplazarte (el contenido "por encima del pliegue"). Por ejemplo, si entra a una tienda online, quiere ver los productos de inmediato, no los términos legales del final. Priorizar este contenido hace que la página parezca más rápida.

13. Uso de conexiones persistentes

Normalmente, el navegador abre y cierra conexiones con el servidor cada vez que pide algo. Con conexiones persistentes, usa la misma conexión para pedir varios archivos, como si mantuviera la puerta abierta en lugar de abrirla y cerrarla mil veces. Esto ahorra tiempo.

14. Compresión de texto

Archivos como HTML, CSS y JavaScript pueden comprimirse antes de enviarse al navegador, como si empaquetara ropa en una bolsa de vacío. Esto reduce su tamaño y hace que se descarguen más rápido. PageSpeed Insights dice si está usando esta técnica bien.

15. Optimización de la entrega de CSS

El CSS controla cómo se ve su página (colores, fuentes y estilo). Si se carga mal, puede retardar todo. Este parámetro sugiere trucos como poner el CSS esencial directamente en la página y dejar el resto para después, para que el contenido aparezca rápido.

16. Optimización de la entrega de JavaScript

El JavaScript hace que las páginas sean interactivas, pero si se carga lento, bloquea todo. PageSpeed Insights recomienda usar opciones como "async" o "defer" para que el JavaScript no frene la aparición del contenido.

17. Evitar redirecciones

Una redirección es como cuando va a una dirección y no es ahí, es como jugar en un rally de pistas. Esto añade tiempo extra porque el navegador tiene que seguir el nuevo camino. Reducirlas acelera la carga.

18. Uso de una red de distribución de contenido (CDN)

Un CDN guarda copias de su página en servidores por todo el mundo. Así, si está en México, descarga desde un servidor cercano en lugar de uno lejano en Europa. Esto reduce la espera y mejora la velocidad.

19. Optimización para dispositivos móviles

Como mucha gente usa celulares, PageSpeed Insights revisa cómo funciona su página en móviles. Considera cosas como el tamaño de la pantalla, la velocidad de la conexión y si los botones son fáciles de tocar. Una página bien optimizada para móviles carga rápido y se usa cómodamente.

20. Accesibilidad

Aunque no afecta directamente la velocidad, este parámetro evalúa si su página es fácil de usar para todos, incluyendo personas con discapacidades. Por ejemplo, ¿el texto tiene suficiente contraste? Esto mejora la experiencia general.