Web Performance 101

March 2015

Karel M.

Javier T.

Response time and human beings

0.1s → illusion of instantaneous response1s → keeps our flow of though seamless10s → keeps out attention, just barely.>10s → we start thinking about other things, making it harder to get back into our task when the website finally responds

Business effects of web performance

http://www.guypo.com/17-statistics-to-sell-web-performance-optimization/

Fast experience – Happy customer

Fastest pit-stop ever was 2.05 seconds

https://www.youtube.com/watch?v=irEJCCq1UoU

>20 sec – we would never do that to you, wouldn't we?

Average is commonly used to measure performance ending in many cases to misleading reads. Using median and percentiles can bring a different view to the table.

In the above graph at least 5% of the request fully render over 30s providing probably a poor experience to consumers. If we were serving for example 100 ppms (pages per minute)→ 5 of those page views will be having a terrible performance :(

Let's see how it can feel if not done properly

https://www.youtube.com/watch?v=uP1gmdvrwdc

Performance metrics

How to measure. Two schools, use both:

Synthetic / Real User Monitoring

For example:New RelicWebPage TestBrowser toolsDynatrace Gomez

GOMEZ

What to measure

When is your page loaded and usable?

DOM content loaded?Visually complete?Document complete?OnLoad?

WEB SITE OPTIMIZATION 101

Be scientific

MeasureModify one thing at a timeMeasure + CompareDocumentRepeat

Parts of an http request

Optimize DNS

Try to avoid redirectsTry to avoid cnamesAdapt your TTLs

DNS pre-fetching

<link rel="dns-prefetch" href="//s1.myfun.com"><link rel="dns-prefetch" href="//s2.myfun.com"><link rel="dns-prefetch" href="//s3.myfun.com"><link rel="dns-prefetch" href="//s4.myfun.com"><link rel="dns-prefetch" href="//www.google-analytics.com"><link rel="dns-prefetch" href="//www.adobetag.com"><link rel="dns-prefetch" href="//reagroup.122.2o7.net">

http://www.webpagetest.org/result/150226_FY_88fe5cd29a079191706c94ba5ed89bb0/1/details/

Optimize Network

http://bit.ly/browser-networking

Optimize server response

Reduce server response time (<200 ms)

Our best friend: The Waterfall

But we want to be AGILE !!!!

Optimize rendering

l https://www.udacity.com/course/ud884

MVP (Minimum Viable page)

1. Render a minimum viable page that provides consumers enough to core interaction

2. Load the rest asynchronously/on demand:Other functionalityAddsNon core Images (for ex. Below the folder)Analytics

In-line CSS/Javascript/images

http://stevesouders.com/

https://www.igvita.com

Let's check their blog sites source code !

http://andydavies.me/

Optimize connections

Sharding domainsI1.reastatic.netI2.reastatic.netI3.reastatic.netI4.reastatic.net

Firefox 2: 2Firefox 3+: 6Opera 9.26: 4Opera 12: 6Safari 3: 4Safari 5: 6IE 7: 2IE 8: 6IE 10: 8Chrome: 6

Max Number of default simultaneous persistent connections per domain:

Static assets

GZ

Minimize

Compress

Use a CDN

Cache, cache, cache...

Optimizing second view and beyond!

More caching

Expires, cache-control, E-tag.Edge caching vs Browser cachingCache busting and good patterns for cachingStale content

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en

Test driven caching

Using Rspec for our testing:

1. Write your tests 2. Watch them fail3. Make your Akamai change4. Deploy to Akamai staging5. Watch them pass (for Akamai staging)6. Deploy to Amakai production7. Watch them pass8. Win!

Optimize images

Right compressionLazy loading/Below the folderSprites

https://developers.google.com/web/fundamentals/media/images/optimize-images-for-performance?hl=en

Font optimization

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

Know your third parties

http://requestmap.webperf.tools/render.php?id=150320_V2_3b40b4504ee22b165e1ec362af5e88d9

Tools that can help you

Yslow http://yslow.org/

Pagespeed https://developers.google.com/speed/pagespeed/

Sitespeed.io http://www.sitespeed.io/

Forget, almost, everything I said

HTTP2 changes the game :D

BinaryHeader compressionMultiplex single TCP connectionServer push into client cache

Undoing HTTP/1.1 best practices: Sharding, image spriting, resource in-lining and concatenation will no longer be necessary

http://http2.github.io/faq/

Use a performance budget

http://speedcurve.com/site/1/chrome/1/30/39tfnozeq94p1o0hndk1kpbg4vb7cg/

Include it in your CI and reject deployments that break it.

Make everyone aware!

https://github.com/blog/1252-how-we-keep-github-fast