Acessibilidade


 Melhorando o Desempenho e Acessibilidade

Em julho de 2004, recebi a tarefa de otimizar o desempenho e a acessibilidade de um Website, visto que o grande número de visitas nos sete primeiros dias do mês prejudicava o acesso a seus serviços e aumentava o consumo de banda e seu custo variável.

A minha função era de tornar o site acessível, melhorando o seu desempenho e minimizando custos e problemas de acesso. Não fazia parte do objetivo a criação de um novo design e tampouco mudanças na sua estrutura. Aproveitei a oportunidade e resolvi aplicar ao projeto os padrões Web (Web Standards) ou ao menos chegar o mais próximo possível deles.

Já vinha estudando “TABLELESS” - como também são conhecidos comercialmente os Web Standards – há alguns meses e a oportunidade era perfeita. Juntei a fome com a vontade de comer e de uma única vez quebrei o paradigma das tabelas e ainda aprimorei meus poucos conhecimentos.

Todas as empresas na Web já utilizaram tabelas para diagramar seus sites e a maioria ainda utiliza este recurso. O que poucos sabem é que o tag TABLE utilizado para criar tabelas não foi criado para diagramar páginas Web e sim para tabular dados.

Felizmente a estatística está começando a mudar, grandes empresas como a Macromedia, Wired, ESPN, entre outras, já migraram seus Websites para os padrões Web. Na terça-feira, 01 de fevereiro de 2005, foi a vez da Microsoft mostrar que está começando a se preocupar um pouco com os padrões. Ela apresentou o seu serviço de busca: o MSN Search, que mesmo deixando muito a desejar, é o site da Microsoft mais complacente para com os Web Standards. Suas páginas XHTML não validam e o site ainda utiliza um script que identifica o tipo navegador utilizado pelo visitante, oferecendo versões diferentes para cada um deles, fugindo assim de uma das principais propostas dos padrões que é: “Codifique uma vez, publique em qualquer lugar”.

Depois de muito trabalho, afinal “mexeram no meu queijo”, ou melhor, na tabela - minha velha companheira de guerra - consegui terminar parte do projeto. Toda mudança de cultura é difícil, ainda mais quando pega pela frente um velho desenvolvedor de páginas Web que se vê obrigado a refazer e reaprender muitos dos seus tão “valiosos” conceitos. Mas temos que olhar para frente, e podem ter certeza de que os padrões Web já são uma realidade. Para terminar o trabalho, apliquei algumas técnicas de acessibilidade, customizei imagens e substituí um banner em flash por um em JPG. Ufa, que alegria! Consegui terminar minha primeira página “tableless”.

Mas alegria de pobre dura pouco. E ao testar meu trabalho em outros navegadores além do IE, para minha surpresa descobri que em cada um dos navegadores a sua apresentação estava diferente e ainda apresentava alguns sérios erros.

Só então descobri como é problemático desenvolver um site utilizando para teste apenas o preview do IE. Aprendi que, a cada passo, devemos testar no mínimo em três navegadores (IE, Opera e o Mozzila). E também não podemos esquecer de que existem diferenças entre as versões do IE. Por razões que desconhecemos, ou conhecemos muito bem, a Microsoft construiu o navegador Internet Explorer fora dos padrões de CSS sugeridos pela W3C, e ainda não há previsão de uma nova versão complacente aos padrões Web. Assim o IE tornou-se meu maior pesadelo, pois quanto mais o código se aproxima dos padrões, menos ele funciona no IE. Bem, mas isso é assunto para um outro artigo.

‘A frase “lixo que entra, lixo que sai” está começando a pegar no mundo dos navegadores, tornando o conhecimento dos padrões Web uma necessidade para todos os que projetam ou produzem Web Sites’. (Jeffrey Zeldman em seu livro – Como construir Web Sites compatíveis)

Voltando ao meu desafio, após consertar parte dos erros e aplicar algumas gambiarras conhecidas como CSS HACKs, para que a apresentação fosse a mesma em todos os navegadores (é bom lembrar que isto não seria necessário se o IE fosse complacente com os padrões), iniciei alguns testes comparativos sobre o desempenho das duas versões do site.

- Um printscreen do site antes do início do projeto (Diagramação do layout com tabelas aninhadas)
Imagem do site antes da aplicação dos padrões

- Printscreen do site no final do projeto
Imagem do site após a aplicação dos padrões com praticamente a mesma cara

O design foi mantido praticamente o mesmo nas duas versões, apenas algumas mudanças na apresentação são percebidas:

  • o antigo banner animado em flash deu lugar a um em formato JPG, melhorando bastante a performance e acessibilidade;
  • o menu foi substituído por um 100% em CSS, acessível, compatível com todos os navegadores (cross browser), mais leve e interativo;
  • maior espaço entre as linhas (entrelinhamento) dos links centrais que também ganharam mais espaço horizontal e vertical;
  • inclusão do selo de acessibilidade Brasil obtido no validador Da Silva.

Vejamos a seguir alguns números comparativos da home-page antes e depois da aplicação dos Web Standards:

1) Número de linhas de código HTML
Versão antiga - 411 linhas, versão nova - 71 linhas.

- A versão anterior à home-page tinha 411 linhas de código, enquanto a nova ficou com apenas 71 linhas.

O resultado final foi uma versão quase seis vezes menor que o original. Além do ganho de performance, ficou muito mais simples e fácil de entender.

2) Tamanho em Kbytes dos arquivos da home-page e seu tempo de download em diversos tipos de conexão.

As comparações entre as versões foram realizadas utilizando o serviço gratuito disponível no site websiteOptimization.com.

tabela comparativa - Versão Antiga - arquivo HTML com 27Kb, Versão Tableless - arquivo HTML com 8 Kb

Tempo de download em um modem de 56K na versão em tabelas foi de 19.73 segundos, enquanto na versão sem tabelas foi de 8.94 segundos.

3) Teste de carga

Por último, realizamos o teste de carga comparando o tempo médio de resposta das páginas com 1, 10, 100 e 200 usuários simultâneos.

- Teste de Carga: Foi utilizada a Ferramenta Rational Suite TestStudio em ambiente de Rede Local de 100Mbits.

Vejamos o tempo de resposta com 100 usuários simultâneos:

Versão anterior = 4 segundos
Versão nova = 1 segundo

Conclusão:

Apesar do trabalho e dificuldades encontradas - em grande parte pela minha inexperiência – ao analisarmos os números podemos facilmente concluir que o retorno compensou e muito a migração para os padrões Web em substituição do design com tabelas aninhadas.

O Website se tornou acessível, simples e com desempenho muito superior a sua antiga versão. Atingimos em cheio o objetivo e melhoramos o serviço.

O projeto INTERNATIVA também procura utilizar os padrões Web como metodologia de desenvolvimento Web.

Para comentar este artigo, clique aqui e utilize o blog do autor

Horácio Soares - Analista de Sistemas e WebdesignerHorácio Soares é professor universitário e trabalha como Analista de Sistemas e Webdesigner de uma multinacional.
horacio.soares@internativa.com.br