DEV Community

Pedro Naranjo
Pedro Naranjo

Posted on

Checklist para que la web de una pyme cargue rápido en celulares (sin rehacerla)

#spanish #webdev #performance #beginners

Muchos clientes de una pyme en LatAm llegan a su web desde un celular de gama media, con datos móviles y una señal irregular. Si la página tarda en mostrarse, el usuario vuelve a Instagram o al buscador antes de ver el botón de WhatsApp. La buena noticia: casi siempre se puede mejorar sin rehacer el sitio.

Este es el checklist que usamos al revisar webs de negocios pequeños.

1. Mide primero, con datos de campo

Abre PageSpeed Insights y mira la versión móvil. Si el sitio tiene suficiente tráfico verás datos reales de usuarios (Core Web Vitals). Las tres métricas a vigilar:

  • LCP (Largest Contentful Paint): idealmente 2,5 s o menos.
  • INP (Interaction to Next Paint): 200 ms o menos.
  • CLS (Cumulative Layout Shift): 0,1 o menos.

No persigas el 100/100 del laboratorio; persigue que la página principal y la de precios se vean rápido en un celular real.

2. Las imágenes suelen ser el 80 % del problema

La foto de portada de 4 MB tomada con el teléfono es el culpable más común.

<img src="/img/portada-800.webp"
     srcset="/img/portada-480.webp 480w, /img/portada-800.webp 800w, /img/portada-1200.webp 1200w"
     sizes="100vw"
     width="1200" height="675"
     alt="Fachada de la panadería"
     fetchpriority="high">
Enter fullscreen mode Exit fullscreen mode
  • Exporta en WebP o AVIF y a un ancho razonable (casi nunca más de 1200 px).
  • Declara width y height para que el diseño no "salte" (eso baja el CLS).
  • Usa loading="lazy" en imágenes que están más abajo, pero no en la imagen principal: esa debe cargar primero.

3. Cuidado con los scripts de terceros

Widgets de chat, píxeles, mapas incrustados y carruseles pesan más que el sitio mismo. Revisa cuáles aportan algo y carga el resto con defer. Un mapa de Google incrustado se puede reemplazar por una imagen estática con enlace a la ubicación.

Para el contacto, un enlace directo a WhatsApp no necesita librerías:

<a href="https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20la%20web">Escríbenos por WhatsApp</a>
Enter fullscreen mode Exit fullscreen mode

4. Fuentes: menos familias, font-display: swap

Dos familias tipográficas con dos pesos cada una suelen bastar. Con font-display: swap el texto se ve de inmediato con una fuente del sistema mientras carga la definitiva.

5. Caché y CDN

Si tu hosting lo permite, sirve archivos estáticos con encabezados de caché largos y detrás de un CDN. Es un cambio de configuración, no de diseño, y ayuda mucho a los visitantes que vuelven.

6. Prueba como tu cliente

En Chrome DevTools activa la limitación de red "Fast 4G" o "Slow 4G" y la CPU en 4x. Navega desde la portada hasta el botón de WhatsApp. Si a ti te desespera, a tu cliente también.

Cierre

Una web rápida no es un lujo técnico: es la diferencia entre que el cliente vea tu oferta o se vaya. En Konversa construimos webs para pymes de LatAm pensadas primero para celular y conectadas a WhatsApp, y estos seis puntos son lo primero que revisamos antes de publicar.

¿Qué es lo que más te ha costado optimizar en un sitio pequeño? Te leo en los comentarios.

Top comments (0)