If you’re just starting out on your web performance journey, it’s easy to feel overwhelmed by how much there is to learn about something as “simple” as making pages faster.
When I started this blog three years ago, if you wanted to learn about optimizing performance, the pickings were on the slim side — though generally you could count on any resources you found to be pretty solid. These days, things are different. There’s a massive number of blog posts, videos, and slide decks — but the problem is that there’s a lot of redundant (or to be frank, not super great) information out there.
In this post, I’m going to separate the wheat from the chaff and offer my opinionated guide to the links you should check out if you’re a dev who’s new to the performance scene.
Despite years of development and performance advocacy, the internet has a serious obesity problem that’s hurting application and page speed. This is a great piece from Smashing Magazine that discusses the reasons behind this trend and finishes with a bold declaration.
If I were teaching a course about performance, these would be required reading/viewing on week one.
Like Mecca, all web performance roads lead back to Steve Souders’s original performance rules. If you do your job right, one day you’ll have these committed to memory.
As I mentioned in last week’s podcast, what Google developer advocate Ilya Grigorik doesn’t know about performance isn’t worth knowing. In this three-hour video, he gives an awesome overview of the subject.
Make sure you’re taking care of the easy stuff before you dive into the hard stuff. How to pluck the low-hanging fruit from the performance tree.
First, you can’t be in this business unless you know how to read a waterfall chart. Our VP Product, Hooman Beheshti, breaks it down really well in this recorded webinar. (If you want the written version instead, there’s a post here.)
Four easy things you can do to make your website faster.
Five more ways to speed up your pages.
If you want to still have a job in performance in five years, I suggest you bone up on mobile.
Mobile devices and browsers pose some unique performance challenges. There are a number of fundamental and advanced tactics that you can use to take on these challenges and win.
Maximiliano Firtman created this awesome table that illustrates HTML5 compatibility across major mobile and tablet browsers.
Responsive Web Design
Technically, RWD belongs with mobile, but it’s such a hot-button topic these days that I wanted to give it its own section.
Really, you should just read pretty much everything Brad Frost writes about RWD. This is a good place to start.
You may have heard that responsive design means poor performance. Tim Kadlec discusses why this doesn’t need to be true.
Images are one of the single greatest performance problems, but they’re not sexy so they don’t get the attention they deserve. I’m working on a separate post about this, but in the meantime, check out these links.
Good introduction to image optimization from the folks at the Google Dev Blog.
Photos are the main culprit when it comes to slow rendering. Eye-opening stuff about the adoption of progressive jpegs and how well progressive jpegs load across different browsers.
Third-party scripts are a huge potential point of failure. You need to know how to mitigate this.
This post will help you understand the third-party problem and how to get a handle on it.
Good tutorial from Stoyan Stefanov explaining how to make your social buttons load asynchronously.
Security is an increasingly urgent issue. You need to know what impact it has on performance.
Speed vs. security: Four ways that security solutions can cause performance problems (and what you can do about it)
Security solutions can be performance bottlenecks, but this doesn’t get talked about very much so I wrote this post about it.
Some folks believe that we just have to suck up the fact that SSL is slow. Not true. Here are some relatively simple workarounds.
SSL (Secure Sockets Layer) optimization is extremely complicated, but as William Chan argues, “There’s low-hanging fruit everywhere” for site owners willing to try. In this article, William takes us through an in-depth case study of SSL optimization.
Great collection of tips for making sure your web fonts aren’t slowing down your pages.
At WebPerfDays London, Steve Souders asked attendees to name their favourite web performance tool. This is a great roundup of tools that smart folks are using.
YSlow is one of the most commonly used tools for helping you analyze the performance of a website based on performance best practices. It’s available as a plugin for all major browsers except Internet Explorer, and it offers usable insight into real-world performance. This tutorial is a great introduction for anyone using YSlow for the first time, or for those who want to learn to use it better.
Using WebPagetest to test a private instance –- i.e. an application that isn’t publicly accessible -– is reasonably straightforward save for a few small differences. Andy Davies walks us through the process.
The Back End
We tend to focus on the front end (and for good reason), but sometimes it’s the back end that’s at least partially to blame. This is a good how-to piece from Smashing Magazine that explains how a database can slow down your site, and how to speed it back up again.
This is skimming just some of the cream off the top. I’m sure I’ve missed a few links, so feel free to suggest them in the comments and I’ll update this list. If you want to really dig deep, we have a massive Web Performance Hub on the Strangeloop site where we post every great link we find, and I definitely encourage you to check it out.