O que é "conteúdo acima da dobra" no Google Pagespeed?

132

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.

Glipt
fonte
49
A 'dobra' é onde a parte inferior da tela está no carregamento da página. Quando você acessa um site, qualquer conteúdo que você vê imediatamente sem rolar é "acima da dobra". Qualquer coisa que você precise rolar para baixo para vê-la "abaixo da dobra".
CaribouCode
21
Acima da dobra é um termo normalmente usado para jornais, também conhecido como conteúdo acima do qual o papel é dobrado horizontalmente. Normalmente, para web design, esse é o primeiro 600px aproximadamente (discutível dependendo de quem você perguntar). Não está se referindo a estilos (fontes, fundos etc.), ele está se referindo ao conteúdo, e o tipo de js que poderiam estar bloqueando renderização em que o conteúdo. Duvido que o Google esteja sugerindo o uso de estilos embutidos. Você pode realmente postar as sugestões que recebeu?
Christian
@Coop Por que não basta responder em vez de comentar?
Kolob Canyon

Respostas:

113

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.

Joshua Coady
fonte
@ Josué, eu fiz algo pelo "Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra" <noscript> ... </noscript>. Mas reflita apenas nos celulares. Não na área de trabalho. para este URL winni.in/cake-delivery-in-bangalore
V SH
2

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

NoWomenNoCry
fonte
Você pode esclarecer o que as porcentagens significam? Digamos que o PageSpeed ​​reporte que 55% do conteúdo acima da dobra pode ser renderizado sem aguardar o carregamento de folhas de estilo externas. O que significa que 45% do conteúdo acima da dobra é estilizado com regras de folhas de estilo externas. Mas esse não é o caso .
X-yuri
-1

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.

CowboyWillie
fonte
Isto está certo. Eles devem ser adiados ou assíncronos ou movidos para o rodapé / antes da tag de fechamento </body>, pois não são cruciais para a página. O código crucial, como o estilo da página principal ou o Bootstrap, deve ser carregado na parte superior da página ou você experimentará FOUC (Flash de conteúdo não estilizado), portanto, apenas o que pode ser feito sobre esses componentes cruciais é reduzi-los e mesclá-los em menos arquivos, para reduzir o bloqueio de renderização. Esse comentário é compatível com o comentário do CowboyWillie, que foi injustamente reduzido.
Tahi Reu