Bloqueio de renderização acima da borda

O Google PageSpeed Test está reclamando de bloqueio acima da borda.
Eu tinha mesmo o modernizr no head e sei que isso poderia dar problemas mas ele está me enchendo no CSS. Como resolver isso? Não tem cabimento colocar o css no final do body assim como o JS.

Oi Danylo!

Essa prática tem a ver com otimização do Critical Path (caso vá procurar algo sobre o assunto).
O CSS é blocante assim como JS, mas como vc disse, não faz sentido coloca-lo no fim do body.

A boa pratica atual reza que devemos separar o CSS em dois: o crítico, necessário para o layout acima da dobra; e o restante, que diz respeito ao resto da pg. E aí o CSS crítico a gente coloca inline no head numa tag style; e o css secudario a gente carrega de forma assincrona (por exemplo com loadCss).

Abraço!

Sem querer fazer um jaba forte demais, esse tipo de otimização do Critical Path é o que abordo nesse curso de performance web da Alura.

1 curtida