O Web Design Responsivo – uma solução que oferece uma experiência consistente em diferentes resoluções de tela – está ganhando força significativa como o método padrão pelo qual os sites estão sendo projetados. Onde há apenas alguns anos a detecção de dispositivos era comumente usada, o pêndulo girou em direção ao Web Design Responsivo e os designers o avaliam por razões pelas quais ele não funcionará, em vez do contrário. De fato, o Google até listou o Responsive Web Design como sua configuração preferida para criar sites otimizados para smartphones.
Razões para o Web Design Responsivo
A crescente diversidade de dispositivos é certamente um fator-chave nessa mudança e, como evidenciado por uma pesquisa do Google, 67% dos usuários afirmam que são mais propensos a fazer uma compra quando um site é compatível com dispositivos móveis. Mas uma razão igualmente importante para mudar para o Web Design Responsivo é o desempenho do site. Vejamos três maneiras pelas quais o desempenho do site pode ser melhorado usando esse método:
Melhorando o desempenho do Web Design Responsivo
1. Inline o conteúdo acima da dobra, como marcação HTML, imagens, CSS e Javascript. Com o tamanho do site continuando a inchar e o Google recomendando que os sites para dispositivos móveis carreguem em um segundo ou menos, algo precisa dar. Os sites devem primeiro estruturar o HTML para carregar o conteúdo crítico acima da dobra primeiro, depois reduzir a quantidade de dados usados pelos recursos por táticas como minimizar recursos e permitir a compactação.
2. Otimize imagens. As pessoas querem imagens de alta resolução em seus sites, como evidenciado pelo crescente número de telas de retina nos dispositivos, mas a que custo? O tamanho da imagem cresceu nos sites nos últimos dois anos e está aumentando significativamente o inchaço do site. Alternar entre imagens de tamanhos e qualidades diferentes para economizar largura de banda usando ferramentas como Picturefill e Adaptive Images pode ajudar, assim como a adoção de novos formatos de imagem, como WebP e JPEG XR.
3. Controle o carregamento de CSS e JavaScript. Sites responsivos geralmente combinam o CSS e JavaScript para desktop e dispositivos móveis em um conjunto de arquivos, mas isso pode afetar o desempenho ao fornecer código desnecessário para a largura que está sendo visualizada. Em vez disso, ramifique o carregamento usando JavaScript para determinar a largura da página que está sendo carregada e, em seguida, solicite estilos específicos e JavaScript específicos para essa largura.
Monitoramento do desempenho da Web
Antes de iniciar os métodos de otimização acima, é importante primeiro estabelecer uma linha de base de desempenho e monitorar consistentemente o desempenho do seu site para determinar quais fatores ainda estão impedindo os tempos de carregamento. Ao adotar um ponto de vista móvel e de desempenho em primeiro lugar usando o Web Design Responsivo, os sites podem maximizar seu desempenho e a experiência do usuário em todos os dispositivos.
