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?

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).

[baseado article_name=”Performance As Design” article_link=”http://bradfrostweb.com/blog/post/performance-as-design/” site_name=”blog do bradfrostweb.com” site_link=”http://bradfrostweb.com/blog/”]

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.