Leçons des frameworks React et Vue pour la vitesse des pages

Dans notre recherche continue de la vitesse des pages, nous revenons souvent au même point. Malgré les efforts des équipes produit, marketing et croissance pour motiver les équipes techniques, les tâches susceptibles d'améliorer les performances du site sont souvent reportées en raison de la nécessité d'une refactorisation, et même lorsqu'elles sont terminées, elles ne donnent pas toujours des résultats complets. Dans ce cycle, il est utile de considérer quelques perspectives éclairantes sur la réalisation de performances réelles. Par exemple, quelles leçons pouvons-nous tirer de la vitesse de React.js et Vue.js ou de leurs extensions SSR (rendu côté serveur) comme Next.js et Nuxt.js par rapport à d'autres plateformes ? N'est-il pas temps d'optimiser les Mo de fichiers jQuery et CSS ? Quand les grandes entreprises qui sacrifient leurs performances web au profit de développeurs front-end mal informés vont-elles se réveiller ? Abordons ces questions une par une.

Pourquoi les sites basés sur Next.js et Nuxt.js sont-ils rapides ?

Les plateformes Next et Nuxt, qui sont des structures optimisées pour le référencement et construites sur React et Vue, se distinguent par leurs performances en termes de vitesse. Mais pourquoi ces plateformes sont-elles si rapides ?

React.js et Vue.js sont des frameworks basés sur des composants qui décomposent chaque page en sous-composants, comme indiqué ci-dessous.

Prenons un exemple concret pour illustrer ce point : une page de référencement de commerce électronique. Cette page de liste peut être considérée comme comportant les sous-composants suivants :

• En-tête
• inscription
  • Informations sur l'entrée dans la liste
    • Titre de la page
    • Navigation
    • Nombre de produits
  • Filtre
    • Catégorie filtre
    • Filtrer par Prix
  • tri
  • Fiches produits
    • Photo du produit
  • Détails du produit
    • Nom du produit
    • Prix ​​du produit
      • Prix ​​barré
      • Prix ​​de vente
    • Taux de remise
    • Informations sur la campagne
  • Pagination
  • Contenu de la catégorie
• Pied de page

Lors de la création d'une application basée sur des composants avec Nuxt.js, chacun de ces composants est codé séparément et inclus dans la page maître. Par exemple, considérons un fichier nommé ProductPhoto.js. Quelles que soient les fonctions nécessaires aux photos de produits (carrousel, affichage d'images responsives, etc.), le code JS est écrit dans ce composant. De même, seuls les fichiers CSS utilisés par ce composant y sont inclus. Cela signifie que seuls les fichiers requis par chaque composant sont exécutés si le composant est utilisé.

Comment ce processus est-il actuellement géré sur la plupart des plateformes Web ?

Un fichier script.js comprend du code pour tout, depuis les pages d'adhésion, les filtres et le panier jusqu'au menu, qui s'exécute sur toutes les pages. Le résultat? 

Sites Web avec un Fichier JS de 3 Mo et CSS de 1.5 Mo déposer. Le principal problème ne réside pas seulement dans la taille des fichiers, mais dans le fait que vous ne pouvez pas vous attendre à ce que le processeur d'un appareil mobile Android moyen exécute des milliers de lignes de code en quelques millisecondes. En exécutant uniquement le code dont vous avez besoin, vous pouvez obtenir des gains de performances.

Comment éliminer les ressources bloquant le rendu ?

Aujourd'hui, 32 % des 1 million de sites Web les plus importants utilisent la bibliothèque de polices Font Awesome, qui fait en moyenne environ 250 Ko. Étant donné que le chargement asynchrone n'est pas préféré en raison de l'effet flick, pensez au nombre de polices visibles sur le premier écran d'une page lorsqu'elle s'ouvre sur un mobile ou un ordinateur de bureau. Une courte étude sur 50 plateformes différentes a révélé une moyenne de 3.4 icônes utilisées (le plus souvent : panier, utilisateur, menu, notification). Ainsi, pour charger seulement quatre icônes sans problème, nous chargeons toute la bibliothèque.

Comment les frameworks JS avancés gèrent-ils cela ? En important uniquement le format SVG des icônes utilisées dans le composant concerné, éliminant ainsi le besoin de charger des bibliothèques entières de polices ou de CSS.

Que nous disent l’utilisation de Bootstrap et React JS ?

La bibliothèque Bootstrap JS détient une part de marché de 26 % sur tous les sites dans le monde, tandis que l'utilisation de React est d'environ 4 %. Bootstrap est populaire pour sa flexibilité et sa facilité d'utilisation, permettant un développement rapide. Cependant, cette flexibilité a un coût : des fonctions JS générales, une couverture étendue du code et des fonctions pour des fonctionnalités que vous n'utiliserez peut-être jamais sont incluses dans votre projet.

Alors demandons-nous : qu'est-ce qu'une augmentation de plus de 100 % de l'utilisation par rapport au les 10,000 1,000 premiers aux XNUMX XNUMX premiers sites indiquent? Cela montre que les meilleurs tournent les détails à leur avantage pour être encore meilleurs.

En résumé, au lieu de réécrire nos sites avec des technologies comme Suivant, Nuxt, Angular, React, Vue, etc., nous devons comprendre ce que ces technologies font en termes de vitesse et appliquer ces meilleures pratiques à nos applications Web.