Mais performance para seus sites

Ultimamente estou trabalhando bastante com sites responsivos e neste tipo de trabalho é recorrente vários detalhes que devemos ter atenção para que o site se comporte “bem” no celular:

  • O celular tem limitações em memória e processamento;
  • Há casos em que um JS é necessário ser carregado na versão desktop e tablet, mas não é obrigatório na versão mobile;
  • Há casos em que uma funcionalidade JS não é necessária ser executada na versão mobile;
  • Quando o site recarrega/atualiza, ele sempre carrega todos os arquivos como: JS, CSS e imagens. Isso é um problema para a versão mobile pela a alta latência em conexão com a internet (3G);

Estes problemas citados podem ser resolvidos com dois scripts: enquire.js e basket.js.

O enquire.js permite que você execute alguma função em JS de acordo com a resolução do navegador em que o site está sendo iniciado, e o basket.js permite armazenar todos os scripts no localStorage do navegador, evitando que seja carregado os arquivos em outro momento, aproveitando-os no cache.

A estratégia de armazenar no localStorage é utilizada nas aplicações do Google, Yahoo. Se você quiser saber mais sobre assista a palestra do Sérgio Lopes.

Então vamos imaginar a seguinte situação, possuo uma função no meu front-end que gera um gráfico renderizado em SVG e a mesma requer muito processamento e não quero que ela seja inicializada na versão do celular.

Você pode pensar em ocultar a parte em que o gráfico será renderizado quando estiver no celular, entretanto a parte em HTML estando oculta o JS ainda será executado prejudicando a performance de seu site, com isso o enquire.js consegue tornar a execução condicional ao tamanho da resolução, assim como no media queries para CSS.

O enquire.js usa a funcionalidade matchMedia nativa nos navegadores mais modernos para identificar a resolução da tela.

Exemplo:

enquire.register("screen and (min-width: 480px)", {
 match : function() {
  if($('#mensagens')[0]){
    new Morris.Donut({
     element: 'mensagens',
     data: [
       {value: 70, label: 'Lidas'},
       {value: 15, label: 'Não lidas'},
     ],
     backgroundColor: '#fff',
     labelColor: '#060',
     colors: [
      '#1abc9c',
      '#ecf0f1'
     ]
   });
 }
},
});

A parte em negrito apresenta se a resolução for no mínimo 480px irá executar a função match. Como sabemos as resoluções até 480px representa as resoluções de smarthphones.

No segundo caso é o armazenamento com o basket.js de forma condicional, pois já que eu não quero executar a função Morrisconsequentemente  não preciso carregar o js do Morris na versão mobile.

Então podemos fazer assim:

enquire.register("screen and (min-width: 480px)", {
  match : function() {
    basket.require({ url: 'js/raphael-min.js', expire: 2 });
    basket.require({ url: 'js/morris.min.js', expire: 2 });
  },

  setup : function() {
  basket
  .require({ url: 'js/jquery-2.0.0.min.js', expire: 2 }
  .then(function () {
      basket.require({ url: 'js/application.js', expire: 2 });
   });
  }
});

Seguindo exemplo anterior, vamos manter o mínimo 480px, entretanto aqui vamos condicionar o carregamento dos arquivos js.

No exemplo acima tem o acréscimo da função setup, ela sempre será executada quando a função enquire inicializar, independente da condição, e  em seguida a função require que afirma: ” Carregue o jquery.js e então (then) carregue o application.js”.

Isso mantém seu código carregado na ordem que você precisa, no momento em que precisa e ainda os armaneza no localStorage.

O Sérgio Lopes aprovou essa estratégia =D

1

Se você tiver novas estratégias de performance compartilha nos comentários.

Recomendo que leia o livro lançado no mês passado pelo Sérgio onde ele aborda sobre vários recursos avançados, com exemplos, para desenvolvimento mobile.

3 comentários

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s