Le script d'optimisation pagespeed GRATUIT de la dernière chance

Le script d'optimisation pagespeed GRATUIT de la dernière chance

Parfois, en tant que consultant Core Web Vitals, je tombe sur une page irréparable. Ce n'est pas qu'elle est irréparable parce que je ne sais pas comment la réparer ! Non, elle est irréparable car la réparer impliquerait de réécrire de grandes parties d'un site dont le remplacement est déjà prévu. Ou parfois parce qu'il n'y a tout simplement pas suffisamment d'accès et de contrôle pour améliorer le code du site, comme on le voit avec des systèmes CMS plus fermés tels que WIX, HubSpot, WebFlow, etc. Ou, enfin, quand le budget n'est tout simplement pas là. Cela n'arrive pas souvent, mais parfois les clients ne peuvent pas prédire avec précision la quantité de travail qui doit être effectuée et payée.

Dernière révision par Arjen Karel en mars 2026

Présentation du "Script d'optimisation pagespeed de la dernière chance"

Lorsque vous vous trouvez dans cette situation délicate, ce script est votre ultime tentative désespérée pour au moins améliorer un peu le pagespeed en attendant de pouvoir construire quelque chose de mieux. Il fonctionne intelligemment en utilisant le Mutation Observer. Le script observe la création du Document Object Model de votre site par le navigateur et intercepte puis remplace immédiatement le code lent par du code plus rapide.

Ce qu'il fait :

• Intercepte tous les scripts bloquant le rendu et les diffère en changeant le type du script en type="module". Cette astuce exploite le fait que tous les scripts modulaires sont différés par défaut. Même les scripts en ligne (inline). Cela en fait la méthode la plus sûre pour différer tous les scripts de la page.
• Chargement différé (lazy loading) des images : loading="lazy" et decoding="async" sont ajoutés à toutes les images. Cela va différer le chargement de ces images jusqu'à ce qu'elles soient presque dans la fenêtre d'affichage visible, tout en mettant à jour la mise en page de l'image de manière asynchrone. Attention : vous ne voulez pas charger en différé (lazy load) votre image LCP. Utilisez la configuration prioImgs pour l'exclure. Découvrez pourquoi le lazy loading de l'image LCP nuit aux performances.
• Chargement différé (lazy load) des iframes. Comme pour les images, le chargement différé des iframes permet de prioriser votre propre contenu, plus important !

Configuration

Le script prend un seul "objet de configuration" (config object) et utilise cette configuration pour éviter de différer ou de charger en différé (lazy load) des images et des scripts importants. Pour les iframes, cela fonctionne dans l'autre sens : il ne charge en différé que les iframes qui correspondent à votre configuration. Toutes les configurations se présentent sous la forme d'une expression régulière. Cela peut paraître effrayant, mais en pratique, c'est très simple.

• prioScripts: Évite de différer les scripts dont la source (src) correspond à la configuration.
  Exemple : 'jquery|menu' correspond à votre jquery et à votre script de menu.
• prioImgs: Évite le chargement différé (lazy loading) pour toutes les images dont le nom, la classe ou l'identifiant (id) correspond.
  Exemple : 'hero' correspond à la fois à <img id="hero" ..> et à <img src="hero.jpg">.
• lazyFrames: Charge en différé (lazy load) uniquement les iframes dont la source (src) correspond à la configuration.
  Exemple : 'youtube|maps' charge en différé toutes les iframes YouTube et Google Maps.

Utilisation

Limites

Comme je l'ai dit précédemment, vous ne devriez vraiment pas utiliser ce script comme solution principale pour corriger votre pagespeed. C'est uniquement lorsque tout le reste échoue, pendant que vous travaillez activement sur un nouveau site, qu'une telle solution est acceptable !
En termes plus techniques, ce script fait la course contre le navigateur (et le scanner de préchargement), il n'y a donc aucun moyen de savoir quels éléments lents auront déjà été déclenchés pour le téléchargement avant que le script ne s'active.

Le script d'optimisation pagespeed de la dernière chance

Voici une version minifiée qui devrait être utilisée en production

!function(t){['prioScripts', 'prioImgs', 'lazyFrames'].forEach(e=>{t[e]=t[e]?RegExp(t[e],"i"):null});let e=new MutationObserver(e=>{e.forEach(({addedNodes:e})=>{e.forEach(e=>{if(1===e.nodeType)switch(e.tagName){case"SCRIPT":if(!t.prioScripts||!t.prioScripts.test(e.src)){let t=e.getAttribute("type");t&&"text/javascript"!==t||e.setAttribute("type","module")}break;case"IMG":console.log(e.outerHTML),t.prioImgs&&(t.prioImgs.test(e.outerHTML)||e.getAttribute("loading"))||(e.setAttribute("loading","lazy"),e.setAttribute("decoding","async"));break;case"IFRAME":t.lazyFrames.test(e.src)&&e.setAttribute("loading","lazy")}})})});/MSIE|Trident/.test(navigator.userAgent)||(e.observe(document.documentElement,{childList:!0,subtree:!0}),document.addEventListener("DOMContentLoaded",()=>{e.disconnect()}))}({prioScripts:"jquery",prioImgs:"hero",lazyFrames:"youtube|maps"});

Voici une version plus lisible du script. Ne l'utilisez pas en production ! Utilisez la version minifiée !

!function (cfg) {\r\n\r\n    // Regexify config or nullify\r\n    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {\r\n        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;\r\n    });\r\n\r\n    t0 = performance.now();\r\n\r\n    /* Watch mutated nodes */\r\n    const mutator = new MutationObserver((e) => {\r\n        e.forEach(({ addedNodes: e }) => {\r\n            e.forEach((e) => {\r\n                switch (e.nodeType) {\r\n                    case 1:\r\n                        switch (e.tagName) {\r\n                            // defer scripts by adding type="module", excusive test on src\r\n                            case "SCRIPT":\r\n                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {\r\n                                    let type = e.getAttribute("type");\r\n                                    if (!type || type === "text/javascript") {\r\n                                        e.setAttribute("type", "module");\r\n                                    }\r\n                                }\r\n                                break;\r\n\r\n                            // lazy load images, excusive test on outerHTML for classname, id etc etc\r\n                            case "IMG":\r\n                                console.log(e.outerHTML);\r\n                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {\r\n                                    e.setAttribute("loading", "lazy");\r\n                                    e.setAttribute("decoding", "async");\r\n                                }\r\n                                break;\r\n\r\n                            // lazy load iframes, inclusive test on src\r\n                            case "IFRAME":\r\n                                if (cfg.lazyFrames.test(e.src)) {\r\n                                    e.setAttribute("loading", "lazy");\r\n                                }\r\n                                break;\r\n                        }\r\n                        break;\r\n                }\r\n            });\r\n        });\r\n    });\r\n\r\n\r\n    // Check for IE\r\n    if (!/MSIE|Trident/.test(navigator.userAgent)) {\r\n        mutator.observe(document.documentElement, { childList: true, subtree: true });\r\n        document.addEventListener("DOMContentLoaded", () => {\r\n            mutator.disconnect();\r\n            console.log("I quit after watching for " + (performance.now() - t0) + " ms");\r\n        });\r\n    }\r\n}({\r\n    prioScripts: 'jquery',\r\n    prioImgs: 'hero',\r\n    lazyFrames: 'youtube|maps',\r\n});\r\n\r\n\r\n