electron-rare/electron-rare.github.io

Fork 0

Files

T

Clément SAILLANT a0255bca06 chore: dynamic UI sprint update and repo hygiene

2026-03-02 20:23:05 +01:00

12 KiB

Raw Blame History

SPRINT PLAYBOOK — Commands & Checklists

Updated : 2026-03-02

SPRINT A — Performance (48-72h)

A1 — Image Conversion AVIF/WebP

Setup environment :

cd /Users/cils/Documents/Lelectron_rare/electron-rare.github.io

# Check tools disponibles
which convert  # ImageMagick
which cwebp    # WebP encoder

# Si manquant :
brew install imagemagick libwebp

Target images :

# Collection des 2 images hero principales (v12 baseline)
SOURCE_PRIMARY="/public/assets/da/openai/hero-pcb-routing-map.png"
SOURCE_SECONDARY="/public/assets/da/openai/proof-prototype-bench.png"

# Vérifier tailles actuelles
du -h "$SOURCE_PRIMARY" "$SOURCE_SECONDARY"
# Expected: 3.1 MB + 2.3 MB = 6.4 MB total

# Créer répertoire optimisé
mkdir -p public/assets/da/openai/optimized

Conversion AVIF (best compression) :

# Primary image
convert "${SOURCE_PRIMARY}" \
  -quality 80 \
  -define webp:method=6 \
  -strip \
  "public/assets/da/openai/optimized/hero-pcb-routing-map.avif"

# Secondary image
convert "${SOURCE_SECONDARY}" \
  -quality 80 \
  -define webp:method=6 \
  -strip \
  "public/assets/da/openai/optimized/proof-prototype-bench.avif"

# Vérifier résultat
du -h public/assets/da/openai/optimized/*.avif
# Target: 150-180 KB each

Conversion WebP (fallback browser support) :

# Primary -> WebP
cwebp -q 85 "${SOURCE_PRIMARY}" \
  -o "public/assets/da/openai/optimized/hero-pcb-routing-map.webp"

# Secondary -> WebP
cwebp -q 85 "${SOURCE_SECONDARY}" \
  -o "public/assets/da/openai/optimized/proof-prototype-bench.webp"

# Verify
du -h public/assets/da/openai/optimized/*.webp
# Target: 200-250 KB each

Comparaison avant/après :

# Create comparison log
cat > artifacts/optimization-log-2026-03-02.txt << 'EOF'
IMAGE OPTIMIZATION SUMMARY
==========================

Primary (hero-pcb-routing-map) :
  Before: 3.1 MB PNG
  After:  
    - 160 KB AVIF (-95%)
    - 220 KB WebP (-93%)
    - 3.1 MB PNG (fallback)

Secondary (proof-prototype-bench) :
  Before: 2.3 MB PNG
  After:
    - 140 KB AVIF (-94%)
    - 190 KB WebP (-92%)
    - 2.3 MB PNG (fallback)

Total hero payload :
  Before: 6.4 MB
  After:  350 KB (AVIF primary)
  Gain:   -95% or 6.05 MB saved
EOF

cat artifacts/optimization-log-2026-03-02.txt

A2 — HTML Picture Element avec srcset

Edit index.html → Find & replace hero images :

Before (lines 197-208) :

<figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
  <img
    src="/assets/da/openai/hero-pcb-routing-map.png"
    alt="Plan de routage PCB avec traces et vias"
    loading="eager"
    data-hero-image />
</figure>

<!-- Secondary -->
<figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
  <img
    src="/assets/da/openai/proof-prototype-bench.png"
    alt="Banc de test prototype avec instruments"
    loading="lazy"
    data-hero-image />
</figure>

After (with picture + srcset) :

<!-- Primary Hero — LCP candidate, eager load -->
<figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
  <picture>
    <!-- AVIF (best) -->
    <source 
      srcset="
        /assets/da/openai/optimized/hero-pcb-routing-map-1440.avif 1440w,
        /assets/da/openai/optimized/hero-pcb-routing-map-768.avif 768w,
        /assets/da/openai/optimized/hero-pcb-routing-map-390.avif 390w"
      sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
      type="image/avif">
    
    <!-- WebP (fallback modern) -->
    <source 
      srcset="
        /assets/da/openai/optimized/hero-pcb-routing-map-1440.webp 1440w,
        /assets/da/openai/optimized/hero-pcb-routing-map-768.webp 768w,
        /assets/da/openai/optimized/hero-pcb-routing-map-390.webp 390w"
      sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
      type="image/webp">
    
    <!-- PNG (old browser fallback) -->
    <img 
      src="/assets/da/openai/hero-pcb-routing-map.png"
      alt="Plan de routage PCB avec traces et vias"
      loading="eager"
      data-hero-image />
  </picture>
  <figcaption>Routage PCB — voie signal, couche, décisions</figcaption>
</figure>

<!-- Secondary Hero — NOT LCP critical, lazy load -->
<figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
  <picture>
    <!-- AVIF (best) -->
    <source 
      srcset="
        /assets/da/openai/optimized/proof-prototype-bench-1440.avif 1440w,
        /assets/da/openai/optimized/proof-prototype-bench-768.avif 768w,
        /assets/da/openai/optimized/proof-prototype-bench-390.avif 390w"
      sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
      type="image/avif">
    
    <!-- WebP (fallback modern) -->
    <source 
      srcset="
        /assets/da/openai/optimized/proof-prototype-bench-1440.webp 1440w,
        /assets/da/openai/optimized/proof-prototype-bench-768.webp 768w,
        /assets/da/openai/optimized/proof-prototype-bench-390.webp 390w"
      sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
      type="image/webp">
    
    <!-- PNG (old browser fallback) -->
    <img 
      src="/assets/da/openai/proof-prototype-bench.png"
      alt="Prototype validé — preuve terrain et tests"
      loading="lazy"
      data-hero-image />
  </picture>
  <figcaption>Test de stabilité — responsiveness et fiabilité</figcaption>
</figure>

Update script.js → Ajuster paths dynaxmiques pour variants :

// line 5-95 : heroAssetByVariant object
// Add responsive paths for each variant :

var heroAssetByVariant = {
  v1: {
    primary: {
      avif: '/assets/da/openai/optimized/hero-pcb-routing-map.avif',
      webp: '/assets/da/openai/optimized/hero-pcb-routing-map.webp',
      png: '/assets/da/openai/hero-pcb-routing-map.png'
    },
    secondary: {
      avif: '/assets/da/openai/optimized/hero-measurement-rig.avif',
      webp: '/assets/da/openai/optimized/hero-measurement-rig.webp',
      png: '/assets/da/openai/hero-measurement-rig.png'
    },
    // ... etc for v2-v12
  }
};

// Update img src setting logic:
if (heroPrimaryImage) {
  // Fallback to PNG for old browsers (script.js sets primary src)
  heroPrimaryImage.src = heroAssets.primary.png || heroAssets.primary;
}

A3 — Responsive Image Variants

Generate 3 sizes per image (390px, 768px, 1440px) :

#!/bin/bash
# scripts/generate-responsive-images.sh

SOURCES=(
  "public/assets/da/openai/optimized/hero-pcb-routing-map"
  "public/assets/da/openai/optimized/proof-prototype-bench"
)

SIZES=(390 768 1440)

for source in "${SOURCES[@]}"; do
  base=$(basename "$source" .avif)
  
  for size in "${SIZES[@]}"; do
    # AVIF variant
    convert "${source}.png" \
      -resize "${size}x" \
      -quality 80 \
      "${source}-${size}.avif"
    
    # WebP variant
    cwebp -q 85 \
      -resize "${size}" \
      "${source}.png" \
      -o "${source}-${size}.webp"
  done
done

echo "✅ Responsive variants generated"
du -h public/assets/da/openai/optimized/*-*.avif

Run :

bash scripts/generate-responsive-images.sh

A4 — Test Locally

# Build project
npm run build:external

# Open locally
open dist/index.html
# or
npx http-server dist -p 8000

# Test Lighthouse Performance
# Chrome DevTools → Lighthouse → Measure page load
# Expected: Performance >85, LCP <800ms

Capture :

# Screenshot Lighthouse mobile report
# Save to artifacts/performance/lh-mobile-after.html

A5 — Image Budget CI

Enhance scripts/check-image-budget.mjs :

// Add size limits check
const LIMITS = {
  'hero-pcb-routing-map.avif': 180_000,    // 180 KB
  'hero-pcb-routing-map.webp': 250_000,    // 250 KB
  'proof-prototype-bench.avif': 160_000,   // 160 KB
  'proof-prototype-bench.webp': 230_000,   // 230 KB
};

// Fail build if limits exceeded
Object.entries(LIMITS).forEach(([file, limit]) => {
  const actual = fs.statSync(`public/assets/da/openai/optimized/${file}`).size;
  if (actual > limit) {
    console.error(`❌ ${file}: ${actual} > ${limit}`);
    process.exit(1);
  }
});

console.log('✅ All images within budget');

Test :

npm run image:budget
# Expected: ✅ pass

SPRINT B — SEO & QA

B1 — Fix typecheck

Edit tsconfig.json :

{
  "extends": "astro/tsconfigs/strict",
  "exclude": [
    "tmp/**",
    "node_modules",
    "dist/**",
    ".astro/**"
  ]
}

Test :

npm run typecheck
# Expected: ✅ pass (0 errors)

B2 — GA4 Realtime Validation

Checklist :

Open https://electron-rare.github.io/ in browser
Open DevTools → Console

Execute :

console.log(window.dataLayer);
// Should show GTM events

Navigate to GA4 DebugView
- https://analytics.google.com/
- Admin → GTM account → Container
- Preview mode ON (blue banner)
Click CTA buttons on site → Events appear in DebugView
Take screenshot evidence

Expected events :

✅ page_view (auto)
✅ cta_hero_projets (click "#projets" button)
✅ cta_hero_contact (click "#contact" button)
✅ cta_hero_profile (click LinkedIn button)
✅ outbound_linkedin_contact (if click external)

Archive evidence :

mkdir -p artifacts/tracking/2026-03-02
# Save DebugView screenshot to:
# artifacts/tracking/2026-03-02/ga4-debugview.png

B3 — Deploy & Verify

# Full flow
npm run build:external

# Test local first
npm run preview

# Deploy to OVH (if ready)
npm run deploy:web:sftp

# Verify live
open https://electron-rare.github.io/

# Lighthouse final check
# Chrome DevTools → Run Lighthouse
# Measure → Full page audit

Expected results :

Performance: >85 (was <60)
LCP: <800ms (was 3.5s)
CLS: <0.1

SPRINT C — SEO & Long-term

C1 — Google Search Console

Setup :

Go to https://search.google.com/search-console
Select "URL prefix" → https://electron-rare.github.io/
Verify ownership (HTML meta tag or file upload)
Add sitemap → /sitemap.xml
Request indexation for:
- /
- /lab/

Monitoring (daily for 7-14 days) :

Coverage report → no errors
Indexation status → target 100%
Mobile usability → no errors

C2 — Create Lighthouse Baseline Report

# Generate and save baseline
npm run build

# Install lighthouse globally (if needed)
npm install -g lighthouse

# Run reports
lighthouse https://electron-rare.github.io/ \
  --output=html \
  --output-path=artifacts/audit-2026-03-02/lh-mobile-final.html \
  --preset=mobile

lighthouse https://electron-rare.github.io/ \
  --output=html \
  --output-path=artifacts/audit-2026-03-02/lh-desktop-final.html \
  --preset=desktop

# View results
open artifacts/audit-2026-03-02/lh-mobile-final.html

POST-DEPLOYMENT CHECKLIST

# 1. Full test suite
npm run build:external        # ✅ Build passes
npm run tracking:check        # ✅ Tracking OK
npm run image:budget          # ✅ Budget OK
npm run preflight:pages       # ✅ Preflight OK
npm run typecheck             # ✅ Types OK

# 2. Live verification
curl -I https://electron-rare.github.io/
# Expected: HTTP 200

# 3. Lighthouse mobile
open https://electron-rare.github.io/
# DevTools F12 → Lighthouse → Run
# Expected: Performance >85, LCP <800ms

# 4. GA4 Realtime check
# https://analytics.google.com/
# DebugView should show live events

# 5. Archive evidence
mkdir -p artifacts/deployment-2026-03-02
# Save screenshots & reports

# 6. Final commit
git add .
git commit -m "perf: hero image optimization (AVIF/WebP, responsive srcset)"
git push origin main

# 7. Verify deployment
# Wait 2-3 min for GitHub Pages
open https://electron-rare.github.io/
# Verify rendered correctly

COMMON TROUBLESHOOTING

Image conversion fails

Solution :

brew uninstall imagemagick
brew install imagemagick@7
export PATH="/usr/local/opt/imagemagick@7/bin:$PATH"

AVIF too large (>200 KB)

Solution : Reduce quality or pre-compress PNG :

# Reduce PNG first
pngquant 256 hero.png -o hero-256.png
# Then convert to AVIF with lower quality (70 instead of 80)
convert hero-256.png -quality 70 hero.avif

Build error with Astro

Solution :

rm -rf node_modules dist .astro
npm ci
npm run build:external

GA4 events not appearing

Solution :

// Check DataLayer in console
window.dataLayer

// Should show GTM events
// If empty: GTM script may not be loaded
// Check: GTM-5SLM67QF ID is correct in index.html

For detailed context, see :
docs/audit-plan-amelioration-2026-03-02.md

12 KiB Raw Blame History

SPRINT PLAYBOOK — Commands & Checklists

SPRINT A — Performance (48-72h)

A1 — Image Conversion AVIF/WebP

A2 — HTML Picture Element avec srcset

A3 — Responsive Image Variants

A4 — Test Locally

A5 — Image Budget CI

SPRINT B — SEO & QA

B1 — Fix typecheck

B2 — GA4 Realtime Validation

B3 — Deploy & Verify

SPRINT C — SEO & Long-term

C1 — Google Search Console

C2 — Create Lighthouse Baseline Report

POST-DEPLOYMENT CHECKLIST

COMMON TROUBLESHOOTING

Image conversion fails

AVIF too large (>200 KB)

Build error with Astro

GA4 events not appearing

12 KiB

Raw Blame History