O documento discute três pontos principais:
1) 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.
2) Para melhorar a velocidade, é importante otimizar aspectos como HTML, CSS, JavaScript e imagens para reduzir o tamanho e número de requisições dos arquivos.
3) Técnicas como o uso de GZIP para compactar arquivos antes da transferência também contribuem para uma melhora significativa na vel
SEO Orientado a Resultados - Search Masters Brasil 2012
SEO x Velocidade de carregamento - PHPnRio 2011
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. 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
3. Um pouco sobre SEO
Eu não sou CEO ...
... nem CÉU ...
... e nem SEU!
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
4. Um pouco sobre SEO
Search
Engine
Optimization
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
5. Um pouco sobre SEO
O 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. Um pouco sobre SEO
Resultados orgânicos x Resultados pagos
Links
Patrocinados
Busca
orgânica
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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 conhecimento
do SEO, maior o salário e maiores as oportunidades.
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
blablabla
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
9. Porquê saber SEO?
• 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
10. SEO
X
Velocidade de
Carregamento
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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. 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. SEO x Velocidade de Carregamento
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
14. Sites em tabelas
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
15. Tabelas
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;
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
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. 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. 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. CSS
e
JavaScript
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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ÃO
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>
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/completo.css" />
SIM
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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. 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. 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
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” GIF
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
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. 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/Bt3j8
Para baixar esta apresentação acesse: leocabral.com/palestra/phpnrio11
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
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
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