El script de optimización de pagespeed GRATUITO de último recurso

El script de optimización de pagespeed GRATUITO de último recurso

A veces, como consultor de Core Web Vitals, me encuentro con la página imposible de arreglar. ¡No es que sea imposible de arreglar porque no sepa cómo hacerlo! No, es imposible de arreglar porque solucionarlo implicaría reescribir gran parte de un sitio que ya está programado para ser reemplazado. O a veces, cuando simplemente no hay suficiente acceso y control para mejorar el código del sitio, como sucede con sistemas CMS más cerrados como WIX, HubSpot, WebFlow, etc. O, por último, cuando sencillamente no hay presupuesto. No ocurre a menudo, pero a veces los clientes no pueden predecir con precisión la cantidad de trabajo que necesita hacerse y pagarse.

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

Presentamos "El script de optimización de pagespeed de último recurso"

Cuando te encuentras en este aprieto, este script es tu intento desesperado final para al menos mejorar el pagespeed un poco hasta que puedas construir algo mejor. Funciona de manera inteligente utilizando el Mutation Observer. El script observa cómo el navegador crea el Document Object Model de tu sitio e intercepta y reemplaza inmediatamente el código lento por código más rápido.

Qué hace:

• Intercepta todos los scripts que bloquean el renderizado y los aplaza cambiando el tipo del script a type="module". Este truco aprovecha el hecho de que todos los scripts modulares se aplazan por defecto. Incluso los scripts en línea. Esto hace que este sea el método más seguro para aplazar todos los scripts de la página.
• Carga diferida (lazy load) de imágenes: se añade loading="lazy" y decoding="async" a todas las imágenes. Esto diferirá la carga de estas imágenes hasta que estén casi en el viewport visible junto con la actualización asíncrona del layout de la imagen. Ten cuidado: no querrás hacer lazy load a tu imagen LCP. Utiliza la configuración prioImgs para excluirla. Mira por qué hacer lazy loading a la imagen LCP perjudica el rendimiento.
• Carga diferida (lazy load) de iframes. Igual que con las imágenes, ¡hacer lazy loading de los iframes puede priorizar tu propio contenido, más importante!

Configuración

El script toma un único "objeto de configuración" y usa esa configuración para omitir el aplazamiento o el lazy loading de imágenes y scripts importantes. Para los iframes funciona al revés, solo hace lazy load de los iframes que coinciden con tu configuración. Todas las configuraciones vienen como una expresión regular. Eso puede sonar aterrador, pero en la práctica es muy sencillo.

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

Uso

Limitaciones

Como dije anteriormente, realmente no deberías usar este script como tu solución principal para arreglar tu pagespeed. ¡Solo cuando todo lo demás falla, mientras trabajas activamente en un sitio nuevo, es aceptable una solución como esta!
En términos más técnicos, este script compite contra el navegador (y el escáner de precarga), así que no hay forma de saber qué elementos lentos ya se habrán activado para su descarga antes de que el script se active.

El script de optimización de pagespeed de último recurso

Aquí hay una versión minificada que debería usarse 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í hay una versión más legible del script. ¡No uses esta 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