search

NextINpact / Next

17 stars 0 forks source link

Problème de lenteur #344

Open francois-dorin opened 3 months ago

francois-dorin commented 3 months ago

Je constate parfois des problèmes de lenteur sur les pages. Pas à l'affichage, mais à son interactivité.

Pendant de longues secondes, le site s'affiche mais ne répond pas (impossible de cliquer sur un lien, navigation entre les commentaires impossibles, etc...), allant parfois jusqu'à l'affichage, par le navigateur, d'un message indiquant qu'un script est en train de tourner et de ralentir la page.

Un exemple de page sur laquelle le problème est relativement visible : https://next.ink/135983/6-mois-deja

Mon diagnostic :

D'après mes premières investigations, cela vient de la manière dont sont gérées les images. L'usage du plugin featured-image-from-url semble en être la cause.

Grosso modo, les images ne sont pas directement insérés via l'attribut src de la balise img, mais via un attribut personnalisé data-src, qui est ensuite copié dans l'attribut src.

Sauf que pour faire cela, ce plugin se base sur les MutationObserver. Un rapide test en postant un commentaire, montre que le callback appelé par le MutationObserver doit gérer plus de 7900 modifications ! La page grouillant littéralement d'images (les icônes, les réactions des commentaires, les émoticons dans les commentaires, etc.) cela engendre de nombreux traitements.

De plus, le traitement de chaque modification fait un usage plus ou moins intensif de jQuery, dont l'API n'est pas la plus rapide.

Enfin, le plugin lui-même présente des problèmes de performance, avec des calculs parfois lourd et redondant.

Le tout mis bout à bout, on arrive à ces lenteurs.

francois-dorin commented 3 months ago

J'ai pu faire un test. J'ai enregistré la page en local et je l'ai ouvert. Je souffre des mêmes problèmes de lenteur. J'ai désactivé le MutationObserver, et les lenteurs ont disparu. La page se charge en 2s.

Donc a priori, mon diagnostic est bon.

AIMAR-S commented 3 months ago

Si c'est pour le lazy loading l'attribut loading="lazy" sur les img est là pour ça maintenant.

francois-dorin commented 3 months ago

Je pense que c'est plus pour pouvoir utiliser des images en provenance de leur CDN que pour le lazy loading. Mais ça, il faut le voir avec les équipes de Next ^^