Building the Fast New MSN.com

AMIYA GUPTA

@amiyagupta

May 29, 2015

New MSN

Brand new UI

Entire stack on Azure PaaS

New geo-distributed Content Store

Responsive design

Single Web codebase for all verticals

Other cool stuff that I wont have time to talk about

Perceived Performance

Browser JengaAchieving and maintaining fast rendering performance can be like playing Jenga

Basic

Intermediate

Advanced

Basic Practices Baked In

Gzip compression

Cookie-less domains

Far future caching headers

CSS and JS bundling

Minification

Domain sharding

Image spriting

Image compression

Configured in a single place in the core SDK; transparent to developers

Basic

Intermediate

Advanced

Async Script AttributeThe async attribute allows scripts to load in a non-blocking fashion.

DNS PrefetchLinks in the hint the browser to perform DNS lookups for domains that will be referenced further down the page.

DNS lookups

Single jQuery URLLeverage the benefits of browser caching; avoid multiple instances of a framework on the same page

Homepage

Article VideoGallery

Lazy-Loading Images Below the FoldImages in the viewport are fetched immediately, rest are lazy-loaded

Above Fold

Below Fold

Size Budget250KB for Above-Fold Content:

HTML

CSS

JS

Images

WOFF

Above Fold Content: 250KB

Basic

Intermediate

Advanced

Quantifying Perceived PerformancePerceived Performance is usually measured using filmstrips of the page rendering sequence

Visual MetricsAlgorithms like Speed Index and Page Phase Time attempt to quantify perceived performance based on the rate of change of pixels on the screen. The resulting metric is usually a single number.

Our Approach to Visual MetricsGeneral purpose metrics are great, but they can be a little opaque when it comes to identifying the cause of a regression. Our approach focuses on time taken to render specific sections of the page.

Hero Image Render

Above Fold Render

Ad Render

First Render

What We Learned

Network isnt always the bottleneck

Looking at the waterfall isnt enough

CPU cycles spent onrepeated layout/styling operations

Forced Layout Operations:The Silent Killer

Understand

Identify

Fix

Rendering PipelineThe browser usually cycles through this process several times during initial page load.

Killer Combination

Sequence of two actions necessary for a forced layout operation:

1. Modify: Invalidating a section of the display tree through DOM or style updates

2. Readback: Reading a property under that tree when invalidated: e.g. clientWidth, getBoundingClientRect

Impact Small, seemingly harmless DOM

operations can trigger expensive operations and result in repeated work

CPU time spent in this extra work slows down overall rendering

Thats why

Understand

Identify

Fix

F12 ToolsBrowser profiling tools are the best theyve ever been

Perf MarkersFlame charts can be overwhelming to look at. Adding performance markers to critical sections of your code makes the visualization easier to understand.

Drilling in with Perf Markers

What to look forRepeated expensive Layout/Style operations are killing your rendering performance

Understand

Identify

Fix

Solutions

Wherever suitable:

Batch writes together

Avoid client-side inserts if they can be included server-side

Execute reads before writes

Schedule read and write operations with requestAnimationFrame

Move operations into the head or outside the DOM

Example:ModernizrPutting Modernizr in the wrong place resulted in three consecutive >100ms style recalculation operations when it ran its feature detection tests.

350ms

Example: remToPixel200x speedup by moving from external JS to inline head script

Script Location Execution Time

Before External JS 86.2ms

After Inline in 0.5ms

The Future

HTTP/2Moving to HTTP/2 means we will have to un-learn some common best practices

Cookie-less domains

CSS and JS bundling

Domain sharding

Image spriting

In Conclusion

Recap

Basic: Bake in common best practices

Intermediate: Incorporate relevant newer performance features

Advanced: Attack the silent killers forced layout operations

Links

Presentation slides: http://1drv.ms/1JZlYLc

Session feedback: http://oreil.ly/1Fkh2ej

Build Session on Web Runtime Performance: ohttp://channel9.msdn.com/events/Build/2013/3-068

(Modify/Readback pattern at 57:00)

Google Developer Links:ohttps://developers.google.com/web/fundamentals/perfo

rmance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en

ohttps://developers.google.com/speed/articles/reflow

ohttps://developer.chrome.com/devtools/docs/timeline