El script GRATIS de último recurso para optimizar la velocidad de la página

El script gratuito de último recurso para optimizar la velocidad de la página

A veces, como consultor de Core Web Vitals, encuentro una página sin arreglo. ¡Y no es que no sepa arreglarla! Es que arreglarla significa reescribir gran parte de un sitio que ya va a ser reemplazado. Otras veces no hay acceso ni control para mejorar el código. Pasa en CMS cerrados como WIX, HubSpot o WebFlow. O, simplemente, no hay presupuesto. Pasa poco, pero a veces los clientes no calculan bien cuánto trabajo hay que hacer y pagar.

Última revisión por Arjen Karel en marzo de 2026

Te presento "El script de último recurso para optimizar la velocidad de la página"

Cuando te ves en este aprieto, este script es tu último intento desesperado para mejorar un poco la velocidad de la página hasta que construyas algo mejor. Funciona de manera inteligente mediante el Mutation Observer. El script observa cómo el navegador crea el Document Object Model de tu sitio. Intercepta de inmediato el código lento y lo reemplaza por código más rápido.

Qué hace:

• Intercepta todos los scripts render blocking y los aplaza cambiando el tipo del script a type="module". Este truco aprovecha que todos los scripts modulares se aplazan por defecto. Incluso los scripts en línea. Esto lo convierte en el método más seguro para aplazar todos los scripts de la página.
• Lazy loading de imágenes: añade loading="lazy" y decoding="async" a todas las imágenes. Esto aplaza la carga de estas imágenes hasta que casi entran en el viewport visible, junto con una actualización asíncrona del layout de la imagen. Ten cuidado: no debes hacer lazy loading a tu imagen del LCP. Usa la configuración prioImgs para excluirla. Mira por qué el lazy loading en la imagen del LCP perjudica el rendimiento.
• Lazy loading de iframes. Al igual que con las imágenes, el lazy loading de iframes puede priorizar tu propio contenido, ¡que es más importante!

Configuración

El script recibe un único "objeto de configuración". Lo usa para omitir el aplazamiento o el lazy loading de imágenes y scripts importantes. Para los iframes funciona al revés: solo hace lazy loading a los iframes que coinciden con tu configuración. Todas las configuraciones usan expresiones regulares. Puede sonar intimidante, pero en la práctica es muy fácil.

• prioScripts: No aplaza los scripts cuyo src coincida con la configuración.
  Ejemplo: 'jquery|menu' coincide con tu script de jquery y de menú.
• prioImgs: Omite el lazy loading para todas las imágenes donde el nombre, la clase o el id coincidan.
  Ejemplo: 'hero' coincide tanto con <img id="hero" ..> como con <img src="hero.jpg">
• lazyFrames: Hace lazy loading solo a los iframes cuyo src coincida con la configuración.
  Ejemplo: 'youtube|maps' hace lazy loading a todos los iframes de YouTube y Google Maps.

Uso

Limitaciones

Como mencioné antes, no debes usar este script como solución principal para mejorar la velocidad de tu página. ¡Esta solución solo es aceptable cuando todo lo demás falla y mientras trabajas activamente en un sitio nuevo!
En términos más técnicos, el script compite contra el navegador (y el preload scanner). Es imposible saber qué elementos lentos ya habrán empezado a descargarse antes de que se active.

El script de último recurso para optimizar la velocidad de la página

Aquí tienes una versión minificada que debes usar en producción

!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"});

Aquí tienes una versión más legible del script. ¡No la uses en producción! ¡Usa la minificada!

!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