Neuerungen
- User Timing API
- High Performance Animations
- Avoiding Unnecessary Paints: Animated GIF Edition
- Text Compression for Web Developers
- Image Compression for Web Developers
- Static Memory Javascript with Object Pools
- Use forensics and detective work to solve JavaScript performance mysteries
- Effectively Managing Memory at Gmail scale
- Case Study: Building Racer
- Deep dive into the murky waters of script loading
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 Performance
High 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.Key Issues
- 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!
Tools
- 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.
Weitere Informationen
Compute Performance
Runtime performance is just as important to user perception as load times, so keeping users who’ve already loaded your site happy is just as important as acquiring new users. Most performance issues that come from the compute layer stem from Javascript computation; which gives you a few key things to focus on: algorithmic complexity, Memory usage patterns, and unoptimized code.Key Issues
- 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.
- JavaScript VMs like lots of small functions They can inline and fast-compute them.
- 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.
Tools
- 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
Weitere Informationen
- Javascript Memory Management
- Compute Performance Checklist for the mobile web
- Writing Fast, Memory-efficient Javascript
- Using Object Pools to reduce memory churn
- High performance, garbage collector friendly code
- I-Want-To-Optimize-my-JS-application-for-chrome checklist
- Breaking the javascript speed limit with v8
- From Console to Chrome : Making fast javascript
- Perf the web forward
Render Performance
How 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.Key Issues
- 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.
- Are you causing layouts to happen multiple times within a single piece of JavaScript?
- 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.
Tools
- 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.
Weitere Informationen
- Avoiding Unnecessary Paints
- Scrolling Performance
- Parallaxin’
- 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