Skip to content

[WIP] Fix Lighthouse scores below acceptable threshold #261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DavidKRK merged 5 commits into from
Jun 3, 2026
Merged

[WIP] Fix Lighthouse scores below acceptable threshold #261

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98cd5f2
Initial plan
Codex Jun 2, 2026
4ccbd50
perf: stabilize Lighthouse scores
Codex Jun 2, 2026
e083b2d
Merge remote-tracking branch 'origin/gh-pages' into codex/fix-lightho…
Copilot Jun 3, 2026
29b1b28
fix: align accessibility labels after merge
Copilot Jun 3, 2026
69b3e1a
chore: remove redundant link aria-labels
Copilot Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .lighthouserc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"assert": {
"preset": "lighthouse:no-pwa",
"assertions": {
"categories:performance": ["error", { "minScore": 0.5 }],
"categories:performance": ["error", { "minScore": 0.6 }],
"categories:seo": ["error", { "minScore": 0.85 }],
"categories:accessibility": ["warn", { "minScore": 0.85 }],
"categories:best-practices": ["warn", { "minScore": 0.85 }],
Expand Down
4 changes: 2 additions & 2 deletions assets/js/bio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,5 @@ document.addEventListener('DOMContentLoaded', () => {
});
});

switchLanguage('fr');
});
// Default language is set in the HTML to avoid layout shifts on load.
});
107 changes: 3 additions & 104 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,13 @@ const hero = document.getElementById('hero');

if (hero) {
window.addEventListener('scroll', () => {
if (window.innerWidth < 768) {
return;
}
if (window.innerWidth < 768) return;

const scrollTop = window.scrollY;
const heroHeight = hero.offsetHeight;

if (scrollTop < heroHeight) {
// const img = document.getElementById('hero-img');
// if (img) {
// const scrollRatio = scrollTop / heroHeight;
// let scale = 1 + scrollRatio * 0.15;
// scale = Math.min(scale, 1.5);
// const translateY = scrollRatio * 30;
// img.style.transform = `translate(-50%, calc(-50% + ${translateY}px)) scale(${scale})`;
// }
// Reserved for optional hero parallax effects.
}
});
}, { passive: true });
}

/* =============================
* Howler.js – Audio controls
* ============================== */

/* -----------------------------
1️⃣ Paths – relative à la racine
----------------------------- */
const getAsset = p => `assets/music/${p}`;

/* -----------------------------
2️⃣ Player objects
----------------------------- */
const patriceSound = new Howl({
src: [ getAsset('Patrice Bäumel–Glutes (Original Mix).mp3') ],
html5: true, // streamable on all devices (large files)
preload: false
});

const newOrderSound = new Howl({
src: [ getAsset('New Order Blue Monday.ogg') ],
html5: true,
preload: false
});

const winxSound = new Howl({
src: [ getAsset("Winx - Don't Laugh - Original Live Raw Mix.ogg") ],
html5: true,
preload: false
});

/* -----------------------------
3️⃣ Event listeners (buttons)
----------------------------- */
document.querySelector('#play-btn-patrice')?.addEventListener('click', () => patriceSound.play());
document.querySelector('#pause-btn-patrice')?.addEventListener('click', () => patriceSound.pause());

document.querySelector('#play-btn-blue-monday')?.addEventListener('click', () => newOrderSound.play());
document.querySelector('#pause-btn-blue-monday')?.addEventListener('click', () => newOrderSound.pause());

document.querySelector('#play-btn-winx')?.addEventListener('click', () => winxSound.play());
document.querySelector('#pause-btn-winx')?.addEventListener('click', () => winxSound.pause());

/* -----------------------------
4️⃣ Helpers UI (facultatif)
----------------------------- */
function setStatus(id, playing) {
const el = document.getElementById(id);
if (!el) return;
if (playing) {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}

/* E.g. if you want a visual indicator that a track is playing: */
patriceSound.on('play', () => setStatus('play-btn-patrice', true));
patriceSound.on('pause', () => setStatus('play-btn-patrice', false));
patriceSound.on('stop', () => setStatus('play-btn-patrice', false));

newOrderSound.on('play', () => setStatus('play-btn-blue-monday', true));
newOrderSound.on('pause', () => setStatus('play-btn-blue-monday', false));
newOrderSound.on('stop', () => setStatus('play-btn-blue-monday', false));

winxSound.on('play', () => setStatus('play-btn-winx', true));
winxSound.on('pause', () => setStatus('play-btn-winx', false));
winxSound.on('stop', () => setStatus('play-btn-winx', false));

document.addEventListener('DOMContentLoaded', () => {
const btns = document.querySelectorAll('.language-btn');
const contents = document.querySelectorAll('.lang-content');

btns.forEach(btn => {
btn.addEventListener('click', () => {
const lang = btn.dataset.lang;

// Set active button
btns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');

// Show/hide content via CSS classes (no inline styles)
contents.forEach(c => {
if (c.dataset.lang === lang) {
c.classList.add('active');
} else {
c.classList.remove('active');
}
});
});
});
});
16 changes: 3 additions & 13 deletions bio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@
<div class="text-center max-w-4xl mx-auto px-4 w-full mt-10">
<h1 class="main-title">David KRK</h1>
<div class="language-selector flex-wrap">
<button type="button" class="language-btn" data-lang="fr">Français</button>
<button type="button" class="language-btn active" data-lang="fr">Français</button>
<button type="button" class="language-btn" data-lang="en">English</button>
<button type="button" class="language-btn" data-lang="es">Castellano</button>
<button type="button" class="language-btn" data-lang="eu">Euskara</button>
<button type="button" class="language-btn" data-lang="ar">العربية</button>
<button type="button" class="language-btn" data-lang="uk">Ukrainian</button>
</div>
<div class="lang-content" data-lang="fr"><h2 class="main-title">Biographie</h2></div>
<div class="lang-content active" data-lang="fr"><h2 class="main-title">Biographie</h2></div>
<div class="lang-content" data-lang="en"><h2 class="main-title">Biography</h2></div>
<div class="lang-content" data-lang="es"><h2 class="main-title">Biografía</h2></div>
<div class="lang-content" data-lang="eu"><h2 class="main-title">Biografia</h2></div>
Expand All @@ -77,7 +77,7 @@ <h1 class="main-title">David KRK</h1>
<div class="bio-content mb-12 text-base sm:text-lg max-w-3xl mx-auto">

<!-- Français -->
<div class="lang-content" data-lang="fr">
<div class="lang-content active" data-lang="fr">
<div class="bio-text-container text-sm sm:text-base text-justify">
<p>David KRK, né en août 1982, est un DJ qui se produit en Espagne, en France et sur la Côte Basque depuis 2000.</p>
<p>Son style de base, Trance / Tech Trance, se diversifie aujourd'hui avec des sonorités plus Techno.</p>
Expand Down Expand Up @@ -194,16 +194,6 @@ <h1 class="main-title">David KRK</h1>
</main>

<footer>
<div class="mt-8 mb-8 player-container" style="display:none;">
<iframe title="Mixcloud player"
width="100%"
height="120"
style="border:0;"
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=1&feed=%2FDavidKRK%2F"
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share">
</iframe>
</div>

<nav class="flex justify-center gap-6 mb-4" aria-label="Liens vers les réseaux sociaux">
<a href="https://www.facebook.com/DavidKRKofficial" target="_blank" rel="noopener noreferrer" aria-label="Facebook"
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-facebook" aria-hidden="true"></i></a>
Expand Down
9 changes: 3 additions & 6 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,15 @@
<h1 class="main-title">David KRK</h1>

<div class="language-selector flex-wrap">
<button type="button" class="language-btn" data-lang="fr">Français</button>
<button type="button" class="language-btn active" data-lang="fr">Français</button>
<button type="button" class="language-btn" data-lang="en">English</button>
<button type="button" class="language-btn" data-lang="es">Castellano</button>
<button type="button" class="language-btn" data-lang="eu">Euskara</button>
<button type="button" class="language-btn" data-lang="ar">العربية</button>
<button type="button" class="language-btn" data-lang="uk">Ukrainian</button>
</div>

<div class="lang-content" data-lang="fr"><h2 class="main-title">Contact</h2></div>
<div class="lang-content active" data-lang="fr"><h2 class="main-title">Contact</h2></div>
<div class="lang-content" data-lang="en"><h2 class="main-title">Contact</h2></div>
<div class="lang-content" data-lang="es"><h2 class="main-title">Contacto</h2></div>
<div class="lang-content" data-lang="eu"><h2 class="main-title">Kontaktua</h2></div>
Expand All @@ -70,7 +70,7 @@ <h1 class="main-title">David KRK</h1>

<main class="text-center max-w-4xl mx-auto px-4 w-full">
<div class="contact-form-container">
<div class="lang-content" data-lang="fr">
<div class="lang-content active" data-lang="fr">
<div class="contact-form">
<form action="https://formspree.io/f/mzzvdbad" method="POST">
<input type="text" name="name" placeholder="Votre nom" required />
Expand Down Expand Up @@ -177,7 +177,6 @@ <h1 class="main-title">David KRK</h1>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.core.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
Expand Down Expand Up @@ -209,8 +208,6 @@ <h1 class="main-title">David KRK</h1>
switchLanguage(btn.dataset.lang);
});
});

switchLanguage('fr');
});
</script>
</body>
Expand Down
12 changes: 5 additions & 7 deletions event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@
<div class="text-center max-w-4xl mx-auto px-4 w-full mt-10">
<h1 class="main-title">David KRK</h1>
<div class="language-selector flex-wrap">
<button type="button" class="language-btn" data-lang="fr">Français</button>
<button type="button" class="language-btn active" data-lang="fr">Français</button>
<button type="button" class="language-btn" data-lang="en">English</button>
<button type="button" class="language-btn" data-lang="es">Castellano</button>
<button type="button" class="language-btn" data-lang="eu">Euskara</button>
<button type="button" class="language-btn" data-lang="ar">العربية</button>
<button type="button" class="language-btn" data-lang="uk">Ukrainian</button>
</div>
<div class="lang-content" data-lang="fr"><h2 class="main-title">Événements</h2></div>
<div class="lang-content active" data-lang="fr"><h2 class="main-title">Événements</h2></div>
<div class="lang-content" data-lang="en"><h2 class="main-title">Events</h2></div>
<div class="lang-content" data-lang="es"><h2 class="main-title">Eventos</h2></div>
<div class="lang-content" data-lang="eu"><h2 class="main-title">Ekitaldiak</h2></div>
Expand All @@ -69,7 +69,7 @@ <h1 class="main-title">David KRK</h1>

<main class="text-center max-w-4xl mx-auto px-4 w-full">
<div class="mt-8 mb-8">
<div class="lang-content" data-lang="fr"><p>Aucun événement à venir pour le moment. Veuillez revenir plus tard.</p></div>
<div class="lang-content active" data-lang="fr"><p>Aucun événement à venir pour le moment. Veuillez revenir plus tard.</p></div>
<div class="lang-content" data-lang="en"><p>No upcoming events at the moment. Please check back later.</p></div>
<div class="lang-content" data-lang="es"><p>No hay eventos próximos por el momento. Por favor, vuelve más tarde.</p></div>
<div class="lang-content" data-lang="eu"><p>Momentuz ez dago ekitaldirik. Mesedez, saiatu berriro geroago.</p></div>
Expand All @@ -82,7 +82,8 @@ <h1 class="main-title">David KRK</h1>
<div class="mt-8 mb-8 player-container">
<iframe title="Mixcloud player" width="100%" height="120"
style="border:0;"
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=1&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=0&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
loading="lazy"
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share"></iframe>
</div>

Expand Down Expand Up @@ -112,7 +113,6 @@ <h1 class="main-title">David KRK</h1>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.core.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
Expand Down Expand Up @@ -141,8 +141,6 @@ <h1 class="main-title">David KRK</h1>
switchLanguage(btn.dataset.lang);
});
});

switchLanguage('fr');
});
</script>
</body>
Expand Down
16 changes: 7 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
<!-- CSS principal -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="preload" as="image" href="assets/images/david_krk_owl.jpg">
</head>
<body class="home-page">

Expand All @@ -52,22 +52,22 @@
<h1 class="main-title">David KRK</h1>

<div class="language-selector flex-wrap">
<button type="button" class="language-btn" data-lang="fr">Français</button>
<button type="button" class="language-btn active" data-lang="fr">Français</button>
<button type="button" class="language-btn" data-lang="en">English</button>
<button type="button" class="language-btn" data-lang="es">Castellano</button>
<button type="button" class="language-btn" data-lang="eu">Euskara</button>
<button type="button" class="language-btn" data-lang="ar">العربية</button>
<button type="button" class="language-btn" data-lang="uk">Ukrainian</button>
</div>

<div class="lang-content" data-lang="fr"><h2 class="main-title">Accueil</h2></div>
<div class="lang-content active" data-lang="fr"><h2 class="main-title">Accueil</h2></div>
<div class="lang-content" data-lang="en"><h2 class="main-title">Home</h2></div>
<div class="lang-content" data-lang="es"><h2 class="main-title">Inicio</h2></div>
<div class="lang-content" data-lang="eu"><h2 class="main-title">Hasiera</h2></div>
<div class="lang-content" data-lang="ar" dir="rtl"><h2 class="main-title">الرئيسية</h2></div>
<div class="lang-content" data-lang="uk"><h2 class="main-title">Головна</h2></div>

<div class="lang-content" data-lang="fr">
<div class="lang-content active" data-lang="fr">
<div class="text-lg">
<p class="mt-4">Site officiel de David KRK</p>
<p>DJ et producteur international de musique Techno.</p>
Expand Down Expand Up @@ -112,15 +112,16 @@ <h1 class="main-title">David KRK</h1>


<div class="image-container">
<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768">
<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768" decoding="async" fetchpriority="high">
</div>


<!-- Slider “player‑widget” (optionnel) -->
<section class="mt-8 mb-8 player-container">
<iframe title="Mixcloud player" width="100%" height="120"
style="border:0;"
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=1&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&hide_artwork=1&autoplay=0&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
loading="lazy"
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share"></iframe>
</section>
</main>
Expand Down Expand Up @@ -152,7 +153,6 @@ <h1 class="main-title">David KRK</h1>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.core.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
Expand Down Expand Up @@ -181,8 +181,6 @@ <h1 class="main-title">David KRK</h1>
switchLanguage(btn.dataset.lang);
});
});

switchLanguage('fr');
});
</script>
</body>
Expand Down
Loading
Loading