Apresentação do TechTalk na Elo7 apresentando sobre algumas técnicas de Otmização Front-End.

1. Otimização Front End

2. Por que otimizar?

3. porque otimizar
● usuário não gosta de esperar
● melhor experiência de usuário
● melhorias de SEO

4. renderização

5. otimização front end
● otimização do critical rendering path
● minimizar o total de requests
● paralelização de requests
● prefetching
● compactação e otimização do conteúdo

6. critical rendering path
● CSS no cabeçalho
● evitar @import no css
● javascript async e defer
● javascript síncrono antes de fechar a tag body

7. critical rendering path

8. critical rendering path

9. critical rendering path
Javascript síncrono Javascript assíncrono
● Bloqueia construção do
DOM
● Execução ordenada
● Não bloqueia a
construção do DOM
● Execução desordenada

10. critical rendering path

11. critical rendering path
AMD
Asynchronous Module Definition
Especificação para o mecanismo de definição de
módulos de forma a qual os módulos e suas
dependências sejam baixadas assíncronamente.

12. minizar total de requests
● concatenar e minimizar css e javascript
● eliminar downloads desnecessários
● sprite de imagens
● cache de recursos

13. Inline vs external
Inline external
● não aproveita o cache do
navegador
● uma requisição a menos
● aproveita o cache do
navegador
● uma requisição a mais

14. Inline vs external
Inline external
● não aproveita o cache do
navegador
● uma requisição a menos
● aproveita o cache do
navegador
● uma requisição a mais
Qual o melhor?

15. inline vs external
Inline external
● não aproveita o cache do
navegador
● uma requisição a menos
● aproveita o cache do
navegador
● uma requisição a mais
Qual o melhor?
Depende da situação!

16. paralelização de request
● média de 4 à 8 conexões simultâneas com mesmo
hostname
● CDN (Content Delivery Network)

17. prefetching
<link rel=”prefetch” href=”imagem.png”>
informa o browser para baixar previamente um
recurso
<link rel=”subresouce” href=”jquery.js”>
informa o browser para baixar previamente um
recurso com alta prioridade

18. Prefetching
<link rel=”dns-prefetch” href=”//sub.domin.io”>
informa o browser para resolver os dns de outros
domínios ou subdomínios previamente
<link rel=”prerender” href=”/pagina/2/”>
informa o browser para baixar a próxima página
e os seus recursos e inicia a renderização em
memória (não sendo visível para o usuário)

19. compact. e otim. de conteúdo
minificação e gzip do conteúdo
remover informações que não são necessárias
como comentários e espaços em branco e
compactar o conteúdo
otimização de imagens
remoção de informações desnecessárias
(metadata, cores)

20. otimização de imagens

21. otimização de imagens

22. otimização de imagens
180kb 54kb 20kb

23. ferramentas
YSlow
PageSpeed Insights

24. Obrigada!

25. Referências
http://csswizardry.com/2013/01/front-end-performance-for-
web-designers-and-front-end-developers/
https://developers.google.com/web/fundamentals/perfor
mance/
https://developer.mozilla.org/en-
US/docs/Web/HTTP/Controlling_DNS_prefetching
https://www.igvita.com/2014/05/20/script-injected-async-scripts-
considered-harmful/