o nome disso é performance

- 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?
CALMA, NÃO É POR AÍ

- 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;

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!

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: pedropolisenso@gmail.com
Redes: @pedropolisenso

o nome disso é performance

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Similar to o nome disso é performance

Similar to o nome disso é performance (20)

o nome disso é performance