Lo script GRATUITO di ottimizzazione pagespeed come ultima risorsa

Lo script GRATUITO di ottimizzazione pagespeed come ultima risorsa

A volte, come consulente Core Web Vitals, mi imbatto nella pagina irrisolvibile. Non è irrisolvibile perché non so come sistemarla! No, è irrisolvibile perché sistemarla significherebbe riscrivere gran parte di un sito che è già programmato per essere sostituito. O a volte quando non c'è 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 semplicemente non c'è budget. Non succede spesso, eppure a volte i clienti non riescono a prevedere con precisione la quantità di lavoro che deve essere fatto e pagato.

Ultima revisione a cura di Arjen Karel nel marzo 2026

Presentazione de "Lo script di ottimizzazione pagespeed di ultima risorsa"

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

Cosa fa:

• Intercetta tutti gli script che bloccano il rendering e li posticipa cambiando il tipo di script in type="module". Questo trucco sfrutta il fatto che tutti gli script modulari sono posticipati per impostazione predefinita. Anche gli script inline. Questo lo rende il metodo più sicuro per posticipare tutti gli script della pagina.
• Caricamento lazy delle immagini: loading="lazy" e decoding="async" vengono aggiunti a tutte le immagini. Questo posticiperà il caricamento di queste immagini finché non saranno quasi nel viewport visibile, insieme all'aggiornamento asincrono del layout dell'immagine. Fai attenzione: non vuoi caricare in modo lazy la tua immagine LCP. Usa la configurazione prioImgs per escluderla. Vedi perché il caricamento lazy dell'immagine LCP danneggia le prestazioni.
• Caricamento lazy degli iframe. Come per le immagini, il caricamento lazy degli iframe può dare priorità ai tuoi contenuti più importanti!

Configurazione

Lo script accetta un singolo "oggetto di configurazione" e utilizza tale configurazione per saltare il rinvio o il caricamento lazy di immagini e script importanti. Per gli iframe funziona al contrario, carica in modo lazy solo gli iframe che corrispondono alla tua configurazione. Tutte le configurazioni si presentano sotto forma di espressione regolare. Potrebbe sembrare spaventoso, ma in pratica è davvero semplice.

• prioScripts: Salta il rinvio degli script in cui l'src corrisponde alla configurazione.
  Esempio: 'jquery|menu' corrisponde al tuo script jquery e a quello del menu
• prioImgs: Salta il caricamento lazy per tutte le immagini in cui il nome dell'immagine, la classe dell'immagine o l'id dell'immagine corrispondono.
  Esempio: 'hero' corrisponde sia a <img id="hero" ..> che a <img src="hero.jpg">
• lazyFrames: Carica in modo lazy solo gli iframe in cui l'src dell'iframe corrisponde alla configurazione.
  Esempio: 'youtube|maps' carica in modo lazy tutti gli iframe di YouTube e Google Maps.

Utilizzo

Limitazioni

Come ho affermato in precedenza, non dovresti assolutamente usare questo script come soluzione principale per correggere il tuo pagespeed. Solo quando tutto il resto fallisce, mentre stai lavorando attivamente a un nuovo sito, una soluzione come questa è accettabile!
In termini più tecnici, questo script gareggia contro il browser (e lo scanner di precaricamento), 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 di ultima risorsa

Ecco una versione minimizzata 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 minimizzata!

!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