Performance Front-End. Jhonathan de Souza Soares Analista Programador na UOL Educação Sócio Proprietário da MidiaON Criador do Código Simples. Faz há.

Apresentação em tema: "Performance Front-End. Jhonathan de Souza Soares Analista Programador na UOL Educação Sócio Proprietário da MidiaON Criador do Código Simples. Faz há."— Transcrição da apresentação:

1

2 Performance Front-End.

3 Jhonathan de Souza Soares Analista Programador na UOL Educação Sócio Proprietário da MidiaON Criador do Código Simples. Faz há muitos anos em parceria com a Google. Sobre o Palestrante

4 Como você imagina seu site :

5 Como ele realmente é :

6 Como o usuário da internet brasileira fica :

7  Mas performance não é só reduzir as resoluções das imagens ?  Mas performance não é só fazer um layout “clean” ?  Mas performance não é só usar “uns” frameworks do mercado? Fatos e porquês da performance

8  RTT (Road-trip Time)  Resolução do DNS  Setup Conexão TCP  Requisição HTTP ( N vezes ) De quem é a culpa?

9  Programador De quem é a culpa?

10 Ter muitas requisições significa que seu browser precisa ir e voltar várias vezes durante a abertura da página. Essa ida e volta são os RTT, ou a Road-trip Time. São as RTTs que contribuem para uma latência ruim nas redes.

11 Considere o cenário: 1ª Dica - Otimize ordem de scripts

12 Execução do Browser : 1ª Dica - Otimize ordem de scripts

13 Vamos fazer algumas mudanças : 1ª Dica - Otimize ordem de scripts

14 Vouilà : 1ª Dica - Otimize ordem de scripts

15 2ª Dica – Utilize Sprites

16 Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, em busca de diminuir o número de requisições HTTP para o servidor. E essa é apenas uma de suas aplicações, no mundo dos games, por exemplo, ela é muito usada para fazer animações.

17 2ª Dica – Utilize Sprites

18 Modular CSS é uma coisa boa, mas é bom para sua organização. Quando nós separamos nosso código CSS em vários arquivos. Isso significa que o browser vai ter que buscar cada um desses arquivos no servidor. Logo, se você modula seu CSS, você precisa fazer um trabalho de entrega desse código apenas quando for necessário. 3ª Dica - Combine arquivos CSS

19 Pelo mesmo motivo de combinar arquivos de CSS. Dá uma olhada nessa imagem que o Google disponibilizou: 3ª Dica - Combine arquivos JS

20 Agora olhe o que acontece, se você juntar tudo numa coisa só : 3ª Dica - Combine arquivos JS Se for pouco Javascript, algo bem básico mesmo, considere colocá-lo direto no HTML. Sem a necessidade de chamar um arquivo.

21 4ª Dica – T ente paralelizar downloads de vários domínios De acordo com o protocolo de HTTP, os browsers podem pode ter duas conexões simultâneas por domínio. Se um documento contem referencias para várias recursos como CSS, Javascripts, Imagens e etc, de forma que estoure o máximo permitido pelo host, o browser começa a baixar um parte e deixa os outros recursos na fila. Quando ele termina de baixar todos os recursos atuais, ele vai pra fila e pega o próximo grupo.

22 4ª Dica – T ente paralelizar downloads de vários domínios O problema é que a cada grupo que o browser baixa, é gerado um RTT. Ou seja, se você tem 100 arquivos para baixar (CSS, Javascripts, imagens etc), levando em conta que o browser baixa 4 recursos por vez, serão 25 RTTs gerados.

23 4ª Dica – T ente paralelizar downloads de vários domínios A estratégia é separar parte destes recursos em outro domínio. Fazendo isso o browser pode baixar o máximo de recursos por domínio paralelamente. Por isso é que normalmente separamos arquivos – como imagens – em outro servidor.

24 4ª Dica – T ente paralelizar downloads de vários domínios FOTO DO PERFIL: https://www.facebook.com/photo.php?fbid=444382905650 569&set=a.101422846613245.2514.100002365895008 URL DA IMAGEM: https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak- xfa1/v/t1.0-9/422072_4443829056-0569_1100162_n.jpg

25 5ª Dica – Onde colocar as chamadas de CSS e Javascript ? O browser tem uma ordem correta para carregar os arquivos do site. Por isso há uma ordem específica para linkar o arquivos de CSS e Javascript, otimizando o trabalho de carregamento do browser.

26 5ª Dica – Onde colocar as chamadas de CSS e Javascript ? Para você entender melhor, note que: O CSS bloqueia a renderização da página. Isso por que o browser não quer carregar primeiro um HTML feio só para depois fazer um render da página novamente aplicando seu estilo. Por isso ele bloqueia o máximo que puder a renderização da página até que tenha carregado seu código CSS. Esta é a razão pela qual você deve inserir o link do CSS no HEAD, afim de que o browser o encontre rapidamente.

27 5ª Dica – Onde colocar as chamadas de CSS e Javascript ?

28 O Javascript por sua vez bloqueia o download de outros arquivos. Lembre-se de que o browser procura baixar vários arquivos ao mesmo tempo enquanto ele carrega a página. Quando carregamos o Javascript, ele pára tudo e carrega um script de cada vez. Ele faz isso por que o Javascript modifica o HTML e também o CSS. Logo, ele não pode fazer isso se o código HTML, o CSS ou outros arquivos como as imagens não foram baixados.

29 5ª Dica – Onde colocar as chamadas de CSS e Javascript ? Isso também é aplicado na ordem em que você linka os arquivos de Javascript. Um exemplo simples: você não consegue fazer funcionar um plugin de jQuery se não tiver linkado o jQuery antes do script de plugin.

30 Olha o que acontece quando você adiciona um plugin do Jquery sem o Jquery:

31 6ª Dica – Link prefetching e Prerender Link prefetching é um mecanismo que utiliza o tempo ocioso do browser para fazer o download ou buscar doumentos que talvez serão usados no futuro pelo usuário.

32 6ª Dica – Link prefetching e Prerender Existe também o link prerender. Nesse caso o browser além de baixar os assets necessários, ele pré renderiza a página na memória de forma que ao visitar essa página, ela já estará totalmente renderizada. Diferentemente do link prefetch que apenas baixa os arquivos e só renderiza a página quando o usuário fizer a visita.

33 7ª Dica – Prefira a @import Há duas maneiras de incluir uma folha de estilo externa na sua página, pode ser através da tag : Ou da propriedade @import dentro de uma folha de estilo externa ou inline em uma tag : @import url('style.css');

34 7ª Dica – Prefira a @import Quando você utiliza a segunda opção a partir de uma folha de estilo externa, o navegador é incapaz de realizar o download em paralelo, o que causa atraso na cascata de carregamento dos arquivos.

35 Vamos ao level hard

36 8ª Dica – Guarde o tamanho do Array O loop é sem dúvida é uma das partes mais importantes com relação a performance no JavaScript. Busque otimizar a lógica dentro de um loop para que cada iteração seja feita de forma eficiente. Um modo para fazer isso é armazenando o tamanho do array que será percorrido, assim ele não precisa ser recalculado toda vez que o loop for iterado.

37 8ª Dica – Guarde o tamanho do Array var arr = new Array(1000), len, i; for (i = 0; i < arr.length; i++) { // Ruim - o tamanho precisa ser calculado 1000 vezes } for (i = 0, len = arr.length; i < len; i++) { // Bom - o tamanho só é calculado 1 vez e depois armazenado }

38 9ª Dica – Evite manipulações desnecessárias no DOM Toda vez que você toca no DOM sem realmente precisar, um panda morre.

39 8ª Dica – Evite manipulações desnecessárias no DOM Sério, navegar por elementos do DOM é custoso. Apesar das engines JavaScript estarem cada vez mais poderosas e rápidas, prefira sempre otimizar ao máximo as consultas na árvore do DOM. Uma das alternativas mais simples de serem adotadas é: quando um elemento precisar ser acessado mais de uma vez, guarde-o numa váriavel, e assim você não vai fazer mais do que uma consulta no DOM.

40 8ª Dica – Evite manipulações desnecessárias no DOM // muito ruim, você matou 100 pandas! for (var i = 0; i < 100; i++) { document.getElementById("myList").innerHTML += " " + i + " "; } // bem melhor, você pode ser contratado pela WWF :) var myList = ""; for (var i = 0; i < 100; i++) { myList += " " + i + " ";} document.getElementById("myList").innerHTML = myList;

41 10ª Dica – Use sempre a última versão do jQuery Os membros do core do jQuery estão sempre buscando trazer novidades para a biblioteca. Estes ajustes, muitas vezes, estão relacionados a melhorias da legibilidade do código, novas funcionalidades e, principalmente, otimização de algoritmos.

42 10ª Dica – Use sempre a última versão do jQuery

43 11ª Dica – Não use sempre Jquery Às vezes JavaScript puro pode ser mais fácil e mais performático que jQuery. Considere o seguinte HTML: Vamos mudar esse conteúdo. Ao invés de fazer isso: $('#text').html('O conteúdo mudou').css({ backgroundColor: 'red', color: 'yellow‘ });

44 11ª Dica – Não use sempre Jquery Usamos JavaScript puro: var text = document.getElementById('text'); text.innerHTML = 'O conteúdo mudou'; text.style.backgroundColor = 'red'; text.style.color = 'yellow'; É simples e muito mais rápido.

45 11ª Dica – Não use sempre Jquery Já considerou utilizar outros Frameworks?

46 12ª Dica – Data URI Essa técnica é uma alternativa para o uso de CSS sprites. Data-URI é uma maneira de adicionar conteúdo inline de uma URI que você normalmente iria apontar. Nesse exemplo, nós estamos utilizando para adicionar conteúdo inline no background de uma imagem no CSS, a fim de reduzir o número de requisições HTTP necessárias para carregar uma página.

47 12ª Dica – Data URI Antes:.icon-foo { background-image: url('foo.png'); } Depois:.icon-foo { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhE UgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACn ej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIA AeIhvDMAAAAASUVORK5CYII%3D');}

48 12ª Dica – Data URI Todos os navegadores do IE8 para cima suportam essa técnica de codificação base64. Entretanto tem a desvantagem de aumentar consideravelmente o tamanho do seu HTML/CSS se você possuir imagens grandes. Não é recomendado utilizar esse método se você não está utilizando a técnica de gzip no seu HTML/CSS durante as requisições HTTP já que a sobrecarga de tamanho pode anular os ganhos de velocidade sobre minimizar o número de requisições HTTP.

49 13ª Dica – Utilize Gzip Quando falamos de performance web, sempre buscamos reduzir o tamanho de uma requisição HTTP do servidor para o navegador do cliente, não é mesmo? Uma maneira eficaz e muito simples de fazer isso é usando a compressão pelo componente GZIP que está disponível em várias outras linguagens, chegando a comprimir o tamanho da resposta em até 85%

50 13ª Dica – Utilize Gzip Resumidamente, o que ele faz? Bom, o Gzip compacta tudo no servidor, trafega os dados na rede de forma compactada e descompacta no navegador após que o usuário já baixou os arquivos necessários para exibir um site. Ou seja, a performance é muito grande!

51 14ª Dica – Utilize Minification Sempre procure utilizar versões minificadas do seu código para conseguir reduzir o tamanho do seu site.

52 13ª Dica – Não escale imagens direto no código Defina sempre o width e o height de uma imagem, isso irá reduzir o tempo de renderização evitando repaints e reflows desnecessários. Conhecendo esses atributos do HTML, Joãozinho que tem uma imagem de 700x700px resolve exibi-la com um tamanho de 50x50px. O que o malandro Joãozinho não sabe é que uma dezena de KBs serão trafegados a mais pela rede, desnecessariamente.

53 13ª Dica – Otimize suas imagens Arquivos de imagens possuem muitos KB de informações desnecessárias na Web. Por exemplo, uma foto JPEG tem um monte de metadados Exif colocados pela câmera (data da foto, modelo da câmera, local etc). Um PNG possui uma série de informações sobre cores, metadados e, às vezes, até uma miniatura da imagem embutida no meio. Nada disso é importante para a renderização da imagem no navegador e só gasta bytes de rede.

54 13ª Dica – Otimize suas imagens Para PNG https://tinypng.com/ PARA JPEG http://www.jpegreducer.com/

55 15ª Dica – Utilize imagens progressivas A utilização de imagens progressivas é bastante utilizada, quando parte da imagem já possui algum tipo de significado:

56 15ª Dica – Utilize imagens progressivas

57 16ª – Calcule bem a utilização de Front-End Frameworks

58 Verifique a necessidade:

59 16ª – Calcule bem a utilização de Front-End Frameworks Compare: http://codigosimples.net/frontend-frameworks/

60 17ª e última Dica – Mensure o seu site Indico o PageSpeed (Google) para a medição da performance dos seus websites. Há outras maneiras de medir, milhares de sites e plugins, mas esse é do pessoal do Google, que além de dar uma pontuação, ele oferece fontes de informação para você entender melhor o que é cada tópico medido. Você pode ver online como está a performance do seu site. Veja aqui o nosso em desktops ou em mobiles.

61 Finalizando...

62 FIM! Acesse: http://codigosimples.net