A otimização de sites para que tenham um melhor desempenho e carreguem mais rápido ao serem acessados é uma das principais medidas que um desenvolvedor web deve ter em mente. Já foram publicados artigos e ainda serão muitos outros sobre este tema, mas, existe toda uma série de medidas que podem ser tomadas além dos “tradicionais” meios de otimização; medidas estas que, muitas vezes, passam desapercebidas pela maioria dos desenvolvedores.
Efeitos de um código limpo
Em uma série de testes feitos usando o Web Page Test (você pode conferir um pouco do uso desta excelente ferramenta no artigo “Screencast com análise de performance web do datafilme.com.br” do Sérgio Lopes) contra diferentes versões de uma mesma página, descobriu-se que as técnicas de desenvolvimento ruins aumentaram o tempo de carregamento da página. Os piores foram:
- Não salvar imagens efetivamente para a web: +28% no tempo de carregamento
- Utilizar
@importpara chamar a metade de uma folha de estilo na outra metade: +7,6% - Seletores CSS ineficientes: +5,5%
- Adição de 10kb de HTML extra: +4,8%
Os testes foram feitos usando uma página muito pequena (média de carregamento de 0.55s), testada em diferentes navegadores. É possível encontrar mais detalhe em writegoodcode.com.
Código limpo significa um site mais rápido e visitantes felizes. Código limpo é fácil de editar por outras pessoas envolvidas no projeto e facilmente reutilizado em um novo trabalho, poupando tempo. Designers e desenvolvedores que mantêm seu código limpo serão capazes de terminar um projeto mais rapidamente e este será mais bem performático em qualquer navegador.
CSS limpo
Regras de CSS não utilizados rapidamente vão “inchar” as folhas de estilo. Ferramentas como o Dust-Me Selectors e CSS Stress Test ajudam a encontrá-los. Estilos não utilizados podem surgir a partir de página ou elementos excluídos, áreas de conteúdo renomeadas, etc – existe uma certa controvérsia quanto a isso quando o assunto é design responsivo, mas isso é assunto para outro artigo.
Procure por oportunidades para combinar ou condensar estilos. Você não está sozinho em ver estilos duplicados para elementos únicos, é uma parte natural de um bom projeto para ter um estilo consistente em todo o site. Basta garantir que você só está atribuindo um conjunto de declarações para todos os elementos que devem compartilhar estilos.
Se você estiver usando ferramentas como o Firebug ou Chrome Developer Tools para encontrar e testar as alterações de CSS, considere reorganizar seu CSS para manter os estilos juntos ao invés de organizá-los por área do site. Você vai encontrar mais estilos que podem ser combinados quando você tem os elementos de estilo semelhante próximos uns dos outros. Por exemplo, ao invés de criar uma seção no seu arquivo CSS para armazenar um novo conjunto de background de ícones, coloque essas regras perto de outros estilos de sprites e veja o que pode ser combinado com o seu código existente.
Se você encontrar muitas cores diferentes em seu CSS, considere a construção de um guia de estilo para determinar quais cores devem ser usadas para que finalidade e defina uma lista limitada de códigos hexadecimais ou valores RGB para serem usados no site. Depois, atualize seu estilo para refletir as novas regras, combinando declarações da mesma cor para eliminar declarações de estilos duplicadas.
Seletores ineficientes podem ser rapidamente encontrados usando o Page Speed, mas ele não identifica tudo. Uma dica é começar sempre com a menor especificidade de seletores possível e ir trabalhando a partir daí. Isso mantém o CSS pequeno e infinitamente mais manutenível a medida em que seja preciso substituir estilos.
A medida em que o CSS vai crescendo, comece a pensar em seu HTML. Existem nomes de IDs e classe que não são semânticos? Você está vendo muitos hacks para IE ou !important que poderiam ser eliminados através de uma codificação melhor? Há reutilização de elementos que poderiam ser reescritos para ser mais eficientes? Um arquivo CSS inchado pode indicar que as necessidades no HTML precisam ser melhor observadas.
HTML limpo
A remoção de elementos desnecessários no HTML vai criar uma hierarquia simples e vai ser mais fácil de ver como você pode escrever seu CSS. Muitas veze sites que têm elementos desnecessários como tags div estranhas também terão muitos seletores ineficientes no estilo. O desenvolvedor pode ter ficar sobrecarregado com a quantidade de elementos-pai e não percebeu que a adição de seu peso na folha de estilo era desnecessário.
Da mesma forma, desenvolvedores que estão lutando com o peso de suas folhas de estilo podem adicionar elementos-pai não-semânticos e desnecessários no HTML para que possam substituir estilos usando seletores adicionais. Evite isso por completo mantendo o HTML limpo e usando apenas nomes semânticos para classes e IDs.
Quando for limpar o HTML, atente para:
- CSSs incorporados ou inline
- Seletores desnecessários
- Elementos que não têm necessidade de um estilo especial (classes ou IDs desnecessários)
- Código legado comentadode idade, código comentada
Por último, frameworks “fora da caixa” podem ser ótimos para desenvolvimentos iniciais e design, no entanto, marcação baseada em grids estranhas e não-semânticas podem prejudicar o tempo de carregamento das páginas do site. Atenha-se ao grid, mas mantenha apenas os seletores que são semânticos e necessário para a sua estrutura de conteúdo. Nos testes, acrescentar 10KB extra de HTML numa página (que poderia ser comentários, marcação de grid desnecessária, etc) gerou um aumentou do tempo de carregamento de página em 4,8%.
Imagens limpas
“Imagens limpas” se resume a 3 coisas: otimização de tamanho e formato, uso de sprites e planejamento.
Nos testes feitos, gerar JPGs usando o recurso “Salvar para web…” do Photoshop em 75% ao invés de 50% aumentou o tempo de carregamento da página em 15%. Usar o formato JPG em menos de 50% ao invés de PNG aumentou o tempo em 10%. Tudo se resume a saber qual tipo de arquivo de imagem usar e o nível de otimização que é possível obter de cada um. Para a compressão final, existem ferramentas bem interessantes como jpegtran, JPEGmini, TinyPNG e OptiPNG.
Frequentemente é óbvio quando se deve usar sprites: pode haver várias imagens do mesmo tamanho e finalidade ou pode haver lotes de pequenos ícones utilizados em todo o site. Considere oportunidades para reutilizar seu código e imagens como melhores pistas de codificação para facilitar a reciclagem do trabalho, poupando seu tempo a medida que vai construindo coisas novas.
Eficiência de imagens se resume a planejamento. Se você souber qual a finalidade do uso de cada imagem, é possível planejar bem quanto a transparência, tamanho, backgrounds, repetições e a possibilidade de combinar imagens em sprites. A medida que um site cresce ou se existem vários designers que criam imagens, a(s) pasta(s) de imagens pode(m) crescer de forma ineficiente. Faça uma verificação de rotina para ver quais imagens podem ser reutilizadas, combinadas ou re-exportadas em formatos diferentes.
Planejamento limpo
Se você trabalha em equipe ou individualmente, deve ter um fluxo de trabalho a seguir em relação a como construir um site e um método de revisão em intervalos regulares. Codificação com o “panorama geral” em mente alivia muitos dos pontos críticos associados ao tempo de carregamento das páginas de um site.
Pontos importantes como:
- Como o conteúdo se relaciona com o design
- Como os usuários navegam pelo site
- Como se mede o sucesso de cada página
- Tempo de carregamento da página inicial
- Tempo de carregamento de qualquer e-commerce ou processo de check-out
- Maiores taxas de conversão (ou outras medidas de sucesso) em páginas pesadas
Conclusão
A velocidade do site pode fazer ou quebrar as taxas de conversão e impactar a receita de um site. É importante manter o tempo de carregamento baixo escrevendo código semanticamente adequado, usando as melhores práticas de otimização de performance e, rotineiramente, a limpeza de CSS, HTML e imagens.
A raiz dos problemas de carregamento de sites é geralmente o mau planejamento no início do projeto ou falta de planejamento para atualizações. Por exemplo: se um desenvolvedor não perceber que um bloco de conteúdo seria reutilizado em outra página, classes adicionais e IDs podem ser adicionados para “fazer funcionar” no projeto adicional. Se um designer não criou um guia de estilo mestre para um site, toneladas de códigos hexadecimais de cores diferentes ou valores RGB podem ser usadas para a mesma finalidade em toda a folha de estilo CSS principal. Se as páginas envolvendo designs únicos são removidas, seu CSS originalmente bem codificado pode ser deixado para trás para todos os visitantes continuam a baixar. E assim por diante.
Geralmente, o tempo de carregamento do site irá aumentar com sua evolução e isso, de certo modo, é algo já esperado. Por isso é importante fazer essa rotina de limpeza de HTML, CSS e imagens uma parte natural do fluxo de trabalho para garantir uma experiência positiva ao usuário.