{"id":226841,"date":"2022-09-05T11:20:00","date_gmt":"2022-09-05T08:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226841"},"modified":"2022-11-09T01:09:13","modified_gmt":"2022-11-08T22:09:13","slug":"como-eliminar-javascript-e-css-de-bloqueio-de-renderizacao-no-conteudo-acima-da-dobra","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-eliminar-javascript-e-css-de-bloqueio-de-renderizacao-no-conteudo-acima-da-dobra\/","title":{"rendered":"Como eliminar JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o no conte\u00fado acima da dobra"},"content":{"rendered":"\n

Ao construir um site, existem alguns aspectos que s\u00e3o primordiais para oferecer aos usu\u00e1rios uma experi\u00eancia tranquila. Um desses aspectos \u00e9 representado pelo tempo de carregamento. Um site que carrega rapidamente<\/a> \u00e9 sempre apreciado pelos visitantes que desejam encontrar o que procuram o mais r\u00e1pido poss\u00edvel. Para obter um tempo de carregamento r\u00e1pido, voc\u00ea deve aprender como eliminar JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o no conte\u00fado acima da dobra.<\/p>\n

A velocidade de um site pode ser influenciada por uma ampla gama de fatores, mas os fatores discutidos neste artigo t\u00eam o maior impacto. A equa\u00e7\u00e3o perfeita do site pode ser dif\u00edcil de resolver, pois certos elementos n\u00e3o dependem de suas a\u00e7\u00f5es. Eles s\u00e3o ditados por cada situa\u00e7\u00e3o em particular (por exemplo, localiza\u00e7\u00e3o geogr\u00e1fica, velocidade da Internet). No entanto, voc\u00ea pode otimizar a entrega de CSS modificando os elementos que voc\u00ea pode controlar totalmente. Conhe\u00e7a abaixo mais sobre este tema neste artigo criado por nossa equipe em wpDataTables<\/a>.<\/p>\n

Definindo conte\u00fado de bloqueio de renderiza\u00e7\u00e3o e acima da dobra<\/h2>\n

Bloqueio de renderiza\u00e7\u00e3o<\/h3>\n

O bloqueio de renderiza\u00e7\u00e3o refere-se aos elementos que impedem que o conte\u00fado crucial de um site (por exemplo, o corpo do texto principal de um artigo) seja carregado antes que a p\u00e1gina inteira seja carregada. Um bom exemplo de tal elemento \u00e9 representado por qualquer JavaScript ou CSS adicional adicionado a um site. Esse c\u00f3digo pode impedir que o usu\u00e1rio veja qualquer coisa em seu navegador at\u00e9 que o c\u00f3digo seja totalmente executado, tornando-se assim um bloqueio de renderiza\u00e7\u00e3o.<\/p>\n

Conte\u00fado acima da dobra<\/h3>\n

Quando um visitante acessa um site, ele \u00e9 recebido por uma determinada parte do site \u2013 ou seja, a parte superior. Para ver o restante, o usu\u00e1rio ter\u00e1 que rolar para baixo ou realizar outras a\u00e7\u00f5es no site. O conte\u00fado que os visitantes veem imediatamente ap\u00f3s acess\u00e1-lo \u00e9 chamado de conte\u00fado acima da dobra.<\/p>\n

Sobre o bloqueio de renderiza\u00e7\u00e3o em JavaScript e CSS<\/h3>\n

Os navegadores l\u00eaem HTML para exibir um site. Este \u00e9 um processo que tem v\u00e1rias etapas. Se o navegador se deparar com elementos que fazem refer\u00eancia a um script\/folha de estilo, s\u00e3o necess\u00e1rias etapas extras para ler o c\u00f3digo. O navegador precisar\u00e1 solicitar um arquivo, aguardar uma resposta, baixar o arquivo do servidor e execut\u00e1-lo.<\/p>\n

Obviamente, essas etapas adicionais podem diminuir o tempo de carregamento. Lembre-se de que alguns temas do WordPress envolvem mais do que apenas um arquivo CSS ou JavaScript. O tempo de carregamento pode ser reduzido drasticamente por causa desses arquivos. Esta \u00e9 a raz\u00e3o pela qual voc\u00ea precisar\u00e1 eliminar recursos de bloqueio de renderiza\u00e7\u00e3o do seu site. Na maioria das vezes, esses n\u00e3o s\u00e3o arquivos cr\u00edticos, portanto, voc\u00ea pode adiar a an\u00e1lise do JavaScript para reduzir o bloqueio da renderiza\u00e7\u00e3o da p\u00e1gina, melhorando assim a velocidade do seu site.<\/p>\n

Identificando JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o<\/strong><\/h3>\n

\"Como<\/a><\/p>\n

Para eliminar JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o no conte\u00fado acima da dobra, voc\u00ea ter\u00e1 que identificar quais s\u00e3o esses elementos. Uma das maneiras mais f\u00e1ceis de identific\u00e1-los \u00e9 abrir seu site com uma ferramenta de velocidade de p\u00e1gina que informa quais problemas ele enfrenta no carregamento. O PageSpeed \u200b\u200bInsights do Google<\/a> \u00e9 uma dessas ferramentas que deve ajud\u00e1-lo a encontrar os arquivos que bloqueiam a renderiza\u00e7\u00e3o em seu site. Depois de descobrir quais s\u00e3o os arquivos, voc\u00ea pode remover ou reorganizar o JavaScript de bloqueio de renderiza\u00e7\u00e3o.<\/p>\n

Como eliminar JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o no conte\u00fado acima da dobra?<\/h3>\n

Voc\u00ea tem duas op\u00e7\u00f5es nessa situa\u00e7\u00e3o: aprenda voc\u00ea mesmo a eliminar JavaScript e CSS de bloqueio de renderiza\u00e7\u00e3o no conte\u00fado acima da dobra ou use um plug-in para fazer isso. Se voc\u00ea \u00e9 experiente em tecnologia e est\u00e1 disposto a aprender como os recursos de bloqueio de renderiza\u00e7\u00e3o s\u00e3o eliminados, aplique um destes m\u00e9todos:<\/p>\n

Limpe o JavaScript do caminho de renderiza\u00e7\u00e3o cr\u00edtico<\/h3>\n

O caminho de renderiza\u00e7\u00e3o cr\u00edtico deve incluir apenas os elementos essenciais para o site. Voc\u00ea pode mover recursos JavaScript desnecess\u00e1rios para fora desse caminho. Isso \u00e9 feito adicionando certos atributos onde o JavaScript \u00e9 necess\u00e1rio. Os atributos s\u00e3o:<\/p>\n