⭐ Projet Vedette

Librairie L'indépendante

Site vitrine d'une librairie indépendante avec optimisation poussée des performances web. Projet éducatif démontrant l'excellence technique en HTML5, CSS3 et JavaScript vanilla, avec des scores Lighthouse parfaits et des techniques d'optimisation avancées. Architecture component-based, images responsives avec srcset, WebP moderne, et déploiement Docker professionnel.

Janvier 2026

HTML5CSS3JavaScriptDockerApacheWebPPerformanceSEOResponsiveComponent Architecture

Code source

Scores Google Lighthouse

100

Performance

Accessibilité

100

Meilleures pratiques

100

SEO

Vue d'ensemble

Ce projet démontre l'excellence en optimisation web avec un focus sur la performance, l'accessibilité et les bonnes pratiques modernes. Le site atteint un score parfait de 100/100 en Performance et Best Practices sur Google Lighthouse grâce à une série d'optimisations techniques avancées : images WebP avec srcset responsive (réduction de 82% sur mobile), preload des ressources critiques, inline CSS pour le rendu immédiat, architecture component-based en JavaScript vanilla, et déploiement Docker avec configuration Apache optimale. Le projet démontre qu'il est possible d'atteindre des performances exceptionnelles sans framework lourd, en maîtrisant les fondamentaux du web.

Fonctionnalités Clés

Performance 100/100 Lighthouse

Score Lighthouse parfait obtenu grâce au preload des ressources critiques, inline CSS, compression WebP (48% de réduction), et optimisation LCP de 1.4s. Images responsive avec <picture> et srcset pour réduire de 82% le poids sur mobile. CLS de 0.02 avec réservation d'espace explicite.

Images Responsives Multi-Formats

Système d'images avancé avec élément <picture>, srcset avec 3 tailles (480w, 768w, 960w), conversion WebP automatique via scripts bash, et fallback JPEG. Attributs width/height pour éviter le CLS. fetchpriority='high' sur l'image LCP. Scripts create-responsive-images.sh et optimize-image.sh pour automatisation.

Architecture Composants JavaScript

JavaScript modulaire avec HeaderComposant (accepte titre, menuItems, imageUrl), CardLivreComposant (titre, auteur, année, genre, description), et FooterComposant. Génération dynamique du DOM avec template literals. Approche DRY et réutilisable tout en restant en vanilla JS. Chargement différé avec defer.

Design System CSS avec Variables

Système de design centralisé avec :root pour variables (--color-rouge-1, --size-xs, --font-xl). Classes utilitaires réutilisables (.texte-centre, .max-width-960px, .card-livre). Flexbox pour layouts et inline-block pour le menu. Nomenclature BEM pour les composants. Aspect-ratio pour maintenir proportions.

Docker + Apache Optimisé

Image Alpine légère avec configuration Apache personnalisée. Compression Gzip via mod_deflate pour tous les text/. Cache stratégique : 1 an pour images/CSS/JS, 5 minutes pour HTML. Headers de sécurité (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection). Scripts bash intégrés au workflow.

SEO & Accessibilité Excellents

SEO 100/100 avec meta descriptions riches, structure sémantique HTML5 (header, nav, main, footer, section), balises alt descriptives. Accessibilité 92/100 avec navigation aria-label, contraste WCAG AA, ordre de tabulation logique, et support clavier complet. Preconnect pour fonts, preload pour LCP.

Défis Relevés

Atteindre un score de 100/100 en Performance sur Google Lighthouse avec LCP < 1.5s
Optimiser les images avec conversion WebP automatique et génération de multiples tailles (480w, 768w, 960w)
Implémenter une architecture component-based en JavaScript vanilla sans framework
Assurer une accessibilité WCAG 2.1 niveau AA (score 92/100)
Containerisation Docker complète avec Apache optimisé (Gzip, cache stratégique, headers de sécurité)
Maintenir un CLS de 0.02 avec réservation d'espace pour les images et fonts
Configurer un système de build avec scripts bash pour l'optimisation automatique des assets

Exemples de Code

HTML Structure

CSS Styles

JavaScript Components

Dockerfile

Apache Configuration

Optimization Script

Intéressé par ce projet ?

Consultez le code source ou visitez le site en ligne pour voir le résultat final.

Code source