Fermer

octobre 9, 2018

Frontends plus rapides dans ASP.NET Core15 minutes de lecture

faster-front-ends-in-aspnet-core-870x220


Les performances ne sont peut-être pas la première chose à laquelle vous pensez lors de la création d'applications. Souvent, les priorités consistent à définir les besoins du client et à respecter les délais – l’optimisation des performances a tendance à prendre du retard. Cependant, lorsque vient le temps d'envoyer des applications, les équipes de développement finissent par se bousculer, en essayant d'obtenir des performances à des niveaux utilisables. Un tel réglage des performances de dernière minute tue l’élan et génère de longues heures de travail avec beaucoup de stress pour les développeurs. Nous pouvons faire mieux.

Si la performance est une priorité au cours des cycles de développement, les problèmes peuvent être résolus en morceaux, empêchant ainsi la marche de la mort et un tas de stress. La performance, c’est aussi l’argent: il est bien documenté que même de légers changements dans les performances peuvent entraîner un engagement accru des utilisateurs et des changements étonnamment importants dans les taux de conversion. Les principaux sites Web ont compris à quel point le réglage des performances était important pour l'expérience utilisateur globale. Le temps, c'est l'argent est ce qui fait la différence

Outre l'engagement des utilisateurs et la santé mentale des développeurs, les performances des applications sont également importantes pour le référencement: Google a fait des performances des sites l'un de ses critères de classement dans les moteurs de recherche. Les performances concernent également les applications d'entreprise internes, car leur ralentissement nuit à la productivité des utilisateurs, ce qui leur coûte de l'argent.

Building for Performance

Vous comprenez donc le point: les performances doivent être une priorité dès le départ. Mais la performance peut être une bête complexe. Sur la base de la pile de technologie Web et de la couche de pipeline d'applications, plusieurs problèmes de performances doivent être résolus. Heureusement, les plates-formes d’applications offrent une aide utile: parlons des problèmes rencontrés lors de la création d’applications avec ASP.NET Core.

Les performances d’une interface se composent généralement de deux choses. La première chose à faire est de réduire la taille et le nombre de requêtes transmises entre le serveur / navigateur – il existe plusieurs moyens de réduire le trafic Web, notamment les stratégies de regroupement, de compression et de mise en cache. La deuxième chose est de réduire le temps d'attente de l'utilisateur. Ceci est souvent réalisé en utilisant un code asynchrone et en empêchant les actions bloquantes de bloquer l'utilisateur. ASP.NET Core comporte des fonctionnalités intégrées qui aident les développeurs à atteindre ces deux objectifs de performance.

Mesure de la vitesse

Bien qu'il soit facile de savoir si une application est lente, il est beaucoup plus difficile d'obtenir des mesures de performance utilisables. Il existe des dizaines de mesures et de flux de données que vous pouvez mesurer et qui contribuent à la performance globale. De plus, des variables telles que le trafic réseau rendent difficiles les mesures exactes. Cela ne signifie pas que mesurer la performance est sans espoir. Tant que vous pouvez reconnaître la variabilité et les limites des points de repère, vous pouvez toujours progresser.

Lorsque vous évaluez les performances, vous pouvez effectuer deux types de mesures. La première concerne les mesures individuelles: vous travaillez dans un flux d’applications et vous déterminez le temps qu’il faut. Bien que vous puissiez le faire avec un chronomètre, il existe de nombreux outils que vous pouvez utiliser pour obtenir des mesures plus granulaires.

Un des outils populaires est Miniprofiler – créé par les gens de Stack Exchange pour mesurer les performances sur Stack Exchange. des sites tels que Stack Overflow. Il s'agit d'un package NuGet que vous pouvez simplement installer dans votre application. Il mesure les performances et affiche les résultats dans une petite superposition de votre navigateur. Miniprofiler examine l’ensemble de la pile et permet de repérer facilement les goulots d’étranglement, les requêtes SQL en double et les requêtes excessives. Voici un aperçu de Miniprofiler en action:

 Miniprofiler

Chrome DevTools permet également d’examiner les requêtes individuelles dans les applications Web. Outre la surveillance des requêtes réseau, Chrome DevTools est également fourni avec plusieurs profileurs de performances et outils d'audit intégrés. L'un des outils d'audit les plus récents se trouve dans le panneau Audits de Chrome DevTools. Vous pouvez exécuter une batterie de tests de performances différents sur votre site et Google vous indiquera comment améliorer ces performances.

 Audits dans Chrome DevTools

Et bien sûr, il existe . ] Fiddler – L'outil de facto pour surveiller la couche réseau de votre application Web. En plus de surveiller le trafic réseau, Fiddler générera des statistiques qui vous aideront à identifier les goulots d'étranglement dans votre application. Il permet également la manipulation de session Web, l'enregistrement de trafic HTTP / HTTPS et le débogage de contenu Web à partir de n'importe quel appareil. Conclusion: le violoniste est là pour vous aider, pourquoi ne pas l'utiliser?

 Telerik Fiddler

Bien que la mesure de la performance individuelle soit importante, vous devez également mesurer la performance globale. Certaines catégories de problèmes de performances n'apparaissent que lorsque l'application est en cours de chargement. Le meilleur moyen d'obtenir des données sur le fonctionnement de l'ensemble de votre application consiste à utiliser un outil APM (Application Performance Monitoring). Il existe de nombreux outils APM sur le marché. Les outils les plus populaires incluent New Relic et Application Insights. Application Insights, en tant que produit Microsoft intégré à la pile, est particulièrement utile pour les applications ASP.NET.

Etant donné que vous pouvez toujours rendre vos applications plus rapides, vous risquez de vous perdre dans un gouffre avec l'optimisation des performances. Les performances doivent être équilibrées avec d'autres objectifs de développement et fonctionnalités de l'application. Un bon objectif pour toute application est de ne jamais obliger l'utilisateur à attendre plus d'une seconde pour une action quelconque. Les optimisations inférieures à une seconde semblent imperceptibles pour les utilisateurs, tandis que tout dépassement de 10 secondes devrait être immédiatement corrigé. Si vous ne pouvez pas obtenir d'action spécifique en une seconde, envisagez de la rendre asynchrone: restituez le contrôle de l'utilisateur à l'application et avertissez-le de la fin de la tâche.

Performance Tips

Regroupement et minification

Dans les applications Web modernes, la quantité de CSS et de JavaScript nécessaire pour rendre une page Web fonctionnelle peut être stupéfiante. Un moyen simple de réduire ce fardeau consiste à réduire et à regrouper tous les actifs CSS / JavaScript / autres ressources statiques. Minification fonctionne sur des fichiers de code lisibles par l’homme normaux pour supprimer tous les espaces et raccourcir les noms de variables, ce qui se traduit par une taille de fichier beaucoup plus petite. Le regroupement regroupe plusieurs fichiers en une seule ressource, ce qui permet de réduire le temps système lié aux connexions simultanées entre le navigateur du serveur et l’envoi de nombreux fichiers par fil. Combinées, ces deux tactiques améliorent considérablement les communications client-serveur et accélèrent les applications Web.

Dans les applications Web ASP.NET, les architectures côté client ont généralement deux types de configurations. La première consiste à utiliser davantage de serveurs et à transmettre des vues Razor au client. Vous utilisez peut-être certaines bibliothèques pour fournir des validations côté client ou certaines fonctionnalités Ajax, mais JavaScript est la cerise sur le gâteau, et non le pilote principal. La seconde approche consiste à utiliser un framework SPA tel que React, Angular ou Vue pour effectuer beaucoup plus d’informatique du côté client. ASP.NET est heureux de prendre du recul et de permettre aux API Web de servir des données côté serveur – vous laissez les infrastructures SPA faire le travail lourd avec JavaScript dans le navigateur du client.

Ces deux styles architecturaux sont valides et ils existent. différents outils pour manipuler chacun d'eux. Si vous utilisez un environnement SPA ou avez plusieurs fichiers à livrer côté client, vous devriez utiliser un outil de regroupement côté client, tel que Webpack, pour conditionner votre code CSS et votre code JavaScript.

Webpack est un outil qui prend une variété d'actifs statiques différents et les regroupe pour vous. Webpack comporte de nombreux chargeurs pouvant traiter différents types de fichiers, ainsi que des fonctionnalités avancées pouvant vous aider à optimiser vos ressources. Un exemple en est l’arborescence – Webpack peut parcourir vos fichiers JavaScript et supprimer des fonctions que vous n’utilisez pas dans votre code, ce qui permet de créer un ensemble beaucoup plus petit.

Bien que Webpack soit un outil extraordinaire, il peut douleur à l'installation. Chaque type d’actif côté client nécessite un chargeur spécifique et il en existe généralement plusieurs parmi les plus similaires. Pour raccourcir votre chemin vers la réussite, l'utilisation d'un outil ou d'un modèle CLI peut être recommandée. La plupart des frameworks JavaScript modernes sont livrés avec des outils CLI capables d'échafauder un modèle de base, ce qui supprime votre configuration Webpack (comme Angular CLI) ou le fait à votre place (comme le nouvellement mis à jour [Créer une application React]). Quoi qu'il en soit, vous disposerez d'une application fonctionnelle avec un regroupement approprié dans un court laps de temps, qui inclut les meilleures pratiques pour votre infrastructure particulière.

Microsoft a également quelques modèles fantastiques de SPA que vous pouvez utiliser pour un applications simples. Si vous ne construisez pas de spa et ne disposez que de quelques fichiers JavaScript, le mieux est d’utiliser l’outil BuildBundlerMinifier . Cet outil est un package NuGet que vous pouvez installer et qui regroupera vos actifs au moment de la construction. C’est relativement facile à configurer: vous créez un fichier de configuration json qui pointe vers vos dossiers d’actifs et vous définissez la destination de sortie de ces actifs. Voici à quoi peut ressembler un exemple de fichier de configuration de bundle:

 Exemple de configuration dans Visual Studio

Le prétraitement CSS

CSS définit les styles de vos applications Web. Bien que les CSS simples puissent être puissants, vous devriez envisager d'utiliser un préprocesseur tel que LESS ou SASS – il vous donne des super pouvoirs, tout en maintenant la compatibilité. Et une fois que vous commencez à utiliser un outil de regroupement, vous pouvez l'utiliser pour créer vos propres ensembles de CSS personnalisés. En plus de faciliter la création de feuilles de style plus volumineuses, vous pouvez utiliser ces préprocesseurs pour réduire la taille de votre package CSS. La plupart des développeurs CSS sérieux finissent par utiliser une bibliothèque frontend telle que Bootstrap, Foundation ou Material Design. Cependant, vous n'utilisez probablement pas toutes les fonctionnalités et tous les contrôles de ces bibliothèques. Si vous utilisez un pré-processeur, vous pouvez créer votre propre distribution personnalisée et commenter tout ce que vous n’utilisez pas. Cela réduit la taille de votre groupe tout en vous permettant d'inclure facilement ces contrôles si vous souhaitez les utiliser plus tard.

Compression

Bien que réduire au minimum vos fichiers JavaScript et CSS réduira la quantité de données acheminée par le fil, ce n'est pas le seul. placez vous pouvez gagner du temps. La plupart des navigateurs prennent en charge la compression GZIP, qui vous permet de compresser vos fichiers avant de les transférer entre le serveur et le client. ASP.NET Core compresse automatiquement certains types de fichiers, mais pas tout – par exemple, le contenu des résultats JSON n'est pas compressé. Si vous construisez une application Web SPA, utilisez le middleware Response Compression pour obtenir une compression supplémentaire afin d'économiser une bande passante importante.

Mise en cache

Quelle que soit la taille des requêtes réseau individuelles, rien n'est plus rapide. que de ne pas utiliser le réseau du tout et extraire le contenu du cache. La mise en cache est un élément essentiel de l’amélioration des performances de la plupart des applications Web et, si elle est bien effectuée, elle peut permettre une expérience utilisateur optimalement optimisée. ASP.NET propose différents types de mise en cache, en fonction de la partie de la pile que vous souhaitez optimiser et du mode de stockage de vos données.

La mise en cache dans ASP.NET Core peut être divisée en deux catégories. La première catégorie est la mise en cache des données – principalement utilisée pour le traitement de l’arrière-plan. C'est ici que nous mettons en cache des données en mémoire ou dans un cache distribué, comme une instance Redis ou SQL Server. Ce type de mise en cache est approprié pour enregistrer les résultats des requêtes de base de données fréquemment utilisées ou pour stocker des calculs complexes.

Le second type de cache est le cache de réponses principalement utilisé côté client. La mise en cache de la réponse contrôle la manière dont les requêtes réseau HTTP sont mises en cache par le navigateur du client. Ce type de mise en cache est utile pour les fichiers qui ne changent pas régulièrement comme JavaScript, les images et les CSS. ASP.NET inclut les attributs d'intergiciel et d'action de contrôleur qui vous permettent de personnaliser les en-têtes de cache de réponse. Bien que la mise en cache des réponses puisse aider certains fichiers, vous ne souhaitez pas l’utiliser partout. Les demandes qui nécessitent des données fraîches et les demandes qui s'appuient sur l'identité de l'utilisateur ne sont pas de bons candidats pour la mise en cache de la réponse. Alimentés par des fournisseurs d'infrastructure cloud, les CDN sont spécialisés dans la livraison rapide d'actifs statiques, via des nœuds distribués dans le monde entier. Vous diffusez essentiellement le contenu du plus près possible de l'utilisateur, réduisant ainsi le temps d'attente du réseau.

De nombreuses applications Web créées avec ASP.NET reposent sur des bibliothèques tierces. En fin de compte, la plupart de ces bibliothèques sont déjà disponibles à partir de CDN populaires. Il est fort probable que votre utilisateur ait déjà téléchargé cette bibliothèque d’un CDN situé à proximité pour un autre site visité: pourquoi ne pas le réutiliser? Cela est particulièrement vrai pour les bibliothèques communes telles que jQuery ou Bootstrap, ou les dépendances de module Node pour les frameworks SPA. Lorsque vous utilisez une version CDN de bibliothèques tierces, vous devez toutefois conserver une version de secours au cas où l'emplacement du CDN ne fonctionnerait plus ou si vous avez besoin d'une nouvelle copie. Vous pouvez le faire en utilisant le script TagHelper dans ASP.NET Core. Voici des exemples de balises de script pour les bibliothèques JavaScript courantes:

%MINIFYHTML4613e5e083a2c2a22e5764605d2dcdd414%%MINIFYHTML4613e5e083a2c2a22e5764605d2dcdd415%%MINIFYHTML4613e5e083a2c2a22e5764605d2dcdd416%

Vous pouvez également héberger vos propres CDN. Microsoft Azure, par exemple, dispose d’un service CDN facile à configurer, que vous pouvez associer à votre application Web ou au compartiment de stockage Azure. AWS et d'autres fournisseurs de cloud proposent également des services CDN similaires. En bout de ligne, utilisez les CDN pour réduire les latences du réseau et rapprocher les utilisateurs de leurs zones géographiques, accélérant ainsi la vitesse de vos applications Web.

Créez vos applications plus rapidement aujourd'hui

Les performances peuvent être une bête complexe – les applications Web modernes en ont des dizaines pièces mobiles pouvant créer des goulots d'étranglement en termes de performances. ASP.NET Core dispose de nombreux outils pour vous aider. Des outils de mesure comme Miniprofiler aux middleware et aux TagHelpers utiles, les astuces que vous pouvez utiliser pour accélérer le traitement de vos applications ne manquent pas.

Si vous ne savez pas par où commencer, commencez par mesurer. Obtenez Miniprofiler ou Application Insights en cours d'exécution sur votre application et commencez à rechercher des goulots d'étranglement. À partir de là, laissez les données vous guider. Trouvez le goulot d'étranglement le plus difficile à résoudre et mettez-vous au travail. Bravo aux applications Web plus rapides qui ravissent les utilisateurs.


Les commentaires sont désactivés en mode Aperçu.



Source link