o nome disso é performance
TRANSCRIPT
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-simpson.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 istofor(var i = 0; i < 500; i++){ document.getElementById(‘MinhaLista’).innerHTML += ‘<span>’+ i +’</span>’;}
// Prefiravar 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
