It is written in the same clear and conversational tone I write this blog in, maximizing for clarity and fun.
It has wizards in it
Dev Talk Monday is the series that brings you awesome dev talks every Monday
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!
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.
I’ll bring you more news soon! In the meantime, the following is a draft of the first chapter of the book. Enjoy! And feedback is always welcomed!