perf(index.html): LCP preload, picture/WebP, hidden lang-content, drop meta keywords by Copilot · Pull Request #265 · DavidKRK/DavidKRK.github.io

Copilot · 2026-06-02T23:25:56Z

Four targeted web performance optimisations on index.html addressing LCP, CLS, and SEO hygiene.

Changes

LCP — hero image preload (<head>): adds <link rel="preload" as="image" fetchpriority="high"> so the browser fetches the hero image during <head> parsing, before the body is processed.

LCP — <picture> with WebP fallback: wraps the hero <img> in a <picture> element with a WebP <source>. AVIF source deferred until assets are generated (TODO comment left in place). JPG remains the guaranteed fallback.

<!-- 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" ... fetchpriority="high">
</picture>

CLS — native hidden on non-active lang blocks: all .lang-content divs with data-lang ≠ fr now carry the HTML hidden attribute, preventing a flash of all language blocks before CSS loads. switchLanguage() updated to toggle element.hidden alongside classList.add/remove('active').
SEO — remove <meta name="keywords">: tag has been ignored by all major search engines for 10+ years; removed.

Original prompt

Objectif

Appliquer 4 optimisations de performance Web (LCP / CLS / SEO) sur index.html identifiées lors de la review de la PR #264.

Fichier cible

index.html (branche gh-pages)

Changements à effectuer

1. 🔴 `preload` de l'image hero dans `<head>` — Fort impact LCP

Ajouter cette ligne dans le <head>, juste avant le CSS principal (<link rel="stylesheet" href="assets/css/style.css">):

<link rel="preload" as="image" href="assets/images/david_krk_owl.jpg" fetchpriority="high">

Cela permet au navigateur de commencer à télécharger l'image hero dès le parsing du <head>, sans attendre le body.

2. 🟠 Utiliser `<picture>` avec WebP/AVIF pour l'image hero — Impact LCP + poids

Remplacer :

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

Par :

<picture>
  <source srcset="assets/images/david_krk_owl.avif" type="image/avif">
  <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>

Note : les fichiers .avif et .webp n'existent peut-être pas encore — si c'est le cas, ajouter uniquement la source webp et laisser un commentaire . Le fallback .jpg garantit que rien ne casse.

3. 🟡 Attribut `hidden` sur les `lang-content` non-FR — Prévention CLS

Les blocs .lang-content sont masqués via CSS (display: none). Si le CSS est lent à charger, ils apparaissent tous brièvement, causant un CLS. Ajouter l'attribut HTML natif hidden sur tous les blocs data-lang sauf fr (qui lui reçoit la classe active via JS de toute façon).

Tous les <div class="lang-content" data-lang="..."> avec data-lang différent de fr doivent recevoir l'attribut hidden.

Exemple :

<div class="lang-content" data-lang="en" hidden>...</div>
<div class="lang-content" data-lang="es" hidden>...</div>

⚠️ Le JavaScript existant utilise classList.add('active') / classList.remove('active') — il faut aussi gérer la suppression de l'attribut hidden lors du switch de langue. Modifier la fonction switchLanguage dans le script inline pour retirer hidden des éléments affichés et l'ajouter aux éléments cachés :

function switchLanguage(lang) {
    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');
        content.hidden = false;
    });

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

    document.documentElement.lang = lang;
    document.documentElement.dir = (lang === 'ar') ? 'rtl' : 'ltr';
}

4. 🟢 Supprimer `<meta name="keywords">` obsolète — Propreté SEO

Supprimer cette ligne :

<meta name="keywords" content="David KRK, DJ techno, producteur, événements, musique">

Google et tous les moteurs de recherche modernes ignorent cette balise depuis plus de 10 ans. Sa présence est inutile.

Résultat attendu

LCP amélioré grâce au preload anticipé de l'image hero
Poids réduit si WebP/AVIF disponibles (fallback JPG sinon)
CLS prévenu grâce à hidden natif sur les blocs de langue non actifs
HTML plus propre (suppression meta inutile)
Zéro régression visuelle ou fonctionnelle

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Execute le "submit review" avec ton choix de reponse "Review Event
CommentSubmit general feedback without explicit approval.
ApproveOnly users who did not collaborate with the cloud agent will satisfy review requirements.
Request changesSubmit feedback suggesting changes." et rédire un commentaire pour les review

Assistant: Voici mon analyse complète de la PR, suivie du submit review avec Approve ✅

📋 Résumé de la PR #264

Objectif : Consolider les CSS du sélecteur de langues (suppression des doublons) + optimisation LCP de l'image hero.
Fichiers modifiés : 2 — assets/css/style.css et index.html
Scope : +28 lignes / -66 lignes → nettoyage net du code.

🔍 Analyse des changements

1. `assets/css/style.css` — Consolidation CSS 🧹

Le problème était clair : les styles de .language-btn et .lang-content étaient définis 3 fois à différents endroits du fichier, avec des conflits (!important, valeurs contradictoires). La PR :

✅ Supprime le bloc en haut du fichier avec les !important (hack de surcharge inutile)
-...

This pull request was created from Copilot chat.

bolt-new-by-stackblitz · 2026-06-02T23:25:59Z

Run & review this pull request in StackBlitz Codeflow.

Copilot

Pull request overview

This PR applies targeted performance and UX optimizations to index.html to improve LCP/CLS behavior and remove obsolete SEO markup.

Changes:

Adds an explicit preload for the hero image to start fetching during <head> parsing.
Wraps the hero image in a <picture> element (intended WebP fallback) and sets fetchpriority="high" on the hero <img>.
Uses native hidden on non-FR .lang-content blocks and updates switchLanguage() to toggle element.hidden; removes <meta name="keywords">.

Comments suppressed due to low confidence (1)

index.html:71

Same as the heading: the default French content block should start with active so it remains visible once CSS applies .lang-content { display:none; }, even before the JS language switch runs.

      <div class="lang-content" data-lang="fr">
        <div class="text-lg">
            <p class="mt-4">Site officiel de David KRK</p>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…bP source - Add class="lang-content active" to the two default French lang-content blocks to prevent FOUC (flash of invisible content) between CSS load and DOMContentLoaded JS execution - Remove <picture>/<source> WebP element since david_krk_owl.webp does not exist in the repo yet (would cause a 404 and broken hero image in all modern browsers); keep TODO comment and fetchpriority="high" on <img>"

DavidKRK

✅ Les deux problèmes bloquants sont corrigés :

class="lang-content active" ajouté sur les blocs FR par défaut → plus de risque de FOUC entre le chargement CSS et l'exécution JS.
<picture>/<source> WebP supprimé → l'image hero s'affiche correctement sur tous les navigateurs (le fichier .webp n'existant pas encore, il causait une 404 silencieuse).

Le TODO est conservé pour réactiver dès que david_krk_owl.webp sera généré et commité. PR prête à merger. 🚀

Initial plan

622f6a1

Copilot AI assigned Copilot and DavidKRK Jun 2, 2026

Copilot started work on behalf of DavidKRK June 2, 2026 23:26 View session

Optimisations LCP/CLS/SEO sur index.html (#265)

c8a7384

Copilot AI changed the title ~~[WIP] Optimize performance for index.html based on review~~ perf(index.html): LCP preload, picture/WebP, hidden lang-content, drop meta keywords Jun 2, 2026

Copilot finished work on behalf of DavidKRK June 2, 2026 23:29

Copilot AI requested a review from DavidKRK June 2, 2026 23:29

DavidKRK marked this pull request as ready for review June 2, 2026 23:38

Copilot AI review requested due to automatic review settings June 2, 2026 23:38

Copilot started reviewing on behalf of DavidKRK June 2, 2026 23:38 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

Comment thread index.html Outdated

Comment thread index.html Outdated

DavidKRK approved these changes Jun 2, 2026

View reviewed changes

DavidKRK merged commit d3049f4 into gh-pages Jun 2, 2026
11 of 12 checks passed

DavidKRK deleted the copilot/gh-pages branch June 2, 2026 23:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

perf(index.html): LCP preload, picture/WebP, hidden lang-content, drop meta keywords#265
DavidKRK merged 3 commits into
gh-pagesfrom
copilot/gh-pages

Copilot AI commented Jun 2, 2026 •

edited

Loading

Uh oh!

bolt-new-by-stackblitz Bot commented Jun 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

DavidKRK left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Objectif

Fichier cible

Changements à effectuer

1. 🔴 preload de l'image hero dans <head> — Fort impact LCP

2. 🟠 Utiliser <picture> avec WebP/AVIF pour l'image hero — Impact LCP + poids

3. 🟡 Attribut hidden sur les lang-content non-FR — Prévention CLS

4. 🟢 Supprimer <meta name="keywords"> obsolète — Propreté SEO

Résultat attendu

📋 Résumé de la PR #264

🔍 Analyse des changements

1. assets/css/style.css — Consolidation CSS 🧹

Uh oh!

bolt-new-by-stackblitz Bot commented Jun 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

DavidKRK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jun 2, 2026 •

edited

Loading

1. 🔴 `preload` de l'image hero dans `<head>` — Fort impact LCP

2. 🟠 Utiliser `<picture>` avec WebP/AVIF pour l'image hero — Impact LCP + poids

3. 🟡 Attribut `hidden` sur les `lang-content` non-FR — Prévention CLS

4. 🟢 Supprimer `<meta name="keywords">` obsolète — Propreté SEO

1. `assets/css/style.css` — Consolidation CSS 🧹