Lo script GRATUITO di ultima spiaggia per l'ottimizzazione della velocità della pagina

Lo script GRATUITO di ultima istanza per l'ottimizzazione della velocità della pagina

A volte, come consulente Core Web Vitals, incontro una pagina impossibile da sistemare. Non è impossibile da sistemare perché non so come fare! No, è impossibile da sistemare perché farlo significherebbe riscrivere gran parte di un sito già destinato alla sostituzione. O a volte non c'è abbastanza accesso e controllo per migliorare il codice del sito, come succede con i CMS più chiusi tipo WIX, HubSpot, WebFlow ecc. O, infine, manca semplicemente il budget. Non succede spesso, ma a volte i clienti non possono prevedere con precisione la quantità di lavoro da fare e da pagare.

Ultima revisione di Arjen Karel a marzo 2026

Ti presento "Lo script di ultima istanza per l'ottimizzazione della velocità della pagina"

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

Cosa fa:

• Intercetta tutti gli script render blocking e li differisce cambiando il tipo dello script in type="module". Questo trucco sfrutta il fatto che tutti gli script modulari vengono differiti di default. Anche gli script inline. Questo lo rende il metodo più sicuro per differire tutti gli script della pagina.
• Lazy loading delle immagini: loading="lazy" e decoding="async" vengono aggiunti a tutte le immagini. Questo differirà il caricamento di queste immagini finché non saranno quasi nel viewport visibile, insieme all'aggiornamento asincrono del layout dell'immagine. Fai attenzione: non vuoi applicare il lazy loading alla tua immagine LCP. Usa la configurazione prioImgs per escluderla. Scopri perché il lazy loading dell'immagine LCP danneggia le prestazioni.
• Applica il lazy loading agli iframe. Come per le immagini, il lazy loading degli iframe può dare priorità ai tuoi contenuti, che sono più importanti!

Configurazione

Lo script accetta un singolo "oggetto di configurazione" e lo usa per evitare di differire o applicare il lazy loading alle immagini e agli script importanti. Per gli iframe funziona al contrario: applica il lazy loading solo agli iframe che corrispondono alla tua configurazione. Tutte le configurazioni sono espressioni regolari. Può sembrare spaventoso, ma in pratica è molto semplice.

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

Utilizzo

Limitazioni

Come ho detto prima, non dovresti assolutamente usare questo script come soluzione principale per sistemare la velocità della pagina. 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 fa a gara con il browser (e il preload scanner), quindi non c'è modo di sapere quali elementi lenti saranno già stati avviati per il download prima che lo script si attivi.

Lo script di ultima istanza per l'ottimizzazione della velocità della pagina

Ecco una versione minificata da usare 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