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 um consultor de Core Web Vitals, deparo-me com uma página incorrigível. Não é 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 simplesmente não há acesso e controle suficientes para melhorar o código do site, como se vê em sistemas de CMS mais fechados como WIX, HubSpot, WebFlow, etc. Ou, por último, quando o orçamento simplesmente não existe. 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 otimização de pagespeed de último recurso"

Quando você se encontra nessa situação difícil, este script é a 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 intercepta e substitui imediatamente o código lento por um código mais rápido.

O que ele faz:

• Intercepta todos os scripts de bloqueio de 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 faz com que este seja o método mais seguro para adiar todos os scripts da página.
• Carregamento lazy de imagens: loading="lazy" e decoding="async" são adicionados a todas as imagens. Isso adiará o carregamento dessas imagens até que estejam quase na viewport visível, juntamente com a atualização assíncrona do layout da imagem. Cuidado: você não quer carregar de forma lazy a sua imagem de LCP. Use a configuração prioImgs para excluí-la. Veja por que carregar a imagem de LCP de forma lazy prejudica a performance.
• Carregamento lazy de iframes. Assim como com as imagens, o carregamento lazy 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 carregamento lazy de imagens e scripts importantes. Para iframes, funciona ao contrário, ele só carrega de forma lazy os 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 jquery e ao seu script de menu
• prioImgs: Ignora o carregamento lazy para todas as imagens onde o nome, a classe ou o id da imagem correspondem.
  Exemplo: 'hero' corresponde tanto a <img id="hero" ..> quanto a <img src="hero.jpg">
• lazyFrames: Carrega de forma lazy apenas iframes onde o src do iframe corresponde à configuração.
  Exemplo: 'youtube|maps' carrega de forma lazy 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. Apenas quando tudo mais falhar, enquanto você estiver trabalhando 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), então não há como saber 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 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