O documento discute como o design de um site pode influenciar seu desempenho, explicando que layouts complexos e animações excessivas podem sobrecarregar o "thread principal" do navegador e causar atrasos. Ele fornece dicas como usar imagens e fontes de forma otimizada, evitar redesenhos desnecessários da tela e considerar a performance desde o início do processo de design.

1. Performance na WEB
Como o designer pode influenciar?

2. Comomeu design pode
influênciar na performance
de um sistema?

3. Main tread
O queé?
De que sealimenta?
Onde habita?

4. Main Thread
Renderizar Layouts
Executar Scripts
Capitar Interações do Usuário
Executar Animações

5. Funcionamento do navegador
JavaScript Style Layout Paint Composite
Ordem de execuçãopara pintar 1px

6. Todasas vezesquealgum elemento
natela,tem a necessidadede se
reorganizar,alterarcor, se moverna
página,onavegadorirá travarpor
algumtempo.

7. Problema do Main Thread
• Uma execução por vez
• O ser humano, geralmente espera
uma resposta em 100ms

10. Tá,mas…
O quemeu layouttemaver
com isto?

12. Maneiras de olayout
auxiliar na
performasse de um
sistema web
• Minificar Imagens e usar com moderação
• Usar fontes ao em vez se imagens para ícones
• JPGs Progressivo(responsivo)
• Cuidado com as animações
• Se puder use SVG

13. • Mobile First Concept
• Envolver desenvolvedores no processo
de criação
• Evitar itens que precisem redesenhar telas
• Se possível envolver um desenvolvedor
nas negociações de layout com cliente
• Definir um “Orçamento de Desempenho”
Maneiras de olayout
auxiliar na
performasse de um
sistema web

14. • Performance percebida (feedback for user)
• Estabelecer um padrão para criação
de componentes e evitar “filhos únicos”
• Forneça fontes formato WOFF 2.0
• Evitar animações que envolve scroll
• Evitar excesso de fontes personalizadas
(evitar passar de 2 ou 3)
Maneiras de olayout
auxiliar na
performasse de um
sistema web

15. Conclusões

16. Dúvidas

17. Muito
Obrigado