Profile cover photo
Profile photo
Ionut Popa
107 followers
107 followers
About
Posts

Post has shared content
There have been some great app performance resources surfacing recently, so I thought it would make sense to do a roundup.

I've recently seen apps whose performance is being crushed by large & expensive paints, extra layouts, bad event decoupling or too many network requests. They are all fixable items, and Chrome's DevTools and tracing tool both do a great job of showing you what's going on under the hood.

Web Performance Power Tool: HTTP Archive (HAR)
A rundown of the HAR file and how you can use it to diagnose the network side of your application, with +Ilya Grigorik and +Peter Lubbers.
Article: http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/
Video: Make The Web Fast - The HAR Show: Capturing and Analyzing performance data with HTTP Archive format

Wait, DevTools could do THAT?
A fantastic presentation by +Ilya Grigorik on Chrome's DevTools
Video: Wait, Chrome Dev Tools could do THAT?
Notes: http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1

Progressive jpegs: a new best practice
Ann Robson explains how we can all reduce our apps' bandwidth consumption by making use of progressive jpegs
Article: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

Structural and Sampling (JavaScript) Profiling in Google Chrome
+John McCutchan and +Ilya Grigorik (he keeps showing up this guy!) cover Chrome's tracing tool. If you're a power user, this one is a must.
Video: Structural and Sampling (JavaScript) Profiling in Google Chrome!

Snow in canvas land
+Jake Archibald relives the horror of his 2-year-old code, and sets about fixing it
Article: http://calendar.perfplanet.com/2012/snow-in-canvas-land/

Improving Web App Performance With the Chrome DevTools Timeline and Profiles
A very thorough tutorial (with ANIMATED GIFS!) by +Addy Osmani on how to use Chrome DevTools to diagnose memory and performance issues.
Article: http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/

Scrolling Performance and Parallaxin'
Two articles by yours truly on understanding and improving scrolling performance in your applications
Article: http://www.html5rocks.com/en/tutorials/speed/parallax/
Article: http://www.html5rocks.com/en/tutorials/speed/scrolling/

Google I/O 2012 - Jank Busters: Building Performant Web Apps
+Nat Duca and +Tom Wiltzius of Google's Chrome GPU team cover a host of tips & tricks for maximizing your app's rendering performance
Video: Google I/O 2012 - Jank Busters: Building Performant Web Apps

Why moving elements with translate() is better than pos:abs top/left
+Paul Irish on using translates vs absolute positioning, and the performance implications of both
Article: http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

I'm sure there are many others I've missed, so please feel free to link them up in the comments.

That should keep you all busy! Happy 2013 :)
Photo
Add a comment...
Wait while more posts are being loaded