O script GRATUITO de último recurso para otimizar a velocidade da página

O script GRATUITO de último recurso para otimização da velocidade da página

Às vezes, como consultor de Core Web Vitals, encontro uma página sem conserto. Não é que ela não tenha conserto porque não sei como consertá-la! Não, ela não tem conserto porque consertá-la significaria reescrever grandes partes de um site já programado para ser substituído. Ou, às vezes, quando simplesmente não há acesso e controle suficientes para melhorar o código do site, como você vê em sistemas CMS mais fechados como WIX, HubSpot, WebFlow etc. Ou, por fim, quando simplesmente não há orçamento. Isso não acontece com frequência. Ainda assim, às vezes os clientes não conseguem prever com precisão a quantidade de trabalho que precisa ser feita e paga.

Última revisão por Arjen Karel em março de 2026

Apresentando "O script de último recurso para otimização da velocidade da página"

Quando você se encontra nessa situação difícil, este script é a sua tentativa final desesperada de pelo menos melhorar a velocidade da página um pouco, até você poder construir algo melhor. Ele funciona de forma inteligente usando o Mutation Observer. O script observa o Document Object Model do seu site ser criado pelo navegador. Ele intercepta e substitui imediatamente o código lento por código mais rápido.

O que ele faz:

• Intercepta todos os scripts render blocking e os adia alterando o tipo do script para type="module". Este truque aproveita o fato de que todos os scripts modulares são adiados por padrão. Até mesmo os scripts inline. Isso faz deste o método mais seguro para adiar todos os scripts da página.
• Lazy loading de imagens: loading="lazy" e decoding="async" são adicionados a todas as imagens. Isso vai adiar o carregamento dessas imagens até que elas estejam quase no viewport visível junto com a atualização assíncrona do layout da imagem. Tenha cuidado: você não quer aplicar lazy loading na sua imagem LCP. Use a configuração prioImgs para excluí-la. Veja por que aplicar lazy loading na imagem LCP prejudica o desempenho.
• Lazy loading de iframes. Assim como nas imagens, o lazy loading de iframes pode priorizar o seu próprio conteúdo mais importante!

Configuração

O script recebe um único "objeto de configuração" e usa essa configuração para pular o adiamento ou o lazy loading de imagens e scripts importantes. Para iframes, funciona ao contrário. Ele aplica lazy loading apenas nos iframes que correspondem à sua configuração. Todas as configurações vêm como uma expressão regular. Isso pode parecer assustador, mas na prática é muito simples.

• prioScripts: Pula o adiamento de scripts onde o src corresponde à configuração.
  Exemplo: 'jquery|menu' corresponde ao seu script jquery e de menu
• prioImgs: Pula o lazy loading para todas as imagens onde o nome da imagem, a classe da imagem ou o id da imagem correspondem.
  Exemplo: 'hero' corresponde tanto a <img id="hero" ..> quanto a <img src="hero.jpg">
• lazyFrames: Aplica lazy loading apenas em iframes onde o src do iframe corresponde à configuração.
  Exemplo: 'youtube|maps' aplica lazy loading em todos os iframes do YouTube e Google Maps.

Uso

Limitações

Como afirmei antes, você realmente não deve usar este script como sua solução principal para consertar a velocidade da página. Apenas quando tudo mais falhar, enquanto você trabalha ativamente em um novo site, uma solução como essa é aceitável!
Em termos mais técnicos, este script corre contra o navegador (e o preload scanner). Portanto, não há como saber quais elementos lentos já terão sido acionados para download antes que o script seja ativado.

O script de último recurso para otimização da velocidade da página

Aqui está uma versão minificada que deve ser usada em produção

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

Aqui está uma versão mais legível do script. Não use esta versão em produção! Use a minificada!

!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