SEO x Velocidade de carregamento - PHPnRio 2011

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

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

Um pouco sobre SEOEu não sou CEO ... ... nem CÉU ... ... e nem SEU!Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

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á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

Um pouco sobre SEOResultados orgânicos x Resultados pagos Links Patrocinados Busca orgânicaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

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

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

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

SEO X Velocidade de CarregamentoPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

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

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

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

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 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

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

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;  <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 class="logo“> </div> <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

HTML HTML além das tabelas • Elimine os comentários do código;  <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>  <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

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

CSS e JavaScriptPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

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

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

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

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

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=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

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

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; • 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

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

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 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

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 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

CDNPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

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

BibliografiaPara baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11

http://www.leocabral.com	136
http://feeds.feedburner.com	28
http://leocabral.com	6
http://a0.twimg.com	1

SEO x Velocidade de carregamento - PHPnRio 2011

by Leonardo Cabral on Nov 05, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 171

Statistics

SEO x Velocidade de carregamento - PHPnRio 2011 — Presentation Transcript