Upload
leonardo-cabral
View
1.795
Download
1
Embed Size (px)
DESCRIPTION
Palestra "SEO x Velocidade de carregamento" ministrado por LeoCabral no PHPnRio 2011 no CEFET - Rio de Janeiro em 05 de novembro de 2011.
Citation preview
“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”
SEO x Velocidade de Carregamento
@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: @leocabral
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Um pouco sobre SEO
Eu não sou CEO ...
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
... nem CÉU ...
... e nem SEU!
Um pouco sobre SEO
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
SearchEngineOptimization
Um pouco sobre SEO
O que é SEO?
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
“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”.
Um pouco sobre SEO
Resultados orgânicos x Resultados pagos
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Busca
orgânica
LinksPatrocinados
Um pouco sobre SEO
O quê um SEO faz?
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• Planejamento;• Pesquisa e análise de concorrentes;• Pesquisa de palavras-chave;• Desenvolvimento de meta tags;• Análise estrutural do site;• Acompanhamento de concorrentes;• Acompanhamento de resultados, incluindo aumento de vendas, contatos etc;• Links building.
Conhecimentos de um SEO
• Planejamento (avançado);• Marketing (mediano);• Web Design (mediano);• Programação (básico);• Editorial (avançado);• Web Analytics (mediano);• Arquitetura da Informação (mediano);• Usabilidade (mediano).
Quanto mais avançado o conhecimento do SEO, maior o salário e maiores as oportunidades.
Um pouco sobre SEO
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
SEO é quase o Pereirão
• 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;
mas isso é bom!
SEO programaçãousabilidade
marketingdesign
AI
blablablablablabla
Porquê saber SEO?
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• Apagão no mercado de TI
• Falta gente capacitada
• Falta “conhecimento mais amplo”
• + conhecimento = + oportunidades
• + conhecimento = Salário maior
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
SEOX
Velocidade de Carregamento
SEO x Velocidade de Carregamento
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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.
SEO x Velocidade de Carregamento
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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/).
SEO x Velocidade de Carregamento
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Estatísticas... muito importantes!• Cada objeto adiciona latência ao seu tempo de carregamento aumentando 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 em diminuir o número de requisições feitas na página.
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Sites em tabelas
Tabelas
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Jamais faça um site em tabelas!• Tabelas para layout são horríveis;
• É necessário esperar carregar toda a tabela para que o site apareça;
• Uso de gifs transparentes para espaçamento e posicionamento;
• São horríveis para impressão. Com CSS, você pode criar um estilo para impressão tirando menus e cores desnecessárias;
• Em sites com tabelas, os estilos ficam no meio do código;
Tabelas
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
HTML
HTML
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
HTML além das tabelas
<!-- 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 -->
• 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> </div><!-- end logo -->
HTML
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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>
HTML
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
JavaScript
CSS e JavaScript
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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; }H2 { 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>
NÃO
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/completo.css" /> SIM
CSS e JavaScript
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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>
CSS e JavaScript
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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/
CSS e JavaScript
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
CSS
JavaScript
• Cuidado com scripts externos, pois você pode ter problemas no carregamento dos mesmos, já que eles estão nas mãos de terceiros.
• Coloque CSS em cima e JavaScript em baixo
ATENÇÃO:• Códigos JavaScript do Google Analyticse do Adsense não podem ser alocados externamente;
<head>
</head>
...
</html>
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Imagens
Imagens
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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;
• Corte imagens grandes demais em pedaços menores, mas não corte muito;
• Dê preferência a imagens “.png”. Seu tamanho é até 30% menos que o “.gif”
PNGaté 30%menorque o
GIF
Imagens
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Dica quente! Já existe há anos, mas poucos conhecem
• Utilize o www.smushit.com e comprima suas imagens em até 70% ...
... sem perder qualidade.
285 kb373 kb
Diferença de 23,36%
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
GZIP
GZIP
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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;
GZIP
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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/Bt3j8
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Servidores
Servidores
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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
CDN
CDN
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
• 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.
CDN
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Bibliografia
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
Otimização de WebsiteO Guia Definitivo
Escrito por: Andrew B. King
Editora: O’Reilly
Traduzido por: Alta Books
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.
momento
Bibliografia
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11