SEO x Velocidade de Carregamento    “A velocidade de carregamento de um site é hoje um dos fatores mais  importantes no ra...
Quem sou?                                               Leonardo Cabral, mais                                            c...
Um pouco sobre SEOEu não sou CEO ...                                  ... nem CÉU ...                                     ...
Um pouco sobre SEOSearchEngineOptimizationPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Um pouco sobre SEOO que é SEO?     “SEO é o conjunto de estratégias e técnicas     aplicadas a sites como um todo e a pági...
Um pouco sobre SEOResultados orgânicos x Resultados pagos                                                                 ...
Um pouco sobre SEO                                                Conhecimentos de um SEO O quê um SEO faz?               ...
Um pouco sobre SEO                                            SEO é quase o Pereirão                                      ...
Porquê saber SEO?                                     • Apagão no mercado de TI                                        • F...
SEO                 X           Velocidade de           CarregamentoPara baixar esta apresentação acesse: leocabral.com/pa...
SEO x Velocidade de Carregamento                                       • O Usuário não se importa com um código bonito e  ...
SEO x Velocidade de Carregamento                       Como anda a internet hoje? Um estudo realizado com pelo site Pingdo...
SEO x Velocidade de Carregamento                Estatísticas... muito importantes!• Cada objeto adiciona latência ao seu t...
Sites em tabelasPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Tabelas                  Jamais faça um site em tabelas!• Tabelas para layout são horríveis;• É necessário esperar carrega...
Tabelas                 Jamais faça um site em tabelas!                                   • Você economizará dinheiro na h...
HTMLPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
HTML                            HTML além das tabelas • Elimine espaços e linhas desnecessárias no seu HTML; <!-- logo -->...
HTML                           HTML além das tabelas • Elimine os comentários do código;  <!-- logo -->      <div class="l...
HTML                         HTML além das tabelas• Use links relativos;     • Use: <a href=“/fale-conosco.html”/>Fale Con...
CSS                       e                   JavaScriptPara baixar esta apresentação acesse: leocabral.com/palestra/phpnr...
CSS e JavaScript• O CSS e o JavaScript devem ser carregados externamente, nunca internamente.<html><head><title>Título do ...
CSS e JavaScript • A utilização de CSS e JavaScript externos reduz seu código de marcação ao HTML puro; • Agrupe os arquiv...
CSS e JavaScript • Elimine espaços e linhas desnecessárias no seu CSS e JavaScript • Elimine os comentários do código; • E...
CSS e JavaScript • Cuidado com scripts externos, pois você                               <head> pode ter problemas no carr...
ImagensPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Imagens  • Especifique o tamanho das imagens no código HTML  <img width=260 height=90 src=/imagens/260x90_facebook.jpg alt...
Imagens Dica quente! Já existe há anos, mas poucos conhecem • Utilize o www.smushit.com e comprima suas imagens em até 70%...
GZIPPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
GZIP           Deixe a bomba nas mãos do navegador               • Software para compressão sem perda de dados;           ...
GZIP • Habilitando o GZIP via Apache:      • http://goo.gl/57nG3      • http://goo.gl/ekKU2 • Habilitando o GZIP via PHP: ...
ServidoresPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Servidores • Não use HTTPS desnecessariamente;      • HTTPS por ser um ambiente seguro, faz a varredura dos dados aumentan...
CDNPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
CDN• CDN (Content Delivery Network):    • Rede de distribuição de informação;    • Permite fornecer conteúdo Web de uma fo...
CDNPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Bibliografia        Otimização de Website                                  O Guia Definitivo        Escrito por: Andrew B....
BibliografiaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Próximos SlideShares
Carregando em…5
×

SEO x Velocidade de carregamento - PHPnRio 2011

2.093 visualizações

Publicada em

Palestra "SEO x Velocidade de carregamento" ministrado por LeoCabral no PHPnRio 2011 no CEFET - Rio de Janeiro em 05 de novembro de 2011.

Publicada em: Aperfeiçoamento pessoal
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.093
No SlideShare
0
A partir de incorporações
0
Número de incorporações
594
Ações
Compartilhamentos
0
Downloads
55
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

SEO x Velocidade de carregamento - PHPnRio 2011

  1. 1. SEO x Velocidade de Carregamento “A velocidade de carregamento de um site é hoje um dos fatores mais importantes no rankeamento de um site e dominá-los será um diferencial na sua carreira e no seu currículo” @leocabral Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  2. 2. Quem sou? Leonardo Cabral, mais conhecido como Léo Cabral!  Trabalhando com marketing digital desde 2006;  Formação em Marketing Digital no Infnet;  Analista de MKT Digital na Ed. Freitas Bastos;  Analista de Marketing Digital na Leadership;  Coordenador SEO e Web Analytics na Hi-Mídia;  Organizador do CoéSEO;  Administrador do forumseo.com.br;  Site: leocabral.com;  Twitter: @leocabralPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  3. 3. Um pouco sobre SEOEu não sou CEO ... ... nem CÉU ... ... e nem SEU!Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  4. 4. Um pouco sobre SEOSearchEngineOptimizationPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  5. 5. Um pouco sobre SEOO que é SEO? “SEO é o conjunto de estratégias e técnicas aplicadas a sites como um todo e a páginas individualmente, de forma que estes tornem-se mais relevantes ao usuário e aos mecanismos de busca simultaneamente”.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  6. 6. Um pouco sobre SEOResultados orgânicos x Resultados pagos Links Patrocinados Busca orgânicaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  7. 7. Um pouco sobre SEO Conhecimentos de um SEO O quê um SEO faz? • Planejamento (avançado); • Planejamento; • Marketing (mediano); • Pesquisa e análise de concorrentes; • Web Design (mediano); • Pesquisa de palavras-chave; • Programação (básico); • Desenvolvimento de meta tags; • Editorial (avançado); • Análise estrutural do site; • Web Analytics (mediano); • Acompanhamento de concorrentes; • Arquitetura da Informação (mediano); • Acompanhamento de resultados, incluindo • Usabilidade (mediano). aumento de vendas, contatos etc; • Links building.Quanto mais avançado o conhecimentodo SEO, maior o salário e maiores as oportunidades.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  8. 8. Um pouco sobre SEO SEO é quase o Pereirão mas isso é bom! • Possui um conhecimento mais amplo; • Facilidade de coordenar e gerenciar equipes por ter uma visão ampla de todo o processo; • Bons profissionais ganham mais, podendo inclusive, ganhar comissões por vendas; SEO AI usabilidade blablabla programação design marketing blablablaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  9. 9. Porquê saber SEO? • Apagão no mercado de TI • Falta gente capacitada • Falta “conhecimento mais amplo” • + conhecimento = + oportunidades • + conhecimento = Salário maiorPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  10. 10. SEO X Velocidade de CarregamentoPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  11. 11. SEO x Velocidade de Carregamento • O Usuário não se importa com um código bonito e bem organizado, ele quer é um site rápido; • Agrada ao usuário que não precisa esperar pelo carregamento de páginas lentas e pesadas; • Se agrada aos usuários, agrada aos robôs; • Passou a ser um dos fatores de maior importância para a indexação e boa classificação nos mecanismos de busca; • Menor consumo de banda; • Agrada a você e ao seu chefe que paga menos por consumo de banda.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  12. 12. SEO x Velocidade de Carregamento Como anda a internet hoje? Um estudo realizado com pelo site Pingdom* com os Top 100 do Technorati descobriu que: • Imagens são responsáveis por 61,3% do peso das páginas de um site; • Scripts por 17,2%; • HTML por 15,3%; • E o CSS por apensas 5,9%. • Em média a página inicial tem 63 imagens; • 9 scripts (um deles tinha 35 scripts só na home); • Mais de 1/3 tem sua home com cerca de 1 MB. *Pingdom: Serviço web especializado em monitorar a disponibilidade e o tempo de resposta de websites (http://www.pingdom.com/).Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  13. 13. SEO x Velocidade de Carregamento Estatísticas... muito importantes!• Cada objeto adiciona latência ao seu tempo de carregamentoaumentando em média: • 0,25 segundos por objeto na internet discada e; • 40 ms na internet a cabo;• 60% da área acima da dobra é composta por gráficos;• 90% do trabalho de otimização de velocidade consiste emdiminuir o número de requisições feitas na página.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  14. 14. Sites em tabelasPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  15. 15. Tabelas Jamais faça um site em tabelas!• Tabelas para layout são horríveis;• É necessário esperar carregar toda a tabela para queo site apareça;• Uso de gifs transparentes para espaçamento eposicionamento;• São horríveis para impressão. Com CSS, você podecriar um estilo para impressão tirando menus e coresdesnecessárias;• Em sites com tabelas, os estilos ficam no meio docódigo;Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  16. 16. Tabelas Jamais faça um site em tabelas! • Você economizará dinheiro na hospedagem (site mais leve = menos consumo de banda); • A manutenção é mais fácil. Você não precisa editar o HTML, basta editar o CSS que todas as páginas são mudadas ao mesmo tempo; • Sua posição nos sites de busca irá melhorar. Buscadores odeia tabelas. Eles ficam confusos; • Seu site se tornará acessível em diversos navegadores. Podendo ser melhor visualizado em celulares e outros aparelhos.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  17. 17. HTMLPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  18. 18. HTML HTML além das tabelas • Elimine espaços e linhas desnecessárias no seu HTML; <!-- logo --> <div class="logo"> <a href="/"><img src="/static/img/logo.png" alt=“logo do site" /></a> <div id="barra_usuario" class="userbar"> <a href="/perfil/">Seu Perfil</a> | <a href="/cadastro/">Cadastre-se</a> </div> <!-- logo --> <div class="logo“> </div> <a href="/“><img src="/static/img/logo.png" alt=“logo do site" /></a> <div id="barra_usuario" class="userbar“> <!-- end logo --> <a href="/perfil/">Seu Perfil</a> | <a href="/cadastro/">Cadastre-se</a> </div> </div> <!-- end logo -->Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  19. 19. HTML HTML além das tabelas • Elimine os comentários do código; <!-- logo --> <div class="logo"> <a href="/"><img src="/static/img/logo.png" alt=“logo do site" /></a> <div id="barra_usuario" class="userbar"> <a href="/perfil/">Seu Perfil</a> | <a href="/cadastro/">Cadastre-se</a> </div> </div> <!-- end logo --> <div class="logo"> <a href="/"><img src="/static/img/logo.png" alt=“logo do site" /></a> <div id="barra_usuario" class="userbar"> <a href="/perfil/">Seu Perfil</a> | <a href="/cadastro/">Cadastre-se</a> </div> </div>Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  20. 20. HTML HTML além das tabelas• Use links relativos; • Use: <a href=“/fale-conosco.html”/>Fale Conosco</a> • Ao invés de: <a href=“http://www.site.com.br/fale-conosco.html”/>Fale Conosco</a>• Especifique o DocType correto; • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">• Condense seu HTML; • <div class="logo“><a href="/"><img src="/static/img/logo.png" alt=“logo do site" /></a><div id="barra_usuario" class="userbar“><a href="/perfil/">Seu Perfil</a> | <a href="/cadastro/">Cadastre-se</a></div></div>Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  21. 21. CSS e JavaScriptPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  22. 22. CSS e JavaScript• O CSS e o JavaScript devem ser carregados externamente, nunca internamente.<html><head><title>Título do site</title><style>BODY { margin: 0; font-family: "trebuchet ms", sans-serif; color: #222; font-size: 10.5pt; }#siteheader { padding: 8px 8px 0 12px; background: url(images/logo.png) repeat-x; height: 64px; }A.navlink, A.navlink:visited { text-decoration: none; color: #000; }A.navlink:hover { text-decoration: underline; }A { color: #404; }A:visited { color: #695782; } NÃOH2 { margin-bottom: 0; margin-top: 8px; font-weight: normal; font-size: 2em; }.ahover:hover { text-decoration: underline; }.contents { width: 800px; margin: 8px 16px 16px 16px; }...</style></head><link rel="stylesheet" type="text/css" media="screen" href="/static/css/completo.css" /> SIMPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  23. 23. CSS e JavaScript • A utilização de CSS e JavaScript externos reduz seu código de marcação ao HTML puro; • Agrupe os arquivos CSS e JavaScript no menor número de arquivos possíveis evitando assim, muitas requisições; <link rel="stylesheet" type="text/css" media="screen" href="/static/css/960.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/static/css/main_20110609.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/static/css/completo.css" /> <script type="text/javascript" src="/static/js/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="/static/js/jquery-ui.js"></script> <script type="text/javascript" src="/static/js/completo.js"></script>Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  24. 24. CSS e JavaScript • Elimine espaços e linhas desnecessárias no seu CSS e JavaScript • Elimine os comentários do código; • Escreve o seu CSS e o JavaScript na sua forma compacta; • http://pimpmyjs.com/ • http://www.cleancss.com/ • Condense o CSS e o JavaScript para eliminar a requisição de bytes desnecessários; • http://www.refresh-sf.com/yui/Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  25. 25. CSS e JavaScript • Cuidado com scripts externos, pois você <head> pode ter problemas no carregamento dos mesmos, já que eles estão nas mãos de </head> terceiros. • Coloque CSS em cima e JavaScript em baixo ... ATENÇÃO: </html> • Códigos JavaScript do Google Analytics JavaScript e do Adsense não podem ser alocados externamente;Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  26. 26. ImagensPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  27. 27. Imagens • Especifique o tamanho das imagens no código HTML <img width=260 height=90 src=/imagens/260x90_facebook.jpg alt=Facebook /> • Jamais redimensione imagens utilizando HTML. O redimensionamento deve ser feito anteriormente, via editor de imagens; PNG até 30% • Corte imagens grandes demais em pedaços menor menores, mas não corte muito; que o • Dê preferência a imagens “.png”. Seu tamanho é até 30% menos que o “.gif” GIFPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  28. 28. Imagens Dica quente! Já existe há anos, mas poucos conhecem • Utilize o www.smushit.com e comprima suas imagens em até 70% ... ... sem perder qualidade. 373 kb 285 kb Diferença de 23,36%Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  29. 29. GZIPPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  30. 30. GZIP Deixe a bomba nas mãos do navegador • Software para compressão sem perda de dados; • Extensão .gz; • Envia as páginas do site ao navegador em formato comprimido; • Pode ser programado via servidor ou na linguagem utilizada; • Suporte de todos os navegadores a partir do IE3; • Curiosidade: O site do Yahoo tem cerca de 150k, mas ao transferir, seu peso é de apenas 30k;Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  31. 31. GZIP • Habilitando o GZIP via Apache: • http://goo.gl/57nG3 • http://goo.gl/ekKU2 • Habilitando o GZIP via PHP: • http://goo.gl/Jmqge • Gzip Test: Ferramenta de teste • http://goo.gl/Bt3j8Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  32. 32. ServidoresPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  33. 33. Servidores • Não use HTTPS desnecessariamente; • HTTPS por ser um ambiente seguro, faz a varredura dos dados aumentando o tempo de carregamento; • Somente no carrinho de compras • Separe servidores de conteúdo de servidores de banco de dados; • Dependendo do tamanho da aplicação, use um servidor para cada tipo de dado: • Imagens • HTML (framework) • JavaScript e CSS • Banco de dados • Reduza o número de Cookies; • Atenção ao serviço de hospedagem (latência);Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  34. 34. CDNPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  35. 35. CDN• CDN (Content Delivery Network): • Rede de distribuição de informação; • Permite fornecer conteúdo Web de uma forma mais rápida a um grande número de utilizadores; • Conteúdo duplicado em múltiplos servidores em vários lugares no mundo; • Objetivo de direcionar o conteúdo ao utilizador com base na proximidade do servidor; • Pode ser utilizado para diversas aplicações, mas as mais comuns são para servir imagens e downloads em geral; • As redes mais conhecidas, confiáveis e mais utilizadas são: • Akamai; • Amazon; • Microsoft Azure CDN; • entre outras.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  36. 36. CDNPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  37. 37. Bibliografia Otimização de Website O Guia Definitivo Escrito por: Andrew B. King Editora: O’Reilly Traduzido por: Alta Books momento Apesar da Alta Books ter as traduções mais “porcas” do mercado editorial, nitidamente feitas de forma automática através do Google Translator ou mecanismo similar, este livro vale a pena pelo excelente conteúdo apresentado.Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
  38. 38. BibliografiaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

×