Quelles sont les principales façons d’optimiser le frontend ?

Question

IT Interview Practice · Accepted Answer

**Optimisez la partie du parcours réellement lente, puis mesurez si le changement aide.** Un bundle plus petit n’est utile que s’il améliore l’expérience ou réduit un coût pertinent.

Supposons que des clients sur des téléphones ordinaires ouvrent une fiche produit, voient l’image principale tardivement et subissent un délai en choisissant une variante. Chargement et interaction sont deux problèmes distincts ; une optimisation ne corrigera pas forcément les deux.

## 1. Identifier le symptôme avec des mesures représentatives

Choisissez un parcours, un appareil et un réseau importants pour le produit. Utilisez les mesures des utilisateurs réels pour repérer les personnes touchées et des tests navigateur contrôlés pour reproduire le problème. Un ordinateur de développement puissant peut masquer les délais vécus par les clients.

- LCP mesure le moment où le plus grand élément de contenu visible est affiché, ce qui aide à évaluer le chargement.
- INP décrit la réactivité aux interactions pendant la visite de la page.
- CLS mesure les déplacements inattendus de la mise en page, par exemple lorsqu’une image fait bouger le contenu.

Ces [Core Web Vitals](https://web.dev/articles/vitals) décrivent différentes dimensions de l’expérience. Associez-les à la tâche réelle, comme choisir une variante puis l’ajouter au panier, pour qu’un meilleur chiffre ne masque pas un comportement cassé.

## 2. Trouver ce qui retarde le contenu important

Examinez la cascade réseau, qui indique quand les ressources sont découvertes, téléchargées et terminées. L’image principale peut ne commencer à charger qu’après le téléchargement du JavaScript et la réponse d’une API.

```text
HTML -> JavaScript -> Product API -> Main image
```

Compresser l’image accélère son transfert, mais la découvrir plus tôt supprime parfois une attente préalable. Envisagez de fournir le contenu utile dans le HTML initial avec un rendu serveur ou une génération statique adaptés. Vérifiez la fraîcheur, le coût serveur et le JavaScript encore nécessaire pour rendre ce contenu interactif.

## 3. Réduire les transferts et l’exécution inutiles

Une fois le chemin critique compris, retirez le travail inutile à l’écran courant. Préférez les changements liés à un délai mesuré à l’application systématique de toutes les optimisations.

- Servez des images aux dimensions et formats adaptés. Chargez paresseusement celles hors écran, mais ne retardez pas l’image principale attendue par l’utilisateur.
- Découpez le code par route ou fonctionnalité pour qu’une fiche produit ne charge pas une interface d’administration inutilisée.
- Retirez les dépendances inutiles et examinez les scripts tiers, qui peuvent coûter du réseau et du temps sur le thread principal.
- Compressez les réponses textuelles adaptées et mettez en cache les ressources statiques versionnées. Définissez des règles distinctes et sûres pour les données personnalisées.

Des fichiers plus petits réduisent le transfert, mais le navigateur doit encore analyser et exécuter le code. Vérifiez les effets réseau et CPU avant de conclure à une réussite.

## 4. Corriger la cause des interactions lentes

Si la sélection d’une variante tarde, profilez le thread principal, chargé d’une grande partie des scripts et du rendu. Un long calcul peut bloquer sa réponse même après le chargement de tous les fichiers.

Découpez les longs traitements ou déplacez les calculs adaptés vers un worker. Pour des entrées changeant fréquemment, évitez les requêtes inutiles et empêchez une ancienne réponse d’écraser une sélection plus récente. Utilisez la mémoïsation lorsque les mesures révèlent des recalculs coûteux, pas comme une décoration systématique.

Pour les très longues listes, afficher seulement la partie visible réduit le travail, mais il faut préserver la navigation au clavier et l’accessibilité. Réservez la place des images et contenus différés pour éviter les sauts de mise en page. Ces changements répondent à des symptômes différents : vérifiez chacun face au problème initial.

## 5. Vérifier le parcours complet après modification

Répétez le même test contrôlé, puis observez les utilisateurs réels après livraison. Contrôlez l’exactitude fonctionnelle, l’accès clavier, la finalisation du panier et une éventuelle hausse de charge backend, en plus des indicateurs de performance.

Fixez des budgets réalistes pour les ressources importantes et surveillez les régressions. Un bon score de laboratoire ne suffit pas si les clients attendent toujours ou ne peuvent pas finir leur tâche. **Le résultat doit être un parcours plus rapide, stable et utilisable, démontré par des mesures avant et après.**

1. Identifier le symptôme avec des mesures représentatives

2. Trouver ce qui retarde le contenu important

3. Réduire les transferts et l’exécution inutiles

4. Corriger la cause des interactions lentes

5. Vérifier le parcours complet après modification

Questions connexes