Lo script GRATUITO di ottimizzazione pagespeed come ultima spiaggia

Lo script GRATUITO di ottimizzazione pagespeed come ultima spiaggia

A volte, come consulente Core Web Vitals, mi imbatto nella pagina non correggibile. Non è che sia non correggibile perché non so come risolverlo! 
No, è non correggibile perché risolverlo significherebbe riscrivere gran parte di un sito che è già programmato per essere sostituito. O a volte quando non c'è semplicemente abbastanza accesso e controllo per migliorare il codice del sito come si vede con i sistemi CMS più chiusi come  (WIX,HubSpot,WebFlow ecc). O, infine, quando il budget semplicemente non c'è. Non succede spesso, eppure a volte i clienti non riescono a prevedere con precisione la quantità di lavoro che deve essere fatto e pagato.

Ti presentiamo "Lo script di ottimizzazione pagespeed come ultima spiaggia"

Quando ti trovi in questa situazione difficile, questo script è il tuo disperato tentativo finale per migliorare almeno un po' il pagespeed fino a quando non potrai costruire qualcosa di meglio. Funziona in modo intelligente sfruttando il Mutation Observer. Lo script osserva mentre il Document Object Model del tuo sito viene creato dal browser e intercetta immediatamente e sostituisce il codice lento con codice più veloce.

Cosa fa:

• Intercetta tutti gli script render blocking e li posticipa cambiando il tipo dello script in type="module". Questo trucco sfrutta il fatto che tutti gli script modulari vengono posticipati per impostazione predefinita. Anche gli script inline. Questo lo rende il metodo più sicuro per posticipare tutti gli script della pagina.
• Lazy image loading: loading="lazy" e decoding="async" viene aggiunto a tutte le immagini. Questo posticiperà il caricamento di queste immagini finché non saranno quasi nel viewport visibile, insieme a un aggiornamento asincrono del layout delle immagini.
• Lazy load per gli iframe. Come per le immagini, il lazy loading degli iframe può dare priorità ai tuoi contenuti, più importanti!

Configurazione

Lo script accetta un singolo 'oggetto di configurazione' e usa quella configurazione per saltare il rinvio o il lazy loading di immagini e script importanti. Per gli iframe funziona al contrario, effettua il lazy load solo degli iframe che corrispondono alla tua configurazione. Tutte le configurazioni si presentano sotto forma di espressione regolare. Questo può sembrare spaventoso ma in pratica è davvero semplice. Ecco 

• prioScripts: Salta il rinvio dello script in cui il src corrisponde alla configurazione.
  
• Esempio: 'jquery|menu' corrisponde al tuo jquery e al tuo script menu
• prioImgs: Salta il lazy loading per tutte le immagini in cui il nome dell'immagine, la classe dell'immagine o l'id dell'immagine corrisponde
  Esempio: 'hero' corrisponde sia a <img id="hero" ..> che a <img src="hero.jpg">
• lazyFrames: Effettua il lazy load solo degli iframe in cui il src dell'iframe corrisponde alla configurazione.
  Esempio: 'youtube|maps' effettua il lazy load di tutti gli iframe di youtube e google maps.

Utilizzo

Limitazioni

Come ho affermato in precedenza, non dovresti assolutamente utilizzare questo script come soluzione principale per sistemare il tuo pagespeed. Solo quando tutto il resto fallisce, mentre stai lavorando attivamente su un nuovo sito, una soluzione del genere è accettabile!
In termini più tecnici, questo script fa a gara con il browser (e il preload scanner), quindi non c'è modo di dire quali elementi lenti saranno già stati attivati per il download prima che lo script si attivi

Lo script di ottimizzazione pagespeed come ultima spiaggia

Ecco una versione minificata che dovrebbe essere utilizzata in produzione

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

Ecco una versione più leggibile dello script. Non utilizzarla in produzione! Usa quella minificata!

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