7

Bom, ultimamente tenho visto, em artigos sobre performance, alguns hangouts, e também nos grupos em redes sociais, sobre um tal de "bloqueio de renderização do conteúdo acima da borda". Mas o que é esse erro ?

Bom, em resumo, esse erro é causado, porque ao carregar arquivos no header da página html, como de costume para o CSS, a renderização do código pode ser interrompida para baixar os arquivos requisitados (caso sejam mais do que 2 arquivos, isso já começa a atrasar um pouco), isso é dado pois o protocolo HTTP só consegue processar 2 conexões de cada vez, então se você carrega o seu HTML, com 3 arquivos de CSS ou mais (existem projetos que conseguem usar mais de 10 arquivos de CSS até), a página para de ser carregada/renderizada, para que os arquivos solicitados sejam baixados, até 2 por vez.

Como corrigir isso de forma fácil e simples, e como melhorar minha performance com mais técnicas ?

1 Resposta 1

12

Bom, em primeiro lugar, após muitas pesquisas, alguns pontos cruciais que encontrei foram:

  • Não separe seu CSS por componentes (header.css, footer.css, body.css, grid.css, galeria.css);
  • Evite usar compressores de forma desnecessária (por que usar um compressor em um código de 30kb?);
  • A recomendação de não colocar CSS inline dentro da página HTML não é pra ser levada ao pé da letra (explicada mais abaixo com os exemplos);
  • Colocar links para o CSS dentro do header, pode-se de certa forma se considerar uma má prática (não em todos os casos, como um CSS de +/- 80kb por exemplo).

Enfim, após esses pontos, vou explicar algumas formas de corrigir o problema com o bloqueio, para que você possa rankear melhor no insights e outros sites que testam a performance:

1 - Compressão do CSS e "descomponentizar para recomponentizar"

Para começar a melhora de performance do seu código, uma minificação do código e uma melhor separação são a chave, não entrarei muito em detalhes sobre a minificação, mas para a "descomponentização e recomponentização", o melhor é, você identificar todos os padrões do seu código, separar o que é prioridade, como por exemplo, o código de um menu, que é o mesmo em todas as páginas, ou o de um footer, o grid que você cria para seu site, colocá-los todos dentro de um arquivo, normalmente utilizo o "padroes.css".

Os estilos próprios de cada página, serem separados com o nome da própria página (por exemplo: index.css, sobre.css), mas somente os padrões únicos de cada página, aqueles que são de umas páginas, mas não de outras, pode-se usar algo como "sub-padrões.css" ou algo assim, isso pode diminuir consideravelmente o número de requisições por página (e tudo isso vale pro javascript também, os comentários servem para a organização do código, você pode e consegue componentizar padrões dentro de um único arquivo)

Exemplo:

.yellow{font-size:1em;}
.blue{font-size:1em;}
.red{font-size:2em;}
.green{font-size:2em;}

Você transforma para:

.yellow,.blue{font-size:1em;}
.green,.red{font-size:2em;}

Ai você vê que, todas as páginas usam o green e red, você as separa no arquivo padroes.css, enquanto o yellow e blue, ficam no arquivo da página que os utiliza

2 - CSS inline (dentro do HTML):

"Ah, essa eu nem leio porque já falaram que é errado fazer isso".

Primeiramente, se é errado ou não, depende do tamanho do projeto, é claro que não vamos colocar 500kb de CSS dentro do corpo do HTML, mas se fosse realmente algo restrito, não existiria a tag , e é justamente sobre o uso dela que iremos falar.

Vamos supor que temos o seguinte código dentro de index.css:

.grid-items{align-self:flex-end;flex-grow:1;}
.green,.red{font-size:2em;}

Supondo que, esse seja o padrão primário que sua página deveria receber antes de qualquer outro estilo. ao invés de utilizarmos uma requisição para puxar os padrões, podemos colocá-los no html usando a tag citada lá em cima, ficando algo assim:

<style>
    .grid-items{align-self:flex-end;flex-grow:1;}
    .green,.red{font-size:2em;}
</style>

"Mas não é errado ?" - Não se você não encher com código desnecessário, e também, o próprio Google diz em sua documentação sobre performance, que, priorizar o código e colocar a prioridade inline dentro do html, é a forma correta

Prós: Melhoria no carregamento da página.

Contra: dificuldade na manutenção, pois o mesmo CSS de padrão é aplicado a mais de uma página.

  • Como corrigir o contra ? - Caso você use páginas em .php, é bem simples resolver o problema, basta que, ao invés de apagar o seu padroes.css e colocar os estilos dentro da tag , você abra um espaço para o php dentro dela e utilize o file_get_contents() especificando o path até seu css (algo como "css/padroes.css")

  • Mas surge outro contra: é quase improvável conseguir colocar o conteúdo de duas folhas de estilo na mesma tag e muito provavelmente, mesmo criando outra, ainda dará errado.

3 - Colocar todos os scripts e links após a tag <html>:

Como assim ? Isso não foge a recomendação de que o CSS tem de ficar no header, e o javascript no footer ?

Bom, depende de quais são as fontes que recomendam isso, pois o próprio Google recomendou o estilo inline. enfim, para resolver o último problema (aquele do bloqueio da renderização), vamos apenas precisar passar todas as requisições de scripts e arquivos css para o fim do documento, após o fechamento da tag html, pois assim, a página toda poderá ser renderizada, e apenas após a renderização completa, os arquivos são baixados.

Contras: Dependendo do tamanho do projeto, pode ser que apenas o html apareça na tela por um curto tempo, até os estilos serem renderizados depois da página.

Aqui encerram-se as dicas de performance, mas como um pequeno Bônus, seguem alguns links que podem ajudar um pouco mais:

-Compactação de imagens sem perda de qualidade

http://compressjpeg.com/pt/

-Verificador do google para performance

https://developers.google.com/speed/pagespeed/insights/?hl=pt-BR

Otimizações na web e carregamento assíncrono

http://blog.caelum.com.br/otimizacoes-na-web-e-o-carregamento-assincrono/

2
  • 1
    Quase todos os pontos contras já foram resolvidos por ferramentas de automação (webpack, grunt, gulp)
    – Cleiton
    Commented 15/03/2017 às 21:26
  • 1
    Sim, mas ainda existe uma grande porção de desenvolvedores, que ainda não utilizam essas ferramentas, então precisamos de formas de resolver esses problemas tranquilamente Commented 15/03/2017 às 23:50

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 .