{"id":512,"date":"2026-09-11T21:50:52","date_gmt":"2026-09-11T21:50:52","guid":{"rendered":"https:\/\/flowbase.co.mz\/blog\/?p=512"},"modified":"2026-09-11T21:50:52","modified_gmt":"2026-09-11T21:50:52","slug":"otimizar-fontes-css-wordpress","status":"publish","type":"post","link":"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/","title":{"rendered":"Como Otimozar Fontes e CSS no WordPress para Carregar Mais R\u00e1pido"},"content":{"rendered":"<div>\n<div class=\"flex h-svh w-screen flex-col pt-[env(safe-area-inset-top,0px)]\">\n<div class=\"relative z-0 flex min-h-0 w-full flex-1\">\n<div class=\"relative flex min-h-0 w-full min-w-0 flex-1\">\n<div class=\"group\/side-pane-shell-host relative flex min-h-0 min-w-0 flex-1 has-[[data-side-pane-shell-transition]]:overflow-x-clip\" data-side-pane-shell-host=\"true\">\n<div class=\"@container\/main relative flex min-w-0 flex-1 flex-col -translate-y-[calc(env(safe-area-inset-bottom,0px)\/2)] pt-[calc(env(safe-area-inset-bottom,0px)\/2)]\">\n<div class=\"@w-sm\/main:[scrollbar-gutter:var(--stage-scroll-gutter)] touch:[scrollbar-width:none] group\/scroll-root relative flex min-h-0 min-w-0 flex-1 flex-col [scrollbar-gutter:stable] not-print:overflow-x-clip not-print:overflow-y-auto group-data-stream-active\/scroll-root:[overflow-anchor:none] not-print:data-expanded-composer:overflow-y-hidden! not-print:data-voice-focus-mode:overflow-y-hidden! scroll-pt-(--header-height) [--sticky-padding-top:var(--header-height)] [--sticky-padding-bottom:0px] [--scroll-root-safe-area-inset-top:calc(var(--sticky-padding-top)+env(safe-area-inset-top,0px))] [--scroll-root-safe-area-inset-bottom:calc(var(--sticky-padding-bottom)+var(--screen-keyboard-height,0px)+env(safe-area-inset-bottom,0px))] [--scroll-root-safe-area-height:calc(100lvh-var(--scroll-root-safe-area-inset-top)-var(--scroll-root-safe-area-inset-bottom))] has-data-[fixed-header=less-than-md]:md:scroll-pt-0 has-data-[fixed-header=less-than-md]:md:[--sticky-padding-top:0px] has-data-[fixed-header=never]:scroll-pt-0 has-data-[fixed-header=never]:[--sticky-padding-top:0px] has-data-[fixed-header=less-than-xl]:@w-xl\/main:scroll-pt-0 has-data-[fixed-header=less-than-xl]:@w-xl\/main:[--sticky-padding-top:0px] has-data-[fixed-header=less-than-xxl]:@w-2xl\/main:scroll-pt-0 has-data-[fixed-header=less-than-xxl]:@w-2xl\/main:[--sticky-padding-top:0px] group-data-[side-pane-shell-open]\/side-pane-shell-host:[scrollbar-width:none] group-data-[side-pane-shell-open]\/side-pane-shell-host:[&amp;::-webkit-scrollbar]:hidden\" data-scroll-root=\"\" data-scroll-from-top=\"\" data-scroll-from-end=\"\">\n<div class=\"contents\">\n<p>A velocidade de um site WordPress depende de v\u00e1rios fatores. Imagens pesadas, hospedagem lenta, excesso de plugins, JavaScript mal otimizado e c\u00f3digos desnecess\u00e1rios podem prejudicar o desempenho.<\/p>\n<div class=\"contents\" role=\"presentation\">\n<div id=\"thread\" class=\"group\/thread flex flex-col min-h-full\">\n<div class=\"composer-parent flex flex-1 flex-col focus-visible:outline-0\">\n<div class=\"relative basis-auto flex-col -mb-(--composer-overlap-px) pb-(--composer-overlap-px) [--composer-overlap-px:28px] grow flex\">\n<div class=\"flex min-h-0 grow flex-col text-sm\">\n<div class=\"qMYqUG_convSearchResultHighlightRoot\">\n<div class=\"\" data-turn-id-container=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-8\" data-is-intersecting=\"true\">\n<section class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-8\" data-turn-id-container=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-8\" data-testid=\"conversation-turn-16\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" data-conversation-screenshot-content=\"\">\n<div class=\"flex max-w-full flex-col gap-4 grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"b2f64100-db66-449c-8b25-541fdb893451\" data-message-model-slug=\"gpt-5-6\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden\">\n<div class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\">\n<p data-start=\"979\" data-end=\"1071\">Por\u00e9m, existe outro problema que muitas vezes passa despercebido: <strong data-start=\"1045\" data-end=\"1070\">fontes e arquivos CSS<\/strong>.<\/p>\n<p data-start=\"1073\" data-end=\"1388\">As fontes utilizadas no site podem adicionar v\u00e1rios pedidos ao servidor, enquanto arquivos CSS grandes podem atrasar a apresenta\u00e7\u00e3o da p\u00e1gina. Quando esses recursos n\u00e3o s\u00e3o carregados de forma eficiente, o visitante pode ficar alguns segundos olhando para uma p\u00e1gina incompleta ou esperando os elementos aparecerem.<\/p>\n<p data-start=\"1390\" data-end=\"1457\">A boa not\u00edcia \u00e9 que existem v\u00e1rias formas de melhorar esse cen\u00e1rio.<\/p>\n<p data-start=\"1459\" data-end=\"1630\">Neste artigo, vais aprender <strong data-start=\"1487\" data-end=\"1556\">como otimizar fontes e CSS no WordPress para carregar mais r\u00e1pido<\/strong>, reduzir recursos desnecess\u00e1rios e melhorar a experi\u00eancia dos visitantes.<\/p>\n<hr data-start=\"1632\" data-end=\"1635\" \/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabela de conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a8541;color:#1a8541\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a8541;color:#1a8541\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Por_que_fontes_e_CSS_podem_deixar_o_WordPress_mais_lento\" >Por que fontes e CSS podem deixar o WordPress mais lento?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#1_Descobre_quais_fontes_o_teu_site_esta_utilizando\" >1. Descobre quais fontes o teu site est\u00e1 utilizando<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Uma_boa_regra\" >Uma boa regra<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#2_Reduz_o_numero_de_pesos_das_fontes\" >2. Reduz o n\u00famero de pesos das fontes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#3_Prefere_fontes_locais_quando_fizer_sentido\" >3. Prefere fontes locais quando fizer sentido<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#4_Usa_o_formato_WOFF2\" >4. Usa o formato WOFF2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#5_Nao_carregues_fontes_que_nao_utilizas\" >5. N\u00e3o carregues fontes que n\u00e3o utilizas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#6_Configura_corretamente_o_carregamento_das_fontes\" >6. Configura corretamente o carregamento das fontes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#7_Escolhe_fontes_do_sistema_quando_possivel\" >7. Escolhe fontes do sistema quando poss\u00edvel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#8_Agora_vamos_otimizar_o_CSS\" >8. Agora vamos otimizar o CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#9_Remove_CSS_que_nao_esta_sendo_utilizado\" >9. Remove CSS que n\u00e3o est\u00e1 sendo utilizado<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#10_Minifica_os_arquivos_CSS\" >10. Minifica os arquivos CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Exemplo_simplificado\" >Exemplo simplificado<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#11_Combine_arquivos_CSS_Nem_sempre\" >11. Combine arquivos CSS? Nem sempre<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#12_Prioriza_o_CSS_critico\" >12. Prioriza o CSS cr\u00edtico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#13_Utiliza_um_plugin_de_cache_e_otimizacao\" >13. Utiliza um plugin de cache e otimiza\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#14_Cuidado_com_plugins_de_otimizacao\" >14. Cuidado com plugins de otimiza\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#15_Evita_carregar_fontes_de_plugins_desnecessarios\" >15. Evita carregar fontes de plugins desnecess\u00e1rios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#16_Cuidado_com_construtores_de_paginas\" >16. Cuidado com construtores de p\u00e1ginas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#17_Ativa_o_cache_do_navegador\" >17. Ativa o cache do navegador<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#18_Usa_preload_com_cuidado\" >18. Usa preload com cuidado<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#19_Nao_utilizes_fontes_demais\" >19. N\u00e3o utilizes fontes demais<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#20_Testa_a_velocidade_depois_das_alteracoes\" >20. Testa a velocidade depois das altera\u00e7\u00f5es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Como_saber_se_a_otimizacao_funcionou\" >Como saber se a otimiza\u00e7\u00e3o funcionou?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Checklist_rapido_para_otimizar_fontes_e_CSS\" >Checklist r\u00e1pido para otimizar fontes e CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Fontes\" >Fontes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#CSS\" >CSS<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/flowbase.co.mz\/blog\/otimizar-fontes-css-wordpress\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 data-section-id=\"1l5dkuh\" data-start=\"1637\" data-end=\"1697\"><span class=\"ez-toc-section\" id=\"Por_que_fontes_e_CSS_podem_deixar_o_WordPress_mais_lento\"><\/span>Por que fontes e CSS podem deixar o WordPress mais lento?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-start=\"1699\" data-end=\"1762\">Antes de aprender a otimizar, \u00e9 importante perceber o problema.<\/p>\n<p data-start=\"1764\" data-end=\"1902\">Quando algu\u00e9m acessa uma p\u00e1gina do teu site, o navegador precisa baixar v\u00e1rios recursos para conseguir apresentar o conte\u00fado corretamente.<\/p>\n<p data-start=\"1904\" data-end=\"1937\">Entre esses recursos podem estar:<\/p>\n<ul data-start=\"1939\" data-end=\"2042\">\n<li data-section-id=\"1csnk5g\" data-start=\"1939\" data-end=\"1954\">Arquivos CSS;<\/li>\n<li data-section-id=\"y4o5ti\" data-start=\"1955\" data-end=\"1964\">Fontes;<\/li>\n<li data-section-id=\"88gg5c\" data-start=\"1965\" data-end=\"1978\">JavaScript;<\/li>\n<li data-section-id=\"gmswcp\" data-start=\"1979\" data-end=\"1989\">Imagens;<\/li>\n<li data-section-id=\"20okbu\" data-start=\"1990\" data-end=\"1999\">\u00cdcones;<\/li>\n<li data-section-id=\"xg3ewh\" data-start=\"2000\" data-end=\"2019\">Arquivos do tema;<\/li>\n<li data-section-id=\"q7okeh\" data-start=\"2020\" data-end=\"2042\">Arquivos de plugins.<\/li>\n<\/ul>\n<p data-start=\"2044\" data-end=\"2177\">O CSS \u00e9 respons\u00e1vel por definir grande parte da apar\u00eancia da p\u00e1gina: cores, espa\u00e7amentos, tamanhos, posi\u00e7\u00f5es, anima\u00e7\u00f5es e muito mais.<\/p>\n<p data-start=\"2179\" data-end=\"2237\">J\u00e1 as fontes determinam como os textos ser\u00e3o apresentados.<\/p>\n<p data-start=\"2239\" data-end=\"2392\">O problema aparece quando o site precisa carregar <strong data-start=\"2289\" data-end=\"2391\">muitos arquivos, fontes diferentes ou grandes quantidades de CSS que n\u00e3o s\u00e3o realmente necess\u00e1rios<\/strong>.<\/p>\n<p data-start=\"2394\" data-end=\"2505\">Quanto mais recursos o navegador precisa processar, maior pode ser o tempo necess\u00e1rio para apresentar a p\u00e1gina.<\/p>\n<hr data-start=\"2507\" data-end=\"2510\" \/>\n<h1 data-section-id=\"1dd1kpk\" data-start=\"2512\" data-end=\"2565\"><span class=\"ez-toc-section\" id=\"1_Descobre_quais_fontes_o_teu_site_esta_utilizando\"><\/span>1. Descobre quais fontes o teu site est\u00e1 utilizando<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"2567\" data-end=\"2659\">O primeiro passo para otimizar as fontes \u00e9 descobrir quais est\u00e3o realmente sendo carregadas.<\/p>\n<p data-start=\"2661\" data-end=\"2683\">Um site pode utilizar:<\/p>\n<ul data-start=\"2685\" data-end=\"2832\">\n<li data-section-id=\"hucl5i\" data-start=\"2685\" data-end=\"2710\">Uma fonte para t\u00edtulos;<\/li>\n<li data-section-id=\"1x1o70t\" data-start=\"2711\" data-end=\"2731\">Outra para textos;<\/li>\n<li data-section-id=\"4katbr\" data-start=\"2732\" data-end=\"2758\">Uma terceira para menus;<\/li>\n<li data-section-id=\"a116eq\" data-start=\"2759\" data-end=\"2779\">Varia\u00e7\u00f5es de peso;<\/li>\n<li data-section-id=\"13guhqp\" data-start=\"2780\" data-end=\"2813\">Fontes adicionadas por plugins;<\/li>\n<li data-section-id=\"1vfin35\" data-start=\"2814\" data-end=\"2832\">Fontes externas.<\/li>\n<\/ul>\n<p data-start=\"2834\" data-end=\"2857\">Por exemplo, podes ter:<\/p>\n<p data-start=\"2859\" data-end=\"2907\"><strong data-start=\"2859\" data-end=\"2873\">Roboto 400<\/strong><br data-start=\"2873\" data-end=\"2876\" \/><strong data-start=\"2876\" data-end=\"2890\">Roboto 500<\/strong><br data-start=\"2890\" data-end=\"2893\" \/><strong data-start=\"2893\" data-end=\"2907\">Roboto 700<\/strong><\/p>\n<p data-start=\"2909\" data-end=\"2917\">e ainda:<\/p>\n<p data-start=\"2919\" data-end=\"2970\"><strong data-start=\"2919\" data-end=\"2934\">Poppins 400<\/strong><br data-start=\"2934\" data-end=\"2937\" \/><strong data-start=\"2937\" data-end=\"2952\">Poppins 600<\/strong><br data-start=\"2952\" data-end=\"2955\" \/><strong data-start=\"2955\" data-end=\"2970\">Poppins 700<\/strong><\/p>\n<p data-start=\"2972\" data-end=\"3046\">Isso significa que o navegador precisa carregar v\u00e1rios arquivos de fontes.<\/p>\n<p data-start=\"3048\" data-end=\"3128\">Se o teu site \u00e9 um blog simples, provavelmente n\u00e3o precisas de tantas varia\u00e7\u00f5es.<\/p>\n<h3 data-section-id=\"1ts4gfk\" data-start=\"3130\" data-end=\"3147\"><span class=\"ez-toc-section\" id=\"Uma_boa_regra\"><\/span>Uma boa regra<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"3149\" data-end=\"3230\">Escolhe <strong data-start=\"3157\" data-end=\"3191\">uma ou duas fam\u00edlias de fontes<\/strong> e utiliza apenas os pesos necess\u00e1rios.<\/p>\n<p data-start=\"3232\" data-end=\"3303\">Isso pode reduzir a quantidade de arquivos que precisam ser carregados.<\/p>\n<hr data-start=\"3305\" data-end=\"3308\" \/>\n<h1 data-section-id=\"9img8w\" data-start=\"3310\" data-end=\"3349\"><span class=\"ez-toc-section\" id=\"2_Reduz_o_numero_de_pesos_das_fontes\"><\/span>2. Reduz o n\u00famero de pesos das fontes<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"3351\" data-end=\"3402\">Este \u00e9 um dos ajustes mais simples que podes fazer.<\/p>\n<p data-start=\"3404\" data-end=\"3435\">Imagina que o teu tema carrega:<\/p>\n<ul>\n<li data-section-id=\"1j2bb5s\" data-start=\"3437\" data-end=\"3443\">300;<\/li>\n<li data-section-id=\"1j2dkpz\" data-start=\"3444\" data-end=\"3450\">400;<\/li>\n<li data-section-id=\"1j2cume\" data-start=\"3451\" data-end=\"3457\">500;<\/li>\n<li data-section-id=\"1j2f46d\" data-start=\"3458\" data-end=\"3464\">600;<\/li>\n<li data-section-id=\"1j2ee2s\" data-start=\"3465\" data-end=\"3471\">700;<\/li>\n<li>800;<\/li>\n<\/ul>\n<p data-start=\"3480\" data-end=\"3514\">Ser\u00e1 que realmente utilizas todos?<\/p>\n<p data-start=\"3516\" data-end=\"3534\">Provavelmente n\u00e3o.<\/p>\n<p data-start=\"3536\" data-end=\"3648\">Se o teu site utiliza apenas texto normal e t\u00edtulos em negrito, talvez os pesos <strong data-start=\"3616\" data-end=\"3629\">400 e 700<\/strong> sejam suficientes.<\/p>\n<p data-start=\"3650\" data-end=\"3746\">Quanto menos varia\u00e7\u00f5es forem carregadas, menor tende a ser a quantidade de recursos necess\u00e1rios.<\/p>\n<hr data-start=\"3748\" data-end=\"3751\" \/>\n<h1 data-section-id=\"1cgdzp6\" data-start=\"3753\" data-end=\"3800\"><span class=\"ez-toc-section\" id=\"3_Prefere_fontes_locais_quando_fizer_sentido\"><\/span>3. Prefere fontes locais quando fizer sentido<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"3802\" data-end=\"3865\">Muitos sites WordPress utilizam fontes hospedadas externamente.<\/p>\n<p data-start=\"3867\" data-end=\"4001\">Por exemplo, o navegador pode precisar acessar outro dom\u00ednio para baixar uma fonte antes de conseguir apresentar corretamente o texto.<\/p>\n<p data-start=\"4003\" data-end=\"4081\">Dependendo da configura\u00e7\u00e3o, isso pode adicionar conex\u00f5es e pedidos adicionais.<\/p>\n<p data-start=\"4083\" data-end=\"4155\">Uma alternativa \u00e9 <strong data-start=\"4101\" data-end=\"4154\">hospedar as fontes localmente no teu pr\u00f3prio site<\/strong>.<\/p>\n<p data-start=\"4157\" data-end=\"4306\">Isso significa que os arquivos das fontes ficam no servidor do teu WordPress e podem ser carregados diretamente junto com os outros recursos do site.<\/p>\n<p data-start=\"4308\" data-end=\"4405\">Al\u00e9m de reduzir depend\u00eancias externas, isso pode facilitar o controle sobre cache e carregamento.<\/p>\n<hr data-start=\"4407\" data-end=\"4410\" \/>\n<h1 data-section-id=\"1w3p8uq\" data-start=\"4412\" data-end=\"4436\"><span class=\"ez-toc-section\" id=\"4_Usa_o_formato_WOFF2\"><\/span>4. Usa o formato WOFF2<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"4438\" data-end=\"4533\">Se estiveres hospedando fontes localmente, d\u00e1 prefer\u00eancia ao formato <strong data-start=\"4507\" data-end=\"4516\">WOFF2<\/strong> quando poss\u00edvel.<\/p>\n<p data-start=\"4535\" data-end=\"4632\">O WOFF2 foi desenvolvido para oferecer uma compress\u00e3o eficiente de fontes para utiliza\u00e7\u00e3o na Web.<\/p>\n<p data-start=\"4634\" data-end=\"4736\">Na pr\u00e1tica, uma fonte devidamente comprimida pode ocupar menos espa\u00e7o e ser mais r\u00e1pida de transferir.<\/p>\n<p data-start=\"4738\" data-end=\"4820\">Evita carregar formatos antigos ou desnecess\u00e1rios se o teu site n\u00e3o precisa deles.<\/p>\n<hr data-start=\"4822\" data-end=\"4825\" \/>\n<h1 data-section-id=\"1vt40f3\" data-start=\"4827\" data-end=\"4869\"><span class=\"ez-toc-section\" id=\"5_Nao_carregues_fontes_que_nao_utilizas\"><\/span>5. N\u00e3o carregues fontes que n\u00e3o utilizas<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"4871\" data-end=\"4924\">Este \u00e9 um problema bastante comum em temas WordPress.<\/p>\n<p data-start=\"4926\" data-end=\"5040\">O tema pode incluir v\u00e1rias fontes e pesos por padr\u00e3o, mesmo que o teu site utilize apenas uma pequena parte deles.<\/p>\n<p data-start=\"5042\" data-end=\"5146\">Por exemplo, o tema pode carregar cinco fam\u00edlias diferentes, enquanto o teu conte\u00fado utiliza apenas uma.<\/p>\n<p data-start=\"5148\" data-end=\"5223\">Nesse caso, est\u00e1s enviando recursos que n\u00e3o acrescentam valor ao visitante.<\/p>\n<p data-start=\"5225\" data-end=\"5291\">Analisa as fontes utilizadas e elimina as que n\u00e3o s\u00e3o necess\u00e1rias.<\/p>\n<hr data-start=\"5293\" data-end=\"5296\" \/>\n<h1 data-section-id=\"1i8c0e1\" data-start=\"5298\" data-end=\"5351\"><span class=\"ez-toc-section\" id=\"6_Configura_corretamente_o_carregamento_das_fontes\"><\/span>6. Configura corretamente o carregamento das fontes<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"5353\" data-end=\"5399\">Existe uma propriedade CSS importante chamada:<\/p>\n<p data-start=\"5401\" data-end=\"5415\"><code data-start=\"5401\" data-end=\"5415\">font-display<\/code><\/p>\n<p data-start=\"5417\" data-end=\"5513\">Ela controla o comportamento do texto enquanto a fonte personalizada ainda est\u00e1 sendo carregada.<\/p>\n<p data-start=\"5515\" data-end=\"5553\">Uma configura\u00e7\u00e3o bastante utilizada \u00e9:<\/p>\n<p data-start=\"5555\" data-end=\"5576\"><code data-start=\"5555\" data-end=\"5576\">font-display: swap;<\/code><\/p>\n<p data-start=\"5578\" data-end=\"5721\">Com <code data-start=\"5582\" data-end=\"5588\">swap<\/code>, o navegador pode apresentar inicialmente uma fonte alternativa e substituir pela fonte personalizada quando ela estiver dispon\u00edvel.<\/p>\n<p data-start=\"5723\" data-end=\"5803\">Isso ajuda a evitar que o texto fique invis\u00edvel durante o carregamento da fonte.<\/p>\n<p data-start=\"5805\" data-end=\"5823\">Em termos simples:<\/p>\n<p data-start=\"5825\" data-end=\"5894\"><strong data-start=\"5825\" data-end=\"5857\">Sem uma estrat\u00e9gia adequada:<\/strong> o visitante pode esperar pela fonte.<\/p>\n<p data-start=\"5896\" data-end=\"5999\"><strong data-start=\"5896\" data-end=\"5931\">Com uma estrat\u00e9gia como <code data-start=\"5922\" data-end=\"5928\">swap<\/code>:<\/strong> o texto pode aparecer rapidamente utilizando uma fonte alternativa.<\/p>\n<hr data-start=\"6001\" data-end=\"6004\" \/>\n<h1 data-section-id=\"1np9ufn\" data-start=\"6006\" data-end=\"6052\"><span class=\"ez-toc-section\" id=\"7_Escolhe_fontes_do_sistema_quando_possivel\"><\/span>7. Escolhe fontes do sistema quando poss\u00edvel<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"6054\" data-end=\"6120\">Nem todo site precisa obrigatoriamente de uma fonte personalizada.<\/p>\n<p data-start=\"6122\" data-end=\"6250\">Fontes do sistema, como aquelas dispon\u00edveis no pr\u00f3prio dispositivo do visitante, podem evitar o download de arquivos adicionais.<\/p>\n<p data-start=\"6252\" data-end=\"6299\">Por exemplo, uma pilha de fontes pode utilizar:<\/p>\n<p data-start=\"6301\" data-end=\"6312\"><code data-start=\"6301\" data-end=\"6312\">system-ui<\/code><\/p>\n<p data-start=\"6314\" data-end=\"6402\">Isso permite que o sistema operacional escolha uma fonte adequada dispon\u00edvel localmente.<\/p>\n<p data-start=\"6404\" data-end=\"6514\">Para blogs, sites institucionais e projetos que priorizam velocidade, essa pode ser uma excelente alternativa.<\/p>\n<p data-start=\"6516\" data-end=\"6638\">N\u00e3o significa que fontes personalizadas sejam ruins. Significa apenas que deves avaliar se elas realmente s\u00e3o necess\u00e1rias.<\/p>\n<hr data-start=\"6640\" data-end=\"6643\" \/>\n<h1 data-section-id=\"4n6brz\" data-start=\"6645\" data-end=\"6676\"><span class=\"ez-toc-section\" id=\"8_Agora_vamos_otimizar_o_CSS\"><\/span>8. Agora vamos otimizar o CSS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"6678\" data-end=\"6713\">Depois das fontes, chegamos ao CSS.<\/p>\n<p data-start=\"6715\" data-end=\"6815\">O CSS controla o visual do site, mas tamb\u00e9m pode representar uma quantidade significativa de c\u00f3digo.<\/p>\n<p data-start=\"6817\" data-end=\"6858\">Um tema WordPress pode carregar CSS para:<\/p>\n<ul data-start=\"6860\" data-end=\"6992\">\n<li data-section-id=\"pk8cmi\" data-start=\"6860\" data-end=\"6877\">P\u00e1gina inicial;<\/li>\n<li data-section-id=\"16y18yd\" data-start=\"6878\" data-end=\"6885\">Blog;<\/li>\n<li data-section-id=\"16r5saj\" data-start=\"6886\" data-end=\"6893\">Loja;<\/li>\n<li data-section-id=\"1gloeze\" data-start=\"6894\" data-end=\"6908\">Formul\u00e1rios;<\/li>\n<li data-section-id=\"y1lmwl\" data-start=\"6909\" data-end=\"6920\">Galerias;<\/li>\n<li data-section-id=\"p8dd7w\" data-start=\"6921\" data-end=\"6931\">Widgets;<\/li>\n<li data-section-id=\"1ti1ccz\" data-start=\"6932\" data-end=\"6940\">Menus;<\/li>\n<li data-section-id=\"1atje1l\" data-start=\"6941\" data-end=\"6992\">Elementos que nem sequer aparecem naquela p\u00e1gina.<\/li>\n<\/ul>\n<p data-start=\"6994\" data-end=\"7066\">O problema \u00e9 que o navegador pode precisar baixar e processar tudo isso.<\/p>\n<p data-start=\"7068\" data-end=\"7137\">Por isso, uma das melhores estrat\u00e9gias \u00e9 reduzir o CSS desnecess\u00e1rio.<\/p>\n<hr data-start=\"7139\" data-end=\"7142\" \/>\n<h1 data-section-id=\"3xr82i\" data-start=\"7144\" data-end=\"7188\"><span class=\"ez-toc-section\" id=\"9_Remove_CSS_que_nao_esta_sendo_utilizado\"><\/span>9. Remove CSS que n\u00e3o est\u00e1 sendo utilizado<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"7190\" data-end=\"7258\">CSS n\u00e3o utilizado \u00e9 c\u00f3digo enviado para o navegador sem necessidade.<\/p>\n<p data-start=\"7260\" data-end=\"7377\">Imagina que o teu tema possui estilos para uma galeria de imagens, mas determinada p\u00e1gina n\u00e3o possui nenhuma galeria.<\/p>\n<p data-start=\"7379\" data-end=\"7491\">Se esses estilos continuam sendo carregados, est\u00e1s enviando recursos que n\u00e3o s\u00e3o necess\u00e1rios para aquela p\u00e1gina.<\/p>\n<p data-start=\"7493\" data-end=\"7600\">Ferramentas de otimiza\u00e7\u00e3o e alguns plugins de cache podem ajudar a identificar e reduzir CSS n\u00e3o utilizado.<\/p>\n<p data-start=\"7602\" data-end=\"7700\">Mas aten\u00e7\u00e3o: n\u00e3o deves simplesmente apagar arquivos CSS manualmente sem saber o que est\u00e1s fazendo.<\/p>\n<p data-start=\"7702\" data-end=\"7737\">Isso pode quebrar o layout do site.<\/p>\n<hr data-start=\"7739\" data-end=\"7742\" \/>\n<h1 data-section-id=\"qh30cs\" data-start=\"7744\" data-end=\"7774\"><span class=\"ez-toc-section\" id=\"10_Minifica_os_arquivos_CSS\"><\/span>10. Minifica os arquivos CSS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"7776\" data-end=\"7868\">A <strong data-start=\"7778\" data-end=\"7793\">minifica\u00e7\u00e3o<\/strong> remove elementos desnecess\u00e1rios do c\u00f3digo sem alterar o seu funcionamento.<\/p>\n<p data-start=\"7870\" data-end=\"7956\">Por exemplo, espa\u00e7os, coment\u00e1rios e determinadas quebras de linha podem ser removidos.<\/p>\n<p data-start=\"7958\" data-end=\"8053\">Um CSS utilizado durante o desenvolvimento pode ser bastante espa\u00e7ado para facilitar a leitura.<\/p>\n<p data-start=\"8055\" data-end=\"8107\">Depois da minifica\u00e7\u00e3o, o arquivo fica mais compacto.<\/p>\n<p data-start=\"8109\" data-end=\"8180\">Isso pode reduzir o tamanho transferido entre o servidor e o navegador.<\/p>\n<h3 data-section-id=\"nncq3o\" data-start=\"8182\" data-end=\"8206\"><span class=\"ez-toc-section\" id=\"Exemplo_simplificado\"><\/span>Exemplo simplificado<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"8208\" data-end=\"8214\">Antes:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">titulo<\/span> {\r\n    color: #222;\r\n    font-size: <span class=\"\u037cy\">32<\/span><span class=\"\u037cv\">px<\/span>;\r\n    font-weight: <span class=\"\u037cy\">700<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8300\" data-end=\"8322\">Depois da minifica\u00e7\u00e3o:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse\/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037c10\">titulo<\/span>{color:#222;font-size:<span class=\"\u037cy\">32<\/span><span class=\"\u037cv\">px<\/span>;font-weight:<span class=\"\u037cy\">700<\/span>}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"8387\" data-end=\"8469\">O resultado visual continua sendo o mesmo, mas o arquivo pode ocupar menos espa\u00e7o.<\/p>\n<hr data-start=\"8471\" data-end=\"8474\" \/>\n<h1 data-section-id=\"ndm0yj\" data-start=\"8476\" data-end=\"8514\"><span class=\"ez-toc-section\" id=\"11_Combine_arquivos_CSS_Nem_sempre\"><\/span>11. Combine arquivos CSS? Nem sempre<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"8516\" data-end=\"8635\">Antigamente, combinar v\u00e1rios arquivos CSS em um \u00fanico arquivo era uma t\u00e9cnica bastante comum para reduzir pedidos HTTP.<\/p>\n<p data-start=\"8637\" data-end=\"8756\">Hoje, dependendo da hospedagem, protocolo HTTP e configura\u00e7\u00e3o do site, <strong data-start=\"8708\" data-end=\"8755\">combinar tudo nem sempre \u00e9 a melhor solu\u00e7\u00e3o<\/strong>.<\/p>\n<p data-start=\"8758\" data-end=\"8806\">Por isso, n\u00e3o atives essa op\u00e7\u00e3o automaticamente.<\/p>\n<p data-start=\"8808\" data-end=\"8825\">O ideal \u00e9 testar.<\/p>\n<p data-start=\"8827\" data-end=\"8868\">Se o plugin de cache oferece op\u00e7\u00f5es como:<\/p>\n<ul data-start=\"8870\" data-end=\"8931\">\n<li data-section-id=\"126x3n0\" data-start=\"8870\" data-end=\"8886\">Minificar CSS;<\/li>\n<li data-section-id=\"1gemfs7\" data-start=\"8887\" data-end=\"8902\">Combinar CSS;<\/li>\n<li data-section-id=\"7ccva3\" data-start=\"8903\" data-end=\"8931\">Remover CSS n\u00e3o utilizado;<\/li>\n<\/ul>\n<p data-start=\"8933\" data-end=\"8984\">ativa uma op\u00e7\u00e3o de cada vez e verifica o resultado.<\/p>\n<hr data-start=\"8986\" data-end=\"8989\" \/>\n<h1 data-section-id=\"jlbwvi\" data-start=\"8991\" data-end=\"9019\"><span class=\"ez-toc-section\" id=\"12_Prioriza_o_CSS_critico\"><\/span>12. Prioriza o CSS cr\u00edtico<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"9021\" data-end=\"9067\">Outro conceito importante \u00e9 o <strong data-start=\"9051\" data-end=\"9066\">CSS cr\u00edtico<\/strong>.<\/p>\n<p data-start=\"9069\" data-end=\"9195\">O CSS cr\u00edtico \u00e9 o conjunto de estilos necess\u00e1rios para apresentar imediatamente a parte da p\u00e1gina que o visitante v\u00ea primeiro.<\/p>\n<p data-start=\"9197\" data-end=\"9269\">Por exemplo, quando algu\u00e9m abre um artigo, a parte inicial pode incluir:<\/p>\n<ul data-start=\"9271\" data-end=\"9345\">\n<li data-section-id=\"wytnuj\" data-start=\"9271\" data-end=\"9283\">Cabe\u00e7alho;<\/li>\n<li data-section-id=\"16vqdgg\" data-start=\"9284\" data-end=\"9291\">Menu;<\/li>\n<li data-section-id=\"1gbn2yw\" data-start=\"9292\" data-end=\"9301\">T\u00edtulo;<\/li>\n<li data-section-id=\"a2pjej\" data-start=\"9302\" data-end=\"9325\">Primeiros par\u00e1grafos;<\/li>\n<li data-section-id=\"gpeifg\" data-start=\"9326\" data-end=\"9345\">Imagem destacada.<\/li>\n<\/ul>\n<p data-start=\"9347\" data-end=\"9464\">O navegador n\u00e3o precisa necessariamente de todos os estilos de uma p\u00e1gina inteira para apresentar essa primeira \u00e1rea.<\/p>\n<p data-start=\"9466\" data-end=\"9562\">Ao priorizar o CSS necess\u00e1rio para o conte\u00fado inicial, podes melhorar a percep\u00e7\u00e3o de velocidade.<\/p>\n<p data-start=\"9564\" data-end=\"9636\">Alguns plugins de desempenho conseguem automatizar parte desse processo.<\/p>\n<hr data-start=\"9638\" data-end=\"9641\" \/>\n<h1 data-section-id=\"1oamher\" data-start=\"9643\" data-end=\"9688\"><span class=\"ez-toc-section\" id=\"13_Utiliza_um_plugin_de_cache_e_otimizacao\"><\/span>13. Utiliza um plugin de cache e otimiza\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"9690\" data-end=\"9815\">Se n\u00e3o tens conhecimentos t\u00e9cnicos para otimizar CSS manualmente, um plugin de desempenho pode facilitar bastante o trabalho.<\/p>\n<p data-start=\"9817\" data-end=\"9880\">Dependendo da solu\u00e7\u00e3o utilizada, podes encontrar recursos como:<\/p>\n<ul data-start=\"9882\" data-end=\"10041\">\n<li data-section-id=\"1uxzmwv\" data-start=\"9882\" data-end=\"9890\">Cache;<\/li>\n<li data-section-id=\"j50y38\" data-start=\"9891\" data-end=\"9912\">Minifica\u00e7\u00e3o de CSS;<\/li>\n<li data-section-id=\"uro56v\" data-start=\"9913\" data-end=\"9940\">Otimiza\u00e7\u00e3o de JavaScript;<\/li>\n<li data-section-id=\"1sx78uo\" data-start=\"9941\" data-end=\"9972\">Remo\u00e7\u00e3o de CSS n\u00e3o utilizado;<\/li>\n<li data-section-id=\"6wpp97\" data-start=\"9973\" data-end=\"9985\">Lazy Load;<\/li>\n<li data-section-id=\"10m7bo1\" data-start=\"9986\" data-end=\"10009\">Otimiza\u00e7\u00e3o de fontes;<\/li>\n<li data-section-id=\"vak475\" data-start=\"10010\" data-end=\"10041\">Pr\u00e9-carregamento de recursos.<\/li>\n<\/ul>\n<p data-start=\"10043\" data-end=\"10109\">O mais importante \u00e9 <strong data-start=\"10063\" data-end=\"10108\">n\u00e3o ativar todas as op\u00e7\u00f5es ao mesmo tempo<\/strong>.<\/p>\n<p data-start=\"10111\" data-end=\"10165\">Cada site WordPress possui uma configura\u00e7\u00e3o diferente.<\/p>\n<p data-start=\"10167\" data-end=\"10244\">Uma op\u00e7\u00e3o que funciona perfeitamente num site pode causar problemas em outro.<\/p>\n<hr data-start=\"10246\" data-end=\"10249\" \/>\n<h1 data-section-id=\"1gv4io0\" data-start=\"10251\" data-end=\"10290\"><span class=\"ez-toc-section\" id=\"14_Cuidado_com_plugins_de_otimizacao\"><\/span>14. Cuidado com plugins de otimiza\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"10292\" data-end=\"10355\">\u00c9 tentador instalar v\u00e1rios plugins para tentar acelerar o site.<\/p>\n<p data-start=\"10357\" data-end=\"10400\">Por\u00e9m, isso pode causar o efeito contr\u00e1rio.<\/p>\n<p data-start=\"10402\" data-end=\"10462\">Imagina que instalas tr\u00eas plugins diferentes e todos tentam:<\/p>\n<ul data-start=\"10464\" data-end=\"10535\">\n<li data-section-id=\"126x3n0\" data-start=\"10464\" data-end=\"10480\">Minificar CSS;<\/li>\n<li data-section-id=\"1ofkxu8\" data-start=\"10481\" data-end=\"10501\">Combinar arquivos;<\/li>\n<li data-section-id=\"gwcia1\" data-start=\"10502\" data-end=\"10520\">Otimizar fontes;<\/li>\n<li data-section-id=\"ckwzhd\" data-start=\"10521\" data-end=\"10535\">Criar cache.<\/li>\n<\/ul>\n<p data-start=\"10537\" data-end=\"10591\">Podes acabar com configura\u00e7\u00f5es duplicadas e conflitos.<\/p>\n<p data-start=\"10593\" data-end=\"10686\">Por isso, escolhe uma solu\u00e7\u00e3o principal para cache e otimiza\u00e7\u00e3o e configura-a cuidadosamente.<\/p>\n<hr data-start=\"10688\" data-end=\"10691\" \/>\n<h1 data-section-id=\"1m99orb\" data-start=\"10693\" data-end=\"10746\"><span class=\"ez-toc-section\" id=\"15_Evita_carregar_fontes_de_plugins_desnecessarios\"><\/span>15. Evita carregar fontes de plugins desnecess\u00e1rios<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"10748\" data-end=\"10786\">\u00c0s vezes, o problema n\u00e3o est\u00e1 no tema.<\/p>\n<p data-start=\"10788\" data-end=\"10857\">Um plugin pode adicionar a sua pr\u00f3pria fonte ou biblioteca de \u00edcones.<\/p>\n<p data-start=\"10859\" data-end=\"11015\">Por exemplo, um plugin de formul\u00e1rio pode carregar arquivos CSS adicionais em todas as p\u00e1ginas, mesmo quando o formul\u00e1rio s\u00f3 aparece numa p\u00e1gina espec\u00edfica.<\/p>\n<p data-start=\"11017\" data-end=\"11044\">O mesmo pode acontecer com:<\/p>\n<ul data-start=\"11046\" data-end=\"11165\">\n<li data-section-id=\"ycsm9q\" data-start=\"11046\" data-end=\"11067\">Plugins de sliders;<\/li>\n<li data-section-id=\"exxxik\" data-start=\"11068\" data-end=\"11094\">Construtores de p\u00e1ginas;<\/li>\n<li data-section-id=\"17m6k8e\" data-start=\"11095\" data-end=\"11117\">Plugins de galerias;<\/li>\n<li data-section-id=\"gt1ry4\" data-start=\"11118\" data-end=\"11139\">Plugins de pop-ups;<\/li>\n<li data-section-id=\"1k1g81g\" data-start=\"11140\" data-end=\"11165\">Plugins de formul\u00e1rios.<\/li>\n<\/ul>\n<p data-start=\"11167\" data-end=\"11260\">Sempre que poss\u00edvel, faz com que esses recursos sejam carregados apenas onde s\u00e3o necess\u00e1rios.<\/p>\n<hr data-start=\"11262\" data-end=\"11265\" \/>\n<h1 data-section-id=\"1a6a8gw\" data-start=\"11267\" data-end=\"11308\"><span class=\"ez-toc-section\" id=\"16_Cuidado_com_construtores_de_paginas\"><\/span>16. Cuidado com construtores de p\u00e1ginas<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"11310\" data-end=\"11382\">Construtores visuais podem facilitar muito a cria\u00e7\u00e3o de sites WordPress.<\/p>\n<p data-start=\"11384\" data-end=\"11492\">Por outro lado, dependendo da ferramenta e da configura\u00e7\u00e3o, podem gerar uma quantidade significativa de CSS.<\/p>\n<p data-start=\"11494\" data-end=\"11643\">Se utilizas um construtor de p\u00e1ginas, evita criar dezenas de estilos personalizados diferentes para elementos que poderiam utilizar uma mesma classe.<\/p>\n<p data-start=\"11645\" data-end=\"11725\">Quanto mais organizada for a estrutura, mais f\u00e1cil ser\u00e1 otimizar posteriormente.<\/p>\n<hr data-start=\"11727\" data-end=\"11730\" \/>\n<h1 data-section-id=\"j924r2\" data-start=\"11732\" data-end=\"11764\"><span class=\"ez-toc-section\" id=\"17_Ativa_o_cache_do_navegador\"><\/span>17. Ativa o cache do navegador<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"11766\" data-end=\"11854\">O cache permite que determinados recursos sejam armazenados no dispositivo do visitante.<\/p>\n<p data-start=\"11856\" data-end=\"11992\">Isso significa que, quando a pessoa volta ao teu site, o navegador pode reutilizar arquivos que j\u00e1 possui em vez de baix\u00e1-los novamente.<\/p>\n<p data-start=\"11994\" data-end=\"12061\">CSS e fontes s\u00e3o bons candidatos para pol\u00edticas adequadas de cache.<\/p>\n<p data-start=\"12063\" data-end=\"12117\">Isso \u00e9 especialmente \u00fatil para visitantes recorrentes.<\/p>\n<hr data-start=\"12119\" data-end=\"12122\" \/>\n<h1 data-section-id=\"1ejar3r\" data-start=\"12124\" data-end=\"12153\"><span class=\"ez-toc-section\" id=\"18_Usa_preload_com_cuidado\"><\/span>18. Usa preload com cuidado<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"12155\" data-end=\"12271\">O <code data-start=\"12157\" data-end=\"12166\">preload<\/code> permite informar ao navegador que determinado recurso \u00e9 importante e deve ser carregado antecipadamente.<\/p>\n<p data-start=\"12273\" data-end=\"12361\">Pode ser \u00fatil para uma fonte realmente importante para a apresenta\u00e7\u00e3o inicial da p\u00e1gina.<\/p>\n<p data-start=\"12363\" data-end=\"12413\">Por\u00e9m, n\u00e3o deves fazer preload de todas as fontes.<\/p>\n<p data-start=\"12415\" data-end=\"12552\">Se marcares muitos recursos como priorit\u00e1rios, podes acabar competindo pela largura de banda e prejudicando outros elementos importantes.<\/p>\n<p data-start=\"12554\" data-end=\"12563\">Portanto:<\/p>\n<p data-start=\"12565\" data-end=\"12612\"><strong data-start=\"12565\" data-end=\"12612\">Preload apenas recursos realmente cr\u00edticos.<\/strong><\/p>\n<hr data-start=\"12614\" data-end=\"12617\" \/>\n<h1 data-section-id=\"1kgjg5t\" data-start=\"12619\" data-end=\"12651\"><span class=\"ez-toc-section\" id=\"19_Nao_utilizes_fontes_demais\"><\/span>19. N\u00e3o utilizes fontes demais<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"12653\" data-end=\"12728\">Um dos melhores conselhos para quem est\u00e1 a come\u00e7ar \u00e9 tamb\u00e9m o mais simples:<\/p>\n<p data-start=\"12730\" data-end=\"12747\"><strong data-start=\"12730\" data-end=\"12747\">menos \u00e9 mais.<\/strong><\/p>\n<p data-start=\"12749\" data-end=\"12807\">Um blog n\u00e3o precisa de seis fam\u00edlias de fontes diferentes.<\/p>\n<p data-start=\"12809\" data-end=\"12852\">Uma combina\u00e7\u00e3o simples pode ser suficiente:<\/p>\n<ul data-start=\"12854\" data-end=\"12904\">\n<li data-section-id=\"hucl5i\" data-start=\"12854\" data-end=\"12879\">Uma fonte para t\u00edtulos;<\/li>\n<li data-section-id=\"15uio2y\" data-start=\"12880\" data-end=\"12904\">Uma fonte para textos.<\/li>\n<\/ul>\n<p data-start=\"12906\" data-end=\"12919\">Ou at\u00e9 mesmo:<\/p>\n<ul data-start=\"12921\" data-end=\"12967\">\n<li data-section-id=\"1r96jxe\" data-start=\"12921\" data-end=\"12967\">Uma \u00fanica fam\u00edlia de fonte para todo o site.<\/li>\n<\/ul>\n<p data-start=\"12969\" data-end=\"13060\">Al\u00e9m de melhorar o desempenho, uma tipografia consistente torna o design mais profissional.<\/p>\n<hr data-start=\"13062\" data-end=\"13065\" \/>\n<h1 data-section-id=\"g69ptn\" data-start=\"13067\" data-end=\"13113\"><span class=\"ez-toc-section\" id=\"20_Testa_a_velocidade_depois_das_alteracoes\"><\/span>20. Testa a velocidade depois das altera\u00e7\u00f5es<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"13115\" data-end=\"13227\">Depois de otimizar fontes e CSS, n\u00e3o assumes que o site ficou mais r\u00e1pido apenas porque ativaste algumas op\u00e7\u00f5es.<\/p>\n<p data-start=\"13229\" data-end=\"13235\">Testa.<\/p>\n<p data-start=\"13237\" data-end=\"13304\">Podes utilizar ferramentas de an\u00e1lise de desempenho para verificar:<\/p>\n<ul data-start=\"13306\" data-end=\"13477\">\n<li data-section-id=\"1e2hzbh\" data-start=\"13306\" data-end=\"13330\">Tempo de carregamento;<\/li>\n<li data-section-id=\"1oansgx\" data-start=\"13331\" data-end=\"13355\">Recursos bloqueadores;<\/li>\n<li data-section-id=\"cbxbdb\" data-start=\"13356\" data-end=\"13379\">Tamanho dos arquivos;<\/li>\n<li data-section-id=\"102apxr\" data-start=\"13380\" data-end=\"13400\">CSS n\u00e3o utilizado;<\/li>\n<li data-section-id=\"q5bsqp\" data-start=\"13401\" data-end=\"13421\">Fontes carregadas;<\/li>\n<li data-section-id=\"12yclrh\" data-start=\"13422\" data-end=\"13440\">Core Web Vitals;<\/li>\n<li data-section-id=\"1uwbi1f\" data-start=\"13441\" data-end=\"13477\">Desempenho em dispositivos m\u00f3veis.<\/li>\n<\/ul>\n<p data-start=\"13479\" data-end=\"13525\">Tamb\u00e9m \u00e9 importante testar o site manualmente.<\/p>\n<p data-start=\"13527\" data-end=\"13532\">Abre:<\/p>\n<ul data-start=\"13534\" data-end=\"13631\">\n<li data-section-id=\"pk8cmi\" data-start=\"13534\" data-end=\"13551\">P\u00e1gina inicial;<\/li>\n<li data-section-id=\"1opc3g5\" data-start=\"13552\" data-end=\"13561\">Artigo;<\/li>\n<li data-section-id=\"2rg9rk\" data-start=\"13562\" data-end=\"13585\">P\u00e1gina de categorias;<\/li>\n<li data-section-id=\"1d901f1\" data-start=\"13586\" data-end=\"13607\">P\u00e1gina de contacto;<\/li>\n<li data-section-id=\"1ti1ccz\" data-start=\"13608\" data-end=\"13616\">Menus;<\/li>\n<li data-section-id=\"1gloez3\" data-start=\"13617\" data-end=\"13631\">Formul\u00e1rios.<\/li>\n<\/ul>\n<p data-start=\"13633\" data-end=\"13684\">Verifica se tudo continua funcionando corretamente.<\/p>\n<hr data-start=\"13686\" data-end=\"13689\" \/>\n<h1 data-section-id=\"1f8e7nx\" data-start=\"13691\" data-end=\"13730\"><span class=\"ez-toc-section\" id=\"Como_saber_se_a_otimizacao_funcionou\"><\/span>Como saber se a otimiza\u00e7\u00e3o funcionou?<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"13732\" data-end=\"13775\">Depois das altera\u00e7\u00f5es, procura sinais como:<\/p>\n<p data-start=\"13777\" data-end=\"13812\"><strong data-start=\"13777\" data-end=\"13812\">\u2713 Menos arquivos CSS carregados<\/strong><\/p>\n<p data-start=\"13814\" data-end=\"13846\"><strong data-start=\"13814\" data-end=\"13846\">\u2713 Menor tamanho dos arquivos<\/strong><\/p>\n<p data-start=\"13848\" data-end=\"13884\"><strong data-start=\"13848\" data-end=\"13884\">\u2713 Menos fontes sendo solicitadas<\/strong><\/p>\n<p data-start=\"13886\" data-end=\"13920\"><strong data-start=\"13886\" data-end=\"13920\">\u2713 Texto aparecendo rapidamente<\/strong><\/p>\n<p data-start=\"13922\" data-end=\"13954\"><strong data-start=\"13922\" data-end=\"13954\">\u2713 P\u00e1gina visualmente est\u00e1vel<\/strong><\/p>\n<p data-start=\"13956\" data-end=\"13989\"><strong data-start=\"13956\" data-end=\"13989\">\u2713 Menor tempo de carregamento<\/strong><\/p>\n<p data-start=\"13991\" data-end=\"14037\"><strong data-start=\"13991\" data-end=\"14037\">\u2713 Melhor desempenho em dispositivos m\u00f3veis<\/strong><\/p>\n<p data-start=\"14039\" data-end=\"14085\">Mas n\u00e3o te preocupes apenas com uma pontua\u00e7\u00e3o.<\/p>\n<p data-start=\"14087\" data-end=\"14182\">O objetivo principal \u00e9 criar uma experi\u00eancia <strong data-start=\"14132\" data-end=\"14181\">realmente r\u00e1pida e est\u00e1vel para os visitantes<\/strong>.<\/p>\n<hr data-start=\"14184\" data-end=\"14187\" \/>\n<h1 data-section-id=\"1gon3x9\" data-start=\"14189\" data-end=\"14234\"><span class=\"ez-toc-section\" id=\"Checklist_rapido_para_otimizar_fontes_e_CSS\"><\/span>Checklist r\u00e1pido para otimizar fontes e CSS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"14236\" data-end=\"14285\">Antes de terminar, podes utilizar este checklist:<\/p>\n<h3 data-section-id=\"d0z4zn\" data-start=\"14287\" data-end=\"14297\"><span class=\"ez-toc-section\" id=\"Fontes\"><\/span>Fontes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"14299\" data-end=\"14582\">&#x2611; Utilizar poucas fam\u00edlias de fontes<br data-start=\"14335\" data-end=\"14338\" \/>&#x2611; Reduzir pesos desnecess\u00e1rios<br data-start=\"14368\" data-end=\"14371\" \/>&#x2611; Preferir WOFF2<br data-start=\"14387\" data-end=\"14390\" \/>&#x2611; Hospedar fontes localmente quando fizer sentido<br data-start=\"14439\" data-end=\"14442\" \/>&#x2611; Utilizar <code data-start=\"14453\" data-end=\"14473\">font-display: swap<\/code> quando apropriado<br data-start=\"14491\" data-end=\"14494\" \/>&#x2611; Considerar fontes do sistema<br data-start=\"14524\" data-end=\"14527\" \/>&#x2611; Evitar fontes carregadas por plugins desnecess\u00e1rios<\/p>\n<h3 data-section-id=\"1xxf8v9\" data-start=\"14584\" data-end=\"14591\"><span class=\"ez-toc-section\" id=\"CSS\"><\/span>CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-start=\"14593\" data-end=\"14817\">&#x2611; Minificar CSS<br data-start=\"14608\" data-end=\"14611\" \/>&#x2611; Remover CSS n\u00e3o utilizado quando poss\u00edvel<br data-start=\"14654\" data-end=\"14657\" \/>&#x2611; Priorizar CSS cr\u00edtico<br data-start=\"14680\" data-end=\"14683\" \/>&#x2611; Evitar configura\u00e7\u00f5es duplicadas<br data-start=\"14716\" data-end=\"14719\" \/>&#x2611; Cuidar com construtores de p\u00e1ginas<br data-start=\"14755\" data-end=\"14758\" \/>&#x2611; Utilizar cache<br data-start=\"14774\" data-end=\"14777\" \/>&#x2611; Testar antes e depois das altera\u00e7\u00f5es<\/p>\n<hr data-start=\"14819\" data-end=\"14822\" \/>\n<h1 data-section-id=\"1g4xr35\" data-start=\"14824\" data-end=\"14835\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p data-start=\"14837\" data-end=\"14971\"><strong data-start=\"14837\" data-end=\"14901\">Otimizar fontes e CSS no WordPress para carregar mais r\u00e1pido<\/strong> pode fazer uma diferen\u00e7a significativa na experi\u00eancia dos visitantes.<\/p>\n<p data-start=\"14973\" data-end=\"15262\">N\u00e3o precisas come\u00e7ar com t\u00e9cnicas extremamente avan\u00e7adas. Muitas vezes, pequenas altera\u00e7\u00f5es j\u00e1 ajudam bastante: reduzir o n\u00famero de fontes, utilizar apenas os pesos necess\u00e1rios, escolher formatos eficientes, eliminar CSS desnecess\u00e1rio, minificar arquivos e configurar corretamente o cache.<\/p>\n<p data-start=\"15264\" data-end=\"15489\">Tamb\u00e9m \u00e9 importante lembrar que <strong data-start=\"15296\" data-end=\"15380\">n\u00e3o existe uma configura\u00e7\u00e3o universal que funcione para todos os sites WordPress<\/strong>. O tema, os plugins, a hospedagem e a forma como o site foi constru\u00eddo influenciam diretamente o desempenho.<\/p>\n<p data-start=\"15491\" data-end=\"15570\">Por isso, faz as altera\u00e7\u00f5es gradualmente e testa o site depois de cada mudan\u00e7a.<\/p>\n<p data-start=\"15572\" data-end=\"15799\">E, acima de tudo, n\u00e3o transformes a otimiza\u00e7\u00e3o numa corrida atr\u00e1s de uma pontua\u00e7\u00e3o perfeita. O verdadeiro objetivo \u00e9 fazer com que <strong data-start=\"15703\" data-end=\"15798\">o visitante consiga abrir o teu site, visualizar o conte\u00fado e interagir com ele rapidamente<\/strong>.<\/p>\n<p data-start=\"15801\" data-end=\"16012\" data-is-last-node=\"\" data-is-only-node=\"\">Um WordPress r\u00e1pido n\u00e3o depende apenas de um plugin de cache. Ele come\u00e7a com uma estrutura simples, poucas fontes, CSS bem organizado e apenas os recursos realmente necess\u00e1rios para entregar uma boa experi\u00eancia.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<div class=\"\" data-turn-id-container=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-9\" data-is-intersecting=\"true\">\n<section class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-9\" data-turn-id-container=\"request-WEB:f0dd0fc5-48d8-42f9-9fa9-62070e14b18e-9\" data-testid=\"conversation-turn-18\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-8 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" data-conversation-screenshot-content=\"\">\n<div class=\"z-0 flex min-h-[46px] justify-start\"><\/div>\n<div class=\"mt-3 w-full empty:hidden has-[&gt;_:empty]:hidden\">\n<div class=\"text-center\"><\/div>\n<\/div>\n<\/div>\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1\" data-conversation-screenshot-content=\"\">\n<div><\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<div class=\"pointer-events-none -mt-px h-px translate-y-(--scroll-root-safe-area-inset-bottom)\" aria-hidden=\"true\"><\/div>\n<div class=\"mt-auto grid\">\n<div class=\"col-start-1 row-start-1\">\n<div class=\"pointer-events-none translate-y-(--scroll-root-safe-area-inset-bottom) R6Vx5W_threadScrollVars min-h-(--gutter-remaining-height,0px) group-data-stream-active\/scroll-root:h-[calc(var(--thread-response-height)-16*var(--spacing))]\"><\/div>\n<\/div>\n<div class=\"sticky bottom-(--scroll-root-safe-area-inset-bottom,0px) col-start-1 row-start-1 self-end\">\n<div class=\"\" data-testid=\"thread-disclaimer\">\n<div class=\"min-h-9 pt-2 text-center text-xs text-token-text-tertiary [view-transition-name:var(--vt-disclaimer)] pb-4 relative overflow-hidden @w-sm\/main:px-[60px]\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"thread-bottom-container\" class=\"sticky bottom-0 z-10 group\/thread-bottom-container relative isolate w-full basis-auto has-data-has-thread-error:pt-2 has-data-has-thread-error:[box-shadow:var(--sharp-edge-bottom-shadow)] md:border-transparent md:pt-0 dark:border-white\/20 md:dark:border-transparent print:hidden pointer-events-none [--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] Ejxyja_threadFooterContentFade flex flex-col\">\n<div class=\"pointer-events-none\" data-thread-footer-overflow-spacer=\"\" data-testid=\"thread-footer-overflow-spacer\" aria-hidden=\"true\"><\/div>\n<div class=\"w-full\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 pointer-events-auto @[53.5rem]\/main:[--thread-content-max-width:48rem] w-full\">\n<div class=\"pointer-events-auto mb-(--thread-component-gap,24px) w-full empty:hidden\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"pointer-events-auto relative mx-auto h-0\">\n<div class=\"flex h-0 items-end justify-center motion-safe:transition-all motion-safe:delay-300 motion-safe:duration-300 group-[:not([data-scroll-from-end])]\/scroll-root:scale-50 group-[:not([data-scroll-from-end])]\/scroll-root:translate-y-2 group-[:not([data-scroll-from-end])]\/scroll-root:opacity-0 group-[:not([data-scroll-from-end])]\/scroll-root:pointer-events-none group-[:not([data-scroll-from-end])]\/scroll-root:duration-100 group-[:not([data-scroll-from-end])]\/scroll-root:delay-0 absolute start-1\/2 z-10 -translate-x-1\/2 bottom-[calc(100%+3*var(--spacing)+var(--thread-scroll-to-bottom-banner-offset,0px))]\"><\/div>\n<\/div>\n<div id=\"thread-bottom\" class=\"relative\">\n<div class=\"relative z-1\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\">\n<div>\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 mb-(--thread-component-gap,24px) pointer-events-auto\">\n<div class=\"w-full\">\n<div class=\"pointer-events-auto relative z-1 flex h-(--composer-container-height,100%) max-w-full flex-(--composer-container-flex,1) flex-col\">\n<div class=\"flex justify-center empty:hidden\"><\/div>\n<div class=\"absolute start-0 end-0 bottom-full z-20\" data-prompt-textarea-header=\"\"><\/div>\n<form class=\"group\/composer w-full\" autocomplete=\"off\" data-type=\"unified-composer\">\n<div class=\"hidden\"><input id=\"upload-files\" tabindex=\"-1\" multiple=\"multiple\" type=\"file\" data-photo-upload-enabled=\"true\" \/><\/div>\n<div class=\"relative\">\n<div class=\"bg-(--composer-surface-primary) flex cursor-text flex-col overflow-clip bg-clip-padding contain-inline-size motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out group-not-data-expanded\/composer:min-h-[52px] shadow-short-composer max-sm:not-dark:shadow-[0_0_0_1px_rgba(0,_0,_0,_0.04),0_2px_8px_0_rgba(0,_0,_0,_0.04),0px_4px_40px_8px_rgba(0,_0,_0,_0.025)]\" data-composer-surface=\"true\">\n<div class=\"relative h-0 shrink-0\" data-composer-controls-anchor=\"\"><\/div>\n<div class=\"min-h-0 min-w-0 flex-1 px-2 py-[9px] group-not-data-expanded\/composer:py-[5px] max-sm:group-not-data-expanded\/composer:pb-2 grid grid-cols-[auto_1fr_auto] [grid-template-areas:'header_header_header'_'leading_primary_trailing'_'._footer_.'] group-data-expanded\/composer:[grid-template-areas:'header_header_header'_'primary_primary_primary'_'leading_footer_trailing'] max-sm:[grid-template-areas:'header_header_header'_'primary_primary_primary'_'leading_footer_trailing']\" data-composer-body=\"\" data-composer-grid=\"\">\n<div class=\"self-center [grid-area:leading]\" data-composer-transition-slot=\"leading\">\n<div id=\"_r_bb_\" class=\"fixed inset-s-[calc(anchor(center)+var(--oai-anchor-align-offset,0px))] inset-e-auto top-[calc(anchor(bottom)+var(--spacing))] bottom-auto h-fit -translate-x-1\/2 [position-try-fallbacks:flip-block] flex flex-col overflow-visible bg-transparent z-50 [inset-inline:auto]! translate-none! [position-area:span-all]\" role=\"tooltip\" hidden=\"\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"-my-2.5 flex overflow-x-hidden ps-1.75 pe-1.5 [grid-area:primary] group-data-expanded\/composer:mb-0 group-data-expanded\/composer:ps-2.5 group-data-expanded\/composer:pe-2.5 min-h-14 items-center\">\n<div class=\"wcDTda_prosemirror-parent text-token-text-primary max-h-[max(30svh,5rem)] max-h-52 min-h-[var(--deep-research-composer-extra-height,unset)] flex-1 scroll-py-4 overflow-auto [scrollbar-width:thin] default-browser vertical-scroll-fade-mask group-data-[expanded-composer-mode-button]\/composer:pe-9\">\n<p><textarea class=\"wcDTda_fallbackTextarea\" dir=\"auto\" spellcheck=\"true\" name=\"prompt-textarea\" placeholder=\"Ask anything\" aria-label=\"Chat with ChatGPT\" data-virtualkeyboard=\"true\"><\/textarea><\/p>\n<div id=\"prompt-textarea\" class=\"ProseMirror\" role=\"textbox\" contenteditable=\"true\" spellcheck=\"true\" translate=\"no\" data-virtualkeyboard=\"true\" aria-multiline=\"true\" aria-label=\"Chat with ChatGPT\"><\/div>\n<\/div>\n<\/div>\n<div class=\"flex items-center gap-1 [grid-area:trailing]\" data-composer-transition-slot=\"trailing\">\n<div class=\"relative ms-1 flex items-center gap-1.5\">\n<div class=\"max-sm:hidden\">\n<div id=\"_r_bd_\" class=\"fixed inset-s-[calc(anchor(center)+var(--oai-anchor-align-offset,0px))] inset-e-auto top-[calc(anchor(bottom)+var(--spacing))] bottom-auto h-fit -translate-x-1\/2 [position-try-fallbacks:flip-block] flex flex-col overflow-visible bg-transparent z-50 [inset-inline:auto]! translate-none! [position-area:span-all]\" role=\"tooltip\" hidden=\"\"><\/div>\n<div class=\"__composer-pill-icon\"><\/div>\n<\/div>\n<\/div>\n<div class=\"ms-auto flex items-center gap-2\">\n<div id=\"_r_bf_\" class=\"fixed inset-s-[calc(anchor(center)+var(--oai-anchor-align-offset,0px))] inset-e-auto top-[calc(anchor(bottom)+var(--spacing))] bottom-auto h-fit -translate-x-1\/2 [position-try-fallbacks:flip-block] flex flex-col overflow-visible bg-transparent z-50 [inset-inline:auto]! translate-none! [position-area:span-all]\" role=\"tooltip\" hidden=\"\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"inline-flex\">\n<div>\n<div id=\"_r_lb_\" class=\"fixed inset-s-[calc(anchor(center)+var(--oai-anchor-align-offset,0px))] inset-e-auto top-[calc(anchor(bottom)+var(--spacing))] bottom-auto h-fit -translate-x-1\/2 [position-try-fallbacks:flip-block] flex flex-col overflow-visible bg-transparent z-50 [inset-inline:auto]! translate-none! [position-area:span-all]\" role=\"tooltip\" hidden=\"\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/form>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"pointer-events-none absolute inset-0\">\n<div class=\"text-base mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin) h-full\">\n<div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 relative h-full\">\n<div class=\"pointer-events-none absolute inset-0 z-50 *:pointer-events-auto\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"pointer-events-none fixed inset-x-0 bottom-[calc(var(--scroll-root-safe-area-inset-bottom)+1rem)] z-[100]\"><\/div>\n<\/div>\n<\/div>\n<div class=\"bg-surface-primary relative min-h-0 shrink-0 overflow-hidden ease-out motion-reduce:transition-none transition-[width] duration-300\" data-side-pane-shell-rail=\"true\">\n<div class=\"absolute inset-y-0 end-0 h-full\" aria-hidden=\"true\" data-side-pane-shell-surface=\"true\">\n<div class=\"h-full w-full\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A velocidade de um site WordPress depende de v\u00e1rios fatores. Imagens pesadas, hospedagem lenta, excesso de plugins, JavaScript mal otimizado e c\u00f3digos desnecess\u00e1rios podem prejudicar o desempenho. Por\u00e9m, existe outro problema que muitas vezes passa despercebido: fontes e arquivos CSS. As fontes utilizadas no site podem adicionar v\u00e1rios pedidos ao servidor, enquanto arquivos CSS grandes [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[86,93,91,89,85,90,52,87,92,88],"class_list":["post-512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","tag-ags-otimizar-fontes-wordpress","tag-carregamento-rapido-como-otimizar-fontes-e","tag-core-web-vitals","tag-css-wordpress","tag-desempenho-wordpress","tag-fontes-wordpress","tag-otimizacao-wordpress","tag-otimizar-css-wordpress","tag-site-rapido","tag-velocidade-wordpress"],"featured_image_src":"https:\/\/flowbase.co.mz\/blog\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-11-2026-02_35_56-PM-2-600x400.jpg","featured_image_src_square":"https:\/\/flowbase.co.mz\/blog\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-11-2026-02_35_56-PM-2-600x600.jpg","author_info":{"display_name":"Chelton Agude","author_link":"https:\/\/flowbase.co.mz\/blog\/author\/chelton-agude\/"},"_links":{"self":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":4,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions\/533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/media\/531"}],"wp:attachment":[{"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flowbase.co.mz\/blog\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}