o nome disso é performance

Hi. I am @pedropolisenso

QUALIDADE EM DESENVOLVIMENTO!

VAMOS AS DICAS!

- USE CSS INLINE OU INCORPORADO EM CASOS ESPECÍFICOS CSS
INLINE <div id=”exemplo” style=”background-color: #fc0;”> CSS INCORPORADO <style> background-color: #fc0; </style>

- PREFIRA <link> PARA IMPORTAR SEU CSS LINK <link rel=”stylesheet”
type=”text/css” href=”style.css”>

- SEMPRE USE CSS AO TOPO DA PÁGINA <head> <link
rel=”stylesheet” type=”text/css” href=”style.css”> </head> - IMPORTE SEUS SCRIPTS AO FINAL DA PÁGINA <script type=”texte/javascript” src=”script.js”></script> </body> </html>

- EVITE IMPORTAR ARQUIVOS EXTERNOS CSS <link rel=”stylesheet” type=”text/css” href=”http://s.glbimg.
com/en/ho/static/CACHE/css/139363ed6ee9.css”> JAVASCRIPT <script type=”texte/javascript” src=”http://s.glbimg. com/en/ho/static/CACHE/js/96d91591782a.js”></script>

- COMENTE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO /* estilo da
aplicação */ * { margin: 0; padding: 0; border: 0; } /* header do projeto */ header { width: ; height: ; background: ; }

- MODULARIZE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO AMBIENTE DE DESENVOLVIMENTO
- style.sass - responsive.sass - style.css - responsive.css - style.main.css @import url(‘style.css’) @import url(‘responsive.css’) AMBIENTE DE PRODUÇÃO - style.min.css

- USE E EXPLORE PRÉ-PROCESSADORES - ORGANIZAÇÃO

EVITE @import EM ARQUIVOS DE PRODUÇÃO, PREFIRA A TAG <link>
ERRO: O browser não faz download do arquivo e atrasa o carregamento em cascata da aplicação!

- MINIFIQUE SEUS ARQUIVOS CSS * CSSMIN *OPTION: { STYLE:
“COMPRESSED” } - USE CSSLINT * Garanta a semântica correta - PS: Use Task Runner para facilitar

- USE CSS SPRITES E EVITE REQUISIÇÕES DESNECESSÁRIAS

- PREFIRA SVG DO QUE JPG, PNG, JPEG

- OTIMIZE SUA IMAGEM COM UMA FERRAMENTAS - IMAGEMIN

- USE O ATRIBUTO ALT=”” - OTIMIZAÇÃO /* notícia sidebar
*/ <img src=”img/imagem.jpg” alt=”Dilma aumenta salário”>

- EVITE CARREGAR IMAGENS EXTERNAS NA SUA APLICAÇÃO /* meu
personagem */ <img src=”http://demosthenes.info/assets/images/thumbnails/homer-simp son.svg” alt=”personagem meu site”>

NUNCA USE!

NUNCA USE? CALMA, NÃO É POR AÍ

DE REPENTE...

- jQuery somente para request - Selecionar elementos do DOM
-

- MODULARIZE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO AMBIENTE DE DESENVOLVIMENTO
- script.js - validacao.js - mask.js AMBIENTE DE PRODUÇÃO - script.min.js

Diminua o número de requests!

CONSIDERE EM JAVASCRIPT - MINIFICAR ARQUIVOS DE PRODUÇÃO - USE
JSHINT PARA VALIDAÇÃO SINTAXE - CONCATENE ARQUIVOS DE DESENVOLVIMENTO PS: USE TASKS RUNNERS PARA ISSO!

- EVITE RELER VETORES DENTRO DE LOOP’s // Evite isto
for(var i = 0; i < objeto.length; i++){ console.log(‘acho que fiz besteira!’); } // Prefira var vetor = objeto.length; for(var i = 0; i < vetor; i++){ console.log(‘fiz melhor!’); }

- EVITE MANIPULAÇÕES DESNECESSÁRIAS // Evite isto for(var i =
0; i < 500; i++){ document.getElementById(‘MinhaLista’).innerHTML += ‘<span>’+ i +’</span>’; } // Prefira var MinhaLista = ‘ ’; for(var i = 0; i < 500; i++){ MinhaLista += ‘<span>’+ i +’</span>’; } document.getElementById(‘MinhaLista’).innerHTML += MinhaLista;

MAS É MUITA COISA

VAMOS AUTOMATIZAR?

CONSIDERE FERRAMENTAS PARA AUTOMATIZAR TUDO!

OS 10 MANDAMENTOS DE PERFORMANCE FRONT-END!

- 4 BEM AVENTURADO OS QUE MINIFICAM SEUS ARQUIVOS -
1 USAR SVG E NÃO JPG SOBRE TODAS AS COISAS - 3 USE UM PADRÃO PARA TODO SEMPRE - 2 SEJA SOLUCIONADOR DE PROBLEMAS - 5 PREOCUPE-SE COM A OTIMIZAÇÃO DA APLICAÇÃO - 6 PARE, PENSE E SAIBA PROJETAR - 7 IGNORE O IE - 9 AUTOMATIZE A APLICAÇÃO - 8 USE PATTERNS EM JAVASCRIPT SEMPRE QUE POSSÍVEL - 10 NÃO ACOMODE-SE, ESTUDE!

PageSpeed - Google

Yslow - Yahoo

Web Page Test

Browser Diet

LINKS USADOS COMO REFERÊNCIA => ARTIGOS - http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/ - http://www.uolhost.com.br/blog/top-10-formas-de-melhorar-a-performance-de-um-website#rmcl
- http://youmightnotneedjquery.com/ - https://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-pratica/6-usabilidade-e-suas-metas/ - https://www.youtube.com/watch?v=OnCHjU_eAkE - http://loopinfinito.com.br/2013/09/24/throttle-e-debounce-patterns-em-javascript/ => AWESOMES - https://github.com/davidsonfellipe/awesome-wpo - https://github.com/willianjusten/awesome-svg

Obrigado! email: [email protected] Redes: @pedropolisenso

o nome disso é performance

o nome disso é performance

Other Decks in Technology

Featured

Transcript