CSS3 – Cuidado com as quebras de performance

O HTML5 e o CSS3 são a next big thing da Internet e os developers espumam-se da boca com certos efeitos que podem ser produzidos com código que estavam reservados a imagens ou Javascript complexo.

As novidades do CSS3 são fantásticas, mas é necessária alguma precaução.

CSS3

Tenho andado a fazer várias experiências com HTML5 e CSS3 e já desenvolvi alguns projectos a utilizar estas novas especificações, embora ainda não sejam suportadas a 100%. No entanto são casos muito específicos onde a utilização é feita com browsers que suportam estas funcionalidades.

Com toda esta experiência que obtive verifiquei que alguns browsers fazem transições lentas ou arrastam-se quando fazemos scroll na página. Isto é especialmente notado quando usamos as propriedades box-shadow e border-radius em conjunto, especialmente no Safari.

E em computadores mais fracos em termos de processamento até o Opera e o Chrome se engasgam.

Eu sou a favor que se use o CSS3 com toda a força, mas sempre com progressive enhancement em mente. Devemos criar uma boa experiência em todos os browsers (esqueçam o IE6 e 7) e garantir uma experiência superior ou um carregamento mais rápido com recurso a CSS3 caso o browser o suporte. Existem vários artigos interessantes na Net sobre como o fazer.

Verifiquem no entanto, dependendo do público alvo de um website, se o processamento de um efeito em CSS3 não se torna mais penoso em termos de processamento do que o carregamento de uma imagem para fazer um background e tenham em mente que uma poupança de 900 bytes é negativa se tivermos um site que é lento a fazer efeitos de fade e se o scroll faz com que o browser se arraste.

Para o utilizador final a culpa é do developer por ter criado um site lento, e não do utilizador por ter um computador lento. E eles até têm muita razão ;)

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.