Otimização de Front End

Otimização no Front End (FEO)
Melhoria de um conteúdo ou da infraestrutura de provimento para

reduzir o tempo de carga e aumentar a usabilidade de um site.
Front End Back End
• Entrega do conteúdo • Recuperação de
através da rede celular Tráfego da dados em BDs
e/ou rede local Internet • Geração do HTML
• Renderização da • Leitura de arquivos
página no Browser (CSS, JS, HTML, IMGS)
90% 10% 3
Otimização no Front End (FEO)
• Avaliação do desempenho
• Estratégias de Otimização
▪ Alterações na estrutura do HTML
▪ Redução do volume de requisições
▫ CSS Sprites
▫ Data URL Fontes:
• http://www.bookofspeed.com
▫ Bundling • https://www.incapsula.com/cdn-guide/front end-optimization-feo.html
• https://www.keycdn.com/blog/front end-optimization/
▪ Otimização de conteúdo • https://browserdiet.com/
• https://developers.google.com/web/fundamentals/performance/why-
▫ Minificação de Código performance-matters/
• https://www.akamai.com/jp/ja/multimedia/documents/white-paper/front
▫ Otimização de Imagens end-optimization-on-the-akamai-intelligent-platform-white-paper.pdf
▫ Compressão do HTTP
▪ Uso de Cache 4
Otimização no Front End – Avaliação do Desempenho
Ferramentas de Desenvolvedor – Browser
Timeline das
requisições Tabela de tempos da
requisição
Tamanho total
de download
Numero de
requisições
Fonte: Chrome Dev Tools
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation 7
Ferramentas de Desenvolvedor – Browser – Tabela de tempos da Requisição
Fase Descrição
Queueing Enfileiramento de requisições em função de
requisições mais prioritárias. HTTP/1.1 limita a seis
requisições de uma mesma origem
Stalled Requisição parada por motivos de enfileiramento
DNS Lookup Processo de resolução do nome → Endereço IP
Request Sent Envio da requisição
Waiting (TTFB) O Browser aguarda o primeiro byte da resposta. Inclui
a latência e o tempo de preparação da resposta pelo
servidor
Content Download O Browser está recebendo a resposta.
Ferramentas de Desenvolvedor – Browser – Audits
Google Chrome Audits
Verificação dos itens:

• Desempenho
• Progressive Web Apps
• Melhores Práticas
• Acessibilidade
• Search Engine
Optimizations (SEO)

Ferramentas de Desenvolvedor – Browser – Audits
Google Chrome Audits
Indica uma nota geral e

aspectos a serem
corrigidos no site para
melhoria da experiência
do usuário

Otimização no Front End – Estrutura do HTML
CSS no topo e JavaScript ao final do documento

Embora não diminua o tempo de carga dos arquivos, oferece melhor
experiência para o usuário ao agilizar a exibição da página.
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
</head>
...
<script src="assets/js/scripts.js"></script>
<script src="assets/js/tagdiv_theme.min.js"></script>
</body>
</html> 13
Evite código CSS e JavaScript dentro do HTML

Com isso, os arquivos HTML ficam menores e os arquivos CSS e
JavaScript podem ser mantidos em cache.
<link rel="stylesheet" href="assets/css/style.css">

...
<script src="assets/js/scripts.js"></script>
<script src="assets/js/tagdiv_theme.min.js"></script>
14
Carregue scripts de forma assíncrona ou adie a execução

Evita que a carga dos scripts bloqueiem a execução do browser.
<script src="example.js"></script>
Fonte: async vs defer atributes - https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 15


<script async src="example.js"></script>


<script defer src="example.js"></script>

Evite redimensionar imagens via atributos width e height

Mantenha os arquivos de imagens do tamanho necessário para a
página, transferindo apenas os dados necessários do servidor.
ico114.png ico120.png ico144.png ico152.png
18
Otimização no Front End – Otimização de Conteúdo
Minificação - remove partes desnecessárias de HTML, CSS, JS como

espaços adicionais, quebras de linhas e comentários.
Fonte: Key CDN - How To Minify CSS, JS, and HTML

https://www.keycdn.com/support/how-to-minify-css-js-and-html/ 21
Compressão de Imagens - Otimização sem perda

• Remover metadados inclusos nos arquivos (EXIF, thumbnails)
• Modo progressivo do JPG JPG PROGRESSIVO
JPG COMUM
Fonte: https://www.webfx.com/blog/web-design/jpeg-101-a-crash-course-guide-on-jpeg/ 22
Compressão de Imagens - Otimização com perda

Qualidade de arquivos JPG
ANTES DEPOIS
Tamanho: 82,5 KB
50% de redução
Tamanho: 162 KB 60% da qualidade
Fonte: Squoosh - https://squoosh.app/editor 23
Compressão de Imagens - Otimização com perda

Redução da profundidade de cores no PNG (PNG-24 → PNG8)
ANTES DEPOIS 24
• O HTTP permite a compressão de conteúdo na conversação entre

servidor Web e Browser. Esse recurso é aceito por todos os browsers.
• Habilite a compressão de conteúdo nos servidores Web para GZIP que
apresenta o melhor desempenho frente aos demais algoritmos.
• Faz grande diferença em
arquivos texto (HTML, JS, CSS),
porém não altera para imagens
que já apresentam compressão
natural (JPG, PNG e GIF).
25
Otimização no Front End – Redução de requisições
TCP/IP Three-way Handshake

Negociação da conexão entre cliente e servidor antes de trocar dados
→ Quanto menos requisições, melhor!!! 

Fonte: Book Of Speed - http://www.bookofspeed.com/chapter3.html 28
CSS Sprites
Amazon Image Sprite
Técnica que combina várias imagens
em um único arquivo, diminuindo o
número de requisições ao servidor.
Fontes: https://css-tricks.com/css-sprites/
29
CSS Sprites
SEM Sprites
COM Sprites
Fonte: Adaptado de https://www.incapsula.com/cdn-guide/front-end-optimization-feo.html

30
CSS Sprites
<div class="shop-label"></div>
-----------
.shop-label {
width: 46px;
height: 44px;
background:
url(sprites.gif) -90px -120px;
}
Fontes: https://css-tricks.com/css-sprites/
31
CSS Sprites - Ferramentas online para geração de sprites

• Sprite Generator – Toptal
https://www.toptal.com/developers/css/sprite-generator
• SpriteGen
http://css.spritegen.com/
• SpriteBox
https://spritebox.net/
• Stitches
http://draeton.github.io/stitches/
32
Data URI - Representação de imagens codificados em Base64,

evitando novas requisições para pequenos arquivos.
Modo Tradicional .icon-foo {
Modo Data URI
background-image:
.icon-foo { url('data:image/png;base64,iVBORw
background-image: 0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAA
url('foo.png'); l21bKAAAAA1BMVEUAAACnej3aAAAAAXRS
} TlMAQObYZgAAAApJREFUCNdjYAAAAAIAA
eIhvDMAAAAASUVORK5CYII%3D');
}
2 Requisições (CSS + IMG) 1 Requisição → (CSS)
33
Data URI – Obter a Data URI para uma imagem no Google Chrome
Abra as ferramentas
1
de desenvolvedor
Selecione a Selecione a
2 3
imagem imagem
34
Bundling – Combine múltiplos arquivos em um único

Combine diversos arquivos separados (JavaScript, CSS e imagens) em
um só (bundle). Existem ferramentas que automatizam essa tarefa.
35
Otimização no Front End – Controle de Cache
Cache é o armazenamento de arquivos estáticos (maior parte dos

sites) permitindo aumentar a velocidade de carga de páginas Web.
38

Otimização de Front End

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Otimização de Front End

Enviado por

Direitos autorais:

Formatos disponíveis

Otimização no Front End (FEO)

Melhoria de um conteúdo ou da infraestrutura de provimento para

Ferramentas de Desenvolvedor – Browser

Ferramentas de Desenvolvedor – Browser – Tabela de tempos da Requisição

Ferramentas de Desenvolvedor – Browser – Audits

Google Chrome Audits

Verificação dos itens:

Fonte: Chrome Dev Tools

Ferramentas de Desenvolvedor – Browser – Audits

Google Chrome Audits

Indica uma nota geral e

Fonte: Chrome Dev Tools

CSS no topo e JavaScript ao final do documento

Evite código CSS e JavaScript dentro do HTML

<link rel="stylesheet" href="assets/css/style.css">

Carregue scripts de forma assíncrona ou adie a execução

Fonte: async vs defer atributes - https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 15

Carregue scripts de forma assíncrona ou adie a execução

<script async src="example.js"></script>

Fonte: async vs defer atributes - https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 16

Carregue scripts de forma assíncrona ou adie a execução

<script defer src="example.js"></script>

Fonte: async vs defer atributes - https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 17

Evite redimensionar imagens via atributos width e height

Minificação - remove partes desnecessárias de HTML, CSS, JS como

Fonte: Key CDN - How To Minify CSS, JS, and HTML

Compressão de Imagens - Otimização sem perda

Compressão de Imagens - Otimização com perda

Compressão de Imagens - Otimização com perda

• O HTTP permite a compressão de conteúdo na conversação entre

TCP/IP Three-way Handshake

→ Quanto menos requisições, melhor!!! 

Fonte: Adaptado de https://www.incapsula.com/cdn-guide/front-end-optimization-feo.html

CSS Sprites - Ferramentas online para geração de sprites

Data URI - Representação de imagens codificados em Base64,

Bundling – Combine múltiplos arquivos em um único

Cache é o armazenamento de arquivos estáticos (maior parte dos

Você também pode gostar