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

rodolfo@techfitapps.com@rodolfofadino

rodolfo@techfitapps.com

Rodolfo Fadino rodolfo@techfitapps.com