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 2 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
38 changes: 24 additions & 14 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 @@ -60,11 +60,11 @@ <h1 class="main-title">David KRK</h1>
</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" 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>
Comment thread
DavidKRK marked this conversation as resolved.
Outdated
<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="text-lg">
Expand All @@ -73,35 +73,35 @@ <h1 class="main-title">David KRK</h1>
<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,7 +111,11 @@ <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 -->
<picture>
<source srcset="assets/images/david_krk_owl.webp" type="image/webp">
<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768" fetchpriority="high">
</picture>
Comment thread
DavidKRK marked this conversation as resolved.
Outdated
</div>


Expand Down Expand Up @@ -158,11 +162,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