--- title: "Rendimiento de Éclair: mantener 100 sobre 100" description: "El rendimiento de Éclair viene de la caché estática, el CSS en línea y las imágenes WebP. Mídelo con Lighthouse y evita lo que te hace perder puntos." url: "https://eclair.academy/es/rutas/experto/rendimiento" lang: "es" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Rendimiento de Éclair: mantener 100 sobre 100 > **Lo esencial** — El rendimiento de Éclair se basa en una caché estática servida sin cargar la aplicación, un CSS insertado en la página, imágenes WebP adaptables y un único script de 1,2 KB comprimido. Para mantener 100 en Lighthouse, mide con Lighthouse y PageSpeed Insights, sube imágenes adecuadas, mantén ligero el CSS personalizado y evita los scripts de terceros. El rendimiento de Éclair no depende de ningún plugin de caché que haya que configurar: viene integrado en el CMS. Medido en local, el sitio de demostración obtiene 100 en las cuatro categorías de Lighthouse. Esta lección explica de dónde sale ese resultado, cómo medirlo en tu sitio y qué decisiones lo hacen bajar: imágenes, tipografías, CSS, vídeos, scripts y hosting. > **Antes de empezar** — Duración: 35 minutos. Requisitos: un sitio en línea con algunos contenidos, el navegador Chrome y las lecciones [Imágenes y biblioteca de medios](https://eclair.academy/es/rutas/principiante/imagenes-mediateca) y [La arquitectura de Éclair](https://eclair.academy/es/rutas/experto/arquitectura). ## Lo que sabrás hacer ### 📊 Medir correctamente Lighthouse, PageSpeed Insights y tiempo de respuesta del servidor. ### 📷 Mantener páginas ligeras Imágenes, tipografías, CSS personalizado y vídeos. ### 🎯 Evitar las trampas Scripts de terceros, medición de audiencia y caché de CDN. ## Lo que Éclair ya hace ![Mediciones de Éclair: Lighthouse 100 en las cuatro categorías, peso de las páginas y tiempo de respuesta del servidor](https://eclair.academy/media/2026/11/eclair-academy-performance-es.webp) *Mediciones publicadas para Éclair, en local, con el sitio de demostración.* | Mecanismo | Efecto | | --- | --- | | caché estática: `index.php` sirve la página sin cargar la aplicación | 0,7 ms de tiempo de respuesta del servidor, medido en local | | CSS insertado en la página: de 17 a 23 KB, de 5 a 6 KB comprimido | ninguna hoja de estilos bloqueante | | fuentes del sistema, o una sola tipografía de títulos precargada | ningún salto de diseño | | imágenes WebP de 480 a 1600 px, dimensiones explícitas, carga diferida | el elemento principal se muestra rápido | | un único script público, diferido: 2,4 KB, 1,2 KB comprimido | el navegador nunca se bloquea | | Brotli o Gzip, caché del navegador de un año, direcciones versionadas `?v=…` | las visitas siguientes no vuelven a descargar nada | | ETag y respuestas 304 | una página sin cambios no se reenvía | El repositorio también publica sus mediciones en `tests/fixtures/lighthouse-1.8.0.json`: Lighthouse en móvil, mediana de tres pasadas, en la página de inicio y un artículo del sitio de referencia, una página de venta y la página de inicio con las direcciones Nocturno, Riviera, Prensa y Cartel. Resultado en todas: 100 en las cuatro categorías, un LCP de 779 a 885 ms, un CLS de 0 y un TBT de 0 a 17 ms. ## ¿Cómo medir el rendimiento de Éclair? 1. **Lighthouse en Chrome**: abre la página en una ventana de incógnito, porque las extensiones falsean la medición, y después las herramientas para desarrolladores, pestaña **Lighthouse**. Elige el modo móvil y las cuatro categorías, y lanza el análisis. 2. **PageSpeed Insights** (pagespeed.web.dev): el mismo análisis, lanzado desde los servidores de Google, con los datos reales de los visitantes de Chrome cuando tu sitio tiene suficientes. 3. **En línea de comandos**, para seguir la evolución de una versión a otra. 4. **El tiempo de respuesta del servidor**, que Lighthouse diluye en el resto: mídelo aparte con curl. ```bash # Lighthouse en móvil (Node.js 22 o superior), informe abierto en el navegador npx lighthouse https://exemple.fr/ --only-categories=performance,accessibility,best-practices,seo --view # Tras un cambio: 1.ª llamada (página generada) y 2.ª llamada (caché estática) curl -s -o /dev/null -w 'TTFB : %{time_starttransfer} s\n' https://exemple.fr/ curl -s -o /dev/null -w 'TTFB : %{time_starttransfer} s\n' https://exemple.fr/ ``` > **Compara medianas** — Una puntuación puede variar un punto de una pasada a otra. Lanza tres mediciones y quédate con la mediana, como hace `php tools/capture.php --lighthouse` en el repositorio. ## El tiempo de respuesta de un hosting compartido Los 0,7 ms anunciados se miden en local. En un hosting real se suman la latencia de la red y el arranque de PHP, porque incluso la vía rápida pasa por `index.php`. Te quedan tres palancas: - mantén la caché activa: **Ajustes › Avanzado › Caché estática de páginas** marcada y ningún `ECLAIR_DEBUG` en `eclair-config.php`, que la desactiva; - elige PHP 8.3 en el panel de tu proveedor de hosting y comprueba que OPcache está activo: así PHP deja de recompilar sus scripts en cada petición; - aloja el sitio cerca de tus visitantes, con ayuda de la [comparativa de proveedores de hosting](https://eclair.academy/es/alojamiento). Después de cada cambio, Éclair vacía toda la caché: la primera visita de cada página la regenera, una sola vez. Las visitas siguientes vuelven a pasar por la vía rápida. ## Imágenes: lo primero que hay que vigilar El rendimiento de Éclair se juega sobre todo en las imágenes, porque todo lo demás ya está resuelto. Éclair reduce cada original a 2000 px, lo recodifica y crea versiones WebP de 480, 800, 1200 y 1600 px, solo cuando son más pequeñas que el original. Bastan unos cuantos reflejos: - sube fotos de al menos 1600 px de ancho si se muestran a ancho completo; si no, falta la versión más grande; - rellena el texto alternativo: Lighthouse lo comprueba en la categoría Accesibilidad; - evita los GIF animados pesados, que se quedan en GIF sin versión WebP: para una animación, mejor el bloque Vídeo; - comprueba que la extensión GD admite WebP; si no, las imágenes se quedan en JPG o PNG; - coloca la imagen importante al principio: la imagen destacada, la de una portada o, en su defecto, una imagen de los dos primeros bloques se carga con prioridad; las demás, en diferido. ## Tipografías, CSS personalizado y vídeos **Tipografías.** Los temas clásicos solo usan fuentes del sistema, sin ninguna descarga. Una dirección de arte añade una sola tipografía de títulos de 12 a 27 KB: tu servidor la descarga una vez desde Fontsource, la guarda en `media/fonts/` y después el sitio la precarga con `font-display: optional`, sin salto de diseño. No añadas otras tipografías: el CSS personalizado elimina los `@import` y la CSP rechaza las fuentes de otro dominio. **CSS personalizado.** Se inserta en cada página, junto con el tema: cada KB añadido se descarga en cada visita, sin una caché aparte. El límite es de 64 KB, pero apunta a unos pocos KB y no metas imágenes codificadas en base64. **Vídeos.** El bloque Vídeo solo muestra un botón de reproducción: no sale ninguna petición hacia YouTube o Vimeo antes del clic. Al hacer clic, el script del sitio carga el reproductor desde `youtube-nocookie.com` o `player.vimeo.com`. ## Scripts de terceros y medición de audiencia La CSP del sitio público solo acepta los scripts servidos por tu dominio: los gestores de etiquetas, las ventanas de chat o Cloudflare Web Analytics quedan bloqueados. Es intencionado, porque cada script de terceros cuesta tiempo de carga y a menudo cookies. Para seguir tu audiencia sin añadir nada: - **Search Console y Bing Webmaster Tools** te dan clics, impresiones y consultas, tras la verificación en **Ajustes › SEO**; - **las estadísticas de tu proveedor de hosting**, sacadas de los registros del servidor, no necesitan ni script ni cookies; - **en un VPS**, un analizador de registros como GoAccess lee directamente los de Nginx o Apache. Una herramienta de medición en JavaScript te obligaría a modificar las plantillas y la CSP del núcleo, que se pierden en cada actualización, y después la política de privacidad creada en la instalación, que anuncia que no hay cookies de seguimiento ni herramientas de medición de audiencia de terceros. ## ¿Hace falta una CDN? Pocas veces. Las páginas, ya ligeras, salen de la caché estática en pocos milisegundos. Una CDN ayuda sobre todo cuando tus visitantes están lejos del servidor, para los archivos estáticos. En ese caso, no guardes el HTML en la caché de la CDN: Éclair no podría vaciarla en cada publicación. Los ajustes de Cloudflare se detallan en [la lección Nginx, VPS, proxy y CDN](https://eclair.academy/es/rutas/experto/nginx-vps). ## La lista de comprobación | Comprobación | Dónde | Resultado esperado | | --- | --- | --- | | caché activa | **Ajustes › Avanzado** | `X-Cache: HIT` en la segunda llamada | | modo de depuración | `eclair-config.php` | ningún `ECLAIR_DEBUG` | | versión de PHP | panel del proveedor de hosting | 8.3, con OPcache activo | | imágenes | **Medios** | al menos 1600 px a ancho completo, textos alternativos rellenos | | WebP | código fuente de una página con imágenes | archivos `.webp` en los `srcset` | | CSS personalizado | **Ajustes › Apariencia** | unos pocos KB | | vídeos | bloque Vídeo | ningún reproductor antes del clic | | scripts de terceros | plantillas | ninguno | | medición final | Lighthouse en móvil | 100 en las 4 categorías, con un punto de margen | ## Para recordar - El rendimiento de Éclair viene de la caché estática, el CSS en línea, las imágenes WebP y un único script pequeño: no hay nada que instalar. - Mide con Lighthouse en una ventana de incógnito y con PageSpeed Insights, y aísla el tiempo de respuesta del servidor con curl. - Las imágenes son la primera palanca: 1600 px para el ancho completo, textos alternativos y nada de GIF animados pesados. - El CSS personalizado se envía con cada página: mantenlo ligero. - La CSP bloquea los scripts de terceros: mide tu audiencia con Search Console y los registros del servidor. ## Para saber más - [Imágenes y biblioteca de medios](https://eclair.academy/es/rutas/principiante/imagenes-mediateca): formatos, tamaños y textos alternativos. - [Direcciones de arte y puntuación de diseño](https://eclair.academy/es/rutas/intermedio/direcciones-artisticas): la tipografía de títulos y sus garantías. - [Nginx, VPS, proxy y CDN](https://eclair.academy/es/rutas/experto/nginx-vps): compresión, caché del navegador y Cloudflare fuera de Apache. - web.dev: [las Métricas web esenciales](https://web.dev/articles/vitals?hl=es), con LCP, CLS e INP explicados. - Chrome for Developers: [introducción a Lighthouse](https://developer.chrome.com/docs/lighthouse/overview?hl=es). ## Preguntas frecuentes ### ¿Por qué mi puntuación es más baja en PageSpeed Insights que en local? PageSpeed Insights mide desde los servidores de Google, con un móvil y una red simulados más lentos, y sufre la latencia de tu hosting. Compara varias pasadas y mira primero el tiempo de respuesta del servidor. ### ¿Hace falta un plugin de caché o una CDN? Éclair no tiene plugins ni los necesita: la caché estática está integrada. Una CDN sigue siendo útil para visitantes lejanos, siempre que el HTML quede fuera de su caché. ### ¿Puedo añadir Google Analytics? No sin modificar las plantillas y la CSP del núcleo, y después tu política de privacidad. Empieza por Search Console y las estadísticas de tu proveedor de hosting, que no te cuestan ningún punto. ### ¿Las direcciones de arte ralentizan el sitio? Añaden una tipografía de títulos de 12 a 27 KB, servida por tu sitio y precargada. Las cuatro direcciones medidas en el repositorio mantienen 100 en las cuatro categorías.