Skip to content

Réduire la charge tierce sur les pages auditées par Lighthouse #259

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 2, 2026
Merged

Réduire la charge tierce sur les pages auditées par Lighthouse #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
080a711
Initial plan
Copilot Jun 2, 2026
8faa92a
Reduce Lighthouse third-party overhead
Copilot Jun 2, 2026
310dd26
Improve deferred player accessibility
Copilot Jun 2, 2026
9bdaa7f
Localize deferred player text
Copilot Jun 2, 2026
b748a86
Polish deferred player copy
Copilot Jun 2, 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: 0 additions & 2 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +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', () => {
const langBtns = document.querySelectorAll('.language-btn');
Expand Down
5 changes: 2 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,9 @@ <h1 class="main-title">David KRK</h1>
<!-- Slider “player‑widget” (optionnel) -->
<section class="mt-8 mb-8 player-container">
<iframe title="Mixcloud player" width="100%" height="120"
loading="lazy"
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&feed=%2FDavidKRK%2Fdavid-krk-life-good-techno-ep3%2F"
allow="autoplay; encrypted-media; fullscreen; idle-detection; speaker-selection; web-share"></iframe>
</section>
</main>
Expand Down Expand Up @@ -152,8 +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', () => {
const langBtns = document.querySelectorAll('.language-btn');
Expand Down
230 changes: 169 additions & 61 deletions music.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,46 @@
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
}
.player-load-wrapper {
margin: 0 auto 2rem;
max-width: 900px;
padding: 0 1rem;
text-align: center;
}
.player-load-btn {
background: transparent;
border: 1px solid var(--primary-color, #ff0000);
border-radius: 999px;
color: #fff;
cursor: pointer;
font-family: 'Russo One', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.05em;
padding: 0.85rem 1.4rem;
text-transform: uppercase;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.player-load-btn:hover,
.player-load-btn:focus-visible {
background: color-mix(in srgb, var(--primary-color, #ff0000) 15%, transparent);
transform: translateY(-1px);
}
.player-load-note {
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
margin-top: 0.75rem;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
</head>
<body class="music-page">
Expand Down Expand Up @@ -166,8 +206,17 @@ <h2 class="main-title">Музика</h2>
</div>

<main class="text-center max-w-4xl mx-auto px-4 w-full music-main-content">
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-0d876127-462b-4b8f-95a5-33ec1a5916f8" data-elfsight-app-lazy></div>
<section class="player-load-wrapper" aria-labelledby="audio-player-trigger">
<button type="button" id="audio-player-trigger" class="player-load-btn" aria-controls="audio-player-widget">
Charger le lecteur audio
</button>
<p id="audio-player-note" class="player-load-note">Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.</p>
<p id="audio-player-status" class="visually-hidden" role="status" aria-live="polite"></p>
<div id="audio-player-widget" class="elfsight-app-0d876127-462b-4b8f-95a5-33ec1a5916f8" data-elfsight-app-lazy hidden></div>
<noscript>
<p class="player-load-note"><a href="https://www.mixcloud.com/DavidKRK/" target="_blank" rel="noopener noreferrer">Listen on Mixcloud</a></p>
</noscript>
</section>

<!-- YOUTUBE-AUTO-START -->
<h2 id="youtube-section-title">YouTube</h2>
Expand Down Expand Up @@ -207,76 +256,135 @@ <h2 id="youtube-section-title">YouTube</h2>
</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>
// Chargement dynamique des vidéos YouTube depuis youtube-videos.json
fetch('assets/data/youtube-videos.json')
.then(r => r.json())
.then(videos => {
const grid = document.getElementById('youtube-grid');
if (!grid || !videos.length) return;
grid.innerHTML = videos.map(v => `
<a class="youtube-card" href="${v.url}" target="_blank" rel="noopener noreferrer">
<img src="${v.thumbnail}" alt="${v.title}" loading="lazy" width="480" height="270">
<div class="youtube-card-body">
<div class="youtube-card-title">${v.title}</div>
<div class="youtube-card-date">${v.published}</div>
</div>
</a>
`).join('');
})
.catch(() => {
const grid = document.getElementById('youtube-grid');
if (grid) grid.innerHTML = '<p style="color:rgba(255,255,255,0.5);text-align:center;">Vidéos temporairement indisponibles.</p>';
});

// Sélecteur de langue
document.addEventListener('DOMContentLoaded', () => {
const langBtns = document.querySelectorAll('.language-btn');
const langContents = document.querySelectorAll('.lang-content');
const audioPlayerTrigger = document.getElementById('audio-player-trigger');
const audioPlayerNote = document.getElementById('audio-player-note');
const audioPlayerStatus = document.getElementById('audio-player-status');
const audioPlayerWidget = document.getElementById('audio-player-widget');
const langBtns = document.querySelectorAll('.language-btn');
const langContents = document.querySelectorAll('.lang-content');
let audioPlayerLoaded = false;

const langContent = {
fr: {
youtube_title: 'Dernières vidéos YouTube',
youtube_button: 'Voir toutes les vidéos',
player_button: 'Charger le lecteur audio',
player_loaded: 'Lecteur audio chargé',
player_note: 'Le lecteur externe se charge à la demande pour accélérer l’affichage de la page.',
player_status: 'Le lecteur audio externe est maintenant chargé.'
},
en: {
youtube_title: 'Latest YouTube Videos',
youtube_button: 'View all videos',
player_button: 'Load audio player',
player_loaded: 'Audio player loaded',
player_note: 'The external player loads on demand to speed up page rendering.',
player_status: 'The external audio player is now loaded.'
},
es: {
youtube_title: 'Últimos vídeos de YouTube',
youtube_button: 'Ver todos los vídeos',
player_button: 'Cargar el reproductor de audio',
player_loaded: 'Reproductor de audio cargado',
player_note: 'El reproductor externo se carga bajo demanda para acelerar la visualización de la página.',
player_status: 'El reproductor de audio externo ya está cargado.'
},
eu: {
youtube_title: 'Azken YouTube bideoak',
youtube_button: 'Ikusi bideo guztiak',
player_button: 'Kargatu audio erreproduzitzailea',
player_loaded: 'Audio erreproduzitzailea kargatuta',
player_note: 'Kanpoko erreproduzitzailea eskatu ahala kargatzen da orria azkarrago erakusteko.',
player_status: 'Kanpoko audio erreproduzitzailea kargatuta dago orain.'
},
ar: {
youtube_title: 'أحدث مقاطع يوتيوب',
youtube_button: 'عرض جميع مقاطع الفيديو',
player_button: 'تحميل مشغل الصوت',
player_loaded: 'تم تحميل مشغل الصوت',
player_note: 'يتم تحميل المشغل الخارجي عند الطلب لتسريع عرض الصفحة.',
player_status: 'تم الآن تحميل مشغل الصوت الخارجي.'
},
uk: {
youtube_title: 'Останні відео на YouTube',
youtube_button: 'Переглянути всі відео',
player_button: 'Завантажити аудіоплеєр',
player_loaded: 'Аудіоплеєр завантажено',
player_note: 'Зовнішній плеєр завантажується на вимогу, щоб пришвидшити показ сторінки.',
player_status: 'Зовнішній аудіоплеєр тепер завантажено.'
}
};

function loadAudioPlayer() {
if (audioPlayerLoaded || !audioPlayerTrigger || !audioPlayerWidget) {
return;
}

const t = langContent[document.documentElement.lang] || langContent.fr;

audioPlayerLoaded = true;
audioPlayerWidget.hidden = false;

const langContent = {
fr: { youtube_title: 'Dernières vidéos YouTube', youtube_button: 'Voir toutes les vidéos' },
en: { youtube_title: 'Latest YouTube Videos', youtube_button: 'View all videos' },
es: { youtube_title: 'Últimos vídeos de YouTube', youtube_button: 'Ver todos los vídeos' },
eu: { youtube_title: 'Azken YouTube bideoak', youtube_button: 'Ikusi bideo guztiak' },
ar: { youtube_title: 'أحدث مقاطع يوتيوب', youtube_button: 'عرض جميع مقاطع الفيديو' },
uk: { youtube_title: 'Останні відео на YouTube', youtube_button: 'Переглянути всі відео' }
};
const script = document.createElement('script');
script.src = 'https://static.elfsight.com/platform/platform.js';
script.defer = true;
script.dataset.useServiceCore = '';
document.head.appendChild(script);

function switchLanguage(lang) {
langContents.forEach(content => content.classList.remove('active'));
langBtns.forEach(b => b.classList.remove('active'));
audioPlayerTrigger.disabled = true;
audioPlayerTrigger.textContent = t.player_loaded;
audioPlayerTrigger.setAttribute('aria-label', t.player_loaded);

const contentsToShow = document.querySelectorAll(`.lang-content[data-lang="${lang}"]`);
contentsToShow.forEach(content => content.classList.add('active'));

const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
if (activeBtn) {
activeBtn.classList.add('active');
}
if (audioPlayerStatus) {
audioPlayerStatus.textContent = t.player_status;
}
}

if (audioPlayerTrigger) {
audioPlayerTrigger.addEventListener('click', loadAudioPlayer);
}

const t = langContent[lang] || langContent['fr'];
const titleEl = document.getElementById('youtube-title-text');
if (titleEl) titleEl.textContent = t.youtube_title;
const btnEl = document.getElementById('youtube-btn-text');
if (btnEl) btnEl.textContent = t.youtube_button;
const headingEl = document.getElementById('youtube-section-title');
if (headingEl) headingEl.textContent = t.youtube_title;
function switchLanguage(lang) {
langContents.forEach(content => content.classList.remove('active'));
langBtns.forEach(b => b.classList.remove('active'));

// Update document language and text direction for accessibility and RTL support
document.documentElement.lang = lang;
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
const contentsToShow = document.querySelectorAll(`.lang-content[data-lang="${lang}"]`);
contentsToShow.forEach(content => content.classList.add('active'));

const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
if (activeBtn) {
activeBtn.classList.add('active');
}

langBtns.forEach(btn => {
btn.addEventListener('click', () => {
switchLanguage(btn.dataset.lang);
});
const t = langContent[lang] || langContent.fr;
const titleEl = document.getElementById('youtube-title-text');
if (titleEl) titleEl.textContent = t.youtube_title;
const btnEl = document.getElementById('youtube-btn-text');
if (btnEl) btnEl.textContent = t.youtube_button;
const headingEl = document.getElementById('youtube-section-title');
if (headingEl) headingEl.textContent = t.youtube_title;
if (audioPlayerTrigger) {
const playerLabel = audioPlayerLoaded ? t.player_loaded : t.player_button;
audioPlayerTrigger.textContent = playerLabel;
audioPlayerTrigger.setAttribute('aria-label', playerLabel);
}
if (audioPlayerNote) audioPlayerNote.textContent = t.player_note;
if (audioPlayerStatus) audioPlayerStatus.textContent = audioPlayerLoaded ? t.player_status : '';

// Update document language and text direction for accessibility and RTL support
document.documentElement.lang = lang;
document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
}

langBtns.forEach(btn => {
btn.addEventListener('click', () => {
switchLanguage(btn.dataset.lang);
});
});

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