SEO x Velocidade de carregamento - PHPnRio 2011

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


... nem CÉU ...

... e nem SEU!

Um pouco sobre SEO


SearchEngineOptimization

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


Busca

orgânica

LinksPatrocinados

Um pouco sobre SEO

O quê um SEO faz?


• 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


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?


• Apagão no mercado de TI

• Falta gente capacitada

• Falta “conhecimento mais amplo”

• + conhecimento = + oportunidades

• + conhecimento = Salário maior


SEOX

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



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



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

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>

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>


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


• 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


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>


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;

• 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


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%


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

http://goo.gl/57nG3

http://goo.gl/57nG3

http://goo.gl/ekKU2

http://goo.gl/ekKU2

http://goo.gl/ekKU2

http://goo.gl/ekKU2

http://goo.gl/Jmqge

http://goo.gl/Jmqge

http://goo.gl/Bt3j8

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.

CDN


Bibliografia


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

Self Improvement

SEO x Velocidade de carregamento - PHPnRio 2011