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