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

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

Parfois, en tant que consultant Core Web Vitals, je tombe sur la page irréparable. Ce n'est pas qu'elle soit irréparable parce que je ne sais pas comment la corriger ! Non, elle est irréparable car la corriger impliquerait de réécrire de grandes parties d'un site qui est déjà programmé pour être remplacé. Ou parfois, lorsqu'il n'y a tout simplement pas assez 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, lorsque le budget n'est tout simplement pas là. Cela n'arrive pas souvent, pourtant les clients ne peuvent parfois pas prévoir 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 difficile, ce script est votre ultime tentative désespérée pour améliorer au moins un peu le pagespeed jusqu'à ce que vous puissiez construire quelque chose de mieux. Il fonctionne intelligemment en utilisant le Mutation Observer. Le script observe le Document Object Model de votre site pendant sa création par le navigateur, et intercepte et 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 load) 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 (viewport), tout en mettant à jour la mise en page des images de manière asynchrone. Attention : vous ne voulez pas charger en 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. Tout comme pour les images, le lazy loading des iframes permet de prioriser votre propre contenu, plus important !

Configuration

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

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

Utilisation

Limites

Comme je l'ai déjà dit, vous ne devriez vraiment pas utiliser ce script comme solution principale pour corriger votre pagespeed. Ce n'est que lorsque tout le reste échoue, alors que vous travaillez activement sur un nouveau site, qu'une telle solution est acceptable !
En termes plus techniques, ce script fait la course avec le navigateur (et le preload scanner), on ne peut donc pas savoir quels éléments lents auront déjà été déclenchés pour le téléchargement avant l'activation du script.

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

Voici une version minifiée qui doit ê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