- High Performance Animations
- Avoiding Unnecessary Paints: Animated GIF Edition
- Text Compression for Web Developers
- Image Compression for Web Developers
- Effectively Managing Memory at Gmail scale
- Case Study: Building Racer
- Deep dive into the murky waters of script loading
- Creating Roll It
Performance Is a Feature
Modern web applications are complex bunches of interrelated code paths and resource requirements, which in order to deliver the best user experience, must all work in harmony. To make sense of this dependency graph, we find it helpful to view web application performance from three pillars: Network, Compute, and Render. Each pillar has their own nuances, solutions and interdependencies with each other. Great performing Web Applications will ace all three to deliver the best user experience possible.
Network PerformanceHigh performance networking is a keystone of every performance strategy - after all, if the browser is blocked on the network, waiting for the resources to arrive, then there is not much else we can do or optimize! Fast page load times, and optimized delivery of resources, translate to higher user engagement, increased conversions, and lower bounce rates.
- Every millisecond counts 1000 ms delay == 7% loss in conversions
- Unnecessary networks roundtrips Blocking resources delay the rendering of the page, causing unnecessary delays and wait times for the user.
- Minimize payload size Compress images, minify your CSS, JS and HTML
- Eliminate blocking resources
- Eliminate unnecessary redirects
- Optimize server response times that are >100ms
- Automate performance best practices
- You can hand-optimize your site (that’s cool!), or, consider PageSpeed optimization Such as mod_pagespeed (apache), ngx_pagespeed (nginx), or PageSpeed Service. And even use webpagetest.org/compare to run a side-by-side test!
- Install PageSpeed Insights extension: it’s a performance linter for your site.
- DevTools + remote debugging allows you to get real-world latency, cache, etc, performance from your mobile (and desktop) device.
- Memory Churn Kills Performance! Churn causes GCs, which eat away at your frame-time.
- Manipulate strings as little as possible. String manipulation often has side-effects and leak memory without you knowing.
- Be on the lookout for any code which may be un-optimized Unoptimized code can cause a slew of problems, including memory issues, and slower code paths.
- Devtools CPU Profile can let you see what function is taking the bulk of your time.
- Chrome tracing is great for getting structural, and sample based profiling inside of Google Chrome.
- Get more data insight with the Web Tracing Framework
- Need more info on what's under the hood? Chrome’s V8 profiling framework will let you know how the VM is reacting to your code
- Compute Performance Checklist for the mobile web
- Using Object Pools to reduce memory churn
- High performance, garbage collector friendly code
- I-Want-To-Optimize-my-JS-application-for-chrome checklist
- Perf the web forward
Render PerformanceHow quickly data becomes pixels on the screen is critical to your app’s success. Users notice when the frame rate drops; it reduces engagement and costs you happy users. Whenever users scroll or interact with your site or application you want to give the browser the least amount of work possible to update the pixels on the screen. When dealing with rendering performance we’re looking to reduce both the size and complexity of painting operations.
- Destroy all jank - target 60fps!
Check your layout costs
- How much time is being spent calculating the positions and dimensions of your elements?
- Are you invalidating more of the tree than you anticipated? Check the scope of your layout operations.
- Check your style recalculations Are you changing more styles than you anticipated? Check the scope of your style changes and keep them to a minimum!
- Minimize the paint areas You want small paint areas; If you're seeing loads of fullscreen paints, there may be a problem.
- Check the paint complexity How expensive is it to paint your elements? Check the styles and watch out for "semi-expensive" styles applied to many elements.
- Reduce un-needed image resizes Decoding and resizing images can be very expensive. Even one large image operation can cause you to miss your target frame rate.
- Chrome DevTools timeline is your first port of call; Fire up frame mode and check scrolling and interactions!
- Capture a frame with Chrome tracing. You are looking for more detail regarding image decodes, resizes and PaintContents calls.
- Avoiding Unnecessary Paints
- Scrolling Performance
- High DPI Canvas
- Leaner, Meaner, Faster Animations with requestAnimationFrame
- Jank Free: a curated list of rendering performance resources
- Web page design with the GPU in mind
- Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
- Using CSS to get faster, smoother animations
- How Fast UX is all about performance.
- On Layout and web performance
- How to debug painting performance issues