Vamos ver o processo passo a passo para melhorar o desempenho e a velocidade de um site. Abaixo est\u00e1 a captura de tela da pontua\u00e7\u00e3o do meu site no Google Page Insight.<\/p>\n
Voc\u00ea j\u00e1 notou a mensagem Processar bloqueando JavaScript e CSS no conte\u00fado acima da dobra? Se voc\u00ea n\u00e3o incluiu CSS e JS de uma forma padr\u00e3o<\/a>, isso pode tornar seu site mais lento. Como regra geral, CSS deve incluir em um cabe\u00e7alho e JS em um rodap\u00e9. Voc\u00ea deve cuidar de seu site seguindo esta pr\u00e1tica padr\u00e3o.<\/p>\n As imagens desempenham um papel importante na melhoria da experi\u00eancia do usu\u00e1rio. Imagens atraentes mant\u00eam seus usu\u00e1rios engajados com o conte\u00fado. Mas, o uso de imagens pesadas quase mata a velocidade do seu site. Por exemplo, voc\u00ea carregou uma imagem com tamanho de 2 MB no site e, ao carregar a p\u00e1gina, esses 2 MB levam um tempo extra para carregar a imagem antes de apresentar sua p\u00e1gina ao p\u00fablico.<\/p>\n A\u00ed vem o conceito de otimizar imagens<\/strong> antes do uso. Existem v\u00e1rios plug-ins dispon\u00edveis que realizam essa tarefa de compactar imagens de sua biblioteca de m\u00eddia. Alguns plug-ins populares s\u00e3o<\/p>\n Todos esses plug-ins funcionam bem. Eu recomendaria usar o plugin TinyPNG. Estou usando este plugin para o meu site e estou muito feliz com ele.<\/p>\n Em alguns casos, precisamos exibir imagens fora da biblioteca de m\u00eddia. Criamos um diret\u00f3rio personalizado e carregamos imagens nele e, em seguida, usamos essas imagens no site. Eu escrevi artigos sobre Optimize Image On Upload<\/a> e TinyPNG Compress Images<\/a>. Consulte este artigo se voc\u00ea n\u00e3o estiver usando a biblioteca de m\u00eddia para imagens.<\/p>\n Dica: corte as imagens de um tamanho que voc\u00ea deseja exibir. Digamos que voc\u00ea tenha um cont\u00eainer de tamanho 300 * 250. Nesse caso, voc\u00ea deve cortar a imagem de acordo com o tamanho do cont\u00eainer. N\u00e3o use a imagem de tamanho maior em um recipiente pequeno. Isso tamb\u00e9m afeta o desempenho do site.<\/p>\n Lazy Load Images<\/strong> ajuda a acelerar o seu site. Usando o<\/a> plugin de carregamento lento<\/a>, suas imagens n\u00e3o carregam at\u00e9 que o usu\u00e1rio role at\u00e9 elas. Ajuda a reduzir o tamanho da p\u00e1gina no momento do carregamento.<\/p>\n Se voc\u00ea deseja implementar imagens de carregamento lento sem usar o plug-in, leia nosso artigo sobre Melhorar o desempenho do site com<\/a> imagens de carregamento lento .<\/p>\n Visto que o tamanho do seu banco de dados \u00e9 pequeno, o servidor responde rapidamente \u00e0 solicita\u00e7\u00e3o do banco de dados proveniente do site. Assim que seu banco de dados come\u00e7ar a aumentar, seu servidor demorar\u00e1 mais para responder.<\/p>\n No WordPress, conforme o tempo passa v\u00e1rios dados \u00f3rf\u00e3os armazenados em seu banco de dados. Por exemplo, quando voc\u00ea atualiza uma postagem ou p\u00e1gina, cada vez que o WordPress armazena a revis\u00e3o no banco de dados. Eu preferiria manter apenas as \u00faltimas 3 revis\u00f5es, que s\u00e3o suficientes. Para manter as revis\u00f5es at\u00e9 3 vezes, voc\u00ea precisa colocar o c\u00f3digo abaixo em seu arquivo wp-config.php.<\/p>\n O c\u00f3digo acima limita o n\u00famero de revis\u00f5es. Existem algumas outras tabelas que tamb\u00e9m devem ser otimizadas. Eu recomendo usar os plug-ins WP-DBManager<\/a> ou WP-Sweep<\/a> para otimizar seu banco de dados.<\/p>\n Obrigado aos engenheiros que introduziram o conceito de cache do navegador. Quando um usu\u00e1rio visita seu site, o navegador do usu\u00e1rio armazena sua p\u00e1gina no local de armazenamento tempor\u00e1rio do navegador. Quando o usu\u00e1rio visitar o site da pr\u00f3xima vez, o navegador apresentar\u00e1 a p\u00e1gina aos usu\u00e1rios a partir do \u00faltimo cache armazenado, em vez de carregar a p\u00e1gina inteira novamente. Isso reduz o uso de largura de banda no lado do usu\u00e1rio e do servidor. Usar o cache do seu site acelera drasticamente o site WordPress. Alguns dos plug-ins de cache populares s\u00e3o os seguintes.<\/p>\n Quando voc\u00ea aproveita o cache do navegador, os arquivos da sua p\u00e1gina da web s\u00e3o armazenados no cache do navegador. Suas p\u00e1ginas ser\u00e3o carregadas muito mais r\u00e1pido para visitantes recorrentes. Adicione o seguinte c\u00f3digo no arquivo htaccess do seu site e ele permitir\u00e1 o armazenamento em cache do navegador.<\/p>\n Nota: No WordPress, alguns plugins est\u00e3o usando recursos externos. N\u00e3o podemos definir cabe\u00e7alhos de expira\u00e7\u00e3o nesses recursos externos. Uma maneira \u00e9 armazenar esses arquivos externos em seu servidor e inclu\u00ed-los em seu site.<\/p>\n Espero que voc\u00ea entenda como acelerar o site WordPress. Se eu perdi algo ou voc\u00ea est\u00e1 usando alguma outra t\u00e9cnica, por favor, compartilhe nos coment\u00e1rios abaixo.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\nEtapa 1 – Incluir CSS e JS de maneira padr\u00e3o<\/h3>\n
Etapa 2 – Otimize as imagens antes de usar<\/h3>\n
\n
Etapa 3 – Imagens de carregamento lento<\/h3>\n
Etapa 4 – Otimize o banco de dados<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\nEtapa 5 – Uso do Cache<\/h3>\n
\n
Etapa 6 – Aproveite o cache do navegador<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n