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

[Souza Brasil]

Meus caros amigo...

Como posso resolver este problema no meu site

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

não sei o que fazer.. já tentei de tudo e não consegui

[Jofran Lirio]

Cara, geralmente aparece essa mensagem porque vc está carregando algum javascript no head do seu site. Tente tirá-los de lá e carregá-los no footer. Manda o link do seu site se ele estiver online.

[wpmidia lab]

Na própria pagina do Page Speedy mostra como consertar os problemas.

--
Regras do Grupo: http://bit.ly/1lOeYqs
 
Projeto WordPress: http://br.wordpress.org/
Temas: http://wordpress.org/extend/themes/
Plugins: http://wordpress.org/extend/plugins/
Grupo no Facebook: http://www.facebook.com/groups/wordpress.brasil/
---
Você recebeu essa mensagem porque está inscrito no grupo "WordPress Brasil Lista" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para wordpress-bras...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

--

Míriam de Paula 

Twitter: @miriamdepaula

desenvolvimento web
http://wpmidia.com.br
twitter: @wpmidia

WordPress Brasil no Facebook:

http://www.facebook.com/groups/wordpress.brasil

OpenCart Brasil no Facebook:
http://www.facebook.com/groups/opencart.brasil/

Hospedagem de Qualidade é na HostGator

[jroque]

Uma forma de forçar, caso esteja usando um tema pronto e seja complicado de mexer.

Pode ajudar a testar (nem todo tema - principalmente os templates prontos) funcionam bem assim.

https://gist.github.com/jroqueweb/5ae7a66b0048b5bdc1f8

[João Carlos Orquiza]

Souza,

No W3TC desabilitei Minify JS e CSS.

Instalei

WP Deferred Javascripts (só instalar, não há nada para configurar)
https://wordpress.org/plugins/wp-deferred-javascripts/

e

Async JS and CSS
https://wordpress.org/plugins/async-js-and-css/

No Async, ativei:

• Load Javascript asynchronously
• Load CSS asynchronously
• CSS loading method > (default)Inserting all CSS styles inline into the document HEADER
• Minify CSS
• Remove "?ver=XXX" part from URLs

Veja o resultado:

https://developers.google.com/speed/pagespeed/insights/?url=www.orientacoesmedicas.com.br
http://gtmetrix.com/reports/www.orientacoesmedicas.com.br/UZszUQYx

Além disso, para não ter problema com o tamanho das imagens, só uso .gif

[Eduardo Kraus]

https://www.youtube.com/watch?v=QisqYBIrsdo

Muito prazer, sou Eduardo Kraus
Teacher and loves Programming
Meu Blog: php.eduardokraus.com
Meu Youtube: www.youtube.com/user/ProfEduardoKraus
Meu Facebook: www.facebook.com/ProfEduardoKraus

--

[Antonio Cezar - Graduando Direito Uniara Araraquara]

Parabéns, Eduardo.

"Locutor Antonio Cezar"
O maior colecionador [RankBrasil] em Datas Comemorativas e seus porquês.

Site de Datas Comemorativas: http://diasde.com/

@datasfestivas no Twitter: https://twitter.com/datasfestivas/

@datasfestivas no Facebook: https://www.facebook.com/datasfestivas/

@datasfestivas por E-Mail: datasfestiv...@googlegroups.com

Fones para contatos: 0 código da operadora (16)

• 3392-1822 ou 3392-5965 - Vivo Fixo;
• 99701-2232 - Vivo Móvel;
• 98227-2989 - Tim Móvel;
• 98845-4689 - Oi Móvel;
• 99293-0730 - Claro Móvel.

Eduardo Kraus escreveu:

[Souza Brasil]

Site: Revista Mil Graus

Eu tentei com os arquivos dos João Carlos Orquiza Indicou.. mas mesmo assim ainda aparece 

veja no link abaixo
https://developers.google.com/speed/

Em quinta-feira, 28 de maio de 2015 11:50:41 UTC-3, Souza Brasil escreveu:

[Eduardo Kraus]

E é possível:

https://developers.google.com/speed/pagespeed/insights/?url=www.eduardokraus.com&tab=desktop

https://developers.google.com/speed/pagespeed/insights/?url=www.escolaemcasa.com.br&tab=mobile

Muito prazer, sou Eduardo Kraus
Teacher and loves Programming
Meu Blog: php.eduardokraus.com
Meu Youtube: www.youtube.com/user/ProfEduardoKraus
Meu Facebook: www.facebook.com/ProfEduardoKraus

--

[João Carlos Orquiza]

Fantástico seu trabalho do Eduardo Kraus !!!

Souza Brasil,

O que sugeri é baseado em tentativa e erro. Conheço o básico do básico de WordPress.

Analisando o desempenho de Revistas Mil Graus no PageSpeed Insights, parece que se você usar todos os recursos Minify do W3TC (W3 Total Cache)  tende a conseguir resultados bem melhores no PageSpeed, mesmo não conseguindo eliminar JS e CSS de bloqueio de renderização.

Outro caminho, ou seja, mantendo as sugestões que passei, é habilitar apenas o JS no Minify do W3TC, com as opções Combine only e Non-blocking using "async"

Além disso, outros plugins que podem contribuir são:

Google Webfont Optimizer

Use Google Libraries

[Gustavo Tadeu]

Eduardo, interessante sua explicação.

No caso, quando usamos um template pronto, estamos na mão de quem desenvolveu, correto? Ou seja, se o cara não tomou esse cuidado, fica muito difícil para nós corrigirmos?

Como você procederia? Editando o template ou usando child theme ou algo assim?

[Eduardo Kraus]

Não só templates. Plug-in também misturam HTML, JS CSS numa salada mista que faz com que o bloqueio seja muito pior que simplesmente adicionar tudo no header.

Os Plug-ins de Carrossel, Sliders são os piores ao fazer isso.

Por exemplo, anexo esta dois prints que tirei de um SITE feito com Wordpress. O primeiro que veio a minha mente agora e vejam que JS tem 20 espalhado pelo site e CSS tem 9 espalhado pelo site. 

Foi usado um template pago e o thema só adicionou um único JS dos 20 da página e o adicionou ao final do arquivo.

[Gustavo Tadeu]

Você desenvolve os próprios temas ou usa prontos?

Conhece fornecedores que tenham temas amigáveis ao pagespeed?

--

[Eduardo Kraus]

Infelizmente o pior caso vem do próprio CORE do Wordpress. Enquanto o Wordpress em si não se coçar melhorar significativamente o desempenho, não adianta themas com melhor desempenho.

Tanto que thema não manda quase nada.

Como falei em outro post, eu trabalho muito com moodle e vejo a diferença gritante entre estes dois Open Source.

O primeiro é rígido em termos de plug-ins e orientação a objeto. Tem que seguir muitas regras para poder publicar um plug-in em seu repositório o que faz com que os que estão la sejam bons e confiáveis e de fácil manutenção.

O segundo não possui sequer Orientação a Objetos (https://groups.google.com/d/msg/wordpress-brasil/L3P5ctF2njs/IuzO4uCKzlYJ) e não possui regras rígidas com relação a qualidade do código a ser publicado. Então cada um faz a sala que quer.

Então, enquanto o Wordpress Core não mudar, não adianta buscar themas... 

Eu, em outro post falei que estava fazendo um plug-in, foi parado, comecei de novo e parei de vês pelo simples fato da bagunça que as pessoas fazem em themas e plug-ins. É simplesmente impossível prever o que cada um fez fora do comum ao montar um plug-in. Eu tinha o plug-in funcionando muito bem em um Blog local, depois peguei o fonte de um blog qualquer e não funcionou. Trabalhei um dia e consegui 100/100 e busquei outro blog qualquer e mais um dia de serviço (mais uma centena de SWITCH, IF, etc) e consegui. Ai fiz teste em outro e simplesmente outra arquitetura... Então fiz mais uns 50 testes e vi que nunca iria para de fazer IF, SWITCH e desisti.

Para terem idéia, achei um BLOG de uma agencia famosa por SEO com 5 chamadas do jQuery e um site super pesado que consumia centenas de megas de memória para executar. O Alexa deles estava superior a 300.000 brasil (http://www.alexa.com/siteinfo/eduardokraus.com)

Fora outros vários com 2 chamadas, 3 chamadas, chamadas excessivas do jQuery-UI, fora outros exageros do javascript. Tudo isso é analisado pelo Google...

Muito prazer, sou Eduardo Kraus
Teacher and loves Programming
Meu Blog: php.eduardokraus.com
Meu Youtube: www.youtube.com/user/ProfEduardoKraus
Meu Facebook: www.facebook.com/ProfEduardoKraus

[Rafael Funchal]

Olá Eduardo,

No seu último email você está falando bastante sobre o Core do WordPress não se coçar para resolver alguns problemas, mas você sabia que você pode participar dessa solução ao invés de só reclamar sobre isso?

Se não gosta ou acha errado como arquivos são tratados no Core, você pode sugerir soluções através do https://make.wordpress.org

Sobre o problema de temas e plugins mal desenvolvidos. Sim, isso é um problema. Mas pode ser facilmente solucionado da seguinte forma: Fork no Github, commit das soluções e envio de um Pull Request.

Fácil não é?

Porém, mais fácil ainda é só ficar reclamando e não se coçar para fazer parte da solução.

:)

[Eduardo Kraus]

Sobre fazer algo, antigamente fiz muito e depois de muito me estrepar resolvi abandonar o Wordpress para meu uso por completo e já discuti aqui as vantagens que EU tive com a troca o que não vou questionar... Seria o mesmo que eu entrar em uma associação dos bebedores de Skol e falar de cerveja puro malte...

Hoje, como já falei, só uso o worpress caso algum cliente quer um blog e lhe dou como "um agrado" mais comercialmente não trabalho mais com ele, então seria total desperdício do meu tempo trabalhar em algo que não retorno comercial e nem sequer meus blogs o usam.

Você pode até achar que é muito trabalho mas a recompensa chegou.

Eu dei todas as dicas, fiz um vídeo explicando tudo passo a passo e agora é só ir la quem trabalha comercialmente com Wordpress e enviar as melhorias.

[Eduardo Kraus]

Antes que fales que não ajudo nada, trabalho comercialmente com Moodle:

https://lang.moodle.org/local/amos/credits.php#credits-language-pt_br

https://moodle.org/mod/forum/user.php?id=1428341

Muito prazer, sou Eduardo Kraus
Teacher and loves Programming
Meu Blog: php.eduardokraus.com
Meu Youtube: www.youtube.com/user/ProfEduardoKraus
Meu Facebook: www.facebook.com/ProfEduardoKraus

[Arsnova Digital]

Eduardo,

Esta é uma lista de colaboração de usuários WordPress. Não entendi exatamente porque estás aqui reclamando do sistema. 

A ideia não é juntarmos forças para resolver os problemas?

Acho que o fórum para meter pau é outro. 

Marco Andrei

[Eduardo Kraus]

@Marco, em qual a parte que meto o PAU?

Apenas falei que o Wordpress tem muito a melhorar e isso não é "meter o PAU" e sim apenas descrever os problemas reais dele.

Ou você é daqueles que acha que o WP e perfeito e sem problemas???

[Felipe Pavão | www.felipepavao.com]

Quando vejo algo assim tenho que adicionar meus cents.

Eduardo, parabéns pela colaboração. 

Mesmo ñ sendo mais usuário do WP vc adicionou conceitos e estrategias interessantes aqui.

Aos demais que por ventura se sentiram ofendidos, nao fiquem: precisamos conhecer as vantagens e problemas do software que gostamos de trabalhar. Ficar em um mundinho fechado achando que ele é perfeito só diminui nossas possibilidades de crescer profissionalmente e ajudar de forma mais produtiva.

Por isso, Eduardo, te agradeço por expor pontos interessantes aqui. Eu ñ me sinto ofendido de maneira nenhuma.

Abraço,

Felipe Pavão | +55 21 98369-5365 | Blog em Português | English Blog

[Dubsmash Videos No Brasil]

Graças as dicas do joao consegui resolver atingindo quase 100 para desktop e celular

vejam o resultado!

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.baixaregratis.com%2F&tab=desktop

Em quinta-feira, 28 de maio de 2015 11:50:41 UTC-3, Souza Brasil escreveu:

[Dicarlos Design]

Se alguém aqui utiliza WordPress, então recomendo o plugin async js and css

Em quinta-feira, 28 de maio de 2015 11:50:41 UTC-3, Souza Brasil escreveu:

[Dicarlos Design]

Usa o plugin async js and css do WordPress que resolve.

Em quinta-feira, 28 de maio de 2015 11:50:41 UTC-3, Souza Brasil escreveu:

[Jofran Lirio]

Souza,

O tema default do wordpress por padrão adiciona o jquery no head do site. O que você pode fazer no functions.php é o seguinte:

1. Crie uma função load_scripts e chame ela com add_action( 'wp_enqueue_scripts', 'load_scripts' );
   
2. Dentro da função, chame a função nativa do wordpress wp_deregister_scripts('jquery');
3. Depois disso chame adicione o wordpress manualmente direto de uma pasta do seu tema wp_enqueue_script( 'jquery', get_template_directory_uri() . '/pasta_do_js/jquery.js', array(), NULL, true ). O TRUE no final da dessa chama informa que o script deve ser carregado no rodapé;
4. Repita o mesmo com o jquery migration. Geralmente o versão do jquery padrão do Wordpress não é a última versão estável lançada. Isso faz com que se reduza a quantidade de imcompatibilidade.

Com isso você conseguirá tirar o javascript do head e colocar no rodapé. Não se esqueça de chamar a função wp_footer() no rodapé porque é nela que o wordpress carrega os scripts.

Em quinta-feira, 28 de maio de 2015 11:50:41 UTC-3, Souza Brasil escreveu:

[Claudio Lima]

Essa técnica tenho que ver alguém fazendo, pois não entendo muito, por serrem muitos arquivos php.

Obrigado pela atenção

Claudio Lima

--

Regras do Grupo: http://bit.ly/1lOeYqs
 
Projeto WordPress: http://br.wordpress.org/
Temas: http://wordpress.org/extend/themes/
Plugins: http://wordpress.org/extend/plugins/
Grupo no Facebook: http://www.facebook.com/groups/wordpress.brasil/
---

Você recebeu essa mensagem porque está inscrito em um tópico no grupo "WordPress Brasil Lista" dos Grupos do Google.
Para cancelar inscrição nesse tópico, acesse https://groups.google.com/d/topic/wordpress-brasil/W90RYJPB9Lk/unsubscribe.
Para cancelar inscrição nesse grupo e todos os seus tópicos, envie um e-mail para wordpress-bras...@googlegroups.com.

[Dicarlos Design]

Para quem não entende sobre a função de bloqueio de JS e CSS de renderização, basta instalar o plugin async JS and CSS que resolve o problema de vez. Palavra de que trabalha com SEO para WordPress.

--
Enviado do Gmail para celular

[Thiago Sodré]

Estou utilizando Worpress com thema comprado, o que me causou muitos problemas ao fazer um "defer parsa of javascript files"... 
Eu fazia os arquivos carregarem depois do site mas isso travava as principais funções do site que eram carregadas via JS. 

Para resolver esse problema eu instalei o plugin "Speed Booster" e marquei: move scripts to footer.

E outras opções de CSS... 

Para atingir um bom score no PageSpeed, instalei, além do Speed Booster Pack

 o W3 Total Cache

Resultado:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2F24quadros.com%2F&tab=mobile

Boa sorte, galera! 

[Vital Game Box]

MUito obrigado essa sua dica amenizou bastante meu problema de velocidade. MInha pontuação estava no vermelho agora esta assim: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fvitalgamebox.com%2F&tab=desktop

Agradeço muito um feliz ano novo. https://vitalgamebox.com