index

Optimisation des performances côté serveur et client

L’optimisation des performances est un élément clé dans la conception et le développement d’applications modernes. Elle impacte non seulement l’expérience utilisateur (rapidité, fluidité, fiabilité), mais aussi les coûts d’infrastructure et la capacité de l’application à évoluer.

On distingue deux grandes approches :

  • L’optimisation côté serveur : améliorer la rapidité et l’efficacité du backend (API, base de données, traitement).
  • L’optimisation côté client : rendre l’affichage et les interactions plus rapides côté navigateur ou application mobile.

1. Optimisation côté serveur

Le serveur est responsable du traitement des requêtes, de la communication avec la base de données et de l’envoi des réponses au client. Des lenteurs côté serveur impactent directement l’utilisateur final.

1.1 Mise en cache (caching)

Le cache permet de stocker des réponses ou résultats pour éviter de recalculer à chaque requête.

  • Exemple simple :

    • Un utilisateur demande la liste des produits.
    • Au lieu de relancer une requête SQL complexe à chaque fois, on met en cache la réponse en mémoire (Redis, Memcached).
// Exemple avec Node.js et Redis
import redis from "redis";
const client = redis.createClient();

app.get("/products", async (req, res) => {
  const cached = await client.get("products");
  if (cached) return res.json(JSON.parse(cached));

  const products = await db.product.findMany();
  client.set("products", JSON.stringify(products));
  res.json(products);
});

Gain : rapidité et réduction de la charge sur la base de données.

1.2 Optimisation des requêtes SQL

  • Utiliser des index sur les colonnes les plus recherchées.
  • Éviter les SELECT * qui chargent inutilement toutes les colonnes.
  • Préférer les jointures optimisées ou la dénormalisation dans certains cas.

1.3 Scalabilité horizontale

  • Load balancing : répartir les requêtes entre plusieurs serveurs.
  • Serverless / microservices : découper l’application pour ne traiter que ce qui est nécessaire.

1.4 Compression et HTTP/2

  • Activer la compression Gzip ou Brotli pour réduire la taille des réponses.
  • Utiliser HTTP/2 (ou HTTP/3) pour améliorer la vitesse de transfert.

2. Optimisation côté client

Le client est souvent un navigateur ou une application mobile. Même si le serveur est rapide, une mauvaise gestion côté client peut ralentir fortement l’application.

2.1 Minification et bundling

  • Minification : supprimer les espaces, commentaires et caractères inutiles dans le code JavaScript, CSS, HTML.
  • Bundling : regrouper plusieurs fichiers en un seul pour réduire le nombre de requêtes.

Outils : Webpack, Vite, Rollup.

2.2 Chargement paresseux (lazy loading)

Ne charger que ce qui est nécessaire au bon moment.

  • Exemple : charger les images uniquement quand elles apparaissent dans la zone visible.
<img src="image.jpg" loading="lazy" alt="Produit" />

2.3 Optimisation des images

  • Convertir en formats modernes (WebP, AVIF).
  • Redimensionner en fonction du device.
  • Utiliser un CDN pour la distribution.

2.4 Réduction des appels API

  • Grouper les requêtes (batching).
  • Mettre en cache local (IndexedDB, localStorage).
  • Utiliser GraphQL pour ne récupérer que les données nécessaires.

2.5 Optimisation du rendu

  • Utiliser des frameworks performants (React, Angular, Vue) avec SSR (Server-Side Rendering) ou Hydration partielle.
  • Éviter le re-render inutile avec memo, PureComponent, ou le trackBy en Angular.

3. Bonnes pratiques globales

  • Monitoring et logs : mesurer les temps de réponse avec des outils comme New Relic, Datadog, ou Prometheus + Grafana.
  • Profiling régulier : analyser le code serveur et client pour détecter les goulots d’étranglement.
  • Tests de charge (stress tests) : simuler de nombreux utilisateurs avec des outils comme JMeter, k6, ou Locust.

Exemple concret : page e-commerce lente

  1. Sans optimisation :

    • Le serveur exécute une requête SQL lourde à chaque visite.
    • Les images sont en haute résolution non compressée.
    • Le JS est lourd (5 Mo).

    Résultat : la page met 8 secondes à s’afficher.

  2. Avec optimisation :

    • Requête SQL mise en cache avec Redis.
    • Images compressées en WebP.
    • Chargement paresseux pour les images non visibles.
    • Minification + bundling des fichiers JS.

    Résultat : la page s’affiche en 2 secondes.

Ressources utiles