25
Otimização Front End

Otimização front end

Embed Size (px)

Citation preview

Otimização Front End

Por que otimizar?

porque otimizar

● usuário não gosta de esperar

● melhor experiência de usuário

● melhorias de SEO

renderização

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 path

critical rendering path

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

jquery.js

validation.js

jquery-plugin.js

angular.js

app.js

masked-input.js

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)

otimização de imagens

otimização de imagens

otimização de imagens

180kb 54kb 20kb

ferramentas

YSlow

PageSpeed Insights

Obrigada!

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/