Site checklist - 10 itens importantes

Nossa, quase dois anos depois eu volto a postar alguma coisa!
O importante é não parar :)

Onde estou trabalhando (Ci&T, projeto Yahoo!), tenho me preocupado muito com a performance dos sites lançados, uma vez que serão divulgados nas frontpage do Yahoo! pelo mundo, portanto, reuni uma lista de 10 itens importantes para o lançamento de um site que se preze.

A idéia aqui é mais levantar os itens interessantes do que mostrar o como fazer. Talvez esse seja uma assunto para outros posts. Também devido ao meu background de Engenheiro de Software, posso deixar escapar algum importante item que um Engenheiro de Interfaces poderia levantar. Qualquer coisa, deixa um comentário.
Certamente há itens para serem descritos, mas pra não ficar chato, vamos com dez itens mesmo.

A lista estará numerada, mas isso não significa que devemos executar os itens nessa ordem.

Vamos à lista:

1) Tratamento de erros: Página 404 com links para páginas existentes
Um site que não possui essa característica poderá perder potenciais visitantes que por um motivo ou outro seguiu um link antigo e que não existe mais no site.
Seria muito bom uma página 404 inteligente que analisa a página incorreta e tenta oferecer links relevantes. Pode-se, por exemplo, 'estudar' quais as páginas 404 que mais tentam ser acessadas e algum editor informar quais os links devem ser mostrados.
Esse mesmo princípio pode ser aplicado à erros 403 (Forbidden) também.

2) Markup válido: Páginas são documentos [X]HMTL válidos
Páginas que não são documentos válidos tem maior tendencia de não serem renderizadas consistentemente nos diferentes browsers e, provavelmente, será uma grande bagunça quando navegando de um dispositivo móvel.

3) Acessibilidade mínima: todos tem o direito de ver o seu site
Vamos ver em sub-tópicos para melhor organização:
a) O site deve ser renderizável em IE 7, IE 8, FF 3, Safari e Chrome (Opera?).
b) Não se esqueça de testar no Windows, OSX e Linux, pois podem apresentar diferenças quando seus browsers renderizam as páginas.
c) O site deve ser utilizável em diferentes resoluções de tela.
d) Se a fonte for alterada (principalmente aumentando...), o site ainda deve ser utilizável.
e) E se o CSS for desabilitado? O site ainda é legível?
f) E se o Javascript for desabilitado? Ainda é possível utilizar o site?
Caso você deixe de implementar um dos itens acima, uma porcentagem de seus usuários podem experimentar uma fraca experiência ao acessar o seu site.

4) Web semântica: uma www mais organizada
Para que seu site fique acima da média, procure ter uma descrição relevante e precisa no title, meta-description e meta-keywords:

<title>Checklist para lançamento de sites de grande volume de acesso</title>
<meta name="description" content="Pouco tempo após o lançamento de um site, seus criadores descobrem que alguns pontos essenciais foram esquecidos, isso pode ser facilmente evitado com a adoção de um checklist.">
<meta name="keywords" content="minify, gzip, semantica, acessibilidade, favicon, cache, checklist">

Sem essas 'simples' três tags, seu rank nos sistemas de busca será penalizado e muito. Um título relevante também melhora a experiência de uma usuário que incluirá a página em seu favoritos ou busque no histório sobre aquele site interessante que ele viu anteriormente.

5) Arquivo para crawlers: robos são seres insistentes
É imprescindível para um site ser encontrado pelos mecanismos de busca. Para tanto, se faz necessário incluir um simples arquivo texto, chamado robots.txt, na raiz do site. Mesmo que seja o caso para orientá-lo a indexar todas as páginas do site:

User-Agent: *
Disallow:

Se o arquivo robots.txt não existir no site, seu error log será entupido com mensagens de erro 404 do tipo 'robots.txt file not found', geradas por todos os crawlers de busca que tentarem acessar o arquivo não existente. Portanto, crie um simple arquivo robots.txt e seu servidor já será livrado de mais uma 'dor de cabeça'

6) Favicon: quem inventou isso hein?!?
Favicon, diminuto de Favorites Icon, são aqueles pequenos ícones que poder ser visto à esquerda da barra de navegação. Seu valor é questionável, pois a maioria das pessoas nem presta atenção nele.
Mas se você omitir o favicon, praticamente todo o visitante de seu site adicionará uma linha com '404 favicon.ico not found' no log do servidor.
O efeito, é o mesmo do robots.txt descrito no item 5, porém muitas vezes ampliado, afinal, robots.txt apenas crawlers procurar mas favicon, praticamente todos os browsers o querem!

7) JS e CSS em arquivos separados: porque HTML, é HTML (!!!)
Não misture JS e CSS com HTML. Mova todo o código JS e CSS embutido no documento HTML para um arquivo separado, pois assim, o browser poderá fazer cache do conteúdo e quando for solicitar a página HTML, não precisará de fazer o download de todo o código JS e CSS novamente.
Claro que pra toda regra há uma exceção. Nesse caso, se o seu código JS e/ou CSS for utilizado apenas em uma das páginas do site, não tem porque separar em um arquivo.
Ao executar esse passo, você se beneficiará do passo seguinte:

8) CSS e JS minificados: computadores não precisam de identação ou comentários
Os arquivos CSS e JS devem ser reduzidos ao máximo que for permitido.
Minificar é o ato de retirar todos os espaços em branco (espaço, quebra de linha e tab), comentários além de implementar outras técnicas como:

- consolidação de CSS e JS:
Todos os arquivos CSS serão agrupados em apenas um arquivo, bem como os arquivos JS.

- refactoring do JS
Variáveis serão renomeadas para ficarem menores. Por exemplo: showUserDetails e isModernBrowser se tornariam v1 e v2 respetivamente.

Com os arquivos minificados e consolidados em apenas um arquivo JS e apenas um arquivo CSS, a quantidade de bytes sendo transferida reduz drasticamente e com apenas dois arquivos JS e CSS, poucas requisições HTTP terão de ser abertas para solicitar os arquivos.

9) Sprite de imagens: não, não é de beber
Uma coisa que as vezes passa desapercebido, é a quantidade de requisições HTTP quem site tem que fazer para carregar as 55 imagens que compões o site.
Essas requisições tomam um tempo considerável do browser para receber todas as imagens.
Para evitar esse problema, coloque todas as imagens em uma só e utilize CSS para posicioná-las.

10) Cache no servidor: de volta às páginas estáticas
Muitas vezes nos gabamos de ter um site dinamico, mas a página principal (a que recebe todos os visitantes), não é atualizada muitas vezes num dia.
As vezes, uma ou duas vezes por dia. Com isso em mente, pra que abrirmos conexão no banco para pegar sempre a mesma informação, processá-la e aprensentar 1.000 vezes num dia?
Nesse caso, recomenda-se cachear pelo menos a index page, para que apenas quando for necessário, montaremos a página e a salvaremos de modo estático no servidor. Dessa maneira, o servidor web não ficará 'bloqueado' aguardo o processamento da página entregar o conteúdo.

Se o seu projeto cobrir esses itens, posso dizer que ele está a frente de muitos outros!


Fica assim então... a data do próximo post a DEUS pertence! :P