Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Uma introdução em perfomance de Aplicações Web ...
Search
Cadu Ribeiro
January 05, 2023
Programming
0
45
Uma introdução em perfomance de Aplicações Web para impactar positivamente a vida de seus usuários
Cadu Ribeiro
January 05, 2023
Tweet
Share
More Decks by Cadu Ribeiro
See All by Cadu Ribeiro
DevContainers: Facilitando o Setup de ambientes de desenvolvimento
duduribeiro
0
38
Testes Automatizados para Web - Uma Introdução
duduribeiro
0
70
Vim inside VSCode
duduribeiro
0
29
Continuous Delivery - On the real world
duduribeiro
0
91
An Introduction to Automated Web Testing
duduribeiro
3
71
Continuous Delivery
duduribeiro
0
44
Agility Through Continuous Delivery
duduribeiro
0
53
Hello Ruby
duduribeiro
2
73
Other Decks in Programming
See All in Programming
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
効率的な開発手段として VRTを活用する
ishkawa
1
180
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
450
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
テスト環境にCDを導入してみた
yasaigaoisi
0
100
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making Projects Easy
brettharned
116
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Bash Introduction
62gerente
613
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
Uma introdução em perfomance de Aplicações Web para impactar positivamente
a vida de seus usuários Cadu Ribeiro
None
Cadu Ribeiro @duduribeiro
Cadu Ribeiro https://cadu.dev @duduribeiro
https://opensanca.com.br
http: / / meetup.com/pt-BR/opensanca/
None
None
📸
Quais problemas uma aplicação lenta pode trazer?
None
None
47% Dos usuarios esperam que o site carregue em até
2 segundos Robert B. Miller, “Response Time in Man–Computer Conversational Transactions,” 1968.
Tempo é Dinheiro!
-1% em vendas A cada 100ms no tempo de carregamento
do website Fonte
+2% em vendas A cada 1 seg reduzido no tempo
de carregamento do website Fonte
Importância da performance
Empatia
58% dos brasileiros têm acesso à internet apenas pelo celular
Fonte: Pesquisa Sobre o Uso das Tecnologias de Informação e Comunicação nos Domicílios Brasileiros 2019 - CGI.br
Famílias de baixa renda tem banda larga móvel como principal
forma de conexão Fonte: Pesquisa Sobre o Uso das Tecnologias de Informação e Comunicação nos Domicílios Brasileiros 2019 - CGI.br
None
None
Melhores resultados
53% Dos usuários abandonam o site se ele demora mais
que 3 segundos para carregar Fonte
O que podemos fazer? Bora otimizar a aplicação?
80 / 20
80% da lentidão vem de 20% do código
80% do uso de memória vem de 20% do código
80% da carga do site vem de 20% dos usuários
None
Eu não vou otimizar nada na minha aplicação até as
minhas métricas pedirem
Não tente adivinhar
Monitore! Melhore se necessário
Use alguma ferramenta de APM para te auxiliar * APM:
Application Performance Monitor
None
None
None
Use alguma ferramenta de RUM * RUM: Real User Monitoring
None
None
None
RUM APM vs
APM
APM
APM
RUM
Problemas comuns?
Latência e RTT
Latência
Latência
Latência
RTT
RTT
RTT
RTT
RTT
RTT
Nova Iorque -> Sydney +/- 16.000 km
53 milissegundos Na velocidade da luz
Nova Iorque Sydney
80 milissegundos Nova Iorque Sydney
Nova Iorque Sydney
Nova Iorque Sydney 160 milissegundos
200~300 milissegundos
Coloque seus servidores o mais perto possível dos seus usuários
Mas 200ms é muito rápido!
None
https://meusite.com.br/
https://meusite.com.br/
https://meusite.com.br/
https://meusite.com.br/
https://meusite.com.br/
None
Parsing
Recursos externos
None
Códigos JavaScript
Códigos JavaScript Códigos CSS
None
None
None
None
None
None
None
None
…. 15x
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
https://www.linkedin.com/pulse/why-does-your-browser-limit-number-concurrent-ishwar-rimal/
Utilize menos arquivos para seus recursos
{ <script src="application.js"> </ script>
{ <link rel="stylesheet" media="all" href="application.js"> </ link>
None
Troque imagens simples por SVG
None
None
None
None
None
Postergue o carregamento dos scripts
None
None
Fonte <script src=“application.js”> </ script>
Fonte <script async src=“application.js”> </ script>
Fonte <script defer src=“application.js”> </ script>
None
Use async e defer sempre que possível
Coloque os recursos perto do usuário com CDNs
Sem CDN Servidor
https://meusite.com.br/ Sem CDN Servidor
https://meusite.com.br/ application.js Sem CDN Servidor
https://meusite.com.br/ application.js application.css Sem CDN Servidor
Com CDN Servidor CDN
https://meusite.com.br/ Com CDN Servidor CDN
https://meusite.com.br/ application.js Com CDN Servidor CDN
https://meusite.com.br/ application.js application.css Com CDN Servidor CDN
None
None
None
Com CDN Servidor CDN
https://meusite.com.br/ Com CDN Servidor CDN
https://meusite.com.br/ application.js Com CDN Servidor CDN
https://meusite.com.br/ application.js application.css Com CDN Servidor CDN
None
Use CDN para entregar seus assets
Arquivos grandes
None
None
Comprima seus assets com gzip no servidor ou na CDN
Case
None
None
None
None
None
12 servidores (dynos) 3 app servers c/ 3 threads
6300 usuários
6300 usuários no período de 1 hora
None
None
3000 RPM +/- no pico
App instances = Avg reqs/sec * Avg response time /
sec
App instances = 50 * 5 = 250
Servers = 250 / 9 = ~ 27 *9
= instâncias / server
Servers = 250 / 9 = ~ 27 *9
= instâncias / server
Migração para um banco melhor!
Conclusão
None
None
None
Não existe bala de prata
None
Sua empresa pode estar perdendo dinheiro
Coloque seus servidores o mais perto possível dos seus usuários
Utilize menos arquivos para seus recursos
Troque imagens simples por SVG
Use async e defer sempre que possível
Comprima seus assets com gzip no servidor ou na CDN
None
Cadu Ribeiro
Cadu Ribeiro https://cadu.dev
Cadu Ribeiro https://cadu.dev
[email protected]