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: @leocabral

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

Um pouco sobre SEO

Eu não sou CEO ...

... nem CÉU ...

... e nem SEU!


Um pouco sobre SEO

Search
Engine
Optimization

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


Um pouco sobre SEO

Resultados orgânicos x Resultados pagos

Links
Patrocinados

Busca
orgânica


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.


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

Porquê saber SEO?

• Apagão no mercado de TI

• Falta gente capacitada

• Falta “conhecimento mais amplo”

• + conhecimento = + oportunidades

• + conhecimento = Salário maior


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.


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/).



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.


Sites em tabelas


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;


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.


HTML


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>

HTML
• Elimine os comentários do código;

<div class="logo">
</div>
</div>


<div class="logo">
</div>
</div>

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


CSS
e
JavaScript

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

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>


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/


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;


Imagens


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

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%

GZIP


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;


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


Servidores


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


CDN


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.


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.


Bibliografia


SEO x Velocidade de carregamento - PHPnRio 2011

Mais conteúdo relacionado

Semelhante a SEO x Velocidade de carregamento - PHPnRio 2011

SEO x Velocidade de carregamento - PHPnRio 2011