devxperience wpo com .net core
TRANSCRIPT
WPO Web Performance Optimizationcom .NET Core
Rodolfo Fadino
Eric Schurman (Amazon)Jake Brutlag (Google)
Distin
ct Q
uerie
s/Use
r
Query R
efin
emen
t
Revenue/
User
Any Clic
ks
Satis
fact
ion
Tim
e to
Clic
k
(incr
esase
in m
s)
50ms - - - - - -
200ms - - - -0,30% -0,40% 500
500ms - -0,60% -1,20% -1,00% -0,90% 1200
1000ms -0,70% -0,90% -2,80% -1,90% -1,60% 1900
2000ms -1,80% -2,10% -4,30% -4,40% -3,80% 3100
https://conferences.oreilly.com/velocity/velocity2009/public/schedule/detail/8523
Performance é importante?
http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
Performance = soma de fatores
Back-End
• Cache
• Thread
• Debug/Release
• SQL
• IO
• Network
• ...
Front-End
• CSS
• JS
• IMG
• Headers
• Minified
• CDN
• Proxy
• Cookies
• ...
“…only 10-20% of the total end-user response time is spent getting the HTML document to the browser. You need to focus on the other 80-90% if you want to make your pages noticeably faster…”
Steve Souders
14 regras• Rule 1 - Make Fewer HTTP Requests
• Rule 2 - Use a Content Delivery Network
• Rule 3 - Add an Expires Header
• Rule 4 - Gzip Components
• Rule 5 - Put Stylesheets at the Top
• Rule 6 - Put Scripts at the Bottom
• Rule 7 - Avoid CSS Expressions
• Rule 8 - Make JavaScript and CSS External
• Rule 9 - Reduce DNS Lookups
• Rule 10 - Minify JavaScript
• Rule 11 - Avoid Redirects
• Rule 12 - Remove Duplicate Scripts
• Rule 13 - Configure ETags
• Rule 14 - Make AJAX Cacheable
Request e Response
Anatomia de uma Requisição HTTP
• DNS Lookup
• Initial Connection• Keep-Alive Header
• Time to First Byte
• Content Download
329 requests
Cache
“O código mais rápido é aquele que não é
executado” (adaptação)
Memory Cache
Sem Cache
Com Cache
Client Cache
Headers
Expires serve para definirmos a data em que aquele recurso irá expirar (ex: Expires: Thu, 21 Dec2013 16:00:00 GMT).
Cache-Control serve para definirmos por quanto tempo (em segundos) aquele recurso irá permanecer válido no navegador do cliente
GET Sem Cache
• Abaixo segue o exemplo de uma requisição sem nenhuma configuração de cache.
• Notem que na próxima requisição para o mesmo recurso, ele será baixado novamente:
GET Condicional ( * )
• Headers Last-Modified e Etag podem se utilizados pelo servidor
• Na próxima requisição, esses headers são retornados para o servidor, que analisa e responde se houve alguma mudança
GET Cache Configurado
• Cache-control, com o valor do max-age
• Com o Cache-control configurado, dentro do período, o navegador não executará a requisição.
Com IIS
Com Kestrel
GZIP
Com IIS
Com Kestrel
Sem GZIP
Com GZIP
Bundle &Minification
Flush HTML
Ferramentas
FiddlerChrome CanaryWeb Page TestPageSpeed Insights
[email protected]@rodolfofadino
Rodolfo Fadino [email protected]