Performance como design

Performance de sites é assunto de desenvolvedores web. Mas será que já não é hora de a discussão passar para o design e planejamento do projeto?

Ir para o artigo

Qualquer conversa sobre desempenho na web rapidamente se torna uma aventura na terra dos geeks. Termos como “DNS lookups”, “Gzipping”, “Minifying”, “Expires Headers”, “caching”, “ETags” e outros estão sempre presentes e, consequentemente, fazem com que a maioria das pessoas (principalmente o público não-técnico) perca a atenção. Isso perpetua uma mentalidade de que o desempenho é apenas uma preocupação técnica e que somente os desenvolvedores precisam se preocupar a respeito.

É hora de tratar o desempenho como uma feature essencial de design, não apenas como uma melhor prática da área técnica. Performance como design (ou design como performance).

Todos nós sentimos isso

Não raramente, quando um desenvolvedor mobile diz em que trabalha, as pessoas reagem imediatamente dizendo “Facebook é uma droga”! Mas qual o motivo dessa reação imediata e visceral? As pessoas não estão reagindo à navegação intuitiva do Facebook, nem questionando a elegância da remodelagem da Timeline. De fato, todos os adjetivos pejorativos relacionado ao app do Facebook estão relacionados ao fato de ele ser lento!

App do Facebook: Carregando…

A página web média é cada vez mais “obesa”. Temos agora mais brinquedos para brincar e isso significa mais potencial para causar danos. Phil Hawksworth brilhantemente chamou a atenção para o quão ridiculamente pesados/lentos podem ser sites do tipo parallaxified:

Se seu site tem 15MB ele não é HTML5; ele é estúpido.

Christian Heilmann

Embora esses sites realmente sejam visualmente interessantes (e, para muitos deles, essa afirmação é, no mínimo, discutível), um bom número de visitantes nunca vai esperar para vê-los em funcionamento. 74% dos usuários de web móvel abandonam um site se ele demora mais de 5 segundos para carregar. Isso significa que você tem 5 segundos do tempo de alguém para, pelo menos, chamar sua atenção, ou ele vai embora.

Bom desempenho é bom design

O caminho para o melhor desempenho pode não começar com os desenvolvedores ou pilhas de tecnologias; talvez ela comece com um interesse comum por parte de todos em fazer um produto que é muito rápido. Algumas coisas a considerar:

  • Incluir o desempenho nos documentos do projeto. Declarações de trabalho, propostas de projetos e briefs devem, explicita e repetidamente, levar o desempenho em conta, em muitos casos o tratando como um objetivo principal. Por exemplo: “O objetivo desse projeto é criar uma impressionante e flexível experiência-relâmpago”.
  • Colocar designs para rodar no navegador o quanto antes. A imagem de um comp do design do site pendurado na parede pode até ser bonitinha, mas é uma péssima e irrealista maneira de medir o quão eficiente o projeto será. À medida que entramos na era pós-PSD, somos capazes de ver implicações de desempenho em uma direção de design muito mais rapidamente do que os tradicionais “processos em cascata”.
  • Testar dispositivos reais. Stephanie Rieger afirmou corretamente que é impossível medir com total precisão o desempenho de um projeto em uma viewport redimensionada ou num emulador. É essencial para testar (e testar o quanto antes) em dispositivos reais para ver as reais ramificações de cada elemento de interface que você introduz em seus projetos.
  • Colaborar. Desenvolvedores devem ser envolvidos cedo no processo de design e se preocupar com potenciais questões de desempenho em comps e wireframes. É importante que este processo não seja apenas um jogo “Sim/Não”, mas, sim, uma sessão verdadeiramente colaborativa entre as disciplinas.
  • Educar. Muitas pessoas no processo de design simplesmente não conhecem muitas das conseqüências relacionadas a performance que suas decisões de design podem causar. Ajude-os a entender que a inclusão de 5 font-faces prejudica o desempenho. Ajude-os a pensar duas vezes sobre a inclusão de de toneladas de imagens. Faça um protótipo rápido no Codepen para demonstrar uma idéia e, em seguida, sentem-se todos juntos para usá-lo em um dispositivo real numa conexão 3G.

Em última instância, performance é respeito. Respeite o tempo das pessoas que acessam os sites que você desenvolve e eles estarão mais propensos a considerar tudo como uma experiência positiva. Bom desempenho é bom design. É hora de tratá-lo como tal.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS