Performance et référencement de base

Un visiteur quitte souvent une page qui met trop de temps à s’afficher, et un moteur de recherche ne peut recommander que ce qu’il comprend. Dans cette leçon, vous allez rendre le portfolio de Camille léger, rapide et bien présenté dans les résultats de recherche et sur les réseaux : optimisation des images, chargement différé, balises title et meta description, partage avec Open Graph, favicon et validation du code. Ces gestes sont simples, gratuits et très efficaces.

La performance : pourquoi et comment la mesurer

Une page légère s’affiche plus vite, consomme moins de données mobiles, fonctionne mieux sur les appareils modestes et sur les connexions lentes, et réduit l’énergie consommée. C’est bon pour l’utilisateur, pour le référencement et pour l’environnement.

Pour savoir où l’on en est, ouvrez l’onglet Réseau des outils de développement : il liste chaque fichier chargé avec son poids et son temps de chargement. Vous y repérerez immédiatement l’image de 4 Mo qui plombe tout. Les outils de développement proposent aussi un audit global (souvent appelé « Lighthouse » ou équivalent selon le navigateur) qui évalue performance, accessibilité et bonnes pratiques, et suggère des corrections. Prenez ses scores comme des indications, pas comme une fin en soi.

Les images : le premier poste de poids

Sur la plupart des sites, les images représentent la plus grande partie du poids des pages, et celui d’un portfolio de photographe ne fait pas exception. Quatre leviers, du plus efficace au plus fin :

1. Redimensionner : n’affichez pas une photo de 6 000 pixels de large dans une carte de 400 pixels. Exportez chaque image à la taille maximale réellement utile (en tenant compte des écrans à haute densité, une largeur de deux fois la taille affichée suffit en général) ;
2. Compresser : un export JPEG ou WebP avec une qualité raisonnable réduit énormément le poids sans différence visible à l’œil ;
3. Choisir le bon format : JPEG ou WebP pour les photos, SVG pour les logos et icônes, PNG pour les images avec transparence nécessitant une précision parfaite ;
4. Proposer plusieurs tailles avec srcset et sizes (vus au chapitre précédent), pour que chaque appareil télécharge la version qui lui convient.

<img
  src="images/projets/alpes-800.webp"
  srcset="images/projets/alpes-400.webp 400w,
          images/projets/alpes-800.webp 800w,
          images/projets/alpes-1600.webp 1600w"
  sizes="(min-width: 64rem) 33vw, 100vw"
  alt="Sommets enneigés au lever du soleil"
  width="800" height="533"
  loading="lazy">

Le chargement différé : loading="lazy"

L’attribut loading="lazy" indique au navigateur de ne télécharger l’image que lorsqu’elle approche de la zone visible. Les images situées plus bas dans la page ne ralentissent plus le chargement initial. Deux règles d’or :

• ne l’appliquez pas aux images visibles dès l’arrivée sur la page (le portrait, l’image d’accueil) : elles doivent se charger tout de suite ;
• gardez toujours width et height, pour que la place soit réservée et que la page ne « saute » pas pendant le chargement.

Le même attribut existe pour les iframe. Pour une image importante, vous pouvez aussi ajouter fetchpriority="high" afin d’indiquer qu’elle doit être chargée en priorité.

Autres bonnes pratiques de légèreté

• Peu de polices : une ou deux familles, en woff2, avec font-display: swap ;
• Une seule feuille de style raisonnable, sans règles inutilisées ; supprimez le CSS mort ;
• Pas de ressource inutile : chaque bibliothèque, service tiers ou vidéo intégrée alourdit la page ; posez-vous la question de leur utilité réelle ;
• Du code propre : un HTML simple se charge et s’interprète plus vite ;
• et côté hébergement, la compression des fichiers texte (activée par la plupart des hébergeurs) allège encore les transferts.

Le référencement (SEO) : les bases utiles

Le référencement naturel consiste à aider les moteurs de recherche à comprendre votre site, pour qu’il s’affiche quand il répond à une recherche. Personne ne maîtrise les algorithmes, et il n’existe pas de recette miracle. En revanche, des bases techniques et éditoriales de bon sens font une vraie différence, et elles recoupent largement ce que vous avez déjà appris : un HTML sémantique, des titres hiérarchisés, des images décrites, des liens explicites, un site rapide et adapté au mobile.

La balise title

C’est le titre cliquable affiché dans les résultats de recherche, dans l’onglet du navigateur et dans les favoris. Il doit être unique à chaque page, décrire précisément son contenu et rester assez court pour ne pas être tronqué (une soixantaine de caractères est une valeur indicative courante). Placez l’information la plus importante au début :

<title>Camille Morel – Photographe paysages et portraits</title>
<title>Tarifs et prestations – Camille Morel</title>

La balise meta description

Elle résume la page en une ou deux phrases. Les moteurs de recherche l’utilisent souvent (mais pas toujours) comme extrait sous le titre. Rédigez-la comme un petit texte d’invitation, spécifique à chaque page, d’environ 150 caractères :

<meta name="description" content="Photographe indépendante, Camille Morel réalise des portraits, des reportages d’événements et des séries de paysages. Découvrez ses projets et demandez un devis.">

Un langage et des URL clairs

• L’attribut lang sur html indique la langue de la page ;
• des noms de fichiers et de dossiers lisibles (portraits-artisans.html) valent mieux que page2.html ;
• un seul h1 par page, qui décrit son sujet ;
• un texte alternatif pertinent sur les images, et des liens à l’intitulé explicite.

Le partage sur les réseaux : Open Graph

Quand vous collez l’adresse d’un site dans une messagerie ou sur un réseau social, un aperçu s’affiche : titre, description, image. Cet aperçu est construit à partir de balises meta du protocole Open Graph, à placer dans le head :

<meta property="og:title" content="Camille Morel – Photographe">
<meta property="og:description" content="Portraits, reportages et paysages. Découvrez mes projets.">
<meta property="og:image" content="https://www.exemple.org/images/apercu.jpg">
<meta property="og:url" content="https://www.exemple.org/">
<meta property="og:type" content="website">

Notez que l’adresse de og:image doit généralement être absolue : les réseaux sociaux ne peuvent pas deviner votre dossier de projet. Utilisez une image dédiée, bien cadrée (un rapport proche de 1,91 pour 1 est courant), et testez le rendu en partageant le lien dans une conversation privée. Ces balises ne remplacent pas title et description : elles s’y ajoutent.

Le favicon

Le favicon est la petite icône affichée dans l’onglet et les favoris. Son absence donne une impression de travail inachevé et provoque des requêtes inutiles vers un fichier introuvable. Un fichier SVG est idéal : léger et net à toutes les tailles.

<link rel="icon" href="favicon.svg" type="image/svg+xml">

Certains appareils attendent aussi une icône PNG de plus grande taille (par exemple pour l’écran d’accueil d’un téléphone) : vous pouvez en ajouter une avec rel="apple-touch-icon" ou via un fichier de manifeste, mais pour un premier site, le favicon seul suffit.

Le head complet de la page de Camille

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Camille Morel – Photographe paysages et portraits</title>
  <meta name="description" content="Photographe indépendante : portraits, reportages et paysages. Découvrez mes projets et demandez un devis.">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/style.css">

  <meta property="og:title" content="Camille Morel – Photographe">
  <meta property="og:description" content="Portraits, reportages et paysages.">
  <meta property="og:image" content="https://www.exemple.org/images/apercu.jpg">
  <meta property="og:type" content="website">
</head>

L’ordre importe peu, à l’exception de meta charset, à placer parmi les tout premiers éléments, comme l’indique la spécification.

Valider son HTML

Le W3C met à disposition gratuitement un validateur HTML (« Nu HTML Checker », accessible depuis le site validator.w3.org). Vous pouvez coller votre code, envoyer un fichier ou indiquer une adresse en ligne : il liste les erreurs (balises non fermées, attributs invalides, images sans alt) et les avertissements. Un code valide est plus robuste, mieux interprété par les technologies d’assistance, et plus facile à maintenir. Un seul oubli peut parfois provoquer plusieurs messages en cascade : corrigez toujours la première erreur et revalidez.

De même, un validateur CSS existe (le « Jigsaw » du W3C), utile pour repérer des fautes de frappe sur les propriétés. N’en faites pas un dogme : certaines fonctionnalités récentes peuvent apparaître comme inconnues alors qu’elles sont pleinement prises en charge. Vérifiez alors la documentation MDN.

À vous de jouer

1. Dans l’onglet Réseau de votre navigateur, rechargez votre page et repérez le fichier le plus lourd. Comment l’alléger ?
2. Ajoutez loading="lazy" aux images de la galerie (pas à celles du haut de page) et vérifiez que chacune a width et height ;
3. rédigez un title et une meta description spécifiques à chaque page de votre site ;
4. ajoutez les cinq balises Open Graph principales et un favicon ;
5. passez votre page dans le validateur HTML du W3C et corrigez ce qu’il signale.

<img src="images/projets/boulanger-800.webp"
     alt="Un boulanger sort des pains du four"
     width="800" height="533"
     loading="lazy">

<title>Tarifs et prestations – Camille Morel</title>
<meta name="description" content="Portrait, reportage, séance famille : découvrez les prestations de Camille Morel et leurs tarifs indicatifs.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Votre site est maintenant propre, accessible et léger. Il est temps de réunir tout ce que vous avez appris dans un projet final : c’est l’objet du dernier chapitre.