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





  • Estou tentando corrigir o mesmo problema!



  • Tb queria saber como!



  • +1 querendo



  • @Johnny-Demarch @Zurc-Store @camiloguimaraes @Fernando-Gomes

    Boa tarde...

    A resposta simples está em https://developers.google.com/speed/docs/insights/BlockingJS, mas não é muuuito esclarecedora.

    Esse erro é com relação ao bloqueio da carga da página pela execução de scripts. Infelizmente (e isso não é só na Xtech) muitos outros e-commerces não tratam com atenção esse problema. Vou tentar resumir aqui.

    Quando o navegador acessa um site, ele solicita o arquivo HTML e passa a renderizar (ler, entender o que há no arquivo e o que deve ser exibido).

    Cada vez que ele encontra um arquivo Javascript, ele pára completamente e obtém o arquivo javascript do servidor, interpreta todo o javascript para saber o que deve ser feito para, só então, continuar carregando o HTML. Isso deve ser feito, pois o Javascript tem o poder de "reescrever" blocos da página (o antigo document.write() que ainda é usado por algumas peças publicitárias, infelizmente) e por isso o navegador, para saber o que fazer, precisa carregar e interpretar.

    Igualmente prejudicial são blocos de código em tags <scripts> no meio da página. Imagine que se você tiver um javascript de 2kb. Se seu site tem 1000 páginas... você terá custo de banda desnecessário... e isso se torna um problema também quando usuários acessam suas diferentes páginas, pois cada vez terão de carregar os 2k desnecessariamente (isso faz diferença em mobile, viu Srs.)

    Como resolver:

    • Evitar ao máximo tags scripts antes do fechamento da tag <body>
    • Evitar códigos script no meio do documento que dependam de outros scripts, como p.ex. jQuery, pois necessitará que ele seja carregado antes (no topo do documento) e aí vc cai de novo no problema
    • Se possível ter um único carregador de scripts assíncrono na página. Eu recomendo o Lab.js https://github.com/getify/LABjs que usei por mais de 5 anos no portal que trabalhei e ainda continuam a usar por lá.

    Aos que minimizam o problema: a diferença sempre é notada pelo cliente, embora programadores sempre tentem desdenhar. Essas diferenças influenciam na experiência do usuário, que recorre mais vezes ao site que em se sentiu melhor (UX). Muitos de vocês possuem javascript do Facebook ou Google dentro dos site (analytics, página de curtida etc). E eles usam suas métricas para melhorar o serviço deles (o almoço não é de graça!) e claro, se notarem que as pessoas demoram muito para usar sua página, ou desistem dela... não vão dar prioridade a vocês nas suas pesquisas e sugestões.