Otimização Front-end para WordPress

Quem vos fala@GugaAlves- Analista de Sistemas- Pós Graduado em Gestão Estratégica de Mkt Digital- Professor de Mkt Digital e WordPress- Criador do Tudo Para WordPress- Vencedor do #DesafioSEO 09/10 da MestreSeo

O problemaCitação do livro ‘High Performance Web Sites’

Duvida?

Tem Solução? Vejamos algumas boas práticas paraotimizar o tempo de carregamento de uma página e aliviar a carga do servidor

Índice• Querys PHP e Acesso ao BD • Versão do WordPress• Compressão Zlib • Ferramentas• Uso de Plugins • Prova dos 9• W3 Total Cache • Bibliografia• CDN• Compressão de .js e .css• Otimização de Imagens• CSS Sprites• Permalinks

Querys PHP e acesso ao BDQuase todo tema WordPress é distribuído de forma que sua configuração seja da forma mais simples possível.Estes temas vem com alguns códigos genéricos (chamadas de funções do WP), que podem ser facilmente substituídos depois de instalá-lo em nosso blog.Isso é feito para temas distribuídos livremente mas infelizmente muito desenvolvedores acabam fazendo seu uso em projetos específicos também, ao invés de otimizar tais itens removendo Querys que fazem chamadas ao BD e retornam sempre o mesmo valor.Remover (ou não fazer uso de) algumas consultas php lhe ajudará a diminuir a carga do servidor e também fazer o seu site mais rápido. Vejamos na prática!

Querys PHP e acesso ao BD<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="<?php bloginfo(html_type); ?>; charset=<?php bloginfo(charset); ?>" /><link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php bloginfo(‘stylesheet_url’); ?>“/><link rel=”shorcut icon” type=”image/png” href=”<php bloginfo(‘template_url’); ?>/favicon.jpg” /><link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”<?php bloginfo(‘rss_url’); ?>” /> Precisa mesmo de tantas chamadas para itens e endereços estáticos?

Querys PHP e acesso ao BD<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR"><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel=”stylesheet” type=”text/css” media=”screen” href=”http://www.seusite.com.br/wp-content/themes/SeuTema/style.css“/><link rel=”shorcut icon” type=”image/png” href=”http://www.seusite.com.br/favicon.jpg” /><link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”http://www.seusite.com.br/feed/rss” /> Só nesse pequeno exemplo, temos 21 requisições a menos ! 21 ? Sim a função bloginfo() faz 4 requisições a cada chamada !

Compressão ZlibO WordPress, por padrão, envia HTML não compactado parao navegador do visitante.Com algumas simples linhas de código adicionado aoseu cabeçalho, você pode comprimir a saída do WordPressem até 75% usando tecnologia de compressão Zlib!

Compressão Zlib- Verifique se seu servidor tem o Zlib ativo através do phpinfo();- Adicione o comando abaixo na 1ª linha do header.php <?php ini_set(zlib.output_compression, On); ini_set(zlib.output_compression_level, 1); ?>

Compressão ZlibHttpZip Compression Check - http://migre.me/5qeZh

Plugins no WordPressUm pouco da minha visão

Porque ter muitos plugins pode deixar meu site lento?A principal razão é que nem todos os desenvolvedores criam seus plugins de maneira correta, portanto muitos deles pedem para carregar seus arquivos independente do plugin estar sendo realmente usado ou não.Quando o WordPress solicita o processamento do wp_header(); e chama tais arquivos e a menos que existam condicionais corretos no código do plugin, informando se deve ser carregado ou não o plugin para determinada página/post, o WordPress vai continuar a processar o plugin, chamando consultas de banco de dados para recuperar parâmetros que você definiu no painel, recuperar arquivos PHP adicionais e carregar arquivos .js e .css quando não são necessários a todos.

Porque ter muitos plugins pode deixar meu site lento?Todo o processo pode aumentar consideravelmente o tempo de carregamento de seu site, o que vai depender da quantidade de plugins ativos.Portanto, ative apenas os plugins que forem realmente usados e evite o uso de plugins para funções simples demais. Para funções mais simples, prefira sempre criar suas funções no functions.php e as chamar apenas quando necessário no seu tema, ok? #FikDik !Leia mais sobre o assunto em http://migre.me/5utlJ

Uso de PluginsResumindo:• Use plugins apenas quando necessário!• Não está usando um plugin temporariamente? Desative-o e evite inserção de arquivos .css e .js que não estão sendo usados.• Não vai mais usar tal plugin? Apague-o da pasta!• Achas que pode vir a precisar de um plugin novamente? Crie um arquivo .txt, salve na pasta wp-content/plugins e anote nele seus nomes. Se precisar novamente dele, só instalar de novo!

Plugins que não dispenso?• W3 Total Cache Otimização de .css e .js, cache, CDN.• WordPress SEO SEO, Sitemap.xml, Breadcrumbs, Open Graph Protocol (Facebook).• Akismet Ninguém gosta de SPAM né?• WP-DB-Backup Backup da base de dados sempre cai bem• Redirection Redirecionamentos 301 de maneira rápida (mas se forem poucos redirecionamentos, faça na mão mesmo, no .htaccess)E alguns outros citados nos próximos slides!

W3 Total Cache

CDNContent Delivery Network (CDN ou Rede de Fornecimento de Conteúdo) ésistema de computadores interligados em rede através da Internet, quecooperam de modo transparente para fornecer conteúdo (particularmentegrandes conteúdos de mídia) a usuários finais. Akamai Amazon S3 MaxCDN CoralCDN W3 Total Cache + MaxCDN - http://migre.me/5sCY0

Compressão de .js e .cssCom o plugin W3 Total Cache você poderá compactar seus arquivos .js e .css.Com isso, ao invés de chamar 5 .js e 4 .css, chame apenas 1 .js e 1 .css, diminuindo o tempo de carregamentoDica:Você pode fazer a compressão pelo plugin e depois copiar os arquivos gerados por ele para usar manualmente, sem o plugin precisar o chamar 

Compressão de .js e .css14 requisições 4 reqs271 kb 49kb4.44s 1.1s

Compressão de .js e .css

Otimização de Imagens

WP Smush.itUsar imagens nos posts é sempre uma boa tática para dar mais vida a matéria e aumentar a conversão, mas imagens pesadas podem comprometer o tempo de carregamento.O plugin WP Smush.it faz uma compressão automática de toda imagem enviada pelo Uploader do WP

SEO Friendly ImagesConfigurando este plugin, as tags ALT e TITLE serão preenchidas de acordo com a configuração feita.

CSS SpritesTécnica que consiste em se colocar as várias imagens de fundo usadas no template do site em um arquivo único e com a declaração CSS background-position mostrar em cada elemento que recebe uma imagem de fundo uma parte da imagem.Aprenda como fazer com o mestre @Maujor:http://maujor.com/tutorial/css-sprites.php

CSS Sprites Exemplo:Menu da Apple.com

CSS Sprites Sprite.me

Estrutura da URLConfigurando Permalinks

Estrutura de PermalinksComo afirma o Codex, podem existir alguns problemas de desempenho com estruturas de permalink começando com %category%, %postname%, %tag% e %author%O Desempenho seria melhor quando a estrutura da URL tivesse o ID do post, ou começar com uma coisa estática, como /posts/postname%/Entretanto...

Estrutura de PermalinksPara ser honesto, eu não me preocuparia com isso em projetos de pequeno e médio porte.Utilizando uma hospedagem decente e um plugin de cache configurado corretamente, tais problemas de desempenho deixarão de existir.

Estrutura de PermalinksO que costumo usar:• /%category%/%postname%/• /%postname%/• /materias/%postname%/

Estrutura de PermalinksBônus:O que está por vir no WordPress 3.3? http://migre.me/5qY3dVia @TudoParaWP(Tens mais novidades por lá)

Mantenha seu WordPress atualizado sempre !Com o lançamento de novas versões, o Wordpress continua a melhorar como um todo.A cada atualização, a equipe WP e toda a comunidade mundial se esforçam para deixar o WordPress mais rápida e segura.Entretanto, seu visitante não precisa saber qual versão está sendo usada, pois assim ele poderá saber quais falhas ainda estão lá. Portanto, remova sempre a versão do WordPress de seu cabeçalho usando a função abaixo (no functions.php, claro) remove_action(‘wp_head’, ‘wp_generator’);

Quanto tempo devo esperar para atualizar o WP?Sempre recomendo esperar algumas semanas e ficar de olho no feedback que os usuários da comunidade WordPress estão dando sobre a atualização. Se você decidir fazer a atualização, opte por fazer um teste primeiro em localhost ou algum ambiente específico para testes, ok? Mais detalhes em http://migre.me/4CdAh

Ferramentas Firebug YslowPingdom Tools Google(tools.pingdom.com) Page Speed

Prova dos 9Boas dicas mas..Funciona mesmo?

Ô loco bicho! Que isso fera!Veja você mesmo o resultado de nossos testes: DEPOIS ANTES De 10.18 para 5.1 segundos de carregamento total do site ! E ainda falta usar CDN e CSS Sprites nesse case, vai melhorar mais!

Bibliografia RecomendadaSobre o autor:Steve Souders trabalha no Google com web performance e iniciativas open source

E ai, curtiu? Contatos: twiter.com/GugaAlves (Pessoal) twitter.com/TudoParaWP (Site) http://br.linkedin.com/in/gugaalves/pt http://www.slideshare.net/gugaalves

http://www.ditopassos.com	211
http://us-w1.rockmelt.com	47
http://www.twylah.com	18
http://twitter.com	9
http://carlosnogueira.co.cc	8
https://twitter.com	7
http://rtfeed.com.br	2
http://karaioman.com.br	2

Otimização Front-end para WordPress

by Guga Alves

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 304

Statistics

Otimização Front-end para WordPress Presentation Transcript