Aller au contenu principal

Module HTML.10 – Performance & bonnes pratiques

Objectif​

Maîtriser l'optimisation du chargement HTML, créer une structure propre, valider le HTML, et éviter les anti-patterns pour des sites performants et maintenables.

Théorie​

Chargement et performance​

Ordre de chargement​

Structure optimale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- CSS critique en premier -->
    <link rel="stylesheet" href="critical.css">
    <!-- Préchargement des ressources -->
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
    <!-- Contenu visible immédiatement -->
    <header>...</header>
    <main>...</main>
    
    <!-- JavaScript en fin de page -->
    <script src="app.js" defer></script>
</body>
</html>

Préchargement​

<link rel="preload"> : Charger tôt des ressources importantes

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">

<link rel="prefetch"> : Charger en arrière-plan

<link rel="prefetch" href="next-page.html">

<link rel="dns-prefetch"> : Résoudre le DNS tôt

<link rel="dns-prefetch" href="https://fonts.googleapis.com">

CSS critique​

Inliner le CSS critique :

<head>
    <style>
        /* CSS critique (above-the-fold) */
        header { ... }
        .hero { ... }
    </style>
    <link rel="stylesheet" href="main.css">
</head>

JavaScript​

defer : Exécute après le parsing

<script src="app.js" defer></script>

async : Télécharge et exécute en parallèle

<script src="analytics.js" async></script>

Position : Toujours en fin de <body> ou avec defer.

Structure propre​

Indentation​

✅ Bon :

<main>
    <section>
        <h2>Titre</h2>
        <p>Contenu</p>
    </section>
</main>

❌ Mauvais :

<main><section><h2>Titre</h2><p>Contenu</p></section></main>

Commentaires​

Utiliser pour :

  • Expliquer des sections complexes
  • Marquer des TODOs
  • Documenter la structure
<!-- Navigation principale -->
<nav>...</nav>

<!-- TODO: Ajouter sidebar -->
<aside>...</aside>

Organisation​

Structure de fichiers :

projet/
├── index.html
├── about.html
├── css/
│   ├── style.css
│   └── reset.css
├── js/
│   └── main.js
├── images/
│   └── logo.png
└── fonts/
    └── font.woff2

HTML valide​

Validateur W3C​

Outils :

Vérifier :

  • Syntaxe correcte
  • Balises fermées
  • Attributs valides
  • Structure sémantique

Doctype correct​

<!DOCTYPE html>

Encodage UTF-8​

<meta charset="UTF-8">

Attributs valides​

❌ Mauvais :

<div class="header" id="header" style="color: red;">

✅ Bon :

<header id="header">

Anti-patterns à éviter​

1. Tableaux pour la mise en page​

❌ Mauvais :

<table>
    <tr>
        <td>Colonne gauche</td>
        <td>Colonne droite</td>
    </tr>
</table>

✅ Bon :

<div class="container">
    <div class="colonne-gauche">...</div>
    <div class="colonne-droite">...</div>
</div>

2. Inline styles partout​

❌ Mauvais :

<p style="color: blue; font-size: 16px;">Texte</p>

✅ Bon :

<p class="texte-important">Texte</p>

3. JavaScript inline​

❌ Mauvais :

<button onclick="alert('Clic')">Cliquer</button>

✅ Bon :

<button id="btn">Cliquer</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
    alert('Clic');
});
</script>

4. Balises obsolètes​

❌ Mauvais :

<font color="red">Texte</font>
<center>Centré</center>
<b>Gras</b>

✅ Bon :

<p class="rouge">Texte</p>
<div class="centre">Centré</div>
<strong>Important</strong>

5. Attributs dépréciés​

❌ Mauvais :

<img src="image.jpg" border="0">
<table cellpadding="10">

✅ Bon :

<img src="image.jpg">
<!-- Utiliser CSS pour le style -->

Bonnes pratiques​

1. Structure sémantique​

Utiliser les balises HTML5 sémantiques.

2. Accessibilité​

Labels, alt, ARIA, navigation clavier.

3. Performance​

  • Images optimisées
  • CSS/JS minifiés
  • Préchargement
  • Lazy loading

4. SEO​

  • Métadonnées complètes
  • Structure sémantique
  • URLs propres

5. Maintenabilité​

  • Code propre
  • Commentaires appropriés
  • Organisation claire

Exercices guidés​

Exercice 1 : Optimisation du chargement​

Créez une page avec :

  • CSS critique inliné
  • Préchargement de ressources
  • JavaScript en fin de page avec defer

Exercice 2 : Validation HTML​

Créez une page et :

  • Validez avec W3C Validator
  • Corrigez toutes les erreurs
  • Re-validez jusqu'à 0 erreur

Exercice 3 : Structure propre​

Refactorisez un code HTML :

  • Indentation correcte
  • Commentaires appropriés
  • Organisation claire

Exercice 4 : Éviter les anti-patterns​

Identifiez et corrigez :

  • Tableaux pour mise en page
  • Inline styles
  • JavaScript inline
  • Balises obsolètes

Exercice 5 : Performance​

Optimisez une page :

  • Images optimisées
  • Préchargement
  • Lazy loading
  • Minification

❌ Erreurs fréquentes​

Erreur 1 : JavaScript en head​

❌ Mauvais :

<head>
    <script src="app.js"></script>
</head>

✅ Bon :

<body>
    <!-- Contenu -->
    <script src="app.js" defer></script>
</body>

Pourquoi : Bloque le rendu de la page.

Erreur 2 : CSS non critique en head​

❌ Mauvais :

<head>
    <link rel="stylesheet" href="non-critique.css">
</head>

✅ Bon :

<head>
    <style>/* CSS critique */</style>
    <link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
</head>

Pourquoi : Améliore le First Contentful Paint.

Erreur 3 : HTML non valide​

❌ Mauvais :

<div><p>Texte</div>

✅ Bon :

<div><p>Texte</p></div>

Pourquoi : Problèmes de rendu, accessibilité.

Erreur 4 : Images non optimisées​

❌ Mauvais :

<img src="photo-10mb.jpg" alt="Photo">

✅ Bon :

<img src="photo-optimized-200kb.jpg" 
     alt="Photo" 
     width="800" 
     height="600" 
     loading="lazy">

Pourquoi : Performance (temps de chargement).

Erreur 5 : Pas de préchargement​

❌ Mauvais :

<link rel="stylesheet" href="font.css">

✅ Bon :

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="font.css">

Pourquoi : Réduit le temps de chargement des polices.

🚀 Mini-projet​

Mission : Optimiser un site web complet

Prenez un site existant et optimisez-le :

Optimisations :

  1. Validation HTML (0 erreurs)
  2. Structure propre et sémantique
  3. Performance (préchargement, lazy loading)
  4. Images optimisées
  5. CSS/JS optimisés
  6. Anti-patterns corrigés

Tests :

  • W3C Validator (0 erreurs)
  • Lighthouse (score > 90)
  • PageSpeed Insights
  • Structure sémantique vérifiée

Critères :

  • ✅ HTML valide
  • ✅ Performance optimisée
  • ✅ Structure propre
  • ✅ Anti-patterns évités
  • ✅ Bonnes pratiques appliquées

Objectif : Créer un site HTML performant, valide et maintenable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'optimisation HTML et avez créé un site performant et valide.