Como especialistas de UX ou UI, às vezes focamos muito na experiência interativa e visual de web sites, sem atentar à como aquela interface que foi projetada poderá ser implementada. Na minha visão, quando se trata de web sites e landing pages, não basta só entregar uma interface incrível. E sim pensar, durante a concepção da UI, como a interface poderá ser transformada em código e o impacto na velocidade de carregamento para o usuário.
De acordo com um levantamento realizado pelo Google, cada segundo faz uma grande diferença. Um acréscimo de até 10 segundos no tempo de carregamento, por exemplo, aumenta em 123% a possibilidade de abandono. Ou seja, o usuário não tem paciência para esperar.
Performance também é usabilidade.
Se você está dedicado ao UX design, não lidará com o código e implementações, porém com estas dicas você pode conferir junto ao time de Devs se estes requisitos estão implementados, visando o aumento da performance e consequentemente a melhoria de usabilidade.
Primeiramente, para conferir se o web site está atendendo aos requisitos de velocidade, pode se usar o PageSpeed Insights do Google. E fazendo um adendo, os dados do PageSpeed também são levados em consideração para o SEO (Search Engine Optimization). Ou seja, caso a pontuação no PageSpeed esteja muito baixa, o web site poderá perder rankeamento na pesquisa.
E agora, seguem algumas dicas de implementação para melhorar a performance do web site:
SVG: Utilizar o máximo possível
O SVG é um formato vetorial escalável que pode ser utilizado em ilustrações, ícones e elementos gráficos do web site. Por ser apenas um arquivo XML (de texto), o custo de armazenamento é muito inferior assim propiciando um carregamento muito mais rápido. Em softwares vetoriais você pode exportar o SVG como código e inserir o mesmo no código do web site. Porém caso seja um elemento que será reutilizado em várias partes do site, vale a pena importar o arquivo “.SVG” para que ele fique no cache do navegador do usuário, assim evitando repetição de código. Um detalhe é que o SVG não é utilizado quando se trata de fotos em vez de vetores, por isso a próxima dica..
Usar fotos em formato WebP
O WebP é um formato de imagem desenvolvido pelo Google que promete reduzir o tamanho do arquivo de imagens em até 39%. No caso de CMS como WordPress você encontra plugins que fazem a tarefa de converter todas as imagens do site para WepP automaticamente. Em demais aplicações normalmente roda-se scripts para fazer esta conversão. Agora, caso deseje converter poucas imagens há vários sites que fazem isto online (exemplo: Convertio).
Mas nem tudo são flores. O WepB até então não é reconhecido por todos os browsers, como o Safari. Ou seja utilizando somente o WepB sua imagem poderá não ser carregada para quem está no iOS. Para não ocasionar este problema é necessário utilizar um plugin (como o Modernizr) para detectar se o navegador do usuário é compatível, caso não seja irá ser exibido a imagem no formato original, como em JPG.
CSS e JS crítico Inline
Para o PageSpeed cada arquivo CSS ou JS externo que seja carregado imediatamente, são considerados como bloqueios de renderização para o usuário. Mas a questão é que temos CSS e JS que são críticos, ou seja que são indispensáveis para que a página carregue corretamente. Por isso uma solução é inserir o CSS e JS crítico inline no HTML da página. Já os demais CSS e JS, que não são prioritários, podem ser carregados de maneira assíncrona.
Carregamento assíncrono
O carregamento de imagens, CSS e scripts de forma assíncrona, significa deixar para carregar estes componentes mais tarde, apenas quando necessários. Por exemplo uma imagem que está fora da primeira dobra do site não precisa ser imediatamente carregada, e sim enquanto o usuário já está navegando no site. Neste artigo do Google, há mais informações sobre o carregamento assíncrono.
E você, o que acha da relação entre desempenho e UX? Deixa um comentário!
Abraços!