0
Otimização Front-endpara WordPress
Sobre mim@GugaAlves- Coordenador de Projetos Digitais da Agência Trii- Analista de Sistemas- Pós Graduado em Gestão Estrat...
Sobre mim
Antes de começarEsta palestra é uma versão revisada e aprimorada da palestra acima
Essa palestra não é só minhahttps://www.facebook.com/groups/wordpress.brasilPalestra feita com ótimas colaborações de algu...
Você sabia?80% do tempo de resposta de uma página égasto no download de elementos do front-end, como imagens, CSS, Javascr...
O que eu vejo na tela?
E o visitante, vai esperar?
Ah, mas meu site já tá legal!O da Mozilla também estava, mas...Após uma minuciosa otimização front-end em suas principaisl...
Performance SEO Conversão
Mais cases?Veja cases de empresas como Amazon, Shopzilla,Yahoo e outras nohttp://www.webperformancetoday.com/2010/06/15/ev...
O que vamos ver hoje?• HTML, CSS e JS• Compressão de .js e .css• Otimização de Imagens• CSS Sprites• CDN• Zlib/Gzip• Uso d...
HTML, CSS e JS• Não declare CSS e JS inline, faça chamada dearquivos externos.• Melhor modo de fazer tais chamadas: CSS no...
Mais dicas em:http://speakerdeck.com/zenorocha/como-perder-peso-no-browserhttp://speakerdeck.com/eshiota/desafios-do-desen...
Compressão de .js e .css14 requisições271 kb4.44s4 reqs49kb1.1s
W3 Total Cache
WP Minify
Otimização de Imagens
WP Smush.itUsar imagens nos posts é sempre uma boa tática para dar mais vidaa matéria e aumentar a conversão, mas imagens ...
CSS SpritesTécnica que consiste em se colocar as várias imagens de fundousadas no template do site em um arquivo único e c...
CSS SpritesSprite do Menu da Apple.com
CSS SpritesSprite.me
CSS SpritesSpriteCow.com
CDNAkamaiAmazon S3 + CloudfrontMaxCDNCoralCDNCloudfareContent Delivery Network (CDN ou Rede de Fornecimento deConteúdo) é ...
Compressão ZlibO WordPress, por padrão, envia HTML nãocompactado para o navegador do visitante.Com algumas simples linhas ...
Compressão Zlib- Verifique se seu servidor tem o Zlib ativo através do phpinfo();- Adicione o comando abaixo na 1ª linha d...
HttpZip Compression Check - http://migre.me/5qeZh
Plugins no WordPressUm pouco da minha visão
Muitos plugins pode deixar meu sitelento?A principal razão é que nem todos os desenvolvedorescriam seus plugins de maneira...
Porque ter muitos plugins podedeixar meu site lento?Todo o processo pode aumentar consideravelmente otempo de carregamento...
Uso de PluginsResumindo:• Use plugins apenas quando necessário!• Não está usando um plugin temporariamente? Desative-o eev...
Plugins que não dispenso?• W3 Total CacheOtimização de .css e .js, cache, CDN.• WordPress SEOSEO, Sitemap.xml, Breadcrumbs...
Plugins de Cache• W3 Total Cachehttp://wordpress.org/extend/plugins/w3-total-cache/• WP Super Cachehttp://wordpress.org/ex...
Cache sem plugin?http://www.varnish-cache.org/Cache a nível de Servidor
Estrutura da URLConfigurando Permalinks
Estrutura de PermalinksComo afirma o Codex, podem existir alguns problemas dedesempenho com estruturas de permalink começa...
Estrutura de PermalinksPara ser honesto, eu não me preocuparia comisso em projetos de pequeno e médio porte. Existe simpro...
Estrutura de PermalinksO que costumo usar:• /%category%/%postname%/• /%postname%/• /materias/%postname%/
Mantenha o WordPress atualizado !Com o lançamento de novas versões, o WordPress continua amelhorar como um todo.A cada atu...
Quanto tempo devo esperar paraatualizar o WP?Sempre recomendo esperar algumas semanas e ficar de olhono feedback que os us...
FerramentasFirebug YslowPingdom Tools(tools.pingdom.com)GooglePage Speed
Google Page Speed
Lição de casaGoogle PageSpeed+.htaccess do HTML5Boilerplate.com
Lição de CasaPesquise por estes itens no .htaccesscitado anteriormente:• AddType• ExpiresByType
Bibliografia RecomendadaSteve Souders trabalha no Google com web performance e iniciativas open source
Acabou! Curtiu?Contatos:twiter.com/GugaAlves (Pessoal)twitter.com/TudoParaWP (Site)http://br.linkedin.com/in/gugaalves/pth...
Upcoming SlideShare
Loading in...5
×

Otimizacao Front-End para WordPress - OlhoSEO 2013

3,325

Published on

Palestra ministrada no OlhoSEO 2013 sobre 'Otimização Front-End para WordPress' com foco total em performance.

Published in: Technology
5 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,325
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
55
Comments
5
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Otimizacao Front-End para WordPress - OlhoSEO 2013"

  1. 1. Otimização Front-endpara WordPress
  2. 2. Sobre mim@GugaAlves- Coordenador de Projetos Digitais da Agência Trii- Analista de Sistemas- Pós Graduado em Gestão Estratégica de MarketingDigital- Criador do Tudo Para WordPress- Vencedor do #DesafioSEO 09/10 da MestreSeo
  3. 3. Sobre mim
  4. 4. Antes de começarEsta palestra é uma versão revisada e aprimorada da palestra acima
  5. 5. Essa palestra não é só minhahttps://www.facebook.com/groups/wordpress.brasilPalestra feita com ótimas colaborações de alguns membros do grupo
  6. 6. Você sabia?80% do tempo de resposta de uma página égasto no download de elementos do front-end, como imagens, CSS, Javascript.
  7. 7. O que eu vejo na tela?
  8. 8. E o visitante, vai esperar?
  9. 9. Ah, mas meu site já tá legal!O da Mozilla também estava, mas...Após uma minuciosa otimização front-end em suas principaislanding pages, a Mozilla diminuiu o tempo de carregamento em2.2 segundos e aumentou sua conversão em 15,4%, o querepresenta uma estimativa de 60 milhões de downloads amais em um ano!Case de 2010, divulgado emhttp://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
  10. 10. Performance SEO Conversão
  11. 11. Mais cases?Veja cases de empresas como Amazon, Shopzilla,Yahoo e outras nohttp://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
  12. 12. O que vamos ver hoje?• HTML, CSS e JS• Compressão de .js e .css• Otimização de Imagens• CSS Sprites• CDN• Zlib/Gzip• Uso de Plugins• Plugins de Cache• Permalinks• Versão do WordPress• Ferramentas eReferências
  13. 13. HTML, CSS e JS• Não declare CSS e JS inline, faça chamada dearquivos externos.• Melhor modo de fazer tais chamadas: CSS noheader, JS no footer• Comprima seu HTML, seu CSS e seu JS. Quantomenos linhas, menor o tamanho do arquivo.
  14. 14. Mais dicas em:http://speakerdeck.com/zenorocha/como-perder-peso-no-browserhttp://speakerdeck.com/eshiota/desafios-do-desenvolvimento-de-front-end-em-um-e-commerce
  15. 15. Compressão de .js e .css14 requisições271 kb4.44s4 reqs49kb1.1s
  16. 16. W3 Total Cache
  17. 17. WP Minify
  18. 18. Otimização de Imagens
  19. 19. WP Smush.itUsar imagens nos posts é sempre uma boa tática para dar mais vidaa matéria e aumentar a conversão, mas imagens pesadas podemcomprometer o tempo de carregamento.O plugin WP Smush.it faz uma compressão automática de todaimagem enviada pelo Uploader do WP
  20. 20. CSS SpritesTécnica que consiste em se colocar as várias imagens de fundousadas no template do site em um arquivo único e com adeclaração CSS background-position mostrar em cada elementoque recebe uma imagem de fundo uma parte da imagem.Aprenda como fazer com o mestre @Maujor:http://maujor.com/tutorial/css-sprites.php
  21. 21. CSS SpritesSprite do Menu da Apple.com
  22. 22. CSS SpritesSprite.me
  23. 23. CSS SpritesSpriteCow.com
  24. 24. CDNAkamaiAmazon S3 + CloudfrontMaxCDNCoralCDNCloudfareContent Delivery Network (CDN ou Rede de Fornecimento deConteúdo) é sistema de computadores interligados em rede atravésda Internet, que cooperam de modo transparente para fornecerconteúdo (particularmente grandes conteúdos de mídia)a usuários finais.W3 Total Cache + MaxCDN - http://migre.me/5sCY0
  25. 25. Compressão ZlibO WordPress, por padrão, envia HTML nãocompactado para o navegador do visitante.Com algumas simples linhas de código adicionado aoseu cabeçalho, você pode comprimir a saída doWordPress em até 75% usando tecnologia decompressão Zlib!
  26. 26. 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<?phpini_set(zlib.output_compression, On);ini_set(zlib.output_compression_level, 1);?>
  27. 27. HttpZip Compression Check - http://migre.me/5qeZh
  28. 28. Plugins no WordPressUm pouco da minha visão
  29. 29. Muitos plugins pode deixar meu sitelento?A principal razão é que nem todos os desenvolvedorescriam seus plugins de maneira correta, portanto muitos delespedem para carregar seus arquivos independente do pluginestar sendo realmente usado ou não.Quando o WordPress solicita o processamento dowp_header(); e chama tais arquivos e a menos que existamcondicionais corretos no código do plugin, informando se deveser 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 pararecuperar parâmetros que você definiu no painel, recuperararquivos PHP adicionais e carregar arquivos .js e .css quandonão são necessários a todos.
  30. 30. Porque ter muitos plugins podedeixar meu site lento?Todo o processo pode aumentar consideravelmente otempo de carregamento de seu site, o que vai depender daquantidade de plugins ativos.Portanto, ative apenas os plugins que forem realmenteusados e evite o uso de plugins para funções simples demais.Para funções mais simples, prefira sempre criar suas funçõesno functions.php e as chamar apenas quando necessário noseu tema, ok?Leia mais sobre o assunto em http://migre.me/5utlJ
  31. 31. Uso de PluginsResumindo:• Use plugins apenas quando necessário!• Não está usando um plugin temporariamente? Desative-o eevite inserção de arquivos .css e .js que não estão sendousados.• 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 eanote nele seus nomes. Se precisar novamente dele, sóinstalar de novo!
  32. 32. Plugins que não dispenso?• W3 Total CacheOtimização de .css e .js, cache, CDN.• WordPress SEOSEO, Sitemap.xml, Breadcrumbs, Open Graph Protocol (Facebook).• AkismetNinguém gosta de SPAM né?• WP-DB-Backup ou BackWPupBackup da base de dados sempre cai bem• RedirectionRedirecionamentos 301 de maneira rápida (mas se forem poucosredirecionamentos, faça na mão mesmo, no .htaccess)
  33. 33. Plugins de Cache• W3 Total Cachehttp://wordpress.org/extend/plugins/w3-total-cache/• WP Super Cachehttp://wordpress.org/extend/plugins/wp-super-cache/• Hyper Cachehttp://wordpress.org/extend/plugins/hyper-cache/
  34. 34. Cache sem plugin?http://www.varnish-cache.org/Cache a nível de Servidor
  35. 35. Estrutura da URLConfigurando Permalinks
  36. 36. Estrutura de PermalinksComo afirma o Codex, podem existir alguns problemas dedesempenho com estruturas de permalink começando com%category%, %postname%, %tag% e %author%O Desempenho seria melhor quando a estrutura daURL tivesse o ID do post, ou começar com uma coisaestática, como/posts/postname%/Entretanto...
  37. 37. Estrutura de PermalinksPara ser honesto, eu não me preocuparia comisso em projetos de pequeno e médio porte. Existe simproblema de desempenho, mas isso já foi corrigido noWordPress 3.3 e versões posteriores.Utilizando uma hospedagem decente e um plugin de cacheconfigurado corretamente, tais problemas de desempenhodeixarão de existir.
  38. 38. Estrutura de PermalinksO que costumo usar:• /%category%/%postname%/• /%postname%/• /materias/%postname%/
  39. 39. Mantenha o WordPress atualizado !Com o lançamento de novas versões, o WordPress continua amelhorar como um todo.A cada atualização, a equipe WP e toda a comunidade mundialse 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 falhasainda estão lá. Portanto, remova sempre a versão doWordPress de seu cabeçalho usando a função abaixo (nofunctions.php, claro)remove_action(‘wp_head’, ‘wp_generator’);
  40. 40. Quanto tempo devo esperar paraatualizar o WP?Sempre recomendo esperar algumas semanas e ficar de olhono feedback que os usuários da comunidade WordPress estão dandosobre a atualização. Se você decidir fazer a atualização, opte porfazer um teste primeiro em localhost ou algum ambiente específicopara testes, ok?Mais detalhes em http://migre.me/4CdAh
  41. 41. FerramentasFirebug YslowPingdom Tools(tools.pingdom.com)GooglePage Speed
  42. 42. Google Page Speed
  43. 43. Lição de casaGoogle PageSpeed+.htaccess do HTML5Boilerplate.com
  44. 44. Lição de CasaPesquise por estes itens no .htaccesscitado anteriormente:• AddType• ExpiresByType
  45. 45. Bibliografia RecomendadaSteve Souders trabalha no Google com web performance e iniciativas open source
  46. 46. Acabou! Curtiu?Contatos:twiter.com/GugaAlves (Pessoal)twitter.com/TudoParaWP (Site)http://br.linkedin.com/in/gugaalves/pthttp://www.slideshare.net/gugaalves
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×