Web Application Performance aND MEASUREMENT
Intro
Martin McKeaveney
Software Engineer @
(We're hiring)
Why do I care?
This is a Collective problem
... and we are failing at it
53% of visits are abandoned if a mobile site takes more than three seconds to load - Google Marketing Platform
Latency improvement of 100ms increased revenue at Amazon by 1%
BBC HAS SEEN THAT THEY LOSE AN ADDITIONAL 10% OF USERS FOR EVERY ADDITIONAL SECOND IT TAKES FOR THEIR SITE TO LOAD
20%
If you want your site to "feel" faster than your competitors, 20% is around the difference required -
Steven C Seow Ph.D
> 3MB
Types of Performance
JavaScript performance
Rendering Performance
Load Performance
JavaScript performance
More advanced Web API's
MORE JAVASCRIPT AND CLIENT SIDE LOGIC
CAN ALWAYS SCALE VERTICALLY On the server
COmpression and minification won't help us here
I'll just remove a JPEG...
SCRIPTING
HOW DOES JAVASCRIPT WORK?
DECREASE PARSING TIME
https://nolanlawson.github.io/test-optimize-js/
TURBOFAN: THE OPTIMIZING COMPILER
Latest optimizing compiler to replace crankshaft
Improved performance and memory consumption
TEAM BASED IN MUNICH
Will optimistically optimize and inline 'hot' functions that are regularly used
HIDDEN CLASSES
Subtitle
TAKEAWAYS
INSTANTIATE OBJECTs iN the same order
assign all an objects properties in constructor
Running the same method repeatedly is fast
type systems can help
SHIP LESS CODE!!!!
Rendering Performance
Most screens refresh at 60 FPS
frames under 16ms
Actually 11MS - Browser housekeeping
Google RAIL model
CONSTRUCTING THE RENDER TREE
CONSTRUCTING THE RENDER TREE
LAYOUTS & REFLOWS
We know visible nodes and computed styles.
Need to calculate their exact position and size within the viewport of the device.
LAYOUT THRASHING DEMO
Layout Thrashing occurs when JavaScript violently writes, then reads, from the DOM, multiple times causing document reflows.
PAINTING
ANYTHING OTHER THAN OPACITY OR CSS TRANSFORM TRIGGERS A REPAINT.
non-geometric properties only, like backgrounds, text color, or shadows.
THE COMPOSITOR THREAD
composites bitmap layers FROM PAINT
Can be used to perform animations on a different thread
MOST PERFORMANT RENDERING PIPELINE
MINES BITCOIN
WILL-CHANGE
Tell the browser that element will need repainted
Promote it to its own layer
Prevents paint storms on the main thead
COSTS MEMORY AND RESOURCES
Not supported in all browsers
RENDERING PERFORMANCE DEMO
HOW CAN WE APPLY THIS?
RENDERING TAKEAWAYS
Change classes deeper in the DOM
Avoid repeatedly changing inline styles
Batch DOM manipulation
Debounce resize events
Simplify paint complexity
Load Performance
Subtitle
LATENCY AND BANDWIDTH
BANDWIDTH - How much stuff can I fit through the tube
LATENCY - HOW LONG does it take to get from one end to the other
CLOUDPING.INFO
USING A CDN
CACHING
We don't have to go to the server halfway round the world every single time
The browser will cache assets - we can control this with the Cache-Control header.
no-store: send it over the wire every time
no-cache: check if you have the latest, if not send it over the wire (still incurs a cost)
max-age: send a new one if the cached version is older than the specified age in seconds
LAZY LOADING & CODE SPLITTING
PROBABLY THE MOST POWERFUL PERFORMANCE OPTIMIZATION YOU CAN DO.
load performance and javascript performance.
CAN BE DONE with ANY GOOD MODULE BUNDLER
STATIC CODE SPLITTING
"DYNAMIC" CODE SPLITTING
MEASUREMENT
WEBPAGETEST
MEASUREMENT
LIGHTHOUSE
MEASUREMENT
window.performance
Thank YOU!
Questions?
