O script GRATUITO de otimização de pagespeed como último recurso

O script GRATUITO de otimização de pagespeed como último recurso

Às vezes, como consultor de Core Web Vitals, me deparo com a página incorrigível. Não é que ela seja incorrigível porque não sei como consertá-la! Não, é incorrigível porque consertá-la significaria reescrever grandes partes de um site que já está programado para ser substituído. Ou às vezes quando 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. Não acontece com frequência, mas às vezes os clientes não conseguem prever com precisão a quantidade de trabalho que precisa ser feito e pago.

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

Apresentando "O script de otimização de pagespeed de último recurso"

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

O que ele faz:

• Intercepta todos os scripts que bloqueiam a renderização e os adia alterando o tipo do script para type="module". Este truque faz uso do fato de que todos os scripts modulares são adiados por padrão. Até mesmo scripts inline. Isso torna este 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 irá adiar o carregamento dessas imagens até que elas estejam quase na viewport visível, juntamente com a atualização assíncrona do layout da imagem. Cuidado: você não quer fazer lazy load da sua imagem de LCP. Use a configuração prioImgs para excluí-la. Veja por que fazer lazy load da imagem de LCP prejudica o desempenho.
• Lazy load em iframes. O mesmo que com as imagens, fazer lazy load de iframes pode priorizar o seu próprio conteúdo, que é mais importante!

Configuração

O script aceita 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 só faz lazy load dos iframes que correspondem à sua configuração. Todas as configurações vêm como uma expressão regular. Isso pode soar 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 jquery e ao seu script 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 a ambos <img id="hero" ..> e <img src="hero.jpg">
• lazyFrames: Faz lazy load apenas de iframes onde o src do iframe corresponde à configuração.
  Exemplo: 'youtube|maps' faz lazy load de todos os iframes do YouTube e do Google Maps.

Uso

Limitações

Como afirmei anteriormente, você realmente não deve usar este script como sua solução principal para corrigir o seu pagespeed. Apenas quando tudo mais falhar, enquanto você estiver trabalhando ativamente em um novo site, uma solução como esta é aceitável!
Em termos mais técnicos, este script corre contra o navegador (e o preload scanner), então não há como dizer quais elementos lentos já terão sido acionados para download antes de o script ser ativado.

O script de otimização de pagespeed de último recurso

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 isso em produção! Use a versão 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