13

Analizando link no PageSpeed ocorreu a seguinte alerta

Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Layout básico

 <!DOCTYPE html>
 <html lang=pt-br>
 <head><meta charset=utf-8>
 <title>TESTE</title>
 <meta name=viewport content="width=device-width, initial-scale=1">
 <link rel="shortcut icon" href=favicon.ico>
 <link rel=stylesheet href="style.css">
 </head>
 <body>
 <div class=header>
 <div class=container>
 <h1 class=header-heading>Titulo</h1>
 </div>
 </div>
 <div class=nav-bar>
 <div class=container>
 <ul class=nav>
 <li><a href="#">menu1</a></li>
 <li><a href="#">menu2</a></li>
 <li><a href="#">menu3</a></li>
 </ul>
 </div>
 </div>
 <div class=content>
 <div class=container>
 <div class=main>
 <h1>Page title</h1>
 <hr>
 <h1>Heading level 1</h1>
 </div></div></div>
 </body>
 </html>
8
  • 1
    Mas você não pode colocar os outros arquivos no final da página após o JQuery? Commented 13/02/2016 às 0:50
  • @renan Se eu chamar jquery no inicio funciona, só não válida no PageSpeed. No final da página como o Google recomenda a página não carrega como esperado, então tentei atrasar o carregamento mas não deu certo entendeu?
    – User2208
    Commented 13/02/2016 às 1:34
  • Eu entendi, mas o que eu perguntei foi: Você não pode colocar os arquivos que dependem do jQuery no final da página também? Após ele, por exemplo: <script src='jquery.js'></script> <script src='scriptQueDependeDoJquery.js'></script>. Commented 13/02/2016 às 1:42
  • (function($){ $('#exibir').on('click', function(){ $('.menu').toggleClass('hidden'); }); })(jQuery) ---> essa parte é para mostrar o menu no layout se ficar em baixo no rodapé não aparece nada
    – User2208
    Commented 13/02/2016 às 2:19
  • Chegou a testar a minha resposta? Conseguiu passar no PageSpeed?
    – Syzoth
    Commented 8/03/2016 às 23:49

2 Respostas 2

10

Javascript

Isto faz a pagina desaparecer porque falta um </script> ou por causa do document.write dentro de onload:

<script>
var async;
function tempo() {
async = setTimeout(carregar, 2000);
}
function carregar() {
document.write(unescape("%3Cscript type='text/javascript' src='jquery.js'%3E %3C/script%3E"));
}

<body onload="tempo()">

não use o document.write, use o document.body.appendChild:

<script>
window.onload = function() {
    var js = document.createElement("script");
    js.src = "js/jquery.js";
    js.async = true;
    document.body.appendChild(js);
};
</script>
</head>
<body>

Outra coisa você pode fazer simplesmente assim, pois mesmo que dependa que o jQuery seja carregado antes ainda sim não iria funcionar, porque você estará carregando em async, então faça assim (devido ao usar async não é necessário ir dentro de <body> pode colocar dentro de <head> mesmo):

<script>
//Esta função carrega os arquivos javascript
function loadJs(url, callback)
{
    var added = false, js = document.createElement("script");

    //Verifica se o callback é uma função
    if (typeof callback === "function") {
        var isReady = false;

        //Executa se for carregado no onload ou readystatechange
        function readyExec()
        {
              if (isReady) return;

             //Bloqueia execução repetida do callback
             isReady = true;

             //Chama o callback
             callback();
        }

        js.onload = readyExec;

        /* Internet explorer (http://stackoverflow.com/q/17978255/1518921) */
        js.onreadystatechange = function() {
            if (js.readyState === "complete" ||
                js.readyState === "loaded")
            {
                readyExec();
            }
        };
    }

    js.async = true;
    js.src = url;

    function trigger()
    {
         if (added) return;

         added = true;

         document.body.appendChild(js);
    }

    if (document.readyState !== "loading") {
        trigger();
    } else {
        document.addEventListener("DOMContentLoaded", trigger);
    }
}

/*
Coloque desta maneira pra carregar primeiro o jquery,
depois de carregar ele carrega os demais arquivos, pois
geralmente precisamos do jquery por alguma função nos
outros arquivos
*/

loadJs("js/jquery.min.js", function() {
    loadJs("js/plugin1.js");
    loadJs("js/plugin2.js");
    loadJs("js/outros-scripts.js");
});
</script>

CSS

Já o CSS podemos fazer desta maneira conforme o link http://keithclark.co.uk/articles/loading-css-without-blocking-render/ cita:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>

No entanto este método parece não funcionar nos Android inferiores ao 4.4 e alguns navegadores parece que ainda tem problema de bloqueio de renderização quando existe o none, então poderia tentar algo assim:

<script>
function loadCss(css) {
    var added = false;

    function trigger()
    {
        if (added) return;

        added = true;

        var css = document.createElement("link");

        css.onload = function() {
            document.body.appendChild(css);
        };

        css.rel = "stylesheet";
        css.src = css;
    }

    if (document.readyState !== "loading") {
        trigger();
    } else {
        document.addEventListener("DOMContentLoaded", trigger);
    }
}

loadCss("css/seu_css.css");
loadCss("css/seu_outro_css.css");
</script>

Dicas extras

Algo importante a se fazer é combinar arquivos CSS em um único arquivo (o mesmo vale para o JS), vai depender da linguagem ou tecnologia back-end, segue algumas ferramentas/plugins úteis pra automatizar isto:

Fora isto vale muito a pena usar cache para os arquivos estáticos e também o código 304 de status HTTP, veja mais detalhes aqui:

2
  • Fiz o código a cima do js e gerou o seguinte erro; Uncaught TypeError: Cannot read property 'appendChild' of null O que poderia ser? Commented 4/03/2018 às 18:01
  • 1
    @HugoNascimento ambos códigos revisados
    – Syzoth
    Commented 4/03/2018 às 18:59
7

Otimização no carregamento de recursos é algo muito, muito complicado, dependendo do estado do sistema e do objetivo que você quer alcançar.

Não está muito claro para mim seu objetivo, isto é, se você quer apenas fazer sua página passar bem numa ferramenta ou se você quer realmente melhorar a experiência do usuário no sistema, o que vai depender muito de como o sistema funciona.

Definindo objetivos e prioridades

Em termos gerais, se você tem um HTML gerado dinamicamente por alguma linguagem no lado do servidor, você pode querer mostrar essas informações o mais rapidamente possível, sem pausas para execução de scripts ou para renderização do CSS, e postergar estes até para depois. Isso pode ser feito porque o usuário consegue ler as informações da tela, mas em média, ele vai demorar um segundo ou mais para interagir com a tela, portanto o código que adiciona eventos e outras funcionalidades pode esperar um pouco para dar uma sensação de fluidez no carregamento.

Entretanto, isto nem sempre é verdade. Muitas vezes algumas funcionalidades críticas precisam estar presentes sempre e cabe aos desenvolvedores decidirem quais funcionalidades entram de forma síncrona e quais podem ser postergadas assincronamente ou mesmo mais tarde.

Técnicas para melhorar o desempenho do CSS

CSS geralmente não é o problema porque ele já é carregado de forma assíncrona.

Entretanto, algumas vezes ele pode se tornar um problema quando os assets ficam muito grandes.

A melhor forma que eu conheço de otimizar isso é separar o que é essencial e colocar no topo da página e deixar o que não é essencial para depois ou ainda para ser carregado assincronamente.

Além disso, estilos específicos que servem apenas para uma página podem ser colocados inline ou em estilos separados.

Uma boa organização seria assim:

  1. Estilo comum para todo o sistema
  2. Estilo específico para a página
  3. Estilo específico para o usuário, se houver

Enfim, aqui organização é tudo.

Isso porque você não quer postergar muito o carregamento do CSS, pois em geral é algo que faz falta na interface.

É importante ainda lembrar que uma boa organização melhora o uso do cache tanto pelo navegador quanto pelo CDN, afinal, você separa o que muda mais do que muda menos. Isso ajuda a que seu site tenha um tempo de carregamento e renderização menor, demorando apenas um pouco mais no primeiro acesso.

Técnicas para melhorar o desempenho do JavaScript

Otimização de scripts, além da organização, exigem um conhecimento mais profundo das muitas opções disponíveis e de como os navegadores funcionam.

Idealmente, você quer que os scripts comecem a ser carregados o mais cedo possível, mas somente executem, pausando a página, depois que o conteúdo crítico já foi exibida.

Uma forma simples de fazer isto é usando os atributos async e defer que, respectivamente:

  • Executam os scripts carregados assim que baixados em qualquer ordem (async)
  • Executam os scripts carregados depois de terminar de exibir a página, na ordem em que eles aparecem na página (defer)

Qual é o melhor? Depende. async é melhor quando você quer que a funcionalidade adicionada pelo script esteja presente assim que possível, provavelmente algo crítico. defer é melhor para algo que não vale a pena pausar a renderização da página.

Mas dizer que apenas usar tais atributos nas suas tags <script> é ser muito simplista.

Dificuldades em scripts assíncronos

Os problemas começam porque inline scripts não podem ser assíncronos nem deferidos.

Portanto, se eles dependem de algum script incluído de fonte externa você precisa de algum mecanismo para que eles executem somente quando tais dependências forem satisfeitas.

O mesmo vale para scripts assíncronos, que podem executar em qualquer ordem.

Uma forma simplista de resolver o problema é usar o evento window.onload. Só que tem um sério problema com esta abordagem: ela posterga tudo até o fim, o que significa que mesmo as funcionalidades críticas terão que esperar tudo da página ser carregado.

Um mecanismo melhor é escrever seu JavaScript modular, usando padrões como AMD, ES6, SystemJS. Módulos JavaScript geralmente são definidos em termos do que eles definem (define) e do que eles dependem (require).

Então, você adiciona um pequeno script loader no começo da página (síncrono) que é capaz de identificar quando as dependências de um certo script estão satisfeitas e executa ele assim que possível.

Um script loader não necessariamente significa que ele vai baixar os scripts sob demanda, mas que ele mantém um registro do módulos presentes na página e consegue saber quando eles podem ser executados.

Dentro dos módulos, você ainda pode adicionar eventos onload para postergar a execução do que não é tão importante.

Ou ainda pode usar o modo lazy mais agressivo, que é carregar o código de uma funcionalidade somente quando ela for ativada pelo usuário. Por exemplo, imagine que no seu sistema existe uma janela Popup complexa aberta quando o usuário clica num botão que está presente em todas as páginas. Você não quer que o código seja carregado em todas as páginas, porque a janela não é usada sempre. Então você pode fazer o carregamento do código e dos estilos usados na popup dentro do evento click do botão. Da primeira vez que o usuário clicar, vai demorar um pouco mais para abrir, até os assets entrarem no cache, mas vai permitir que o site seja mais rápido no geral.

No seu caso, que parece não haver muitos scripts, eu transformaria todos eles em módulos AMD e assim usaria o async ou defer em todos os scripts.

Se você tem inline scripts que não pode transformar em um módulo, uma técnica para postergar a execução deles é mudar o type, exemplo:

<script type="delay/javascript">

E depois você cria um módulo que avalia o conteúdo dessas usando eval (não é pecado quando você sabe o que está fazendo).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .