The latest articles on DEV Community by Pedro Naranjo (@konversa). https://dev.to/konversa https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4166611%2F0bd69889-889a-42d1-96ae-44e7061eac87.png https://dev.to/konversa en Pedro Naranjo Wed, 07 Oct 2026 13:41:18 +0000 https://dev.to/konversa/checklist-para-que-la-web-de-una-pyme-cargue-rapido-en-celulares-sin-rehacerla-3hkl https://dev.to/konversa/checklist-para-que-la-web-de-una-pyme-cargue-rapido-en-celulares-sin-rehacerla-3hkl <p>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.</p> <p>Este es el checklist que usamos al revisar webs de negocios pequeños.</p> <h2> 1. Mide primero, con datos de campo </h2> <p>Abre <a href="https://pagespeed.web.dev/" rel="noopener noreferrer">PageSpeed Insights</a> 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:</p> <ul> <li> <strong>LCP</strong> (Largest Contentful Paint): idealmente 2,5 s o menos.</li> <li> <strong>INP</strong> (Interaction to Next Paint): 200 ms o menos.</li> <li> <strong>CLS</strong> (Cumulative Layout Shift): 0,1 o menos.</li> </ul> <p>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.</p> <h2> 2. Las imágenes suelen ser el 80 % del problema </h2> <p>La foto de portada de 4 MB tomada con el teléfono es el culpable más común.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/img/portada-800.webp"</span> <span class="na">srcset=</span><span class="s">"/img/portada-480.webp 480w, /img/portada-800.webp 800w, /img/portada-1200.webp 1200w"</span> <span class="na">sizes=</span><span class="s">"100vw"</span> <span class="na">width=</span><span class="s">"1200"</span> <span class="na">height=</span><span class="s">"675"</span> <span class="na">alt=</span><span class="s">"Fachada de la panadería"</span> <span class="na">fetchpriority=</span><span class="s">"high"</span><span class="nt">&gt;</span> </code></pre> </div> <ul> <li>Exporta en <strong>WebP o AVIF</strong> y a un ancho razonable (casi nunca más de 1200 px).</li> <li>Declara <code>width</code> y <code>height</code> para que el diseño no "salte" (eso baja el CLS).</li> <li>Usa <code>loading="lazy"</code> en imágenes que están más abajo, <strong>pero no</strong> en la imagen principal: esa debe cargar primero.</li> </ul> <h2> 3. Cuidado con los scripts de terceros </h2> <p>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 <code>defer</code>. Un mapa de Google incrustado se puede reemplazar por una imagen estática con enlace a la ubicación.</p> <p>Para el contacto, un enlace directo a WhatsApp no necesita librerías:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20la%20web"</span><span class="nt">&gt;</span>Escríbenos por WhatsApp<span class="nt">&lt;/a&gt;</span> </code></pre> </div> <h2> 4. Fuentes: menos familias, <code>font-display: swap</code> </h2> <p>Dos familias tipográficas con dos pesos cada una suelen bastar. Con <code>font-display: swap</code> el texto se ve de inmediato con una fuente del sistema mientras carga la definitiva.</p> <h2> 5. Caché y CDN </h2> <p>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.</p> <h2> 6. Prueba como tu cliente </h2> <p>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.</p> <h2> Cierre </h2> <p>Una web rápida no es un lujo técnico: es la diferencia entre que el cliente vea tu oferta o se vaya. En <a href="https://aikonversa.com" rel="noopener noreferrer">Konversa</a> 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.</p> <p>¿Qué es lo que más te ha costado optimizar en un sitio pequeño? Te leo en los comentarios.</p> spanish webdev performance beginners Pedro Naranjo Tue, 06 Oct 2026 13:58:09 +0000 https://dev.to/konversa/como-conectar-un-chatbot-de-whatsapp-a-la-web-de-una-pyme-sin-sobreingenieria-4m3p https://dev.to/konversa/como-conectar-un-chatbot-de-whatsapp-a-la-web-de-una-pyme-sin-sobreingenieria-4m3p <p>Cuando una pyme en Latinoamérica pide "una web con chatbot", casi nunca necesita una plataforma enorme. Necesita que el cliente que llega desde Google o Instagram pueda escribir por WhatsApp en un clic y reciba respuesta al instante, aunque sea domingo. Esta es la arquitectura mínima que nos ha funcionado en Konversa.</p> <h2> 1. La web: rápida, estática y con un solo objetivo </h2> <p>La mayoría de visitas llega desde el celular con datos móviles. Una página liviana (HTML estático o un framework con render en servidor) que cargue en menos de dos segundos vende más que una web "bonita" de 8 MB. Cada sección debe empujar a una sola acción: escribir por WhatsApp.</p> <h2> 2. El botón: un enlace wa.me con mensaje prellenado </h2> <p>No hace falta un widget pesado. Un enlace como <code>https://wa.me/&lt;número&gt;?text=Hola%2C%20vengo%20de%20la%20web</code> abre WhatsApp con un mensaje listo. Truco útil: usa un texto distinto por página ("vengo de la página de precios") para saber de dónde viene cada conversación sin instalar nada más.</p> <h2> 3. El chatbot: WhatsApp Business Platform + un webhook </h2> <p>Para responder automáticamente necesitas la WhatsApp Business Platform (Cloud API). El flujo básico:</p> <ol> <li>Meta envía cada mensaje entrante a tu webhook (un endpoint HTTPS).</li> <li>Tu servidor identifica la intención: precio, horario, ubicación, agendar o "hablar con alguien".</li> <li>Respondes con una plantilla corta o con un modelo de IA limitado a la información real del negocio.</li> <li>Si la conversación necesita a una persona, marcas el chat y notificas al dueño.</li> </ol> <p>Regla de oro: el bot debe saber cuándo callarse. Transferir a un humano a tiempo vale más que diez respuestas automáticas.</p> <h2> 4. La base de conocimiento: una hoja, no un data lake </h2> <p>Precios, horarios, zonas de entrega, preguntas frecuentes y políticas caben en un documento corto. Si el dueño puede editarlo sin llamar a un programador, el bot se mantiene actualizado. Si no, en un mes estará respondiendo con precios viejos.</p> <h2> 5. Medir lo único que importa </h2> <p>Para una pyme no hacen falta veinte métricas. Mide tres:</p> <ul> <li>Conversaciones iniciadas desde la web por semana.</li> <li>Tiempo de primera respuesta.</li> <li>Conversaciones que terminan en venta o cita.</li> </ul> <h2> Errores que vemos seguido </h2> <ul> <li>Esconder el botón de WhatsApp al final de la página.</li> <li>Un bot que inventa respuestas porque no tiene límites claros.</li> <li>Formularios largos en lugar de una conversación.</li> <li>No revisar nunca las conversaciones reales para mejorar las respuestas.</li> </ul> <h2> Cierre </h2> <p>La tecnología es la parte fácil. Lo difícil es que el mensaje correcto llegue rápido. Si quieres ver cómo lo aplicamos en negocios reales, en <a href="https://aikonversa.com" rel="noopener noreferrer">Konversa</a> hacemos páginas web con chatbot de WhatsApp integrado para pymes de Latinoamérica, listas en unas 48 horas.</p> spanish whatsapp webdev chatbot