Eu tenho usado as informações do Google PageSpeed para tentar melhorar o desempenho do meu site e, até agora, ele se mostrou extremamente bem-sucedido. Coisas como adiar scripts funcionaram lindamente, já que eu já tinha uma versão interna do jQuery .ready()
para adiar scripts até que a página fosse carregada completamente, tudo que eu precisava fazer era alinhar essa função específica e mover os scripts completos para o final da página. Isso funcionou muito bem.
Mas agora me vejo olhando o ponto amarelo restante na lista de verificação: "Eliminar CSS de bloqueio de renderização no conteúdo acima da dobra".
A maneira como meu CSS é configurado é ter um _.css
arquivo global que contenha estilos que se apliquem à estrutura da página em geral ou que sejam usados em mais de um ou dois lugares no site. A maioria das páginas possui um arquivo CSS associado (por exemplo, party.php
possui party.css
) contendo estilos específicos para essa página específica. Todos os arquivos CSS são armazenados em cache indefinidamente, conforme anexo /t=FILEMTIME
aos nomes dos arquivos (e os removo posteriormente com .htaccess) para garantir que os arquivos sejam atualizados quando forem alterados.
De qualquer forma, o Google recomenda incluir estilos críticos necessários para o conteúdo acima da dobra. O problema é ... bem, dê uma olhada nesta captura de tela: http://prntscr.com/1qt49e
Como você pode ver ... TODO o conteúdo está acima da dobra! As pessoas odeiam a rolagem, especialmente em um jogo que envolve o carregamento de muitas páginas. Por isso, projetei o site para caber em uma tela (assumindo uma resolução suficientemente boa). Isso significa que ... TODOS os estilos se aplicam ao conteúdo acima da dobra! Então ... existe alguma solução? Ou eu estou preso com essa marca amarela em uma pontuação quase perfeita?