Skip to content

perf(index.html): LCP preload, picture/WebP, hidden lang-content, drop meta keywords #265

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 3 commits into from
Jun 2, 2026
Merged

perf(index.html): LCP preload, picture/WebP, hidden lang-content, drop meta keywords #265

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
622f6a1
Initial plan
Copilot Jun 2, 2026
c8a7384
Optimisations LCP/CLS/SEO sur index.html (#265)
Copilot Jun 2, 2026
fa0fe7d
fix(index): add active class to default FR blocks & remove missing We…
DavidKRK 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
43 changes: 25 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David KRK · HOME</title>
<meta name="description" content="Site officiel de David KRK, DJ et producteur international de musique Techno. Découvrez sa musique, sa biographie et ses événements.">
<meta name="keywords" content="David KRK, DJ techno, producteur, événements, musique">
<meta name="author" content="David KRK">

<!-- Open Graph / Facebook -->
Expand All @@ -31,6 +30,7 @@
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<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="preload" as="image" href="assets/images/david_krk_owl.jpg" fetchpriority="high">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="home-page">
Expand Down Expand Up @@ -59,49 +59,49 @@ <h1 class="main-title">David KRK</h1>
<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" 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 active" data-lang="fr"><h2 class="main-title">Accueil</h2></div>
<div class="lang-content" data-lang="en" hidden><h2 class="main-title">Home</h2></div>
<div class="lang-content" data-lang="es" hidden><h2 class="main-title">Inicio</h2></div>
<div class="lang-content" data-lang="eu" hidden><h2 class="main-title">Hasiera</h2></div>
<div class="lang-content" data-lang="ar" dir="rtl" hidden><h2 class="main-title">الرئيسية</h2></div>
<div class="lang-content" data-lang="uk" hidden><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>
<p>Découvrez sa musique, sa biographie et ses événements.</p>
</div>
</div>
<div class="lang-content" data-lang="en">
<div class="lang-content" data-lang="en" hidden>
<div class="text-lg">
<p class="mt-4">Official Website of David KRK</p>
<p>International Techno Music DJ & Producer.</p>
<p>Discover his music, biography, and events.</p>
</div>
</div>
<div class="lang-content" data-lang="es">
<div class="lang-content" data-lang="es" hidden>
<div class="text-lg">
<p class="mt-4">Sitio web oficial de David KRK</p>
<p>DJ y productor internacional de música Techno.</p>
<p>Descubre su música, biografía y eventos.</p>
</div>
</div>
<div class="lang-content" data-lang="eu">
<div class="lang-content" data-lang="eu" hidden>
<div class="text-lg">
<p class="mt-4">David KRK-ren webgune ofiziala</p>
<p>Techno musikako nazioarteko DJ eta ekoizlea.</p>
<p>Ezagutu bere musika, biografia eta ekitaldiak.</p>
</div>
</div>
<div class="lang-content" data-lang="ar" dir="rtl">
<div class="lang-content" data-lang="ar" dir="rtl" hidden>
<div class="text-lg">
<p class="mt-4">الموقع الرسمي لديفيد كرك</p>
<p>دي جي ومنتج عالمي لموسيقى التكنو.</p>
<p>اكتشف موسيقاه وسيرته الذاتية وفعالياته.</p>
</div>
</div>
<div class="lang-content" data-lang="uk">
<div class="lang-content" data-lang="uk" hidden>
<div class="text-lg">
<p class="mt-4">Офіційний сайт David KRK</p>
<p>Міжнародний техно-діджей та продюсер.</p>
Expand All @@ -111,11 +111,12 @@ <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">
<!-- TODO: générer david_krk_owl.webp et david_krk_owl.avif, puis réactiver <picture> -->
<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768" fetchpriority="high">
</div>


<!-- Slider “player‑widget” (optionnel) -->
<!-- Slider "player‑widget" (optionnel) -->
<section class="mt-8 mb-8 player-container">
<iframe title="Mixcloud player" width="100%" height="120"
loading="lazy"
Expand All @@ -139,7 +140,7 @@ <h1 class="main-title">David KRK</h1>
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-soundcloud" aria-hidden="true"></i></a>
<a href="https://www.tiktok.com/@davidkrk" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
class="social-icon text-2xl md:text-3xl text-white"><i class="fab fa-tiktok" aria-hidden="true"></i></a>
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon support-link"><i class="fa-solid fa-mug-hot" aria-hidden="true"></i><span>Buy Me A Coffee</span></a>
<a href="https://www.buymeacoffee.com/davidkrk" target="_blank" rel="noopener noreferrer" aria-label="Buy Me A Coffee" class="social-icon support-link"><i class="fa-solid fa-mug-hot" aria-hidden="true"></i> Buy me a coffee</a>
</nav>

<div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-4 text-sm">
Expand All @@ -158,11 +159,17 @@ <h1 class="main-title">David KRK</h1>
const langContents = document.querySelectorAll('.lang-content');

function switchLanguage(lang) {
langContents.forEach(content => content.classList.remove('active'));
langContents.forEach(content => {
content.classList.remove('active');
content.hidden = true;
});
langBtns.forEach(b => b.classList.remove('active'));

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

const activeBtn = document.querySelector(`.language-btn[data-lang="${lang}"]`);
if (activeBtn) {
Expand Down
Loading