Although we do our stuff in Delphi, I know a lot of us dabble in web apps too.

Although we do our stuff in Delphi, I know a lot of us dabble in web apps too.

via Google Chrome Developers 

Originally shared by Paul Lewis

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 🙂

Leave a Reply