Rendimiento de Éclair: mantener 100 sobre 100

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.

Lo que Éclair ya hace

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.

# 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/

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.

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.

La lista de comprobación

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: formatos, tamaños y textos alternativos.
• Direcciones de arte y puntuación de diseño: la tipografía de títulos y sus garantías.
• Nginx, VPS, proxy y CDN: compresión, caché del navegador y Cloudflare fuera de Apache.
• web.dev: las Métricas web esenciales, con LCP, CLS e INP explicados.
• Chrome for Developers: introducción a Lighthouse.

Todas las lecciones de la ruta