Até recentemente, meu site (www.heatexchangers.ca) alcançava 98% no Google Page Speed. Havia algumas coisas sobre as quais eu não podia fazer nada, como a string de consulta das fontes da web. Fiquei muito feliz com isso, pois isso representava tudo o que eu podia fazer.
Recentemente, o Google adicionou outra coisa que afeta a pontuação de velocidade da página e agora recebo apenas 89% da velocidade da página e recebo esta sugestão:
- Elimine JavaScript e CSS externos de bloqueio de renderização no conteúdo acima da borda.
A sugestão para corrigir isso parece envolver trolling em todos os meus arquivos .css e .js e separar algumas partes deles e adicioná-los em linha ao meu html. Isso está me causando alguma confusão, pois fiquei com a impressão de que devemos manter o máximo possível de JS e CSS fora do HTML.
O que exatamente é o conteúdo "Acima da dobra"? Se houver alguns estilos, como fonte, cor de fundo, etc; então vejo que pode não ser um grande negócio incluir inline. Não consegui encontrar uma lista exata do que é isso.
fonte
Respostas:
Isso ocorre porque o Google alterou recentemente a ferramenta de velocidade da página para refletir melhor uma Web cada vez mais móvel. As redes de dados móveis têm características de desempenho diferentes das cabeadas ou wifi, portanto, é necessário fazer coisas diferentes para otimizar.
Acima da dobra (ATF) é simplesmente o valor da primeira tela - qualquer coisa que você não precise rolar para ver. Obviamente, isso varia de acordo com o dispositivo e sua orientação; portanto, você pode precisar generalizar e talvez encontrar algumas opções comuns viáveis, talvez uma voltada para smartphones, outra para tablets e outra para desktops maiores.
Quanto ao CSS de que eles estão falando, eles realmente pretendem que todo o CSS necessário para estilizar totalmente qualquer conteúdo que seja exibido no ATF. Para determinar o tempo de carregamento do seu conteúdo ATF, eles vão tirar uma captura de tela da versão final e compará-la visualmente à página à medida que ela carrega e, quando for semelhante o suficiente, eles consideram que o ponto em que o conteúdo ATF está carregado.
Esta é uma apresentação em vídeo do Google sobre este assunto:
http://www.youtube.com/watch?v=YV1nKLWoARQ
A ênfase está em fazer com que os usuários façam algo dentro do primeiro segundo. O raciocínio por trás da inserção do CSS para o conteúdo ATF diretamente no HTML reflete suas pesquisas sobre o desempenho de dados móveis, mostrando que, se o CSS não estiver lá, ele não será carregado em breve o suficiente para ficar dentro do primeiro segundo.
Eles também fornecem links para ferramentas que podem automatizar parte disso. Eu não tentei eles e YMMV.
fonte
as informações da página do Google informarão claramente quantos% de css referentes ao conteúdo acima da dobra está sendo carregado tarde demais e a página poderia ter sido renderizada anteriormente. Você pode mover partes do css para obter um resultado verde. Eu posso fazer isso por você: goo.gl/GsRxNc
um link do Google descrevendo 'acima da dobra' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
fonte
O conteúdo acima da dobra é a parte da página da web que é visível em uma janela do navegador quando a página é carregada pela primeira vez. O Google deseja ver o CSS embutido extraído do seu arquivo CSS principal e injetado na tag head, permitindo que tudo que você vê primeiro seja carregado primeiro.
source - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .
fonte
Eles se referem a js de bloqueio de renderização, como análise ou código de rastreamento, e é por isso que sugerem colocar esses scripts "carregue-me antes de tudo o mais" no rodapé, pois serão carregados assim que o usuário tiver o site na tela.
fonte