Optimisation des performances: réduire le code HTML dans le SDK de Znode 9.X Ecommerce Framework

La vitesse est un aspect important des performances de tout site Web. Actuellement, il existe un besoin d'une solution pour améliorer la vitesse de téléchargement des pages sur le site de commerce électronique. Pour résoudre ce problème, nous avons créé une solution élégante utilisant le langage asp.net MVC et le langage C # mis en œuvre (en supprimant l'espace blanc dans notre code HTML généré) sur le client d'un site Web de commerce électronique Znode 9.X.

L'explication donnée ci-dessous fonctionne sur SDK Znode Commerce ainsi que sur ASP.NET MVC version 4 et supérieure. Il minimise le HTML généré, supprimant les commentaires et les espaces lors de l'exécution de la page, et améliore ainsi les performances du site de commerce électronique en termes de vitesse de téléchargement de la page. Le code MVC ci-dessous supprime les espaces blancs du code HTML lors de l'écriture de la page.

Avant la mise en œuvre de la fonction HTML Minify:

Dans «View Source» sur la page Web, nous voyons quelque chose comme ceci:

Pour la "View Source" ci-dessus, nous aurions besoin de réduire ou de supprimer les espaces blancs et les commentaires en HTML.

Comme note, la taille de la page était 14,4 kB et le temps de chargement était de 2,32 s :

Étapes pour implémenter Minify HTML dans Znode 9.X Ecommerce Framework SDK:

Ceci supprimera l'espace blanc et les commentaires dans notre HTML généré dans les projets MVC ASP.NET.

Suivez les étapes ci-dessous pour implémenter cette fonctionnalité sur Znode 9.X Commerce framework, comme ainsi que sur les projets ASP.NET MVC:

1. Créez une nouvelle classe sous le dossier App_Start dans le projet de site Web Engine.WebStore ou n'importe où. Nommez la nouvelle classe MinifyHTMLViewPage. cs

    using System.Text.RegularExpressions;
   using System.Web.Mvc;
   
   espace de noms Znode.Engine.WebStore
   {
       classe abstraite publique MinifyHTMLViewPage : WebViewPage 
       {
           privé en lecture seule Regex rgxHtmlReg = nouveau Regex (@ "(>  s + <)", RegexOptions.Compiled);
   
           privé en lecture seule Regex rgxHtmlAll = new Regex (@ "( s + |  t  s + |  n  s * |  r  s +)", RegexOptions.Compiled);
   
           privé en lecture seule Regex rgxHtmlComments = new Regex (@ "", RegexOptions.Compiled);
   
           public override void Write (valeur d'objet)
           {
               if (valeur! = null)
               {
                   var minifyHtml = value.ToString ();
                   minifyHtml = this.rgxHtmlReg.Replace (minifyHtml, "> <");
                   minifyHtml = this.rgxHtmlAll.Replace(minifyHtml, " ");
                   minifyHtml = this.rgxHtmlComments.Replace(minifyHtml, "");
                   value = new MvcHtmlString(minifyHtml);
               }
               base.Write(value);
           }
   
           public override void WriteLiteral(object value)
           {
               if (value != null)
               {
                   var minifyHtml = value.ToString();
                   minifyHtml = this.rgxHtmlReg.Replace(minifyHtml, "> <");
                   minifyHtml = this.rgxHtmlAll.Replace (minifyHtml, "");
                   minifyHtml = this.rgxHtmlComments.Replace (minifyHtml, "");
                   valeur = minifyHtml;
               }
               base.WriteLiteral (valeur);
           }
   
       }
   }
   

2. Accédez à Web.config sous le dossier Vues dans le projet de site Web Engine.WebStore .
3. Ouvrez le fichier web.config
4. Recherchez ce texte et remplacez-le avec dans le fichier Web.config.
5. Générez la solution et exécutez le projet.

Après l'implémentation de la fonction HTML de Minify:

Nous pouvons voir que notre code source HTML est très différent:

La taille de la page est 12,5 kB et le temps de chargement est 1,67 s :

Donc, nous pouvons voir la différence e entre avant et après dans la taille de la page et le temps de chargement:

• La taille de la page a réduite de 13,2%
• Le temps de chargement de la page a réduite de 28%

En réduisant HTML, vous serez prêt d'utiliser des extraits de code pour améliorer les performances du site Web en réduisant la taille de la page d'env. 13% et temps de téléchargement de page de 28%.