# Performance como design > Performance como design: otimização é UX essencial. Velocidade não é apenas técnica, é experiência do usuário e requisito fundamental de design! URL: https://dpw.dev/design/performance-como-design/ Publicado em: 2013-02-04 Categoria: design Tags: performance, planejamento Autor: Tárcio Zemel 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). > Artigo baseado em [Performance As Design](http://bradfrostweb.com/blog/post/performance-as-design/). ## 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"](http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/). Temos agora mais brinquedos para brincar e isso significa mais potencial para causar danos. [Phil Hawksworth](http://hawksworx.com/) brilhantemente [chamou a atenção](http://bradfrostweb.com/blog/post/performance-as-design/) para o quão ridiculamente pesados/lentos podem ser [sites do tipo parallaxified](http://www.milwaukeepolicenews.com/): ![](/images/blog/performance-como-design/site-realmente-pesado-webdev-tools.webp) > 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](http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/). 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](http://bradfrostweb.com/blog/post/the-post-psd-era/), 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](http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/) 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](http://codepen.io/) 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. --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml