Post on 25-Jul-2015
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
critical rendering path
● CSS no cabeçalho
● evitar @import no css
● javascript async e defer
● javascript síncrono antes de fechar a tag body
critical rendering pathJavascript síncrono Javascript assíncrono
● Bloqueia construção do DOM
● Execução ordenada
● Não bloqueia a construção do DOM
● Execução desordenada
critical rendering path
AMDAsynchronous 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.
minizar total de requests
● concatenar e minimizar css e javascript
● eliminar downloads desnecessários
● sprite de imagens
● cache de recursos
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
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?
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!
paralelização de request
● média de 4 à 8 conexões simultâneas com
mesmo hostname
● CDN (Content Delivery Network)
prefetching
<link rel=”subresouce” href=”jquery.js”>
informa o browser para baixar previamente um recurso
informa o browser para baixar previamente um recurso com alta prioridade
<link rel=”prefetch” href=”imagem.png”>
Prefetching
<link rel=”dns-prefetch” href=”//sub.domin.io”>
<link rel=”prerender” href=”/pagina/2/”>
informa o browser para resolver os dns de outros domínios ou subdomínios previamente
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)
compact. e otim. de conteúdo
minificação e gzip do conteúdo
otimização de imagens
remover informações que não são necessárias como comentários e espaços em branco e compactar o conteúdo
remoção de informações desnecessárias (metadata, cores)
Referências
http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
https://developers.google.com/web/fundamentals/performance/
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/