--- title: "Rendimiento web | Digital Cuisine" description: "Carga, respuesta y estabilidad visual verificables: Core Web Vitals en campo, presupuestos de laboratorio al publicar y una revisión acotada de digital cuisine." url: "https://cuisine.digital/es/servicios/rendimiento-web" lang: es generated: cuisines-markdown-v1 --- Rendimiento web # La rapidez no es una sensación. Es una medición. Hacemos verificables el tiempo de carga, el tiempo de respuesta y la estabilidad visual. Con datos de campo de visitas reales, con presupuestos de laboratorio claramente identificados en el control de publicación y con una implementación que cumple ambos. [Hablemos de tu proyecto](https://cuisine.digital/es/contacto)[Ver nuestro trabajo](https://cuisine.digital/es/referencias.md) ## Tres valores describen lo que experimentan los visitantes Google evalúa las Core Web Vitals en campo, es decir, en visitas reales. Lo que cuenta es el percentil 75 de las visitas a la página, por separado para móvil y escritorio. Tres de cada cuatro visitas deben alcanzar el rango «bueno». Una media no basta. **Largest Contentful Paint** Cuándo aparece el contenido visible más grande, normalmente la imagen principal o el encabezado. Se considera bueno un valor de hasta 2,5 segundos. Lo decisivo es el momento en el que la página está disponible para el visitante, no aquel en el que ha respondido el servidor. **Interaction to Next Paint** Cuánto tarda la página en reaccionar de forma visible a una interacción. Se considera bueno un valor de hasta 200 milisegundos. Se mide durante toda la visita, incluido el filtro que solo se pulsa después de desplazarse. **Cumulative Layout Shift** Cuánto se desplaza la disposición de los elementos mientras carga la página. Se considera bueno un valor de hasta 0,1. Las fuentes cargadas después, las imágenes sin dimensiones fijas y las barras de avisos insertadas tarde son las causas más frecuentes. ## El laboratorio y el campo no miden lo mismo Una ejecución de Lighthouse es una prueba de laboratorio. Carga una página una vez en frío, en un dispositivo de gama media simulado, con conexión limitada, sin historial, sin caché precargada y sin usuario autenticado. Solo por eso los valores varían entre dos ejecuciones de la misma página. Además, parte de la puntuación procede de métricas que ni siquiera se generan en las visitas reales. Una ejecución estándar representa la carga de la página, no la visita. Por eso comprobamos además el desplazamiento, los formularios, los diálogos de consentimiento y el primer toque en el móvil, con recorridos de usuario propios en el laboratorio y con datos de campo. Lighthouse puede medir estos recorridos, pero un valor de carga por sí solo no los muestra. Para la evaluación cuentan los datos de campo. Cuando Chrome UX Report dispone de un volumen de datos suficiente, lo usamos y lo complementamos con mediciones propias en el navegador de tus visitantes. Informamos del percentil 75 porque Google evalúa con ese criterio. También analizamos el percentil 90 para ver lo mala que llega a ser la experiencia en las visitas más lentas. Identificamos ambos valores por separado. ## Nuestro propio control de publicación Este sitio web es nuestro banco de pruebas. Cada cambio pasa primero a un entorno de staging y se mide allí mediante la API de PageSpeed Insights: una muestra de todos los tipos de página, para escritorio y móvil. La mediana de rendimiento debe alcanzar al menos 95 en escritorio y 90 en móvil. Accesibilidad, buenas prácticas y SEO deben estar en 100. Solo con este resultado aprobamos la versión para el sitio en producción, y por la noche el pipeline mide además cada página publicada para elaborar un informe. El control es un límite mínimo, no un objetivo para los informes. Los umbrales están fijados para que la variabilidad de los servidores de medición no cuente como una regresión, pero una caída real se detecte de inmediato. Nos obliga a comprobar cada página nueva en las mismas condiciones que la primera. No indica lo que experimentan realmente tus visitantes. Para eso están los datos de campo. Presupuestos de laboratorio ## Qué son estas cifras y qué no son Rendimiento en escritorio de al menos 95, rendimiento en móvil de al menos 90, y accesibilidad, buenas prácticas y SEO de 100 cada uno. Son presupuestos de una prueba de laboratorio y el umbral de aprobación de nuestro pipeline. No son datos de campo, ni un resultado de medición actual, ni una afirmación sobre la rapidez de una visita concreta. Un resultado de medición fiable siempre indica la fecha, el perfil, el alcance de las páginas comprobadas y la versión del software. Cuando mostramos resultados, los acompañamos de estos datos. Si faltan, se trata de un presupuesto. ## De dónde viene la velocidad El rendimiento no es un paso posterior. Nace de decisiones de arquitectura que después solo se pueden corregir con un coste elevado. **Renderizado en el servidor** Desarrollamos con React Server Components. Lo que no necesita ser interactivo se renderiza en el servidor y llega como HTML listo. Al navegador solo llega el JavaScript que tiene una función allí. **Imágenes en el orden adecuado** La imagen que constituye el contenido visible más grande se carga con prioridad y se entrega en tamaños adecuados. Todo lo que queda fuera del área visible llega después. Cada imagen incluye sus dimensiones para que nada se desplace. **Fuentes sin saltos** Alojamos nuestras propias fuentes, precargamos la variante más importante y definimos una fuente de sustitución con métricas ajustadas. El texto se puede leer de inmediato y no se desplaza al cambiar a la fuente definitiva. **Sistemas de terceros con presupuesto** Cada script externo cuesta tiempo de carga y capacidad de respuesta. Integramos los sistemas de terceros de forma asíncrona, les asignamos un presupuesto de rendimiento y lo comprobamos en el control. Lo que no cumple el presupuesto se sustituye o se elimina. **Entrega en el edge** Este sitio web funciona como una aplicación Next.js en Cloudflare Workers, cerca del visitante, con optimización de imágenes en el mismo edge. Las páginas prerenderizadas se sirven desde la caché en ese mismo edge, sin que tenga que ponerse en marcha un servidor propio. **Sistemas externos con caché y alternativa** Las búsquedas, los formularios, los precios o las existencias suelen proceder de sistemas que no controlamos. Guardamos sus respuestas en caché, fijamos límites de tiempo y preparamos una alternativa. Si el sistema externo va lento, tu página sigue siendo utilizable. ## Un ejemplo de este sitio web La cabecera de nuestra página de inicio incluye una animación. Solo arranca cuando la página está dibujada y el navegador tiene margen, es decir, en el móvil claramente después del primer renderizado. La cabecera estática ya está visible y el valor de carga medido no se ve afectado. Precisamente por eso el trabajo continúa después. Comprobamos si la página sigue respondiendo a las interacciones mientras funciona la animación, si el movimiento se puede detener y si respeta la preferencia del sistema de reducir el movimiento. Un buen valor al cargar no describe toda la visita. ## La accesibilidad forma parte de la implementación Fijamos WCAG 2.2 AA como objetivo de implementación. Esto implica regiones de referencia y una estructura de encabezados sólida, contrastes suficientes, manejo completo mediante teclado, estados de foco visibles, campos de formulario etiquetados y mensajes de error comprensibles. Las comprobaciones son automáticas y manuales. Las pruebas automáticas detectan parte de los problemas; el resto solo se encuentra al utilizar la página con teclado y lector de pantalla. Por eso una puntuación de 100 en accesibilidad en Lighthouse no demuestra conformidad. Y un widget de overlay no sustituye una implementación accesible. ## Este sitio web no carga rastreadores En cuisine.digital no integramos scripts de analítica ni de publicidad. Por eso aquí no hay diálogo de consentimiento. Es una decisión para nuestro propio sitio web y no demuestra que la medición de marketing pueda prescindir del consentimiento. En cuanto quieras medir campañas, necesitas consentimientos y una arquitectura que los respete. Es un tema aparte y no forma parte de un presupuesto de rendimiento. ## La revisión de rendimiento Una revisión acotada con un resultado que puedes seguir utilizando. Antes acordamos qué páginas, plantillas y recorridos vamos a comprobar y qué accesos necesitamos. **Un punto de partida documentado** Valores medidos con fecha, perfil, dispositivo y alcance comprobado. Cuando faltan datos de campo, por ejemplo porque Chrome UX Report no tiene un volumen de datos suficiente para tus páginas, se indica expresamente en el informe. **Hallazgos ordenados por impacto** Qué frena, dónde se origina y a qué visitantes afecta. Distinguimos lo que depende de la plantilla de lo que provocan contenidos concretos o sistemas de terceros. **Presupuestos para tus plantillas** Límites por tipo de página para tiempo de carga, tiempo de respuesta, estabilidad de la disposición y peso de los scripts, cada uno con su criterio de comprobación. Como presupuesto de laboratorio en el control y como objetivo de campo en operación, claramente separados. **Una propuesta para tu pipeline** Cómo se ejecuta la comprobación en tu compilación, qué páginas abarca, cuándo bloquea y quién recibe los informes. Con estimación del esfuerzo y criterios de aceptación. ## Dónde encaja el rendimiento Las páginas en las que se aplican las mismas reglas. [Sitios web y plataformas de contenido](https://cuisine.digital/es/servicios/sitios-web.md) Estructura, diseño y gestión de contenidos en los que el rendimiento es un requisito desde el principio. [Next.js](https://cuisine.digital/es/servicios/nextjs.md) El framework de este sitio web, con Server Components y entrega en el edge. [Certificaciones](https://cuisine.digital/es/certificaciones.md) El sistema de gestión del que proceden nuestros pasos de revisión y aprobación. [Servicios IT](https://cuisine.digital/es/servicios-it.md) Operación, monitorización y actualizaciones para que los buenos valores sigan siéndolo después de la puesta en producción. ## Proyectos web que hemos realizado ![iF Design: Renovación del sitio web](https://cuisine.digital/images/projects/master/if-design-website/image.webp) iF Design ## Renovación del sitio web [Ver proyecto](https://cuisine.digital/es/proyectos/if-design-award-website-relaunch.md) ![OSMA Aufzüge: Sitio web con biblioteca de componentes propia](https://cuisine.digital/images/projects/master/osma/image.webp) OSMA Aufzüge ## Sitio web con biblioteca de componentes propia ![RECARO: Renovación del sitio web](https://cuisine.digital/images/projects/recaro-website/devices.webp) RECARO ## Renovación del sitio web ![BAHLSEN: Sitios web para marcas fuertes](https://cuisine.digital/images/projects/master/bahlsen/image.webp) BAHLSEN ## Sitios web para marcas fuertes ![FriEnt: Encontrar publicaciones con más facilidad](https://cuisine.digital/images/projects/master/frient/image.webp) FriEnt ## Encontrar publicaciones con más facilidad ![Gartenheim: Nueva presencia web para la cooperativa](https://cuisine.digital/images/projects/master/gartenheim/image.webp) Gartenheim ## Nueva presencia web para la cooperativa ![Linde: Presencia global en Internet](https://cuisine.digital/images/projects/master/linde-worldwide/image.webp) Linde ## Presencia global en Internet 40 sitios web internacionales de Linde: implementación de Sitecore, migración de contenidos, operación en Azure y evolución técnica continua desde 2014. ![SAP: Soporte de la Corona-Warn-App](https://cuisine.digital/images/projects/master/corona-warn-app/image.png) SAP ## Soporte de la Corona-Warn-App ![SCHMIDHUBER: Componentes web a medida](https://cuisine.digital/images/projects/master/schmidhuber/image.webp) SCHMIDHUBER ## Componentes web a medida ![Vimcar: Web corporativa y proceso de compra](https://cuisine.digital/images/projects/master/vimcar/image.webp) Vimcar ## Web corporativa y proceso de compra El siguiente paso ## ¿Cómo de rápido es realmente tu sitio web? Cuéntanos tu idea o tu reto. Vemos juntos qué tiene sentido y cómo podemos ayudarte. [Reservar una cita (30 min)](https://outlook.office.com/book/AIcuisine@cuisine.digital/) --- [Página original](https://cuisine.digital/es/servicios/rendimiento-web) · [Contacto y consulta de proyecto](https://cuisine.digital/es/contacto)