{"id":245043,"date":"2022-04-05T10:39:00","date_gmt":"2022-04-05T07:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=245043"},"modified":"2022-04-27T11:55:48","modified_gmt":"2022-04-27T08:55:48","slug":"como-otimizar-a-entrega-de-css-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-otimizar-a-entrega-de-css-no-wordpress\/","title":{"rendered":"Como otimizar a entrega de CSS no WordPress"},"content":{"rendered":"

Se voc\u00ea est\u00e1 aqui, \u00e9 prov\u00e1vel que tenha recebido este aviso no teste PageSpeed \u200b\u200bInsights do Google<\/a> :<\/p>\n

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

Embora possa ser dif\u00edcil eliminar todos os arquivos de bloqueio de renderiza\u00e7\u00e3o, n\u00e3o \u00e9 t\u00e3o dif\u00edcil com as ferramentas certas.<\/p>\n

Neste guia, mostrarei tr\u00eas maneiras de acelerar seu site<\/a> com entrega CSS otimizada. Existem op\u00e7\u00f5es para newbs WordPress e desenvolvedores inclu\u00eddos aqui.<\/p>\n

Vamos come\u00e7ar do in\u00edcio – o que exatamente significa otimizar a entrega de CSS em seu site WordPress?<\/p>\n

O que significa "otimizar entrega de CSS"?<\/h2>\n

Deixe-me ser bem claro sobre o que quero dizer primeiro.<\/p>\n

Arquivos CSS s\u00e3o usados \u200b\u200bpara estilizar p\u00e1ginas da web<\/a>. Cada tema WordPress carrega um arquivo style.css e voc\u00ea provavelmente tem um punhado de folhas de estilo adicionais (arquivos CSS) adicionados por plug-ins. Por exemplo, se voc\u00ea tiver um plugin que adiciona um novo widget, ser\u00e1 necess\u00e1rio carregar outra folha de estilo para estilizar esse widget.<\/p>\n

Todos os arquivos CSS s\u00e3o carregados antes que seu site seja renderizado.<\/strong><\/p>\n

Isso significa que os visitantes ver\u00e3o uma tela branca em branco at\u00e9 ent\u00e3o. Agora \u00e9 o seguinte …<\/p>\n

A maior parte do CSS carregado n\u00e3o \u00e9 necess\u00e1ria para a p\u00e1gina em que o visitante est\u00e1, e menos ainda para o que eles podem ver imediatamente. Por exemplo, por que faz\u00ea-los esperar enquanto carregam estilos para o rodap\u00e9? Provavelmente levar\u00e1 pelo menos alguns segundos antes que eles vejam (se \u00e9 que o ver\u00e3o).<\/p>\n

Ao adiar nossos arquivos CSS ou carreg\u00e1-los de forma ass\u00edncrona, podemos permitir que o site apare\u00e7a no navegador do visitante antes que as folhas de estilo terminem de carregar.<\/p>\n

Neste guia, compartilharei tr\u00eas abordagens diferentes para adiar suas folhas de estilo e otimizar a entrega de CSS.<\/p>\n

Caminhos de renderiza\u00e7\u00e3o cr\u00edtica otimizados em a\u00e7\u00e3o<\/h3>\n

Se voc\u00ea visitar a p\u00e1gina inicial<\/a> do Compete Themes<\/a>, fique de olho no indicador de carregamento na guia do navegador enquanto o site carrega. Voc\u00ea notar\u00e1 que, depois que o site est\u00e1 vis\u00edvel e parece estar carregado, o indicador de carregamento continua girando por mais um momento.<\/p>\n

Este \u00e9 um exemplo de como \u00e9 a entrega de CSS otimizada na pr\u00e1tica.<\/p>\n

Se voc\u00ea quiser ver um exemplo de um caminho de renderiza\u00e7\u00e3o cr\u00edtica<\/a> altamente otimizado, visite a Amazon. O site inteiro n\u00e3o carrega de uma vez. Em vez disso, ao longo de alguns segundos, voc\u00ea ver\u00e1 diferentes elementos aparecerem ao longo da p\u00e1gina, gra\u00e7as ao caminho de renderiza\u00e7\u00e3o cuidadosamente otimizado.<\/p>\n

1 foguete WP<\/h2>\n

Eu uso o plugin WP Rocket<\/a> aqui no Compete Themes e o recomendo antes de todas as outras solu\u00e7\u00f5es para a otimiza\u00e7\u00e3o do caminho de renderiza\u00e7\u00e3o cr\u00edtica.<\/p>\n

Otimizando sua entrega CSS com WP Rocket realmente n\u00e3o poderia ser mais f\u00e1cil. No menu File Optimization, h\u00e1 uma caixa de sele\u00e7\u00e3o para ativar esse recurso.<\/p>\n

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

Uma vez marcada, o WP Rocket ir\u00e1 adiar automaticamente todas as suas folhas de estilo para que n\u00e3o sejam carregadas at\u00e9 que o site apare\u00e7a no navegador do visitante. Agora, se todo o CSS fosse adiado, seu site ficaria p\u00e9ssimo at\u00e9 ser carregado, e os desenvolvedores do WP Rocket trataram disso elegantemente com seu plugin.<\/p>\n

Quando voc\u00ea ativa esta op\u00e7\u00e3o, o WP Rocket encontrar\u00e1 automaticamente o CSS necess\u00e1rio para estilizar as partes do seu site que os visitantes veem no momento em que o site \u00e9 carregado, e esse c\u00f3digo \u00e9 adicionado inline ao documento.<\/p>\n

Em outras palavras, seu site aparece mais r\u00e1pido no navegador e parece estar totalmente carregado, enquanto o CSS adiado \u00e9 carregado nos pr\u00f3ximos segundos ou dois.<\/p>\n

Na minha opini\u00e3o, esta \u00e9 de longe a melhor solu\u00e7\u00e3o para otimizar a entrega de CSS com WordPress.<\/p>\n

WP Rocket \u00e9 um plugin premium, mas se tempos de carregamento mais r\u00e1pidos gerarem mais receita do seu site, eu definitivamente consideraria compr\u00e1-lo para o seu site. Tenho uma vis\u00e3o<\/a> muito mais detalhada do WP Rocket, que<\/a> voc\u00ea pode ler se quiser saber mais. Caso contr\u00e1rio, voc\u00ea pode verificar o site deles aqui<\/a>.<\/p>\n

2 Otimiza\u00e7\u00e3o autom\u00e1tica<\/h2>\n

A segunda abordagem que eu recomendaria \u00e9 o plug-<\/a> in Autoptimize<\/a>.<\/p>\n

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

Este plug-in de desempenho rico em recursos fornece algumas abordagens para otimizar a entrega de CSS. A op\u00e7\u00e3o mais simples \u00e9 simplesmente embutir todo o CSS. Isso pegar\u00e1 todo o CSS encontrado em suas folhas de estilo e o adicionar\u00e1 diretamente ao documento da p\u00e1gina, de forma que nenhuma folha de estilo seja carregada.<\/p>\n

Para encontrar essa op\u00e7\u00e3o, voc\u00ea precisa clicar no bot\u00e3o Mostrar configura\u00e7\u00f5es avan\u00e7adas na parte superior.<\/p>\n

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

Voc\u00ea ver\u00e1 ent\u00e3o a op\u00e7\u00e3o de embutir todos os CSS.<\/p>\n

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

Embora essa op\u00e7\u00e3o possa melhorar o desempenho, se voc\u00ea adicionar CSS demais ao documento da p\u00e1gina, ela pode, na verdade, tornar o site mais lento. Pode valer a pena experimentar.<\/p>\n

Caso contr\u00e1rio, uma abordagem interessante \u00e9 habilitar a op\u00e7\u00e3o Inline e Adiar CSS. Isso ir\u00e1 adiar todas as folhas de estilo e incorporar apenas o CSS cr\u00edtico. No entanto, ele n\u00e3o encontrar\u00e1 automaticamente o CSS cr\u00edtico para voc\u00ea, como o WP Rocket.<\/p>\n

Ent\u00e3o, como voc\u00ea obt\u00e9m o CSS cr\u00edtico do seu site? Mesmo para um desenvolvedor WP experiente, isso pode ser uma esp\u00e9cie de arranhadura.<\/p>\n

Embora eu n\u00e3o tenha testado a confiabilidade dessa ferramenta, esta ferramenta gratuita Critical Path CSS Generator<\/a> seria uma abordagem vi\u00e1vel. Insira o URL do seu site e ele retornar\u00e1 o CSS que voc\u00ea absolutamente precisa carregar.<\/p>\n

Voc\u00ea pode ent\u00e3o copiar e colar esse c\u00f3digo na caixa CSS do caminho cr\u00edtico na Otimiza\u00e7\u00e3o autom\u00e1tica.<\/p>\n

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

Se usar essa abordagem, pode ser necess\u00e1rio adicionar CSS para diferentes p\u00e1ginas do seu site, e pode ser necess\u00e1rio conhecer o CSS do seu tema muito bem para garantir um estilo consistente.<\/p>\n

Outra abordagem<\/h3>\n

Existe um plugin chamado Autoptimize criticalcss.com power-up<\/a>. \u00c9 muito complicado, mas este plugin adicional permitir\u00e1 que voc\u00ea gere automaticamente o CSS cr\u00edtico do seu site usando o servi\u00e7o criticalcss.com<\/a>.<\/p>\n

Voc\u00ea precisar\u00e1 se inscrever no CriticalCSS para uma conta paga para usar esta op\u00e7\u00e3o.<\/p>\n

3 Acelere<\/h2>\n

Esta \u00faltima op\u00e7\u00e3o \u00e9 muito r\u00e1pida e simples para um desenvolvedor WordPress implementar.<\/p>\n

Speed \u200b\u200bUp<\/a> \u00e9 um plugin leve que permite adiar qualquer folha de estilo n\u00e3o cr\u00edtica.<\/p>\n

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

Embora isso n\u00e3o otimize completamente a entrega de CSS, vai ajudar.<\/p>\n

Digamos que seu tema adiciona uma folha de estilo e, em seguida, h\u00e1 mais cinco folhas de estilo adicionadas por plug-ins. Se apenas a folha de estilo do tema for cr\u00edtica para carregar antes de exibir o site, voc\u00ea pode adiar as outras cinco.<\/p>\n

O Speed \u200b\u200bUp oferece um filtro simples que voc\u00ea pode adicionar ao arquivo functions.php de um tema filho (ou um plug-in) para adiar qualquer folha de estilo desejada. Tudo que voc\u00ea precisa s\u00e3o as al\u00e7as de cada folha de estilo que est\u00e1 sendo carregada. Voc\u00ea pode encontrar algumas fun\u00e7\u00f5es simples aqui<\/a> para gerar as al\u00e7as de todas as folhas de estilo registradas em seu site.<\/p>\n

Novamente, isso ser\u00e1 r\u00e1pido e f\u00e1cil para um desenvolvedor, mas eu n\u00e3o recomendaria esta solu\u00e7\u00e3o se voc\u00ea n\u00e3o escrever c\u00f3digo.<\/p>\n

Conclus\u00e3o<\/h2>\n

Espero que voc\u00ea tenha aprendido uma ou duas coisas sobre a otimiza\u00e7\u00e3o de desempenho do WordPress<\/a> neste post.<\/p>\n

Embora cada uma das tr\u00eas solu\u00e7\u00f5es acima possa funcionar bem, eu tenho que dar uma palavra final para o plugin WP Rocket<\/a>. Como um blogueiro e desenvolvedor de temas para WordPress, acho que \u00e9 muito f\u00e1cil e f\u00e1cil de trabalhar.<\/p>\n

Se voc\u00ea quiser mais dicas sobre como acelerar seu site, pode gostar deste guia sobre otimiza\u00e7\u00e3o de imagens<\/a> ou de minha an\u00e1lise do WP Engine, no<\/a> qual o Compete Themes depende para tempos de carregamento r\u00e1pidos.<\/p>\n

Fonte de grava\u00e7\u00e3o: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Aprenda como acelerar seu site WordPress com uma dessas tr\u00eas abordagens para otimizar a entrega de CSS. Dicas para iniciantes e avan\u00e7adas.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[586,655,666,613],"tags":[848],"class_list":["post-245043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acelere-o-wordpress","category-como-fazer","category-freelance-2","category-uncategorized-9","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=245043"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245043\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=245043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=245043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=245043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}