HostGator Promoção (728x60)

Dicas para Otimizar seu WordPress

dicas para otimizar wordpress

Nos dias atuais ter um site otimizado é algo muito importante, principalmente, se levarmos em consideração que o Google gosta de sites rápidos, bem otimizados. Não é preciso gastar muito para ter um site com uma velocidade de carregamento excelente. Na maioria dos casos, com simples ajustes é possível obter uma melhora na velocidade de carregamento do site. Veja como otimizar seu site WordPress.

Aviso Importante

Sempre que surge o assunto “otimização do WordPress” eu sempre falo sobre a hospedagem de sites. Muitos podem achar que é desnecessário, mas sim, a hospedagem de sites escolhida por você vai fazer muita diferença. Por mais que você otimize seu site, sem uma boa hospedagem vai ser difícil ter um site bem otimizado. Sempre bato nesta tecla porque muitos não conseguem obter resultados satisfatórios e não se dão conta que o problema está na empresa que hospeda o site. É claro que não é todos os casos, em muitos o culpado é realmente a falta de otimização do site.

Compacte as imagens antes de enviá-las

É muito importante que você use ferramentas para compactar as imagens antes de fazer o upload para seu site. É possível reduzir consideravelmente o tamanho das imagens sem perder qualidade. Particularmente eu prefiro imagens no formato PNG, porque é possível reduzir até 70% do tamanho da imagem sem perder a qualidade.

file upload
Ferramentas de Otimização de Imagens

TinyPng - Excelente compactador de imagens PNG. Reduz o tamanho sem praticamente perder a qualidade.
JPEG Mini - Excelente compactador para imagens JPEG. Mantém uma boa qualiadade.
Compress JPEG - Também excelente para imagens JPEG. Pode perder um pouco da qualidade em algus casos.

Caso você crie suas próprias imagens através de ferramentas de edição como PhotoShop, Gimp e semelhantes, considere salvar as imagens com uma qualidade reduzida. A maioria dos editores conseguem gerar as imagens com tamanhos reduzidos perdendo muito pouca qualidade.

Também é importante não redimensionar as imagens via HTML ou CSS. É muito comum usar uma imagem grande e definir no HTML ou CSS um tamanho menor do que realmente ela possuí para caber na página. Nestes casos é recomendável usar o recurso de redimensionamento do próprio WordPress ou até mesmo um editor de imagens para redimensionar a imagem e colocar ela na página com o tamanho correto.

Elimine Plugins Desnecessários

gráfico da otimizaçãoUma das coisas mais legais do WordPress é o fato de existirem milhares de plugins gratuitos que permitem adicionar recursos extras ao site. É praticamente impossível não usar pelo menos um plugin no site. Muitos destes plugins adicionam funcionalidades essencias para o funcionamento do site, como é o caso dos plugins de SEO. O problema é que acabamos adicionando plugins para adicionar recursos extras que muitas vezes não precisamos ou que não fazem a menor falta. O importante é não adicionar plugins desnecessariamente, certifique-se que você realmente vai precisar dele antes de instalar. Não é para ter medo de adicionar novos plugins necessários para o site. Porém, tenha em mente que cada plugin adicionado vai consumir mais recursos do servidor e, consequentemente, deixar o site mais lento (a diferença pode ser mínima, mas existe). Alguns plugins vão consumir muitos recursos outros poucos, depende das funcionalidades do mesmo

Mantenha tudo atualizado

Desempenho é uma preocupação global, principalmente quando falamos de desenvolvedores. Os criadores de plugins e temas tendem fazer melhorias que visam oferecer um desempenho melhor (se não fazem, deveriam!). A cada nova versão a tendencia é que esteja melhor otimizado. O Feedback dos usuários contribuem bastante para que eles se preocupem em melhorar seus produtos (plugins ou temas). Por esta constante busca por um melhor desempenho é aconselhável manter o WordPress, plugins e temas sempre atualizados.

Além da questão do desempenho existe também a segurança. Um site com todos os componentes atualizados para a última versão é muito mais protegido contra invasão de hackers. Outro motivo para sempre manter tudo atualizado são as correções rotineiras de bugs feitas pelos seus desenvolvedores.

Faça uso de CDN

cdn ilustração com mapaOs CDNs ou Redes de Fornecimento de Conteúdo (Content Delivery Network) são uma excelente alternativa para deixar os sites mais rápidos. Com eles os arquivos (imagens, estilos, vídeos e etc) são distribuídos através de servidores localizados ao redor do mundo. Deste modo é possível diminuir o tempo de resposta, pois é automaticamente selecionado o servidor mais próximo do usuário para fornecer o conteúdo. A distancia física entre o computador do usuário e o servidor é sempre a menor possível, aumentando assim o desempenho de carregamento do site.

Permita o cache do navegador

Habilitar o cache do navegador pode ajudar a otimizar o carregamento do site, pois quando ativado, arquivos como imagens, scripts, estilos e outros arquivos estáticos são armazenados localmente no computador do usuário que acessa o site. Além disto, a ativação do cache ajuda a diminuir o número de solicitações ao servidor, pois muitos arquivos ficam armazenados em cache.

O plugin W3 Total Cache permite habilitar o cache do navegador. Também é possível habilitar através do arquivo .htaccess adicionando o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 hour"
# CSS
ExpiresByType text/css "access plus 15 days"
# Data interchange
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rdf+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/json "access plus 5 seconds"
ExpiresByType application/ld+json "access plus 5 seconds"
ExpiresByType application/schema+json "access plus 5 seconds"
ExpiresByType application/vnd.geo+json "access plus 5 seconds"
ExpiresByType application/xml "access plus 5 seconds"
ExpiresByType text/xml "access plus 5 seconds"
# Favicon and cursor images
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 1800 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
# Media files
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web fonts
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
# OpenType
ExpiresByType font/opentype "access plus 1 month"
# TrueType
ExpiresByType application/x-font-ttf "access plus 1 month"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 "access plus 1 month"
# Other
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 hour"
# CSS
ExpiresByType text/css "access plus 15 days"
# Data interchange
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rdf+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/json "access plus 5 seconds"
ExpiresByType application/ld+json "access plus 5 seconds"
ExpiresByType application/schema+json "access plus 5 seconds"
ExpiresByType application/vnd.geo+json "access plus 5 seconds"
ExpiresByType application/xml "access plus 5 seconds"
ExpiresByType text/xml "access plus 5 seconds"
# Favicon and cursor images
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 1800 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
# Media files
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web fonts
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
# OpenType
ExpiresByType font/opentype "access plus 1 month"
# TrueType
ExpiresByType application/x-font-ttf "access plus 1 month"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 "access plus 1 month"
# Other
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
</IfModule>

O arquivo .htaccess encontra-se na pasta raiz da instalação do WordPress. O código do WordPress deve ser mantido.

Ligue a compressão Gzip

A compactação Gzip permite diminuir o tamanhos dos arquivos compactando-os antes de transferi-los. Ela atua na comunicação entre o navegador e o servidor do site, compactando todos os pacotes antes de enviar para o navegador do visitante. Usando o Gzip é possível reduzir o consumo de banda do servidor e otimizar o carregamento do site. Quase sempre é necessário ativar manualmente essa opção.

Para ativar o modo deflate (sucessor do Gzip) é necessário adicionar o seguinte código ao arquivo .htaccess:

1
2
3
4
5
6
7
8
9
10
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>

Arquivos CSS no header e JavaScript no footer

Essa dica é muito útil, principalmente, para desenvolvedores e editores de temas. Não é apenas para WordPress, mas sim qualquer site. Os arquivos CSS devem ser chamados no header site, pois assim ele é carregado antes de ocorrer a renderização do site. O navegador aguarda o carregamento de todos os arquivos do Header para começar a criar e "desenhar" os elementos do site. Por isso os arquivos JavaScript devem ser carregados, preferencialmente, no footer do site ou outro lugar dentro da tag BODY. Desta maneira, o navegador não precisa esperar baixar os arquivos JavaScripts para renderizar o site.

Conclusão

É possível ter um site WordPress otimizado fazendo pequenas alterações e com uma hospedagem de sites de qualidade. Por mais que você tenha um excelente site é preciso haver uma constante preocupação com a otimização do mesmo. Os temas também pode influenciar bastante na otimização dos sites, por esse motivo, escolha o seu com muito cuidado. Nos próximos artigos vou falar mais sobre otimização de sites WordPress.

Deixe um comentário

(required)
(required)