Otimizar carregamento de widgets

[andremw]

Postei no FB, mas como vi que a ideia eh discutirmos essas coisas aqui.. Aqui esta.

Galera, como otimizar o carregamento dos arquivos necessarios para exibir um "widget" que pode estar em qualquer lugar da pagina, dependendo de onde o autor da pagina o colocar?
Por exemplo, se o widget for colocado "above the fold", ou seja, logo no topo da pagina, eh necessario carregar seu conteudo (JS e CSS) o quanto antes.
Porem, se o mesmo widget for colocado no final (ou ate se ele nao for carregado), nao ha necessidade de carregar seu conteudo no começo da pagina.
Dessa forma, nao da pra definir um local fixo pra carregar os arquivos.
Alguem ja trabalhou com isso antes? Como os CMS que permitem esse tipo de "autoria" otimizam isso (se eh que otimizam rs)?
Eu nao consigo pensar em uma soluçao totalmente "generica", por conta do cenario dinamico. Mas, nesse caso, qual seria uma boa soluçao?

[leonardoelias]

Então eu coloco todos os meus arquivos CSS no head da pág. e os JS no em baixo. Compreendo a questão que cita, mas se for colocar algum carregamento do de JS no head, as dependências, tbm teriam que estar lá, e isso pode atrapalhar o rendering se não me engano pode acontecer mais reflows. Outro ponto os widgets usam muito o javascript ? Bom espero que tenha entendido sua pergunta 👍 haha

[felipefialho]

Cara, ótima questão heim?

Eu não mudo minha forma de desenvolver, assim como o @leonardoelias, coloco CSS no head e JavaScript no fim do body.

Porém vejo muita gente usar a estratégia de adicionar algumas partes principais do CSS direto inline no head, parece ser uma alternativa para projetos de longa escala. Porém a manutenção é chata, mesmo com alguns plugins que ajudam nessa solução.

O que realmente vai resolver esses problemas, e chegar perto do que você imaginou, é usar HTTP2, inclusive tivemos uma issue discutindo sobre isso -> #103

[leonardoelias]

Então, vejo que o React.js está indo por está vertente, com componets e seus css inline, e plugins que ajudam esse processo.

Concordo com você @lfeh acho que o uso do Http2 ajudaria e muito, porém, isso seria para um cara de infra.
Obs: Experiencia propriá. UHAUHAUHA

[vitor-mendrone-deel]

Acho que não seria tão performático por conta dos reflows, como disse o @leonardoelias, mesmo que cada componente seja perfeitamente isolado dos demais o browser vai precisar recalcular o layout.

Mas acho que a ideia vale o teste, criar uma solução assim não é um processo muito complexo, seria praticamente um lazyload de arquivos JS e CSS.

Hoje eu carrego o básico do CSS no header, apenas para evitar saltos e problemas de UX/UI nos primeiros instantes pós render e o resto do CSS é carregado de forma assíncrona, usando JS, tem me atendido bem e garantido boa performance.

[andremw]

@leonardoelias , sim, usam muito JS. A questao eh que ha alguns JS legados tambem, coisa inline no meio do HTML, o que ta zuando a performance. Entao to analisando a fundo e criando algumas tasks pra melhorar as coisas.

Optei por pelo menos inicialmente fazer esse approach padrao: CSS no e JS no fim do .

Valeu, galera!