Editions ENI Livres | Vidéos | e-Formations
Les stratégies d’optimisation
Introduction
L’optimisation des sites Internet est primordiale afin de garantir une expérience utilisateur optimale et éviter de frustrer ce dernier via des ralentissements intempestifs. Les développeurs ont l’obligation de garder constamment cette problématique de performance en tête, et leurs outils doivent être adaptés à ce besoin.
Le chargement d’une page web consiste simplement en une série de requêtes que le client envoie au serveur afin de récupérer un certain nombre d’éléments (des images, des scripts, des portions de HTML, des feuilles de style CSS et ainsi de suite), permettant alors au navigateur de construire la page que l’utilisateur a demandé. Plus la page demande d’éléments, plus le site mettra du temps à se charger. Il est clair qu’avec une centaine d’allers-retours entre le client et le serveur, le site web ne sera pas le plus rapide de la toile.
Les techniques d’optimisation d’une application web permettent d’accélérer le rendu de la page via :
-
la réduction du poids des éléments à télécharger ;
-
limiter le nombre d’éléments à télécharger ;
-
éviter au serveur des requêtes inutiles.
ASP.NET couvrait déjà ce domaine via des mécanismes...
L’optimisation côté client
L’approche d’ASP.NET MVC pour la gestion des paquets côté client a toujours été très spécifique à la plateforme de Microsoft. Depuis la version 4 de MVC, un fichier BundleConfig.cs a fait son apparition et permettait de gérer facilement les librairies du client. L’effet de cette classe est multiple sur le projet :
-
Regroupement de plusieurs fichiers afin que le client n’en télécharge qu’un seul au final.
-
Minification des fichiers (scripts et styles) afin de supprimer les commentaires et les espaces inutiles, permettant la réduction du poids du code à télécharger.
Le code ci-dessous montre un exemple d’une classe BundleConfig. Ici on inscrit des fichiers JS (ou CSS) sous des mêmes bundles, qui seront ensuite intégrés dans le _Layout.cshtml sous la forme de fichier concaténé et minifié.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
} L’utilisation des bundles se fait très simplement via les méthodes Styles.Render ou Scripts.Render.
<head>
<meta charset="utf-8" />
<title>Mon application ASP.NET optimisée</title>
@Styles.Render("~/Content/css") ...L’optimisation côté serveur
La section précédente vient de traiter les optimisations et améliorations que le développeur peut apporter à son site afin de l’optimiser d’un point de vue du client. ASP.NET Core comporte encore d’autres mécanismes afin d’améliorer les performances du système, mais du côté serveur cette fois-ci.
La création d’applications web haute performance est un défi auquel le développeur est de plus en plus confronté, et ceci malgré le grand nombre de demandes traitées par le serveur. De nos jours, une application web doit être réactive, et ASP.NET Core a été conçu afin de faciliter les développements dans ce sens.
Le premier mécanisme à étudier est la gestion d’un cache de page. Dans les précédentes versions d’ASP.NET, il était possible d’ajouter l’attribut OutputCache ce qui permettait de mettre en cache la sortie d’une action d’un contrôleur. Le code ci-dessous prévoit de mettre en cache la sortie de l’action Index pour 30 secondes.
[OutputCache(Duration = 30)] //mise en cache pour 30 secondes
public ActionResult Index()
{
ViewBag.Message = "Cette page a été mise en cache";
return View();
} Il était possible de mettre cet attribut sur une action ou sur tout un contrôleur. Le développeur pouvait également déporter des profils de mise en cache dans le fichier web.config. La nouvelle version d’ASP.NET ne comportant plus ce fichier, elle permet de configurer des profils de mise en cache dans la classe Startup via la classe d’options MvcOptions. Le code ci-dessous montre la configuration d’un profil de mise en cache d’une heure :
services.Configure<MvcOptions>(options =>
{
options.CacheProfiles.Add(new CacheProfile() {
Name = "Cache1Hour",
Duration = 3600,
VaryByHeader = "Accept"
});
}); L’utilisation de ce profil se fait ensuite via l’attribut...
