Amélioration performance site web

Par Loïc D., il y a 1 an

Les bases HTML/CSS
Javascript React

Bonjour à tous,
Je code un site web depuis quelque temps à l'aide de React.
Aujourd'hui le code est en ligne et j'essai d'optimiser le rendu.
Grâce à l'outil Page Speed Insigth je vois que certaines données de ma page mettent énormement de temps à se charger parce qu'elle doivent "attendre" 5s que d'autres choses aient finit de se charger.
J'ai utilisé le lazy (https://reactrouter.com/en/main/route/lazy sur mon footer pour voir une amélioration de la performance. Pas net.
Le problème principal est que pour le moment je ne trouve pas d'outil me permettant de connaitre exactement ce qui est bloquant dans le chargement de ma page.

Merci pour toute l'aide que vous pourrez m'accorder

Loïc

3 réponses

Glim, il y a 1 an

Bonjour,

C'est difficile à dire sans information suplémentaire. Y a-t-il des images ? Auquel cas il faudrait contrôler leur taille, est-ce qu'elles ne pourraient pas se charger au scroll par exemple. Y a-t-il un nombre élevé de requêtes réseau qui sont envoyées à l'ouverture de la page ? Il pourrait y avoir une possibilité d'optimisation à ce niveau-là. Y a-t-il des traitements complexes qui sont faits et qui pourraient être optimisés ?

La mise en place d'un rendu côté serveur, en utilisant Next.js par exemple, pourrait être intéressante.

Smith john, il y a 1 an

Salut,

Je te conseil d'utiliser le Profiler (quand tu es en local) de React Dev Tools, c'est une extension que tu ajoute dans ton navigateur.

Tu lance un enregistrement juste avant t'es soucis de perf, tu fais ta vie (click, navigation, etc) puis stop l'enregistrement.

Tu vas te retrouver avec une tonne de ligne dans le rapport, celles qui vont t'intérésser seront celles en orange. Je te conseil de check 1 ou 2 vidéo si tu es perdu avec le devTools.

Tu peux aussi installer une lib qui s'appel whyDidYouRender, une fois la petite config faite, ça va t'afficher dans ta console ce qui provoque des re render ( la attention ne cherche pas à supprimer tt les re render, c'est le principe de React quand même ) mais ça peut déjà t'indiquer quelques composants à regarder.

Ensuite tu as peut etre des ( memo, useCallback, useMemo, children ) à placer correctement

popotte, il y a 1 an

Hello :)

Alors coté React tout ce que tu peux faire c'est optimiser le code (surtout au nioveau des fetch) tu peux aussi créer des squeleton pour "precharger" la page sans avoir encore les données dispo

Si tu es obligé de faire des requetes lourdes coté serveur/bdd, le taf se fera plutot coté serveur, faut voir la puissance CPU et la vitesse de transfer que tu as pris pour ton serveur, et pour le storage prends en SSD (le top serait SSD avec I/O réservé mais ça coute assez cher)