Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Performance no Front!

No description
by

Mário Valney

on 2 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Performance no Front!

Mário Valney
Web Designer do
O POVO Online
.

Criador do
It's me Mário!,
da
Área 11
e de vários sites e blogs, apaixonado pela Marry, por WordPress, pelo Google e por tudo que computadores possam fazer!

5 anos de experiência com Front-end em geral e desenvolvimento para web.
Estudante Embaixador do Google.
O PALESTRANTE
O Questionador
- Pra que isso tudo?
A PALESTRA
Design: não é aparencia é como funciona.
Imagens peso-pesados!
Design: pegando pesado!
HyperText Markup Language
- Evite código inline/incorporado
HTML: um cara marcante.
Performance no Front!
Por Mário Valney
Cascading Style Sheets
Máquina vs Humanos
CSS: estilo é tudo!
JS: sempre do lado do cliente!
Javascript
ASYNC todo mundo!
O POVO Online
THE PEOPLE on the line...
mariovalney@gmail.com
@mariovalney
Don't be evil!
Se você nunca ficou com raiva por uma página demorar para abrir ou até desistiu de visitar o site depois de 10 segundos numa tela branca de duas uma: você é dono da GVT ou você é bem estranho.
Performance
é
vital
em alguns casos (como por exemplo em lojas virtuais) e muito bem-vinda em todos os outros.
- Ainda não acredito
Caramba... você é chato, hein? Olha isso aqui:
Bing – Uma página com 2 segundos de carregamento resulta em fuga de 4.3%.
Google – Uma demora de 400 milisegundos causa 0.59% de desistência.
Shopzilla - Melhorar em 5 segundos o carregamento aumentou as vendas em 12%.
Escrever o CSS no "style" e o JS no "onclick" ou então nas tags <style> e <script> diminue o número de requisições, mas aumenta o tamanho do seu arquivo HTML e evitam o cache.
- Estilo em primeiro lugar!
Quando estiver escrevendo o HTML, tente sempre
juntar a chamada dos arquivos CSS no topo do HTML, assim à medida que o HTML vai sendo escrito já temos o estilo aplicado: o usuário vai achar que carregou mais rápido. Além disso, deixe o JS para o final, pois ele bloqueia a renderização da página enquanto é carregado e executado.
- Use o "async" para arquivos JS não tão importantes
<script async src="example.js"></script>
Sempre comente seu CSS e mantenha tudo bem organizado: isso facilita a manutenção e minutos de trabalho fazem a diferença (além do estresse evitado). Mas computadores não se importam com isso, então: COMPRIMA!
.center {
width: 960px;
margin: 0 auto;
}

/* --- Structure --- */

.intro {
margin: 100px;
position: relative;
}
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Junte arquivos!
Manter arquivos separados, salva vidas também... mas computadores não precisam disso, então junte tudo em um arquivo só e diminua as requisições
Nada de @import!
Use <link> sempre...
Se não é vital para sua página: carregue de forma assíncrona.
Isso deve ser lei!
Imagine, seu site esperando a boa vontade do botão do Facebook (que fica lá no fundo da sua página)? E se o proxy do cliente não permitir a conexão com o Facebook?
Nada de "document.write"
Carregue com JS o que precisar de JS!
Toda vez que você toca no DOM sem realmente precisar, um panda morre.
Comprima seu script!
BrowserDiet.app = function() {
var foo = true;
return {
bar: function() {
// do something
}
};
};

BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
Junte a galera!
As imagens são de longe os arquivos mais pesados que irão ser chamados pelo browser (a menos que você seja o pior escritor de CSS do mundo ou que seu HTML tenha toda a bíblia num <p>)
Escale imagens no código, mas nem sempre!
Definir as dimensões das imagens irá
reduzir o tempo de renderização evitando repaints e reflows desnecessários. Mas chamar uma imagem de 10.000 por 10.000 e colocar width=100px é muita zoeira!
Comprima isso também!!!
Sprite só não ganha da Coca-Cola...
Tente sempre agrupar o máximo de imagens em um arquivo só. Isso melhora as requisições (e muito).
É SUA RESPONSABILIDADE TAMBÉM!
Full transcript