Dev Talk Monday: Master Web Performance at Nordic.js 2015

| Comments

Dev Talk Monday is the series that brings you awesome dev talks every Monday

Hellou friends!!!

I’ve been doing a lot of working extra and book writing as of late but I have reserved some teeny tiny amount of time to keep me updated with the comings and goings of the programming universe. And a great way to do that aside from reading blogs and books is to look at dev conferences!

A couple of weeks ago we had nordic.js here in Stockholm and although I couldn’t be there in person, JavaScript conferences tend to post all the sessions on YouTube. That is beyond awesome ‘cause I get to see everything from the comfort of my favorite couch.

There’s a ton of great talks this year but the one I am going to recommend you today is Performance on RAILs by the super expert in web performance Paul Lewis (and where RAILs has nothing to do with RoR – Ruby on Rails – but an mnemonic for Response-Animation-Idle-Load which are places where you can affect the perceived performance of your web app).

Some highlights of the talk:

  • A great impact in perceived performance occurs when you change css properties that trigger all three layout, paint and composite processing on your browser. Jake has created an awesome website csstriggers.com that you can use to see which css properties trigger which type of processing and thus select the ones that are more performant. The site is great as it provides very nice explanations about how the browser reacts to each css property. As a practical example, instead of using a regular transition to move and scale a square (width, height, left, top) you can use a transform that only triggers composite processing and FLIP the animation to get to those desired 60fps.
  • You can use PageSpeed Insights to get a checklist of performance improvements that you can apply on your site right away.
  • You can also use WebPageTest to perform a thorough analysis of the loading performance of your web site. It comes with great features like changing the network speed, different browsers, recording screenshots of your website as it loads over time, etc and also gives you recommendations in regards to how to improve the performance of your website.
  • A little bit in the fringe zone being implemented in Chrome only as of right now, you can use the requestIdleCallback to perform operations when the user is not interacting actively with the website and thus avoid processing affecting the performance of animations and interactions.
  • Some great resources that you can use to learn more about web performance are Browser Rendering Optimization and Website Performance Optimization both courses at Udacity, and the Google Web Fundamentals series on Optimizing Performance
  • And finally, Paul Lewis blog and website where you can find tons of great resources around web performance and front-endy UI stuff.

And that was it! Have a great week!

P.S. Another super interesting talk that I got the chance to see this weekend was André Staltz’s ‘What if the user was a function?’ from JsConf Budapest. Great watch if you are into functional reactive programming and those kind of things.

Comments