PageSpeed do Google

Front-end

Off Topic

SEO

24/11/2016

Fala galera, vocês conhecem essa ferramenta?
Ela ajuda bastante na otimização das pagina do site, porem to com dificuldades em uma validação que ele diz possível melhorar "Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda" não to entendendo muito bem.. Alguem sabe do que se trata?
Pedro Philipe

Pedro Philipe

Curtidas 0

Melhor post

Fernando Gaspar

Fernando Gaspar

25/04/2017

Fala Pedro, beleza brother?

Cara isso é uma batalha constante com o PageSpeed, hahaha

"Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda"

No caso eliminar o conteúdo da borda é você remover todos os includes css e js que ficam acima da tag body, pois Page Speed, considera que você primeiro deve carregar todo o html que é parte estrutural do seu site, para depois carregar os demais scripts.



Com os arquivos JS o melhor a se fazer é realmente inserir o conteúdo abaixo do footer, porem com o css não temos como fazer tal implementação :(



Temos um DevCast falando exatamente sobre essa questão: www.devmedia.com.br/como-otimizar-suas-paginas-web-com-pagespeed/38053
Depois dá uma olhada, forte abraço!
GOSTEI 6

Mais Respostas

Samuel Vicente

Samuel Vicente

24/11/2016

Haha, vou apenas reforçar o que o Gaspar disse.

De fato é uma batalha constante com o PageSpeed. Apesar de eu não ser desenvolvedor, entendo um pouco de JavaScript.

Os desenvolvedores que trabalham comigo reclamam bastante desse item em particular que o PageSpeed aponta.

A orientação que o próprio PageSpeed dá deve te ajudar a resolver esse problema.
GOSTEI 3
Fernando Henrique

Fernando Henrique

24/11/2016

Ótimas respostas! Nem precisa complementar!

Ficou esclarecido Pedro?
GOSTEI 0
Calebe Menezes

Calebe Menezes

24/11/2016

Fala Pedro, beleza brother?

Cara isso é uma batalha constante com o PageSpeed, hahaha

"Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda"

No caso eliminar o conteúdo da borda é você remover todos os includes css e js que ficam acima da tag body, pois Page Speed, considera que você primeiro deve carregar todo o html que é parte estrutural do seu site, para depois carregar os demais scripts.



Com os arquivos JS o melhor a se fazer é realmente inserir o conteúdo abaixo do footer, porem com o css não temos como fazer tal implementação :(



Temos um DevCast falando exatamente sobre essa questão: www.devmedia.com.br/como-otimizar-suas-paginas-web-com-pagespeed/38053
Depois dá uma olhada, forte abraço!



Concordo com o Fernando!
GOSTEI 0
Fernando Gaspar

Fernando Gaspar

24/11/2016

Fala Pedro, beleza brother?

Cara isso é uma batalha constante com o PageSpeed, hahaha

"Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda"

No caso eliminar o conteúdo da borda é você remover todos os includes css e js que ficam acima da tag body, pois Page Speed, considera que você primeiro deve carregar todo o html que é parte estrutural do seu site, para depois carregar os demais scripts.



Com os arquivos JS o melhor a se fazer é realmente inserir o conteúdo abaixo do footer, porem com o css não temos como fazer tal implementação :(



Temos um DevCast falando exatamente sobre essa questão: www.devmedia.com.br/como-otimizar-suas-paginas-web-com-pagespeed/38053
Depois dá uma olhada, forte abraço!



Concordo com o Fernando!


Obrigado Calebe!
GOSTEI 0
Lucas Santos

Lucas Santos

24/11/2016

Fala pessoal, ótimas respostas , bem informativo.

Eu so fiquei com uma duvida, qual seria a melhor alternativa para o caso do CSS ? pois se colocar no final impacta o layout da pagina, que vai carregar "desfigurado" para so depois ser corrigido e se carregar no início tem esse impacto no pagespeed. Qual seria então a melhor solução ?

desde ja agradeço a todos.

um abraço
GOSTEI 0
Dayan Barros

Dayan Barros

24/11/2016

Fala pessoal, ótimas respostas , bem informativo.

Eu so fiquei com uma duvida, qual seria a melhor alternativa para o caso do CSS ? pois se colocar no final impacta o layout da pagina, que vai carregar "desfigurado" para so depois ser corrigido e se carregar no início tem esse impacto no pagespeed. Qual seria então a melhor solução ?

desde ja agradeço a todos.

um abraço


Fala Lucas.

Bem, não sou expert nisso, mas você pode colocar um loading para não mostrar o conteúdo enquanto ele lê o CSS.

Abs
GOSTEI 0
Raphael Alves

Raphael Alves

24/11/2016

Opa, tem uma técnica de CSS chamada Above the folding, onde você tem todo o css que aparece "antes da dobra", no caso seria o css que aparece antes de você dar o primeiro scroll, escrito dentro de um style no topo do próprio html, com isso ele é carregado sem fazer requisição e você pode fazer as requisições restantes no final do html.

Abs.
GOSTEI 0
Dayan Barros

Dayan Barros

24/11/2016

Opa, tem uma técnica de CSS chamada Above the folding, onde você tem todo o css que aparece "antes da dobra", no caso seria o css que aparece antes de você dar o primeiro scroll, escrito dentro de um style no topo do próprio html, com isso ele é carregado sem fazer requisição e você pode fazer as requisições restantes no final do html.

Abs.


Essa técnica é muito boa mesmo, mas eu só faria ela na home do site, porque da muito trabalho.

Abs
GOSTEI 0
POSTAR