Lo script GRATUITO per l'ottimizzazione della pagespeed come ultima risorsa

Lo script GRATUITO per l'ottimizzazione della pagespeed come ultima risorsa

A volte, come consulente Core Web Vitals, mi imbatto in una pagina irrisolvibile. Non è che sia irrisolvibile perché non so come risolverla! No, è irrisolvibile perché risolverla significherebbe riscrivere ampie parti 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 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.

Ultima revisione di Arjen Karel a marzo 2026

Presentazione de "Lo script per l'ottimizzazione della pagespeed come ultima risorsa"

Quando ti trovi in ​​questa situazione difficile, questo script è il tuo disperato tentativo finale di migliorare almeno un po' la 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 un codice più veloce.

Cosa fa:

• Intercetta tutti gli script che bloccano il rendering e li deferisce modificando il tipo di script in type="module". Questo trucco sfrutta il fatto che tutti gli script modulari sono deferiti per impostazione predefinita. Anche gli script inline. Questo lo rende il metodo più sicuro per deferire tutti gli script della pagina.
• Caricamento lazy delle immagini: loading="lazy" e decoding="async" vengono aggiunti a tutte le immagini. Questo deferirà il caricamento di queste immagini finché non saranno quasi nel viewport visibile insieme all'aggiornamento asincrono del layout delle immagini. Fai attenzione: non devi caricare tramite lazy loading la tua immagine LCP. Usa la configurazione prioImgs per escluderla. Scopri perché il lazy loading dell'immagine LCP danneggia le prestazioni.
• Lazy loading degli 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 utilizza tale configurazione per saltare il deferimento o il lazy loading di immagini e script importanti. Per gli iframe funziona al contrario, carica tramite lazy loading solo gli iframe che corrispondono alla tua configurazione. Tutte le configurazioni sono espressioni regolari. Può sembrare spaventoso ma in pratica è davvero semplice.

• prioScripts: Salta il deferimento degli script il cui src corrisponde alla configurazione.
  Esempio: 'jquery|menu' corrisponde al tuo script jquery e al tuo script menu
• prioImgs: Salta il lazy loading per tutte le immagini il cui 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: Carica tramite lazy loading solo gli iframe il cui src corrisponde alla configurazione.
  Esempio: 'youtube|maps' carica tramite lazy loading 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 correggere la tua pagespeed. Solo quando tutto il resto fallisce, mentre stai lavorando attivamente a un nuovo sito, una soluzione del genere è accettabile!
In termini più tecnici, questo script gareggia contro il browser (e il preload scanner), quindi non c'è modo di sapere quali elementi lenti saranno già stati attivati per il download prima che lo script si attivi.

Lo script per l'ottimizzazione della pagespeed come ultima risorsa

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 usarla in produzione! Usa quella minificata!

!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