z

A performance dos principais sites do governo brasileiro

Depois de 4 anos estudando como um condenado, finalmente me formei! E como em todo final de curso, também tive que enfrentar a tal da monografia.

Por conta de todas as viagens para palestrar, projetos open source para manter e as tarefas diárias do trabalho para lidar, não tive muito tempo para me dedicar a monografia do jeito que eu queria. Mesmo assim acho que o resultado ficou bem legal e muito relevante, por isso gostaria de compartilhar com vocês.

Colação de Grau

Tema

O tema escolhido para escrita foi performance. Eu já estava estudando tópicos relacionados à isso para criar o guia Como Perder Peso no Browser, (leia mais) então não foi complicado discorrer sobre o assunto. Organizar esse tema em um fluxo legal, no tom de monografia, isso sim foi difícil.

O objetivo da monografia foi mostrar as diversas técnicas e ferramentas que auxiliam o desenvolvedor no processo de otimização da performance. Além disso, escolhi alguns sites para exemplificar as medidas de performance e a melhoria em decorrência do emprego das técnicas de otimização.

Para definir quais seriam esses 5 sites avaliados em diferentes critérios ao longo da monografia, foi consultado o Alexa, que é o ranking das páginas mais acessadas em cada país. Após a consulta pelo país Brasil, foi realizado um filtro por aqueles que continham o domínio .gov.br. O resultado foram os 5 mais acessados do governo brasileiro.

| Rank | Site | Ranking Alexa | | ---- | ----------------------------------------------------------- | ------------- | | 1 | Caixa Econômica Federal | 24 | | 2 | Governo do Estado de São Paulo | 44 | | 3 | Ministério da Fazenda | 58 | | 4 | Ministério da Educação | 117 | | 5 | Governo do Estado do Rio de Janeiro | 132 |

Depois foi testado cada um dos sites nas principais ferramentas de diagnóstico. O resultado, como você deve imaginar, foi assustador.

| Rank | Site | PageSpeed | YSlow | WebPageTest | | ---- | --------------------------------------- | --------- | ----- | ----------- | | 1 | caixa.gov.br | 47 | 74 | 51 | | 2 | sp.gov.br | 66 | 75 | 67 | | 3 | fazenda.gov.br | 68 | 98 | 63 | | 4 | mec.gov.br | 78 | 83 | 80 | | 5 | rj.gov.br | 52 | 65 | 56 |

Problemas

Então, ao longo da monografia, fui destrinchando as causas desses problemas. Não houve preocupação com relação à quantidade de dados trafegados no servidor. Nenhum dos sites comprimia HTML, CSS ou JavaScript por exemplo.

| Rank | Site | Tamanho | | ---- | --------------------------------------- | ------- | | 1 | caixa.gov.br | 1008 kb | | 2 | sp.gov.br | 992 kb | | 3 | fazenda.gov.br | 233 kb | | 4 | mec.gov.br | 108 kb | | 5 | rj.gov.br | 1600 kb |

O mesmo descaso aconteceu com relação ao número de requisições HTTP realizadas. O site do Governo do Estado do Rio de Janeiro realiza 21 requisições de arquivos JavaScript e 16 de arquivos CSS. O site da Caixa Econômica Federal realiza 82 requisições de imagens.

| Rank | Site | Requisições | | ---- | --------------------------------------- | ----------- | | 1 | caixa.gov.br | 120 | | 2 | sp.gov.br | 65 | | 3 | fazenda.gov.br | 37 | | 4 | mec.gov.br | 14 | | 5 | rj.gov.br | 87 |

Conclusão

Esses são só alguns dos problemas, fique à vontade para ler o material inteiro: Técnicas para melhoria de performance em aplicações web no lado do cliente.

Nenhum dos portais mais acessados do governo brasileiro obteve um resultado bom. A maioria nem sequer apresenta uma performance satisfatória, o que é muito preocupante pois serviços públicos deveriam ser os primeiros a oferecer qualidade no acesso de suas páginas web. Como diria David Cheriton:

"Se é rápido e feio, as pessoas vão usá-lo e odiá-lo. Se é lento, elas não vão usá-lo."

Sumário

  1. Introdução
  2. O impacto da otimização de performance
  3. Onde deve-se focar a otimização
  4. Organização da escrita desta monografia
  5. Ferramentas de diagnóstico de performance
  6. YSlow
  7. Pagespeed
  8. WebPageTest
  9. Sites selecionados para exemplificar as técnicas
  10. Critério definido para a seleção de páginas
  11. Avaliações iniciais no Pagespeed, YSlow e WebPageTest
  12. A anatomia de uma requisição HTTP
  13. DNS lookup
  14. Initial connection
  15. Cabeçalho keep-alive
  16. Time to first byte
  17. Content download
  18. O tempo de latência na rede
  19. O tamanho das requisições HTTP
  20. Compressão de código
  21. Compressão de JavaScript
  22. Compressão de CSS
  23. Compressão de HTML
  24. Compressão de imagem
  25. Compressão lossless
  26. Compressão lossy
  27. O número de requisições HTTP
  28. Concatenação de código
  29. Concatenação de JavaScript
  30. Concatenação de CSS
  31. Concatenação de imagem
  32. CSS Sprites
  33. Data URIs
  34. Guia colaborativo sobre performance
  35. Conclusão