Web Performance 101: An opinionated guide to the 22 links every developer should read

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.

The Manifesto

The Vanilla Web Diet

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.

The Essentials

If I were teaching a course about performance, these would be required reading/viewing on week one.

Steve Souders’s 14 Rules for Faster-Loading Web Sites

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.

Faster Websites: Crash course on web performance

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.

The Basics

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.

Waterfalls 101: How to read a waterfall chart

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.)

Let’s Do Simple Stuff to Make Our Websites Faster

Four easy things you can do to make your website faster.

Slow website? Five ways to speed it up

Five more ways to speed up your pages.

Mobile

If you want to still have a job in performance in five years, I suggest you bone up on mobile.

15 things you can (and should) do to make your site faster for mobile users

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.

Mobile HTML5

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.

Creating a Mobile-First Responsive Web Design

Really, you should just read pretty much everything Brad Frost writes about RWD. This is a good place to start.

Responsive Responsive Design

You may have heard that responsive design means poor performance. Tim Kadlec discusses why this doesn’t need to be true.

Images

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.

Optimizing Web Graphics

Good introduction to image optimization from the folks at the Google Dev Blog.

Progressive jpegs: A new best practice

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

Third-party scripts are a huge potential point of failure. You need to know how to mitigate this.

Has your site’s third-party content gone rogue? Here’s how to regain control.

This post will help you understand the third-party problem and how to get a handle on it.

Social button BFFs

Good tutorial from Stoyan Stefanov explaining how to make your social buttons load asynchronously.

Complete asynchronous ad loading using DFP and LABjs

You can’t optimize the ads that appear on your site, but you can at least ensure they’re not blocking the rest of the page. Sajal Kayan explains how to use DFP’s iframe tagging, combined with LABjs and little bit of JavaScript hackery, to make any ad load asynchronously with negligible impact on rest of the pageload.

Security

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.

5 easy tips to accelerate SSL

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 Performance Case Study

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.

Fonts

Web Font Performance: Weighing @font-face Options and Alternatives

Great collection of tips for making sure your web fonts aren’t slowing down your pages.

Tools

WebPerfDays: Performance Tools

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.

Improving site performance with YSlow

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.

Configuring an ‘all-in-one’ WebPageTest Private Instance

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

Speeding Up Your Website’s Database

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.

Read more

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.

Related posts: