The Other Type of Website Performance

Posted: October 24, 2014 under JavaScript, Web Performance

Whenever I come across articles on web performance, they typically focus on a single aspect of making high performance websites - usually the backend. That's why you'll often see posts on caching and the like, similar to what's in the first part of my series on building high performance Drupal sites (which I'll be returning to once I have a nice block of time for writing the lengthy second installment).

There are other areas that get less attention, however. Frontend performance, for example. Fortunately, the general neglect of frontend performance seems to be ending and there are great tools available to help diagnose and fix problems, first and foremost the outstanding Chrome DevTools. Also see webpagetest.org if you're not using it already.

But the thing that's on my mind lately is neither of these two areas, but rather how a site performs once it's fully loaded in the browser. Yeah, I'm talking about runtime performance. This is related to frontend performance, but a bit different in that it's how your site responds to user interaction in the browser - how the JavaScript and CSS you've included is performing as the user interacts with the page through scrolling, hovering, etc.

I'm sure you've all come across a slick looking website with lots of effects that had a bit of a janky feel to it, even when just scrolling down the page. This is often caused by the browser re-painting the canvas. Extensive animations, like the one here on the home page of Friendly Machine, can be tough on browser performance. But a whole lot of other things can impact runtime performance as well.

I'll leave you with a link to a great tutorial by Addy Osmani on diagnosing and fixing issues with paint times, as well as a list of the most popular performance tests on jsPerf (seriously, poke around through those - very interesting).

Yeah, it's yet another thing to keep in mind, but if you're building a site with a lot of JS and CSS effects or animations, it'll be worth your time.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.