Retour au portfolio

Portfolio de Nina Carducci

  • Intégration web
  • Optimisation
  • SEO

Cette page présente l’étude de cas du projet Open Source Portfolio de Nina Carducci, incluant son aperçu, les outils utilisés, ainsi que des liens directs vers les ressources associées.

Portfolio de Nina Carducci

Description

Présentation

Ce projet consiste à optimiser les performances, l’accessibilité et le référencement naturel (SEO) du site web de la photographe Nina Carducci.

Le site existant, développé en HTML et CSS, présentait plusieurs problèmes :

  • temps de chargement élevés
  • accessibilité insuffisante
  • référencement limité, notamment pour la recherche locale et le partage sur les réseaux sociaux

L’objectif était d’améliorer l’expérience utilisateur tout en renforçant la visibilité du site sur les moteurs de recherche.

Optimisation du référencement (SEO)

Plusieurs améliorations ont été apportées pour renforcer le référencement naturel :

  • ajout de balises meta optimisées
  • intégration de microdonnées Schema.org pour le référencement local
  • ajout de balises Open Graph pour améliorer l’affichage lors du partage sur les réseaux sociaux
  • configuration spécifique pour les partages sur Facebook et X (Twitter)

Ces optimisations permettent aux moteurs de recherche et aux plateformes sociales de mieux interpréter le contenu du site.

Optimisation des performances

Le site a été optimisé afin de réduire les temps de chargement :

  • compression et conversion des images en format WebP (un format adapté au web)
  • mise en place du lazy loading pour charger les images uniquement lorsqu’elles apparaissent à l’écran
  • minification des fichiers CSS et JavaScript
  • distribution des ressources via des CDN (Content Delivery Network)

Ces améliorations permettent d’accélérer l’affichage des pages et de réduire la consommation de bande passante.

Amélioration de l’accessibilité

Le site a été modifié pour améliorer son accessibilité :

  • amélioration du contraste des couleurs
  • ajout d’attributs alternatifs (alt) pour les images
  • correction de la structure des balises HTML
  • amélioration de la navigation au clavier

Ces ajustements permettent une meilleure utilisation du site pour les personnes utilisant des technologies d’assistance.

Pédagogique

Projet réalisé en 2023

Outils et technologies

  • HTML
  • CSS
  • JavaScript