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

El script GRATUITO de optimización de pagespeed 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 arreglarla significaría reescribir grandes partes 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 se ve con sistemas CMS más cerrados como  (WIX,HubSpot,WebFlow etc). O, por último, cuando el presupuesto simplemente no existe. No sucede a menudo, pero a veces los clientes no pueden predecir con precisión la cantidad de trabajo que debe hacerse y pagarse.

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

Cuando te encuentras en esta situación difícil, este script es tu intento final desesperado para al menos mejorar el pagespeed un poco hasta que puedas construir algo mejor. Funciona ingeniosamente aprovechando el Mutation Observer. El script observa mientras 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.

Lo que hace:

• Intercepta todos los scripts que bloquean el renderizado y los difiere cambiando el tipo del script a type="module". Este truco utiliza el hecho de que todos los scripts modulares se difieren por defecto. Incluso los scripts en línea. Esto lo convierte en el método más seguro para diferir todos los scripts de la página.
• Carga diferida 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 una actualización asíncrona del diseño de la imagen
• Carga diferida de iframes. Al igual que con las imágenes, la carga diferida de iframes puede priorizar tu propio contenido, ¡que es más importante!

Configuración

El script toma un único 'config object' y usa esa configuración para omitir la carga diferida de imágenes y scripts importantes. Para los iframes funciona al revés, solo carga de forma diferida 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 realmente simple. Aquí 

• prioScripts: Omite diferir el script donde el src coincide con la configuración.
  
• Ejemplo: 'jquery|menu' coincide con tu jquery y tu script de menú
• prioImgs: Omite la carga diferida para todas las imágenes donde el nombre de la imagen, la clase de la imagen o el id de la imagen coinciden
  Ejemplo: 'hero' coincide tanto con <img id="hero" ..> como con <img src="hero.jpg">
• lazyFrames: Carga de forma diferida solo los iframes donde el src del iframe coincide con la configuración.
  Ejemplo: 'youtube|maps' carga de forma diferida 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 estás trabajando activamente en un nuevo sitio, es aceptable una solución como esta!
En términos más técnicos, este script compite contra el navegador (y el preload scanner), por lo que no se puede saber qué elementos lentos ya se habrán activado para descargar 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 esto en producción! ¡Usa el minificado!

!function (cfg) {

    // Regexify config or nullify
    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {
        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;
    });

    t0 = performance.now();

    /* Watch mutated nodes */
    const mutator = new MutationObserver((e) => {
        e.forEach(({ addedNodes: e }) => {
            e.forEach((e) => {
                switch (e.nodeType) {
                    case 1:
                        switch (e.tagName) {
                            // defer scripts by adding type="module", excusive test on src
                            case "SCRIPT":
                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {
                                    let type = e.getAttribute("type");
                                    if (!type || type === "text/javascript") {
                                        e.setAttribute("type", "module");
                                    }
                                }
                                break;

                            // lazy load images, excusive test on outerHTML for classname, id etc etc
                            case "IMG":
                                console.log(e.outerHTML);
                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {
                                    e.setAttribute("loading", "lazy");
                                    e.setAttribute("decoding", "async");
                                }
                                break;

                            // lazy load iframes, inclusive test on src
                            case "IFRAME":
                                if (cfg.lazyFrames.test(e.src)) {
                                    e.setAttribute("loading", "lazy");
                                }
                                break;
                        }
                        break;
                }
            });
        });
    });


    // Check for IE
    if (!/MSIE|Trident/.test(navigator.userAgent)) {
        mutator.observe(document.documentElement, { childList: true, subtree: true });
        document.addEventListener("DOMContentLoaded", () => {
            mutator.disconnect();
            console.log("I quit after watching for " + (performance.now() - t0) + " ms");
        });
    }
}({
    prioScripts: 'jquery',
    prioImgs: 'hero',
    lazyFrames: 'youtube|maps',
});