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/