O script GRATUITO de última esperança para otimização de pagespeed

O script GRATUITO de última esperança para otimização de pagespeed

Às vezes, como consultor de Core Web Vitals, me deparo com a página incorrigível. Não é que ela seja incorrigível porque eu não sei como corrigi-la! Não, ela é incorrigível porque corrigi-la significaria reescrever grandes partes de um site que já está 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 de CMS mais fechados como WIX, HubSpot, WebFlow etc. Ou, por fim, quando o orçamento simplesmente não existe. Isso 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 feita e paga.

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

Apresentando "O script de última esperança para otimização de pagespeed"

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 o código lento por um 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". Esse truque faz uso do fato de que todos os scripts modulares são adiados por padrão. Até mesmo scripts inline. Isso o torna o método mais seguro para adiar todos os scripts da página.
• Lazy load 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. Tenha 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 de iframes. Assim como 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 lazy load de imagens e scripts importantes. Para iframes funciona ao contrário, ele apenas faz lazy load dos 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 jquery e ao seu script de menu
• prioImgs: Pula o lazy load 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: 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 Google Maps.

Uso

Limitações

Como afirmei anteriormente, você realmente não deve usar este script como sua solução principal para corrigir seu pagespeed. Somente quando tudo mais falhar, enquanto você estiver trabalhando ativamente em um novo site, é que 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 do script ser ativado.

O script de última esperança para otimização de pagespeed

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 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