Casi todos los sitios lentos lo son por las mismas pocas razones: imágenes demasiado pesadas, fuentes y hojas de estilo que retrasan lo primero que se ve, demasiados scripts de terceros, y un hosting o una caché que hacen que cada visita empiece de cero. Si las resuelves en ese orden, la mayoría de los sitios se vuelven bastante más rápidos sin necesidad de rediseñarlos.
Cómo saber si tu sitio es lento de verdad
Cómo se siente el sitio en tu computadora no dice cómo carga para tus visitantes. Pasa tus páginas principales por PageSpeed Insights y mira primero los datos de campo, que vienen de visitantes reales de los últimos 28 días, y recién después la prueba de laboratorio. Las Core Web Vitals de Google te dan tres números para seguir:
- LCP menor a 2,5 segundos: cuándo aparece el contenido principal de la página.
- INP menor a 200 milisegundos: qué tan rápido responde la página a un toque o un clic.
- CLS menor a 0,1: cuánto se mueve el diseño mientras carga.
Prueba las páginas a las que la gente llega de verdad (el inicio, tus páginas de servicio principales, los artículos que traen tráfico) y pruébalas en móvil. El resultado móvil es el que usa Google, y casi siempre es el peor de los dos.
Empieza por las imágenes
En la mayoría de los sitios que revisamos, las imágenes son por lejos lo más pesado de la página. Una foto exportada directo de una cámara o de un banco de imágenes puede pesar más que todo el resto de la página junto.
- Usa WebP o AVIF en lugar de JPG y PNG.
- Ajusta cada imagen al tamaño en que se muestra, como mucho el doble para pantallas de alta densidad.
- Carga en diferido las imágenes que están más abajo, pero nunca la imagen principal de arriba: esa tiene que cargar primero.
- Indica el ancho y el alto de cada imagen, para que la página no salte cuando llega.
Fuentes y CSS que retrasan lo primero que se ve
Antes de poder dibujar algo, el navegador descarga todas las hojas de estilo del encabezado de la página, incluida cualquier hoja de fuentes que venga de otro servidor. Cada una es un viaje de ida y vuelta que el visitante espera mirando una pantalla en blanco.
Cuando lanzamos astropanda.io, PageSpeed lo marcó en nuestro propio sitio. Solo la hoja de estilos de Google Fonts retrasaba lo primero que se veía unos 750 milisegundos en móvil. Ahora alojamos las fuentes en nuestro propio servidor, cargamos solo los juegos de caracteres que usamos y pedimos antes que nada las dos fuentes que necesita la primera pantalla.
- Aloja tus fuentes web en tu servidor y usa
font-display: swap, así el texto aparece enseguida con una fuente de respaldo. - Usa menos familias y menos pesos. Cada peso es otro archivo.
- Mantén chico el CSS que carga en todas las páginas y elimina las reglas que ya nada usa.
Demasiados scripts
Un chat, un mapa de calor, tres etiquetas de analítica, un plugin de slider que ya nadie usa. Cada script compite por el mismo hilo que tiene que responder cuando el visitante toca algo, y esa demora es lo que mide INP.
- Haz una lista de todos los scripts de terceros del sitio y de quién sigue usando sus datos.
- Quita los que nadie mira. Carga el resto con
defer, o recién cuando el visitante interactúa. - En WordPress, revisa los plugins: es común encontrar uno que agrega sus scripts en todas las páginas por una función que se usa en una sola.
Hosting y caché
Si el servidor tarda un segundo en responder, nada de la página puede empezar antes de que pase ese segundo. PageSpeed lo informa como Time to First Byte (TTFB), y menos de 0,8 segundos es un buen resultado.
- Usa caché de páginas, en el servidor o con un plugin de caché, para que las páginas no se armen de nuevo en cada visita.
- Deja que los navegadores guarden el CSS, el JavaScript y las fuentes por mucho tiempo, con una versión en el nombre del archivo para que los cambios igual le lleguen a todos.
- Suma una CDN si tus visitantes están lejos de tu servidor.
- Asegúrate de que tu plan de hosting acompañe tu tráfico. Un plan compartido barato que responde lento termina costándote visitas.
Mantenerlo rápido después del lanzamiento
Un sitio rápido se vuelve lento de a poco: un plugin nuevo, una etiqueta agregada para una campaña, una foto de 4 MB subida al blog. Revisa tus páginas principales una vez por mes y después de cada cambio importante, y trata una caída en los resultados como cualquier otro error. Esta revisión es parte de lo que debería cubrir un plan de mantenimiento.