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

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

Às vezes, como consultor de Core Web Vitals, me deparo com uma página sem solução. Não é que ela não tenha solução porque eu não sei como consertá-la! 
Não, ela não tem solução 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 CMS mais fechados (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.

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 desesperada de pelo menos melhorar um pouco o pagespeed até que você possa construir algo melhor. Ele funciona de forma inteligente aproveitando o Mutation Observer. O script observa enquanto o Document Object Model do seu site é 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 de bloqueio de 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 o torna 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 na janela de visualização visível, juntamente com uma atualização assíncrona de layout de imagem.
• Lazy load de iframes. Assim como nas 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 ignorar o adiamento ou o lazy loading de imagens e scripts importantes. Para iframes, funciona de maneira oposta, ele apenas aplica o lazy load 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. Veja 

• prioScripts: Ignora o adiamento de scripts onde o src corresponde à configuração.
  
• Exemplo: 'jquery|menu' corresponde ao seu jquery e ao script do seu menu
• prioImgs: Ignora o lazy loading de 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: Aplica lazy load apenas nos 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 anteriormente, você realmente não deve usar este script como sua solução principal para corrigir o seu pagespeed. Somente 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 scanner de pré-carregamento), portanto, 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 versão minificada!

!function (cfg) {

    // Regexify config or nullify
    ['prioScripts', 'prioImgs', 'lazyFrames'].forEach((e) => {
        cfg[e] = cfg[e] ? new RegExp(cfg[e], "i") : null;
    });

    t0 = performance.now();

    /* Watch mutated nodes */
    const mutator = new MutationObserver((e) => {
        e.forEach(({ addedNodes: e }) => {
            e.forEach((e) => {
                switch (e.nodeType) {
                    case 1:
                        switch (e.tagName) {
                            // defer scripts by adding type="module", excusive test on src
                            case "SCRIPT":
                                if (!cfg.prioScripts || !cfg.prioScripts.test(e.src)) {
                                    let type = e.getAttribute("type");
                                    if (!type || type === "text/javascript") {
                                        e.setAttribute("type", "module");
                                    }
                                }
                                break;

                            // lazy load images, excusive test on outerHTML for classname, id etc etc
                            case "IMG":
                                console.log(e.outerHTML);
                                if (!cfg.prioImgs || (!cfg.prioImgs.test(e.outerHTML) && !e.getAttribute("loading"))) {
                                    e.setAttribute("loading", "lazy");
                                    e.setAttribute("decoding", "async");
                                }
                                break;

                            // lazy load iframes, inclusive test on src
                            case "IFRAME":
                                if (cfg.lazyFrames.test(e.src)) {
                                    e.setAttribute("loading", "lazy");
                                }
                                break;
                        }
                        break;
                }
            });
        });
    });


    // Check for IE
    if (!/MSIE|Trident/.test(navigator.userAgent)) {
        mutator.observe(document.documentElement, { childList: true, subtree: true });
        document.addEventListener("DOMContentLoaded", () => {
            mutator.disconnect();
            console.log("I quit after watching for " + (performance.now() - t0) + " ms");
        });
    }
}({
    prioScripts: 'jquery',
    prioImgs: 'hero',
    lazyFrames: 'youtube|maps',
});