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

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

Às vezes, como consultor de Core Web Vitals, encontro uma página sem conserto. Não é sem conserto porque não sei consertá-la! Não, ela é sem conserto porque consertá-la significaria reescrever grande parte de um site com substituição já programada. Ou, às vezes, falta acesso e controle para melhorar o código do site. Você vê isso em sistemas CMS mais fechados, como WIX, HubSpot, WebFlow, etc. Ou, por fim, quando não há orçamento. Isso não acontece com frequência. Porém, às vezes os clientes não conseguem prever com precisão a quantidade de trabalho a ser feita e paga.

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

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

Quando você se encontra nesse aperto, este script é a sua tentativa final e desesperada de melhorar a velocidade da página pelo menos um pouco, até que você possa 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 e 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". Esse truque usa o fato de que todos os scripts modulares são adiados por padrão. Até mesmo 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 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. Cuidado: você não quer aplicar lazy load na sua imagem de LCP. Use a configuração prioImgs para excluí-la. Veja por que o lazy loading da imagem de LCP prejudica a performance.
• Lazy load de iframes. Assim como com as imagens, o lazy loading de iframes pode priorizar o seu próprio conteúdo, que é 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 load 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: Ignora o adiamento de scripts onde o src corresponde à configuração.
  Exemplo: 'jquery|menu' corresponde ao seu script jquery e ao seu script de menu
• prioImgs: Ignora o lazy loading para todas as imagens onde o nome da imagem, a classe da imagem ou o id da imagem corresponde.
  Exemplo: 'hero' corresponde tanto a <img id="hero" ..> quanto a <img src="hero.jpg">
• lazyFrames: Aplica lazy load apenas em iframes onde o src do iframe corresponde à configuração.
  Exemplo: 'youtube|maps' aplica lazy load em todos os iframes do YouTube e do Google Maps.

Uso

Limitações

Como afirmei antes, você não deve usar este script como sua solução principal para consertar a velocidade da página. Uma solução como esta só é aceitável quando tudo mais falha, enquanto você trabalha ativamente em um novo site!
Em termos mais técnicos, este script corre contra o navegador (e o preload scanner), então não há como saber quais elementos lentos já terão o download acionado antes de o script ativar.

O script de último recurso para otimização de 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 a use em produção! Use a versão minificada!

!function (cfg) {\r\n\r\n    // Transformar configuração em regex ou anular\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    /* Observar nós mutados */\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                            // adiar scripts adicionando type="module", teste exclusivo no 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 de imagens, teste exclusivo no outerHTML para 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 de iframes, teste inclusivo no 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    // Verificar 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("Parei de observar após " + (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