Melhorando o desempenho do seu WordPressWordCamp São Paulo 2015

Tiago Hillebrandt

● Lead Developer na Copyblogger Media LLC● Trabalha diariamente em uma estrutura com mais de 12.000 instalações

WordPress● Colaborador de diversas comunidades de Software Livre, como Ubuntu,

WP-CLI, Bash, dentre outras

Servidor

● Softwares atualizados● NGINX● SSL: HTTP/2, cache de sessão e OCSP Stapling● Compressão gzip● Redirecionamento www/non-www● W3 Total Cache● CDN● WordPress Cron

Servidor: Softwares atualizados

● Mantenha seus softwares atualizados!● NGINX:

○ Versão nos repositórios do Ubuntu 12.04 LTS: 1.1.19○ Versão nos repositórios do Ubuntu 14.04 LTS: 1.4.6○ Mainline version: 1.9.7

● PHP:○ Versão nos repositórios do Ubuntu 12.04 LTS: 5.3.10○ Mainline version: 5.6.15

● MySQL, OpenSSL, etc

Servidor: NGINX

● Servidor web de alta performance (algoritmo de manipulação de conexões diferenciado)

● Em conjunto com o FastCGI, é uma excelente opção (senão a melhor) para execução do WordPress

location ~ \.php$ {

include snippets/fastcgi-php.conf;

fastcgi_pass unix:/var/run/php5-fpm.sock;

}

NGINX SSL: Módulo SPDY HTTP/2

● Suporte adicionado ao NGINX 1.9.5● Aplicável somente em sites com certificado SSL

server {

listen 443 ssl http2;

NGINX SSL: Vantagens do HTTP/2

● Protocolo binário (mais compacto e eficiente)● Conexão multiplexada por domínio● Cabeçalhos compactados com o formato HPACK (mais efetivo que o gzip)● Esquema que ajuda os navegadores a priorizarem os "arquivos mais

necessários" (mais efetivo do que o esquema usado no SPDY)

Fonte: NGINX Inc

NGINX SSL: HTTP/2 Inside

Fonte: NGINX Inc

HTTP 1.x vs HTTP/2

Fonte: NGINX Inc

NGINX SSL: Cache de Sessão

● Faz o cache dos parâmetros da sessão SSL para reusá-los, evitando assim o handshake a cada requisição

ssl_session_cache shared:SSL:10m;

ssl_session_timeout 10m;

● Cada megabyte pode armazenar até 4.000 sessões, portanto sites com muito tráfego devem utilizar um valor maior

NGINX SSL: OCSP Stapling

● Melhora a performance em conexões SSL (reduz aproximadamente 500ms)● Consiste em evitar a verificação do status do certificado (OCSP) junto ao

servidor da Autoridade Certificadora (CA)

ssl_stapling on;

ssl_stapling_verify on;

ssl_trusted_certificate /path/to/ca-certs.pem;

● Adicionar somente se os intermediários não estiverem combinados dentro do certificado carregado na diretiva ssl_certificate

NGINX SSL: OCSP Stapling

● Após implementar, não esqueça de testar:

$ echo | openssl s_client -connect wordpress.org:443 -status 2>

/dev/null | grep -A17 'OCSP response'

OCSP response:

======================================

OCSP Response Data:

OCSP Response Status: successful (0x0)

...

NGINX: Compressão gzip

● Módulo gzip do NGINX● Compacta as respostas do servidor, resultando na redução de 50% ou

mais no tamanho da resposta● Após habilitar, você pode utilizar o GTmetrix para confirmar se a

compressão gzip está funcionando adequadamente: https://gtmetrix.com/

● Se seu site já está rodando via HTTP/2, não utilize o gzip, uma vez que o HPACK é mais efetivo

NGINX: Compressão gzip

gzip on;

gzip_disable "msie6";

gzip_vary on;

gzip_comp_level 3;

gzip_min_length 1000;

gzip_buffers 32 4k; # ( $ getconf PAGESIZE )

gzip_types text/plain text/css text/javascript;

NGINX: Redirecionamento www/non-www

● Ao criar qualquer site, é importante definir se ele utilizará ou não o www como prefixo

● Após essa definição, devemos implementar algumas regras no servidor web para aprimorar a performance do site

● Muito importante para SEO, uma vez que evita que URLs diferentes sejam indexadas para o mesmo conteúdo

NGINX: Redirecionamento www/non-www

● Exemplo de redirecionamento que poderia ser otimizado:

NGINX: Redirecionamento www/non-www

# força todos as requisições non-www para www

if ($host !~ "^www.") { return 301 $scheme://www.$host$request_uri; }

# força todas as requisições www para non-www

if ($host ~ "^www.") { return 301 $scheme://dominio.com$request_uri; }

● Você pode substituir a variável $scheme por um esquema fixo (http ou https) se desejar

NGINX: Redirecionamento www/non-www

● Para evitar redirect loops, não esqueça de também atualizar as opções siteurl e a home do seu WordPress

● Via WP-CLI:

$ wp option update siteurl "https://www.dominio.com"

$ wp option update home "https://www.dominio.com"

NGINX: Redirecionamentos

E lembre-se:

● Evite plugins de redirecionamento

● Adicione seus redirects diretamente no servidor web

Servidor: W3 Total Cache

● Excelente plugin de cache, disponível no repositório do WordPress gratuitamente

● Hoje o W3TC é usado em mais de um milhão de instalações WordPress● Métodos de caching recomendados:

○ Page caching (disk, opcode ou memcached)○ Browser caching○ Object caching

Servidor: W3TC Page Cache

● Cache baseado em URLs● No primeiro acesso a determinada URL, um arquivo estático com o

conteúdo é criado dentro do cache● Os próximos acessos para mesma URL são carregados do cache,

reduzindo o uso de recursos do PHP e MySQL● Cache pode ser armazenado em disco ou na memória

Servidor: W3TC Page Cache

● Os métodos OpCode e Memcached tendem a ser mais rápidos, pois o cache carregará diretamente da memória. Portanto, são uma boa opc ̧ão se você dispor de bastante memória para dedicar à eles

● Já os métodos Disk, apesar de serem um pouco mais lentos, podem se tornar mais viáveis em servidores compartilhados ou VPSs com pouca memória dispon ́vel, ou ainda caso queira poupar memória para processar outras informac ̧ões

● Se ainda assim está na dúvida de qual escolher, você pode testar a performance do seu site método-por-método

Servidor: W3TC Browser Cache

● É o cache presente nos navegadores web● No W3TC é poss ́vel determinar, por exemplo, quanto tempo as imagens e

demais arquivos estáticos (JS, CSS, HTML, dentre outros) serão cacheados no navegador do usuário

● Permite a compressão dos cabec ̧alhos HTTP via gzip

Servidor: W3TC Object Cache

● O WordPress possui uma classe de Object Cache, no entanto ela não é persistente

● Em outras palavras, a informação carregada é mantida na memória somente até o fim da requisição atual

Servidor: W3TC Object Cache

● No W3TC, o Object Cache armazena uma cópia do objeto, seus atributos e valores em formato JSON

● Além disso, a informação passa a ser mantida de forma permanente, pois não é perdida ao término da requisic ̧ão

● É poss ́vel determinar um intervalo para limpeza do cache, bem como uma lista de objetos que não devem ser cacheados

Servidor: CDN

● Indicado para quem recebe tráfego de diversas localizações (geograficamente distribu ́do)

● Reduz o uso de largura de banda do servidor onde seu site está hospedado

● Servic ̧os de CDN recomendados:○ Amazon CloudFront

■ 2 datacenters no Brasil, custo variável por mês (on-demand)○ CloudFlare

■ 1 datacenter no Brasil, custo fixo por mês

WordPress Scheduled Events

● São ações programadas para serem executadas automaticamente pelo WordPress Cron

● Exemplo:○ Posts agendados○ Exclusão de transients expirados da wp_options○ Verificac ̧ão de updates do WordPress core, temas e plugins

WordPress Cron

● Por padrão ele rodará apenas se sua página tiver acessos, portanto um método não muito confiável

● Carrega em todos os acessos ao site, e caso um evento agendado trave o acesso pode ficar consideravelmente lento

● Pode ser implementado no crontab do seu servidor, um método muito confiável

WordPress Cron

● Adicione ao seu wp-config.php:define( 'DISABLE_WP_CRON', true );

● Adicione ao crontab:*/10 * * * * www-data wget -o /dev/null -O /dev/null http://dominio.com/wp-cron.php

Desenvolvimento

● WordPress Transients API● WordPress Options API● Pingdom Speed Test

Dev: Transients API

● Armazenamento temporário de dados (cache)● Normalmente usados para fazer cache de resultados de funções PHP e

queries MySQL● Os transients possuem tempo de expiração, e são carregados

automaticamente pelo WordPress a cada requisição● Problema comum entre plugins e temas mal codificados: criação de um

número excessivo de transients, ou ainda armazenamento de valores muito grandes dentro deles

Dev: Transients API

Dever de casa: limpar os transients em seus sites WordPress

Comando SQL: DELETE FROM wp_options

WHERE option_name REGEXP '^(_site)?_transient';

Ou via WP-CLI: $ wp transient delete-all

Dev: Options API

● As options são utilizadas para armazenamento permanente de dados● Quando você cria uma option, você pode definir se ela será carregada

automaticamente ou não por meio do campo autoload● As autoloaded options são carregadas automaticamente pelo WordPress a

cada requisição● Temos um problema comum entre plugins e temas mal codificados:

criação de um número excessivo de autoloaded options, ou ainda armazenamento de valores muito grandes dentro delas

Dev: Options API

● Detectar a quantidade e o tamanho total das autoloaded options:

SELECT COUNT(*) AS total, ROUND(SUM(LENGTH(option_value)) / POWER

(1024, 2), 2) AS tamanho FROM wp_options WHERE autoload='yes';

Dev: Options API - Query 1

● Detectar as options com maior tamanho:

SELECT option_name, ROUND(LENGTH

(option_value) / POWER(1024, 2), 2) AS

tamanho FROM wp_options WHERE

autoload='yes' ORDER BY tamanho DESC

LIMIT 0, 15;

Dev: Options API - Query 2

● Detectar as options com prefixos similares:

SELECT SUBSTRING(option_name, 1, 16) AS prefixo,

COUNT(*) AS total FROM wp_options GROUP BY SUBSTRING

(option_name, 1, 8) ORDER BY total DESC LIMIT 0, 15;

Pingdom Speed Test

● Detecta o tempo de resolução do DNS, Time to First Byte (TTFB), carregamento e tamanho de recursos da página

● http://tools.pingdom.com/fpt/

WP-Healthcheck

● Plugin em desenvolvimento, com previsão de lançamento em dezembro● Versão inicial contará com suporte a três idiomas, incluindo Português do

Brasil

Dúvidas?

Twitter: @tiagoscd

Website: http://tiagohillebrandt.eti.br