{"id":1298,"date":"2019-08-06T21:33:30","date_gmt":"2019-08-07T00:33:30","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=1298"},"modified":"2019-08-06T22:02:28","modified_gmt":"2019-08-07T01:02:28","slug":"10-dicas-para-um-site-wordpress-mais-rapido","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/10-dicas-para-um-site-wordpress-mais-rapido\/","title":{"rendered":"10 dicas para um site WordPress mais r\u00e1pido"},"content":{"rendered":"\n
Vi no PainelWP<\/a> um artigo muito legal da Jem Turner<\/a> com 10 micro-otimiza\u00e7\u00f5es para tornar seu site WordPress mais r\u00e1pido. Entrei em contato com ela pedindo permiss\u00e3o para traduzir e aqui estamos n\u00f3s. Ela tem um estilo bem din\u00e2mico de escrever, o que eu curto bastante, ent\u00e3o para n\u00e3o mudar muito e deixar o texto chat\u00e3o, eu (Felipe) mantive todos os “eu” dela (Jem).<\/p>\n\n\n\n A velocidade do site \u00e9 um fator important\u00edssimo para o posicionamento do seu site nos mecanismos de busca, especialmente o Google:<\/p>\n\n\n\n Como parte deste esfor\u00e7o, hoje estamos incluindo <\/span>um novo fator nos nossos algoritmos de posicionamento de busca: velocidade<\/strong>. A velocidade do site reflete o qu\u00e3o r\u00e1pido um site responde a requisi\u00e7\u00f5es.<\/span><\/p>Using site speed in web search ranking<\/a> \u2014 Official Google Webmaster Central Blog<\/em><\/cite><\/blockquote>\n\n\n\n Sites mais r\u00e1pidos aumentam muito a probabilidade de converter um visitante em cliente:<\/p>\n\n\n\n Reconstruir as nossas p\u00e1ginas com foco em desempenho resultou em uma diminui\u00e7\u00e3o de 40% de tempo de espera dos usu\u00e1rios, um aumento de 15% no tr\u00e1fego de SEO e um aumento de 15% na taxa de convers\u00e3o<\/strong> na cria\u00e7\u00e3o de conta.<\/p>Driving user growth with performance improvements<\/a> \u2014 Pinterest_Engineering<\/em><\/cite><\/blockquote>\n\n\n\n E um site r\u00e1pido melhora a experi\u00eancia do usu\u00e1rio de modo geral. Essa nem precisa de fontes, todo mundo sabe que um site lento irrita qualquer um.<\/p>\n\n\n\n A maioria de n\u00f3s j\u00e1 ouviu os conselhos gen\u00e9ricos: usar imagens menores, comprimi-las, evitar muitos plugins, escolher uma hospedagem mais r\u00e1pida, aproveitar os sistemas de cache dos navegadores. E depois? Se isso tudo j\u00e1 est\u00e1 feito, como podemos melhorar ainda mais? Como podemos otimizar sites WordPress para aumentar sua velocidade e fazer com que o Google nos posicione melhor?<\/p>\n\n\n\n Uma solicita\u00e7\u00e3o HTTP<\/abbr> \u00e9, em termos simples, uma forma de obter informa\u00e7\u00e3o de um servidor. Quando voc\u00ea visita um site (para ler este post, por exemplo), seu navegador solicita as informa\u00e7\u00f5es relacionadas \u00e0 p\u00e1gina que voc\u00ea est\u00e1 vendo: imagens, arquivos JavaScripts, arquivos HTML, etc. O servidor ent\u00e3o manda estes arquivos de volta. Quanto mais arquivos voc\u00ea solicita, mais tempo o servidor leva para responder e mais tempo a p\u00e1gina demora para carregar.<\/p>\n\n\n\n Por experi\u00eancia pr\u00f3pria, este \u00e9 um dos elementos mais esquecidos na otimiza\u00e7\u00e3o de velocidade e \u00e9 uma \u00f3tima forma de conseguir resultados r\u00e1pidos. Aqui v\u00e3o algumas formas de reduzir as solicita\u00e7\u00f5es HTTP do seu WordPress:<\/p>\n\n\n\n O jQuery Migrate \u00e9 uma biblioteca JavaScript normalmente usada para que c\u00f3digos usados com vers\u00f5es antigas do jQuery n\u00e3o quebrem. Ele mant\u00e9m essa compatibilidade conservando funcionalidades que foram removidas do c\u00f3digo principal do jQuery. Em outras palavras, se voc\u00ea est\u00e1 executando um plugin que depende de uma vers\u00e3o muito antiga do jQuery ou de uma funcionalidade muito antiga dele, ent\u00e3o o Migrate mant\u00e9m tudo funcionando direitinho.<\/p>\n\n\n\n Entretanto, como n\u00f3s todos somos muito espertos, n\u00f3s mantemos o nosso WordPress e seus plugins atualizados, e isso inclui usar plugins que foram atualizados para usar padr\u00f5es “modernos” (voc\u00ea mant\u00e9m o seu site atualizado, n\u00e3o \u00e9?<\/em>). O WordPress inclui o jQuery Migrate por padr\u00e3o desde o WordPress 3.6. Sendo assim, a maioria de n\u00f3s est\u00e1 carregando esta biblioteca com c\u00f3digo antigo sem realmente precisar dela. O seguinte snippet<\/a> verifica se o jQuery Migrate realmente \u00e9 uma depend\u00eancia necess\u00e1ria e, se n\u00e3o for, o remove.<\/p>\n\n\n\n Voc\u00ea pode colocar este c\u00f3digo no arquivo functions.php do seu tema ou criar um plugin<\/a>.<\/em><\/p>\n\n\n\n A primeira vez que eu vi uma requisi\u00e7\u00e3o para o wp-embed.min.js nas minhas p\u00e1ginas WordPress, eu pensei a \u00fanica coisa l\u00f3gica a se pensar: bom, isso deve ser alguma coisa relacionada ao suporte para oEmbed do WordPress. E ent\u00e3o eu deixei isso para l\u00e1. Depois de muito tempo eu dei mais uma olhada e percebi que o wp-embed.min.js s\u00f3 impacta realmente a habilidade de incorporar posts WordPress de outras pessoas<\/em> no seu pr\u00f3prio blog, gra\u00e7as a este coment\u00e1rio extremamente subestimado<\/a>.<\/p>\n\n\n\n Eu n\u00e3o quero incorporar os posts WordPress de outras pessoas no meu blog. Nem eu nem a grande maioria dos meus clientes comerciais, ent\u00e3o eu desligo isso usando o seguinte snippet no arquivo functions.php do tema:<\/p>\n\n\n\n Bum! Menos duas requisi\u00e7\u00f5es HTTP.<\/p>\n\n\n\n Esse \u00e9 controverso \u2014 talvez n\u00e3o tanto quanto a n\u00famero 4, mas a gente chega l\u00e1 \u2014 porque requer que voc\u00ea fique de olho em mudan\u00e7as futuras. Basicamente, quando eu instalo um plugin no site de um cliente que eu sei que usa um CSS que muito provavelmente n\u00e3o vai mudar<\/strong>, ou melhor ainda, vai ser substituido por um CSS criado por mim de qualquer forma, eu desenfilero a folha de estilos do plugin.<\/p>\n\n\n\n Pequena nota do tradutor que vai no meio do texto mesmo: o WordPress tem dois conceitos importante no uso de JavaScripts e CSS. O primeiro \u00e9 o registrar (register<\/em>), que diz para o core<\/em> que o arquivo existe. O segundo \u00e9 o enfileirar (queue<\/em>), que diz para o core<\/em> que o arquivo precisa ser usado e, por isso, sua chamada deve ser inclu\u00edda no HTML a ser exibido. Segue o texto.<\/p>\n\n\n\n Se eu preciso de algum ou de todos os estilos do plugin, eu minimizo o CSS original do plugin e o coloco como um bloco s\u00f3 no come\u00e7o da folha de estilos principal do tema, para que eu n\u00e3o esque\u00e7a dele (eu tamb\u00e9m fa\u00e7o isso com alguns arquivos JavaScript em um .js central do tema, mas eu sou hardcore<\/em>, beleza?).<\/p>\n\n\n\n Isso funciona bem com plugins como o Contact Form 7<\/a>, onde os estilos raramente foram modificados<\/a> e o Shiftnav<\/a>, um menu mobile que eu gosto de personalizar bastante para cada cliente. Eu j\u00e1 fiz isso at\u00e9 para o WooCommerce (removendo e reestilizando), mas isso requer um esfor\u00e7o maior para funcionar certinho.<\/p>\n\n\n\n A maioria das folhas de estilo podem ser desenfileiradas (dequeued<\/em>) usando o seguinte snippet:<\/p>\n\n\n\n \u2026onde stylesheet-id<\/strong> \u00e9 o conte\u00fado do atributo O ID da folha de estilos \u00e9 “social_warfare”. Voc\u00ea pode adicionar tantos Isso pode n\u00e3o funcionar se o autor do plugin bagun\u00e7ou as prioridades ou, ainda pior, n\u00e3o usou o sistema do WordPress para chamar o CSS, mas injetou a chamada diretamente usando outras formas. N\u00e3o d\u00e1 pra desejar nada de bom para quem faz uma coisa dessas.<\/p>\n\n\n\n Calma, n\u00e3o precisa pegar nem a foice nem o forcado para me pegar. Bem devagar, eu estou me acostumando com o Gutenberg como o nosso editor do futuro, mas agora ainda existem v\u00e1rias aplica\u00e7\u00f5es onde essa fera \u00e9 redundante, especialmente para clientes onde as p\u00e1ginas s\u00e3o t\u00e3o cheias de c\u00f3digo propriet\u00e1rio, shortcodes e widgets esquisitos que n\u00e3o vale a pena migrar ainda. Eu ainda n\u00e3o fiz a mudan\u00e7a aqui no jemjabella pela mesma raz\u00e3o (s\u00e9rio, \u00e9 um site muito antigo, peguem leve).<\/p>\n\n\n\n Se instalar o Editor cl\u00e1ssico<\/a> resolve o problema na tela de edi\u00e7\u00e3o, por alguma raz\u00e3o (manter a retrocompatibilidade no caso de algu\u00e9m tentar usar o Gutenberg, talvez?), ele n\u00e3o remove alguns dos estilos do editor de blocos. Para isso temos esse pequeno snippet para arrematar o trabalho:<\/p>\n\n\n\n (Eu tive alguns problemas fazendo isso sem passar a prioridade, pode ser diferente com voc\u00ea). Eba! Adeus requisi\u00e7\u00e3o HTTP desnecess\u00e1ria do Gutenberg!<\/p>\n\n\n\n N\u00e3o \u00e9 preciso grandes explica\u00e7\u00f5es para esse aqui. Clientes realmente precisam de suporte a emojis em seus sites? N\u00e3o. Tchau, scripts e estilos dos emoji.<\/p>\n\n\n\n \u00c9 s\u00f3 colocar isso no functions.php do seu tema.<\/em><\/p>\n\n\n\n Se dermos um passo a mais no desenfileiramento (palavra estranha, eu sei, mas existe) e na compress\u00e3o de estilos, podemos pensar nos estilos de plugins que continuamos incluindo e questionar se e quando estes plugins s\u00e3o necess\u00e1rios. Por exemplo, eu uso os bot\u00f5es de compartilhamento do Social Warfare<\/a> no blog s\u00f3<\/em> em posts e snippets. Por isso, n\u00e3o parece necess\u00e1rio carregar seus estilos na p\u00e1gina inicial.<\/p>\n\n\n\n Eu uso o seguinte snippet para fazer o WordPress incluir os estilos do Social Warfare s\u00f3 nos dois tipos de p\u00e1gina necess\u00e1rios:<\/p>\n\n\n\n Na verdade eu combino isso com o c\u00f3digo que exclui as coisas do Gutenberg, j\u00e1 que os dois usam a a\u00e7\u00e3o E agora? O que mais a gente pode otimizar?<\/p>\n\n\n\n Na busca do primeiro lugar cada byte importa. Aqui v\u00e3o algumas otimiza\u00e7\u00f5es que voc\u00ea pode fazer para reduzir a sa\u00edda HTML do seu WordPress para diminuir alguns milissegundos do seu tempo de carregamento:<\/p>\n\n\n\n
\n\n\n\nDiminuir o n\u00famero de requisi\u00e7\u00f5es HTTP do WordPress<\/h2>\n\n\n\n
1. Remover o jQuery Migrate<\/h3>\n\n\n\n
function remove_jquery_migrate( $scripts ) {\n if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {\n $script = $scripts->registered['jquery'];\n\n if ( $script->deps ) {\n $script->deps = array_diff(\n $script->deps,\n array(\n 'jquery-migrate',\n )\n );\n }\n }\n}\nadd_action( 'wp_default_scripts', 'remove_jquery_migrate' );<\/code><\/pre>\n\n\n\n
2. Remover o wp-embed.min.js<\/h3>\n\n\n\n
function deregister_wp_embed() {\n wp_deregister_script( 'wp-embed' );\n}\nadd_action( 'wp_footer', 'deregister_wp_embed' );<\/code><\/pre>\n\n\n\n
3. Remover estilos de plugins (De-queue<\/em> ou de-register<\/em>)<\/h3>\n\n\n\n
function dequeue_unnecessary_styles() {\n wp_deregister_style( 'stylesheet-id' );\n}\nadd_action( 'wp_print_styles', 'dequeue_unnecessary_styles' );<\/code><\/pre>\n\n\n\n
id<\/code> na tag
<link \/><\/code>, sem o “-css”. Por exemplo, a folha de estilos do Social Warfare \u00e9 mais ou menos assim:<\/p>\n\n\n\n
<link rel='stylesheet' id='social_warfare-css' href='https:\/\/www.jemjabella.co.uk\/...\/style.min.css?ver=3.6.1' type='text\/css' media='all' \/><\/code><\/pre>\n\n\n\n
wp_deregister_style( 'stylesheet-id<\/strong>' );<\/code> quanto quiser dentro dessa mesma fun\u00e7\u00e3o.<\/p>\n\n\n\n
4. Desabilitar o Gutenberg e remover scripts e estilos<\/h3>\n\n\n\n
function deregister_gutenberg_styles() {\n\twp_dequeue_style( 'wp-block-library' );\n\twp_deregister_style( 'wp-block-library' );\n}\nadd_action( 'wp_print_styles', 'deregister_gutenberg_styles', 100 );<\/code><\/pre>\n\n\n\n
5. Remover os estilos dos emoji<\/h3>\n\n\n\n
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );\nremove_action( 'admin_print_scripts', 'print_emoji_detection_script' );\nremove_action( 'wp_print_styles', 'print_emoji_styles' );\nremove_action( 'admin_print_styles', 'print_emoji_styles' );<\/code><\/pre>\n\n\n\n
6. Incluir scripts e estilos condicionalmente<\/h3>\n\n\n\n
function conditionally_deregister_styles() {\n if ( ! is_singular( array( 'post', 'snippet' ) ) ) {\n wp_deregister_style( 'social_warfare' );\n }\n}\nadd_action( 'wp_print_styles', 'conditionally_deregister_styles' );<\/code><\/pre>\n\n\n\n
wp_print_styles<\/code>.<\/p>\n\n\n\n
Reduzir o tamanho do nosso c\u00f3digo<\/h2>\n\n\n\n