Otimizacao Front-End para WordPress - OlhoSEO 2013
25 gostaram•4,368 visualizações
O documento aborda a otimização de front-end para Wordpress, destacando a importância de melhorar o tempo de carregamento das páginas para aumentar a conversão, com exemplos como o da Mozilla. Apresenta diversas técnicas, incluindo compressão de arquivos, uso de plugins adequados, otimização de imagens, e recomendações sobre estruturas de permalink e atualizações do Wordpress. Também fornece referências a ferramentas e bibliografia para aprofundamento no assunto.
Otimizacao Front-End para WordPress - OlhoSEO 2013
- 2. Sobre mim @GugaAlves - Coordenador de Projetos Digitais da Agência Trii - Analista de Sistemas - Pós Graduado em Gestão Estratégica de Marketing Digital - Criador do Tudo Para WordPress - Vencedor do #DesafioSEO 09/10 da MestreSeo
- 3. Sobre mim
- 4. Antes de começar Esta palestra é uma versão revisada e aprimorada da palestra acima
- 5. Essa palestra não é só minha https://www.facebook.com/groups/wordpress.brasil Palestra feita com ótimas colaborações de alguns membros do grupo
- 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. O que eu vejo na tela?
- 8. E o visitante, vai esperar?
- 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 principais landing pages, a Mozilla diminuiu o tempo de carregamento em 2.2 segundos e aumentou sua conversão em 15,4%, o que representa uma estimativa de 60 milhões de downloads a mais em um ano! Case de 2010, divulgado em http://blog.mozilla.org/metrics/2010/04/05/firefox-page- load-speed-%E2%80%93-part-ii/
- 11. Mais cases? Veja cases de empresas como Amazon, Shopzilla, Yahoo e outras no http://www.webperformancetoday.com/2010/06/15 /everything-you-wanted-to-know-about-web- performance/
- 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 e Referências
- 13. HTML, CSS e JS • Não declare CSS e JS inline, faça chamada de arquivos externos. • Melhor modo de fazer tais chamadas: CSS no header, JS no footer • Comprima seu HTML, seu CSS e seu JS. Quanto menos linhas, menor o tamanho do arquivo.
- 15. Compressão de .js e .css 14 requisições 271 kb 4.44s 4 reqs 49kb 1.1s
- 16. W3 Total Cache
- 17. WP Minify
- 19. WP Smush.it Usar 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
- 20. CSS Sprites Té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
- 21. CSS Sprites Sprite do Menu da Apple.com
- 24. CDN Akamai Amazon S3 + Cloudfront MaxCDN CoralCDN Cloudfare Content Delivery Network (CDN ou Rede de Fornecimento de Conteúdo) é sistema de computadores interligados em rede através da Internet, que cooperam de modo transparente para fornecer conteúdo (particularmente grandes conteúdos de mídia) a usuários finais. W3 Total Cache + MaxCDN - http://migre.me/5sCY0
- 25. Compressão Zlib O WordPress, por padrão, envia HTML não compactado para o navegador do visitante. Com algumas simples linhas de código adicionado ao seu cabeçalho, você pode comprimir a saída do WordPress em até 75% usando tecnologia de compressão Zlib!
- 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 <?php ini_set('zlib.output_compression', 'On'); ini_set('zlib.output_compression_level', '1'); ?>
- 27. HttpZip Compression Check - http://migre.me/5qeZh
- 28. Plugins no WordPress Um pouco da minha visão
- 29. 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.
- 30. 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? Leia mais sobre o assunto em http://migre.me/5utlJ
- 31. Uso de Plugins Resumindo: • 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!
- 32. 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 ou BackWPup 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)
- 33. Plugins de Cache • W3 Total Cache http://wordpress.org/extend/plugins/w3-total-cache/ • WP Super Cache http://wordpress.org/extend/plugins/wp-super-cache/ • Hyper Cache http://wordpress.org/extend/plugins/hyper-cache/
- 34. Cache sem plugin? http://www.varnish-cache.org/ Cache a nível de Servidor
- 35. Estrutura da URL Configurando Permalinks
- 36. Estrutura de Permalinks Como 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...
- 37. Estrutura de Permalinks Para ser honesto, eu não me preocuparia com isso em projetos de pequeno e médio porte. Existe sim problema de desempenho, mas isso já foi corrigido no WordPress 3.3 e versões posteriores. Utilizando uma hospedagem decente e um plugin de cache configurado corretamente, tais problemas de desempenho deixarão de existir.
- 38. Estrutura de Permalinks O que costumo usar: • /%category%/%postname%/ • /%postname%/ • /materias/%postname%/
- 39. Mantenha o WordPress atualizado ! 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’);
- 40. 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
- 43. Lição de casa Google PageSpeed + .htaccess do HTML5Boilerplate.com
- 44. Lição de Casa Pesquise por estes itens no .htaccess citado anteriormente: • AddType • ExpiresByType
- 45. Bibliografia Recomendada Steve Souders trabalha no Google com web performance e iniciativas open source
- 46. Acabou! Curtiu? Contatos: twiter.com/GugaAlves (Pessoal) twitter.com/TudoParaWP (Site) http://br.linkedin.com/in/gugaalves/pt http://www.slideshare.net/gugaalves