docs(huella): update with real third-party audit measurements (Ecograder 99/100, Digital Beacon A+)
This commit is contained in:
+104
-8
@@ -183,9 +183,9 @@
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M240 200H720Q720 200 720.0 200.0Q720 200 720 200L663 600Q663 600 663.0 600.0Q663 600 663 600H297Q297 600 297.0 600.0Q297 600 297 600L240 200Q240 200 240.0 200.0Q240 200 240 200ZM480 680Q497 680 508.5 691.5Q520 703 520 720Q520 737 508.5 748.5Q497 760 480 760Q463 760 451.5 748.5Q440 737 440 720Q440 703 451.5 691.5Q463 680 480 680ZM593 680H663Q693 680 715.0 660.0Q737 640 742 611L799 211Q804 175 780.5 147.5Q757 120 720 120H240Q203 120 179.5 147.5Q156 175 161 211L218 611Q223 640 245.0 660.0Q267 680 297 680H367Q364 690 362.0 699.5Q360 709 360 720Q360 770 395.0 805.0Q430 840 480.0 840.0Q530 840 565.0 805.0Q600 770 600 720Q600 709 598.0 699.5Q596 690 593 680ZM240 200Q240 200 240.0 200.0Q240 200 240 200Q240 200 240.0 200.0Q240 200 240 200H720Q720 200 720.0 200.0Q720 200 720 200Q720 200 720.0 200.0Q720 200 720 200Z"/></svg>
|
||||
<h3 class="font-bold mb-2 dark:text-white">Peso de la página</h3>
|
||||
<p class="text-3xl font-bold text-primary mb-2">~245 KB</p>
|
||||
<p class="text-3xl font-bold text-primary mb-2">~91 KB</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
Total de datos transferidos en la primera carga completa del sitio. La media web mundial actual supera los 2.5 MB.
|
||||
Total de datos transferidos en la primera visita. Medido con Digital Beacon. La media web mundial actual supera los 2.5 MB.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,9 +194,9 @@
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M440 360Q423 360 411.5 371.5Q400 383 400 400V560Q400 577 411.5 588.5Q423 600 440 600H560Q577 600 588.5 588.5Q600 577 600 560V400Q600 383 588.5 371.5Q577 360 560 360ZM460 420H540V540H460ZM160 360Q143 360 131.5 371.5Q120 383 120 400V560Q120 577 131.5 588.5Q143 600 160 600H280Q297 600 308.5 588.5Q320 577 320 560V520H260V540H180V420H260V440H320V400Q320 383 308.5 371.5Q297 360 280 360ZM680 240V340Q680 357 691.5 368.5Q703 380 720 380H800V420H680V480H820Q837 480 848.5 468.5Q860 457 860 440V380Q860 363 848.5 351.5Q837 340 820 340H740V300H860V240Z"/></svg>
|
||||
<h3 class="font-bold mb-2 dark:text-white">Emisiones estimadas</h3>
|
||||
<p class="text-3xl font-bold text-primary mb-2">0.05 g</p>
|
||||
<p class="text-3xl font-bold text-primary mb-2">0.028 g</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
CO2 generado por visita, medido con la fórmula estandarizada de Sustainable Web Design. El promedio web es de 0.5g.
|
||||
CO₂ por visita medido con Digital Beacon. Ecograder estima 0.006 g (metodología distinta). El promedio web es de 0.5g.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,17 +239,17 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Compromiso 2: Tipografías e Iconos Autoalojados (Self-Hosted) -->
|
||||
<!-- Compromiso 2: Web Fonts Autoalojadas Subsetteadas + Iconos Self-Hosted -->
|
||||
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||
<h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-emerald-500" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
|
||||
Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
|
||||
Web Fonts Autoalojadas Subsetteadas + Iconos Self-Hosted
|
||||
</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
|
||||
<strong>La optimización:</strong> Hemos migrado tanto las fuentes (<em>Space Grotesk</em> e <em>Instrument Serif</em>) como la iconografía (<em>Material Symbols Outlined</em>) a nuestra propia infraestructura (`/fonts`).
|
||||
<strong>La optimización:</strong> Migramos los iconos Material Symbols a SVG inline (38 paths extraídos a icon-paths.json, ahorrando ~4 MB de font externa) y self-hosteamos las web fonts (Space Grotesk + Instrument Serif Italic) tras un subsetting agresivo que las dejó en solo ~32 KB totales para los 108 caracteres únicos que usa el sitio.
|
||||
</p>
|
||||
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
<strong>El impacto:</strong> Eliminamos por completo el rastreo y las llamadas DNS externas a Google Fonts, garantizando soberanía de datos, estricto cumplimiento del RGPD y menor latencia en el renderizado inicial.
|
||||
<strong>El impacto:</strong> Cero peticiones a Google Fonts (RGPD + soberanía), cero descarga de Material Symbols woff2 (4 MB eliminados), tipografías con kerning/ligaduras correctas en italic. Trade-off frente a system fonts: +33 KB pero conservamos la identidad visual con las cursivas dramáticas de Instrument Serif.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -281,6 +281,102 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Auditorías de Terceros -->
|
||||
<section class="space-y-8 mb-20">
|
||||
<div class="border-l-4 border-emerald-500 pl-6">
|
||||
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">Auditorías de terceros</h2>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">No nos conformamos con nuestra propia estimación: medimos con herramientas externas</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Ecograder -->
|
||||
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Ecograder</div>
|
||||
<h3 class="font-bold text-lg dark:text-white">Score: 99/100</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-emerald-500 text-white rounded-full text-xs font-bold">A+</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">Page weight</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">59.9 KB</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">Performance</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">98/100</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">CO₂ per visit</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">0.006 g</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">Green hosting</span>
|
||||
<span class="font-bold text-emerald-500">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://ecograder.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 mt-4 text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
|
||||
Ver reporte completo
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Digital Beacon -->
|
||||
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Digital Beacon</div>
|
||||
<h3 class="font-bold text-lg dark:text-white">Score: A+</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-emerald-500 text-white rounded-full text-xs font-bold">A+</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">First visit CO₂</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">0.028 g</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">First visit size</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">91.18 KB</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">Return visit CO₂</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">0.027 g</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500 dark:text-slate-400">Return visit size</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">87.83 KB</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://digitalbeacon.co" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 mt-4 text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
|
||||
Ver reporte completo
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Eivissa Environmental Watch -->
|
||||
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Proyecto relacionado: Eivissa Environmental Watch</div>
|
||||
<h3 class="font-bold text-lg dark:text-white">Score: 94/100 — A+</h3>
|
||||
</div>
|
||||
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="text-xs text-emerald-600 dark:text-emerald-400 hover:underline font-bold">
|
||||
Visitar sitio →
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Mi otro proyecto soberano (clasificador de noticias ambientales con Ollama + IA local) también alcanza <strong>A+ en Ecograder</strong> con 103 KB de peso total y 0.01 g de CO₂ por visita. Mismo principio: Hetzner + sistema ligero + cero third-party tracking.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 italic">
|
||||
Última medición: Julio 2026. Las herramientas usan metodologías diferentes (Sustainable Web Design v3 vs Sustainable Web Design v2 + 1Byte model), por eso los valores absolutos varían pero el grade (A+) coincide.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
|
||||
Reference in New Issue
Block a user