Le script GRATUIT d'optimisation de la vitesse de page en dernier recours

Le script GRATUIT de la dernière chance pour l'optimisation de la vitesse de la page

Parfois, en tant que consultant Core Web Vitals, je rencontre la page impossible à corriger. Elle n'est pas impossible à corriger parce que je ne sais pas comment faire ! Non, elle est impossible à corriger car cela impliquerait de réécrire de grandes parties d'un site dont le remplacement est déjà programmé. Ou parfois, vous manquez 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évoir avec précision la quantité de travail à effectuer et à payer.

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

Présentation du « script d'optimisation de la vitesse de la page de la dernière chance »

Dans cette situation difficile, ce script est votre dernière tentative désespérée pour améliorer un peu la vitesse de la page en attendant de construire quelque chose de mieux. Il fonctionne astucieusement en utilisant le Mutation Observer. Le script observe la création du Document Object Model de votre site par le navigateur. Il intercepte et remplace immédiatement le code lent par du code plus rapide.

Ce qu'il fait :

• Intercepte tous les scripts render blocking 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. Cela en fait la méthode la plus sûre pour différer tous les scripts de la page.
• Lazy loading d'images : loading="lazy" et decoding="async" sont ajoutés à toutes les images. Cela diffère le chargement de ces images jusqu'à ce qu'elles soient presque dans le viewport visible, avec une mise à jour asynchrone de la disposition des images. Attention : vous ne voulez pas appliquer le lazy loading à votre image LCP. Utilisez la configuration prioImgs pour l'exclure. Découvrez pourquoi le lazy loading de l'image LCP nuit aux performances.
• Lazy loading des iframes. Comme pour les images, le lazy loading des iframes priorise votre propre contenu, plus important !

Configuration

Le script prend un seul « objet de configuration ». Il utilise cette configuration pour éviter de différer ou d'appliquer le lazy loading aux images et scripts importants. Pour les iframes, cela fonctionne dans l'autre sens. Il applique le lazy loading uniquement aux iframes qui correspondent à votre configuration. Toutes les configurations se font sous forme d'expression régulière. Cela peut sembler effrayant, mais en pratique, c'est très simple.

• prioScripts : Ne diffère pas les scripts dont la src correspond à la configuration.
  Exemple : 'jquery|menu' correspond à votre script jquery et à votre script de menu
• prioImgs : N'applique pas le lazy loading aux images dont le nom, la classe ou l'id d'image correspond.
  Exemple : 'hero' correspond à la fois à <img id="hero" ..> et à <img src="hero.jpg">
• lazyFrames : Applique le lazy loading uniquement aux iframes dont la src correspond à la configuration.
  Exemple : 'youtube|maps' applique le lazy loading à toutes les iframes YouTube et Google Maps.

Utilisation

Limites

Comme je l'ai déjà dit, n'utilisez pas ce script comme solution principale pour corriger la vitesse de la page. Cette solution n'est acceptable que lorsque tout le reste échoue, pendant que vous travaillez activement sur un nouveau site !
En termes techniques, ce script fait la course avec le navigateur (et le preload scanner). Impossible de savoir quels éléments lents ont déjà été déclenchés pour le téléchargement avant l'activation du script.

Le script d'optimisation de la vitesse de la page de la dernière chance

Voici une version minifiée à utiliser 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