Moar Performance!
It's been a while since I posted an update, so I wanted to give a brief breakdown of what I've been up to. As a huge spoiler it's... wait for it... performance stuff. But this is cool: I have three new resources just for you!
SmashingConf #
Firstly, I was at SmashingConf in Oxford, where I got to talk about making a silky smooth web. I stepped through how frames get made, the common rendering performance problems I see when profiling sites, and how you can find and fix them with Chrome's DevTools.
I also briefly touched on how we think of website and webapp performance on the Chrome team, which is a model called RAIL that puts the user in the middle of your performance considerations. There's more on RAIL to come in future posts!
But not everyone likes watching videos to learn about stuff, do they? Well that's no problem because...
Web Fundamentals #
I also added a new Render Performance section on Web Fundamentals. Web Fundamentals is Google's resource for web developers that aims to distill best practices down to relevant and immediately-applicable advice.
If you know me, you know I prefer a “tools, not rules” approach over giving out a bunch of distilled nuggets of “wisdom”.
It actually took me a while to get it written up, because a) things move quickly in Chrome, and b) I wanted to strike something of a balance. If you know me, you know I prefer a "tools, not rules" approach over giving out a bunch of distilled nuggets of “wisdom”. Architectures change, features change, basically everything changes, and so you need to know how to read the tools to stay current. But Web Fundamentals isn't a primer on how browsers work, so there needed to be a certain amount of hand-me-the-rules. Hopefully I got the balance right between the two!
But not everyone likes reading about performance, which is just as well because...
A new Udacity course #
I also launched a new Udacity course on Render Performance! I got to work closely with the team at Udacity (shout out to my co-host, Cam!) and we got to a six-lesson rundown sorted and shipped in record time. (Sounds about right for a course on performance, innit.)
Much as with Web Fundamentals and SmashingConf, it covers frame creation and common performance bottlenecks, but it's super hands-on: there are short videos covering the concepts, quizzes to test your knowledge, and sample projects to which you can apply your performance debugging skills.
It’s pretty much the most complete reference I’ve been able to make for getting to 60fps in performance-critical parts of sites and apps
It's pretty much the most complete reference I've been able to make for getting to 60fps in performance-critical parts of sites and apps, like scrolling, animations, and so forth. None of it relies on unconventional tricks, either, just a good knowledge of how the browser takes your code and turns it into pixels. I did kind of disagree with the Udacity folks on something: they labeled the course as 'Advanced', but I truly believe everyone can comfortably absorb and apply the knowledge in the course, no matter how new they are to building for the web.
Perf on, peeps #
So there you have it. I hope you find something useful in there for you, and anyone you work with, no matter how you prefer to learn topics.
We need the web to be fast for as many people as possible, and the only way we can achieve that is if everyone takes responsibility for building high performance sites and apps. Our amazing community has absorbed lots of best practices for JavaScript, CSS, HTML, and Page Load Time Performance over the years. Let's take that on to the next level and do the same with Rendering Performance!