feat(rapport-html): Internationalisation des bonnes pratiques

cli-core/analysis.js

@@ -3,7 +3,7 @@ const fs = require('fs')
 const path = require('path');
 const ProgressBar = require('progress');
 const sizes = require('../sizes.js');
-
+const translator = require('./translator.js').translator;
 
 //Path to the url file
 const SUBRESULTS_DIRECTORY = path.join(__dirname,'../results');
@@ -33,7 +33,6 @@ async function analyseURL(browser, pageInformations, options) {
         await pptrHar.start();
         //go to url
         await page.goto(pageInformations.url, {timeout : TIMEOUT});
-
         try {
             // waiting for page to load
             await waitPageLoading(page, pageInformations, TIMEOUT);
@@ -50,21 +49,31 @@ async function analyseURL(browser, pageInformations, options) {
         let ressourceTree = await client.send('Page.getResourceTree');
         await client.detach()
 
-        //get rid of chrome.i18n.getMessage not declared
-        await page.evaluate(x=>(chrome = { "i18n" : {"getMessage" : function () {return undefined}}}));
+        // replace chrome.i18n.getMessage call by i18n custom implementation working in page 
+        // fr is default catalog
+        await page.evaluate(language_array =>(chrome = { "i18n" : {"getMessage" : function (message, parameters = []) {
+            return language_array[message].replace(/%s/g, function() {
+                // parameters is string or array
+                return Array.isArray(parameters) ? parameters.shift() : parameters;
+            });
+        }}}), translator.getCatalog());
+
         //add script, get run, then remove it to not interfere with the analysis
         let script = await page.addScriptTag({ path: path.join(__dirname,'../dist/bundle.js')});
         await script.evaluate(x=>(x.remove()));
+
         //pass node object to browser
         await page.evaluate(x=>(har = x), harObj.log);
         await page.evaluate(x=>(resources = x), ressourceTree.frameTree.resources);
 
         //launch analyse
         result = await page.evaluate(()=>(launchAnalyse()));
+
         page.close();
         result.success = true;
     } catch (error) {
         result.success = false;
+        console.error(error);
     }
     result.pageInformations = pageInformations;
     result.tryNb = TRY_NB;

cli-core/translator.js

@@ -0,0 +1,29 @@
+const fr = require('../locales/fr.json');
+
+class Translator {
+
+    constructor () {
+        this.catalog = fr;
+    }
+
+    getCatalog() {
+        return this.catalog;
+    }
+
+    setLocale(locale) {
+        if(locale === 'fr') {
+            this.catalog = fr;
+        }
+    }
+
+    translateRule(rule) {
+        return this.catalog['rule_' + rule];
+    }
+
+}
+
+const translator = new Translator();
+
+module.exports = {
+    translator
+}

locales/fr.json

@@ -0,0 +1,102 @@
+{
+	"rule_AddExpiresOrCacheControlHeaders": "Ajouter des expires ou cache-control headers (>= 95%)",
+	"rule_AddExpiresOrCacheControlHeaders_DetailDescription": "Les en-têtes Expires et Cache-Control déterminent la durée pendant laquelle un navigateur doit conserver une ressource dans son cache. Vous devez donc les utiliser et les configurer correctement pour les feuilles de style CSS, les scripts JavaScript et les images. Idéalement, ces éléments doivent être conservés le plus longtemps possible pour que le navigateur ne les demande plus au serveur. Cela permet d'économiser les requêtes HTTP, la bande passante et l'alimentation du serveur.",
+	"rule_AddExpiresOrCacheControlHeaders_Comment": "%s ressources cachées",
+	"rule_AddExpiresOrCacheControlHeaders_DetailComment": "%s Ko n'a pas d'Expires ou Cache-Control header",
+	"rule_CompressHttp": "Compresser les ressources (>= 95%) ",
+	"rule_CompressHttp_DetailDescription": "Vous pouvez compresser le contenu des pages HTML pour réduire la consommation de bande passante entre le client et le serveur. Tous les navigateurs modernes (smartphones, tablettes, ordinateurs portables et ordinateurs de bureau) acceptent le format HTML compressé via gzip ou Deflate. Le moyen le plus simple consiste à configurer le serveur Web de manière à ce qu'il comprime le flux de données HTML, à la volée ou automatiquement, à la sortie du serveur. Cette pratique (compression à la volée) n’est bénéfique que pour un flux de données HTML, car il évolue constamment. Lorsque cela est possible, nous vous recommandons de compresser manuellement les ressources statiques (par exemple, les bibliothèques CSS et JavaScript) en une seule fois.",
+	"rule_CompressHttp_Comment": "%s ressources compressées",
+	"description": "Percentage of resources compressed",
+	"rule_CompressHttp_DetailComment": "%s Ko n'est pas compressé",
+	"rule_DomainsNumber": "Limiter le nombre de domaines (< 3)",
+	"rule_DomainsNumber_DetailDescription": "Lorsqu'un site Web ou un service en ligne héberge les composants d'une page Web dans plusieurs domaines, le navigateur doit établir une connexion HTTP avec chacun d'entre eux. Une fois la page HTML récupérée, le navigateur appelle les sources lorsqu'il traverse le DOM (Document Object Model). Certaines ressources sont essentielles au bon fonctionnement de la page. S'ils sont hébergés sur un autre domaine qui est lent, cela peut augmenter le temps de rendu de la page. Vous devez donc, lorsque cela est possible, regrouper toutes les ressources sur un seul domaine. La seule exception à cette règle concerne les ressources statiques (feuilles de style, images, etc.), qui doivent être hébergées sur un domaine distinct afin d'éviter l'envoi d'un ou plusieurs cookies pour chaque requête HTTP du navigateur GET. Cela réduit le temps de réponse et la consommation inutile de bande passante.",
+	"rule_DomainsNumber_Comment": "%s domaine(s) trouvé(s)",
+	"rule_DontResizeImageInBrowser": "Ne pas retailler les images dans le navigateur",
+	"rule_DontResizeImageInBrowser_DetailDescription": "Ne redimensionnez pas les images avec les attributs HTML height et width. Cela envoie des images dans leur taille originale, gaspillant de la bande passante et de la puissance du processeur. Une image PNG-24 de 350 x 300 px est de 41 KB. Si vous redimensionniez le même fichier image en HTML et que vous l’affichez sous forme de vignette de 70 x 60 px, il s’agirait toujours de 41 Ko, alors qu’il devrait en réalité ne pas dépasser 3 Ko! Signification 38 KB téléchargés pour rien. La meilleure solution consiste à redimensionner les images à l'aide d'un logiciel tel que Photoshop, sans utiliser HTML. Lorsque le contenu ajouté par les utilisateurs du site Web n’a pas de valeur ajoutée spécifique, il est préférable de les empêcher d’insérer des images à l’aide d’un éditeur WYSIWYG, par exemple CKEditor.",
+	"rule_DontResizeImageInBrowser_Comment": "%s image(s) retaillée(s) dans le navigateur",
+	"rule_DontResizeImageInBrowser_DetailComment": "%s est redimensionnée de %s à %s",
+	"rule_EmptySrcTag": "Eviter les tags SRC vides",
+	"rule_EmptySrcTag_DetailDescription": "S'il existe une balise d'image avec un attribut src vide, le navigateur appelle le répertoire dans lequel se trouve la page, générant des requêtes HTTP inutiles et supplémentaires.",
+	"rule_EmptySrcTag_DefaultComment": "Pas de tag SRC vide",
+	"rule_EmptySrcTag_Comment": "%s tag(s) SRC vide(s)",
+	"rule_ExternalizeCss": "Externaliser les css",
+	"rule_ExternalizeCss_DetailDescription": "Assurez-vous que les fichiers CSS sont séparés du code HTML de la page. Si vous incluez du CSS dans le corps du fichier HTML et qu'il est utilisé pour plusieurs pages (ou même pour l'ensemble du site Web), le code doit être envoyé pour chaque page demandée par l'utilisateur, augmentant ainsi le volume de données envoyées. Toutefois, si les CSS se trouvent dans leurs propres fichiers distincts, le navigateur peut éviter de les redemander en les stockant dans son cache local.",
+	"rule_ExternalizeCss_DefaultComment": "Pas de inline stylesheet",
+	"rule_ExternalizeCss_Comment": "%s inline stylesheet(s)",
+	"rule_ExternalizeJs": "Externaliser les js",
+	"rule_ExternalizeJs_DetailDescription": "Assurez-vous que le code JavaScript est distinct du code HTML de la page, à l’exception de toute variable de configuration pour les objets JavaScript. Si vous incluez du code JavaScript dans le corps du fichier HTML et qu'il est utilisé pour plusieurs pages (ou même pour l'ensemble du site Web), le code doit être envoyé pour chaque page demandée par l'utilisateur, augmentant ainsi le volume de données envoyées. Toutefois, si le code JavaScript se trouve dans son propre fichier séparé, le navigateur peut éviter de les redemander en les stockant dans son cache local.",
+	"rule_ExternalizeJs_DefaultComment": "Pas d'inline JavaScript",
+	"rule_ExternalizeJs_Comment": "%s inline  javascript(s)",
+	"rule_HttpError": "Eviter les requêtes en erreur",
+	"rule_HttpError_DetailDescription": "Les requêtes en erreurs consomment inutilement des ressources.",
+	"rule_HttpError_Comment": "%s erreur(s) HTTP",
+	"rule_HttpRequests": "Limiter le nombre de requêtes HTTP (< 27)",
+	"rule_HttpRequests_DetailDescription": "Le temps de téléchargement d’une page côté client est directement corrélé au nombre et à la taille des fichiers que le navigateur doit télécharger. Pour chaque fichier, le navigateur envoie un HTTP GET au serveur. Il attend la réponse, puis télécharge la ressource dès qu'elle est disponible. Selon le type de serveur Web que vous utilisez, plus le nombre de demandes par page est élevé, moins le serveur peut gérer de pages. La réduction du nombre de requêtes par page est essentielle pour réduire le nombre de serveurs HTTP nécessaires à l'exécution du site Web et, partant, son impact sur l'environnement.",
+	"rule_HttpRequests_Comment": "%s requête(s) HTTP ",
+	"rule_ImageDownloadedNotDisplayed": "Ne télécharger pas des images inutilement",
+	"rule_ImageDownloadedNotDisplayed_DetailDescription": "Télécharger des images qui ne seront pas nécessairement visibles consomme inutilement des ressources. Il s'agit par exemple d'images qui sont affichées uniquement suite à une action utilisateur.",
+	"rule_ImageDownloadedNotDisplayed_Comment": "%s image(s) téléchargée(s) mais non affichée(s) dans la page ",
+	"rule_ImageDownloadedNotDisplayed_DetailComment": "%s de taille %s n'est pas affichée",
+	"rule_JsValidate": "Valider le javascript",
+	"rule_JsValidate_DetailDescription": "JSLint est un outil de contrôle de qualité du code qui vérifie que la syntaxe JavaScript utilisée sera comprise par tous les navigateurs. Le code produit est donc conforme aux règles de codage qui permettent aux interpréteurs d’exécuter le code rapidement et facilement. Le processeur est donc utilisé pour un temps plus court.",
+	"rule_JsValidate_DefaultComment": "Javascript validé",
+	"rule_JsValidate_Comment": "%s erreur(s) javascript",
+	"rule_MaxCookiesLength": "Taille maximum des cookies par domaine(<512 Octets)",
+	"rule_MaxCookiesLength_DetailDescription": "La longueur du cookie doit être réduite car il est envoyé à chaque requête.",
+	"rule_MaxCookiesLength_DefaultComment": "Pas de cookies",
+	"rule_MaxCookiesLength_Comment": "Taille maximum = %s Octets ",
+	"rule_MaxCookiesLength_DetailComment": "Cookie de longueur %s pour le domaine %s",
+	"rule_MinifiedCss": "Minifier les css (>= 95%)",
+	"rule_MinifiedCss_DetailDescription": "Utilisez un outil tel que YUI Compressor pour supprimer les espaces et les sauts de ligne inutiles. Apache mod_pagespeed de Google peut également automatiser cette opération.",
+	"rule_MinifiedCss_DefaultComment": "Aucun css",
+	"rule_MinifiedCss_Comment": "%s% css minifiées",
+	"rule_MinifiedCss_DetailComment": "%s devrait être minifié",
+	"rule_MinifiedJs": "Minifier les js (>= 95%)",
+	"rule_MinifiedJs_DetailDescription": "Utilisez un outil tel que YUI Compressor pour supprimer les espaces inutiles, les sauts de ligne, les points-virgules et raccourcir les noms de variables locales. Cette opération peut être automatisée à l’aide du module Apache mod_pagespeed de Google.",
+	"rule_MinifiedJs_DefaultComment": "Aucun js",
+	"rule_MinifiedJs_Comment": "%s% js minifié",
+	"rule_MinifiedJs_DetailComment": "%s devrait être minifié",
+	"rule_NoCookieForStaticRessources": "Pas de cookie pour les ressources statiques",
+	"rule_NoCookieForStaticRessources_DetailDescription": "Pour les ressources statiques, un cookie est inutile, cela consomme donc inutilement de la bande passante. Pour éviter cela, on peut utiliser un domaine différent pour les ressources statiques ou restreindre la portée des cookies crées",
+	"rule_NoCookieForStaticRessources_DefaultComment": "Aucun cookie",
+	"rule_NoCookieForStaticRessources_Comment": "%s ressource(s) statiques avec un cookie (Au total %s Ko)",
+	"rule_NoCookieForStaticRessources_DetailComment": "%s a un(des) cookie(s)",
+	"rule_NoRedirect": "Eviter les redirections",
+	"rule_NoRedirect_DetailDescription": "Les redirections doivent être évitées autant que possible car elles ralentissent la réponse et consomment inutilement des ressources.",
+	"rule_NoRedirect_Comment": "%s redirection(s)",
+	"rule_OptimizeBitmapImages": "Optimiser les images bitmap",
+	"rule_OptimizeBitmapImages_DefaultComment": "Pas d'images bitmap à optimiser",
+	"rule_OptimizeBitmapImages_DetailDescription": "Les images bitmap constituent souvent la plupart des octets téléchargés, juste devant les bibliothèques CSS et JavaScript. Leur optimisation a donc un impact considérable sur la bande passante consommée.",
+	"rule_OptimizeBitmapImages_Comment": "%s image(s) à probablement optimiser, gain minimum estimé: %s Ko",
+	"rule_OptimizeBitmapImages_DetailComment": "%s Ko %s, possibilité de gagner %s Ko",
+	"rule_OptimizeSvg": "Optimiser les images svg",
+	"rule_OptimizeSvg_DefaultComment": "Pas de svg à optimiser",
+	"rule_OptimizeSvg_DetailDescription": "Les images svg sont moins lourdes que les images bitmap, elles peuvent cependant être optimisées et minifiées via des outils (par exemple svgo)",
+	"rule_OptimizeSvg_Comment": "%s image(s) à optimiser",
+	"rule_OptimizeSvg_DetailComment": "%s pourrait être optimisée (%s Ko)",
+	"rule_Plugins": "Ne pas utiliser de plugins",
+	"rule_Plugins_DetailDescription": "Évitez d’utiliser des plug-ins (machines virtuelles Flash Player, Java et Silverlight, etc.), car ils peuvent entraîner une lourde charge de ressources (processeur et RAM). C’est particulièrement vrai avec le lecteur Adobe, à tel point qu’Apple a décidé de ne pas installer la technologie sur ses appareils mobiles afin de maximiser la durée de vie de la batterie. Privilégiez les technologies standard telles que HTML5 et ECMAScript",
+	"rule_Plugins_DefaultComment": "Aucun plugin",
+	"rule_Plugins_Comment": "%s plugin(s)",
+	"rule_PrintStyleSheet": "Fournir une print css",
+	"rule_PrintStyleSheet_DetailDescription": "Outre les avantages pour l’utilisateur, cette feuille de style réduit le nombre de pages imprimées et donc réduit indirectement l’empreinte écologique du site Web. Elle doit être aussi simple que possible et utiliser une police de caractères à l'encre claire, par exemple Siècle gothique. Envisagez également de masquer l'en-tête, le pied de page, le menu et la barre latérale, ainsi que de supprimer toutes les images, à l'exception de celles nécessaires au contenu. Cette feuille de style d'impression permet d'obtenir une impression plus nette en réduisant ce qui est affiché à l'écran.",
+	"rule_PrintStyleSheet_DefaultComment": "Pas de print css",
+	"rule_PrintStyleSheet_Comment": "%s print css",
+	"rule_SocialNetworkButton": "N'utilisez pas les boutons standards des réseaux sociaux",
+	"rule_SocialNetworkButton_DetailDescription": "Les réseaux sociaux tels que  Facebook, Twiter, Pinterest, etc. fournissent des plugins à installer sur une page WEB pour y afficher un bouton partager et un compteur de j'aime. Ces plugins consomme des ressources inutilement, il est mieux de mettre des liens directs",
+	"rule_SocialNetworkButton_DefaultComment": "Pas de bouton standard de réseau social trouvé",
+	"rule_SocialNetworkButton_Comment": "%s bouton(s) standart(s) trouvé(s)",
+	"rule_SocialNetworkButton_detailComment": "Un script %s a été trouvé",
+	"rule_StyleSheets": "Limiter le nombre de fichiers css (<3) ",
+	"rule_StyleSheets_DetailDescription": "Réduisez le nombre de fichiers CSS pour réduire le nombre de requêtes HTTP. Si plusieurs feuilles de style sont utilisées sur toutes les pages du site Web, concaténez-les dans un seul fichier. Certains CMS et frameworks offrent des moyens d'effectuer cette optimisation automatiquement.",
+	"rule_StyleSheets_DefaultComment": "Pas plus de 2 fichiers css",
+	"rule_StyleSheets_Comment": "%s fichiers css",
+	"rule_UseETags": "Utiliser des ETags (>= 95%)",
+	"rule_UseETags_DetailDescription": "Un ETag est une signature associée à une réponse du serveur. Si le client demande une URL (page HTML, image, feuille de style, etc.) dont l'ETag est identique à celle qu'il a déjà, le serveur Web répondra qu'il n'a pas besoin de télécharger la ressource et qu'il doit utiliser celle-ci. il possède déjà. L'utilisation d'ETags permet d'économiser d'énormes quantités de bande passante.",
+	"rule_UseETags_Comment": "%s ressources utilisant des ETags",
+	"rule_UseETags_DetailComment": "%s Ko n'utilise pas d'ETags",
+	"rule_UseStandardTypefaces": "Utiliser des polices de caractères standards",
+	"rule_UseStandardTypefaces_DetailDescription": "Utilisez des polices standards telles qu’elles existent déjà sur l’ordinateur de l’utilisateur et n’ont donc pas besoin d’être téléchargées. Cela économise de la bande passante et améliore le temps de rendu du site Web.",
+	"rule_UseStandardTypefaces_DefaultComment": "Pas de polices de caractères spécifiques",
+	"rule_UseStandardTypefaces_Comment": "%s  Ko de police(s) de caractères spécifique(s)"
+}