O documento discute como a performance afeta métricas como receita, taxas de cliques e satisfação do usuário. Ele mostra que atrasos de 50ms a 2000ms no carregamento de páginas podem reduzir essas métricas em até 4,4%. O documento também fornece dicas para melhorar o desempenho, como usar cache, compactar arquivos, otimizar requisições de rede e carregar scripts no final da página.

1. WPO Web Performance Optimization
com .NET Core
Rodolfo Fadino

2. Eric Schurman (Amazon)
Jake Brutlag (Google)
DistinctQueries/User
QueryRefinem
ent
Revenue/User
AnyClicks
Satisfaction
Tim
e
to
Click
(incresase
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?

3. http://kylerush.net/blog/meet-the-obama-
campaigns-250-million-fundraising-platform/

4. Performance = soma de fatores
Back-End
• Cache
• Thread
• Debug/Release
• SQL
• IO
• Network
• ...
Front-End
• CSS
• JS
• IMG
• Headers
• Minified
• CDN
• Proxy
• Cookies

5. “…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

6. 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

7. Request e Response

8. Anatomia de uma Requisição HTTP
• DNS Lookup
• Initial Connection
• Keep-Alive Header
• Time to First Byte
• Content Download

9. 329 requests

11. Cache

12. “O código mais rápido é aquele que não é
executado” (adaptação)
Memory Cache

13. Client Cache

14. Headers
Expires serve para definirmos a data em que
aquele recurso irá expirar (ex: Expires: Thu, 21 Dec
2013 16:00:00 GMT).
Cache-Control serve para definirmos por quanto
tempo (em segundos) aquele recurso irá
permanecer válido no navegador do cliente

15. 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:

16. 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

17. 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.

19. GZIP

20. Bundle &
Minification

21. Flush HTML

22. Ferramentas
Fiddler
Chrome Canary
Web Page Test
PageSpeed Insights

23. rodolfo@techfitapps.com
@rodolfofadino

24. rodolfo@techfitapps.com

25. Rodolfo Fadino
rodolfo@techfitapps.com