Derek Conjar

Building Websites for Fun & Profit

Secrets of Site Speed Optimization: How I Joined the 1%

On average, this site now loads in under half a second from most places in the world. Your site can be just as fast. Here’s how I did it.

Site speed matters. A lot. If you increase your website’s page load speed by 50%, 100%, or (in my case) 640%, good things will happen:

There are many tried-and-true techniques for improving website performance.

Your styles and javascripts can be combined into one CSS file and one JavaScript file, reducing the number of requests made to the server.

Those two files can then be minified — crammed down into big blobs of CSS and JavaScript, with all the spaces and newlines and comments removed.

You can take it a step further and compress the two files. Turn your styles.min.css file into a styles.min.css.gz file. This is equivalent to reducing the size of a large file (or collection of files) by turning it into a zip archive.

Images, which are often the largest assets on a webpage, can be substantially reduced in size by using a decent image optimization utility. Imageoptim and JPEGmini come to mind.

Choosing appropriate file types, like JPEG for photos and PNG for transparency, can also make a big difference.

A better way to deliver content

To put the icing on the cake, you can take those ruthlessly-optimized static files — your styles, javascripts and images — and serve them through a content delivery network, or CDN.

CDNs put your static files on servers all over the world.

When old Harriet Mandelbaum loads your webpage in the Netherlands, her request gets routed to a server in the Netherlands.

The files are much closer to her, so they load much faster!

When Albert Augustyniak goes to your website from his laptop in a New York coffee shop, he has the same pleasant experience that Ms. Mandelbaum has in the Netherlands.

It loads just as fast because his browser is loading files from a server in New York.

Location, location, location.

How CDNs work

This may all seem complicated, and it is. But it’s trivially easy to set up when you use the right tools.

It’s easy because we’re dealing with static assets, like CSS, JavaScript, and images. When we start dealing with dynamic content, well…

This is where it really gets complicated

Every time a webpage loads, two things happen:

  1. The client sends a request to the server
  2. The server sends static content to the client

When the client requests a static file, the server’s job is very easy. It simply sends the static file to the client.

But sometimes the client requests something dynamic. “Dynamic” means that the static content being requested doesn’t exist. Code needs to be executed on the server to create the static file and send it back to the client.

WordPress, the content management system that powers 18.9% of the internet, is dynamic.

Here’s what happens when Harriet Mandelbaum tries to load your WordPress site:

  • Ms. Mandelbaum goes to your URL in her browser
  • This sends a GET request to your server
  • The server loads your index.php file
  • Your index.php file loads your wp-blog-header.php file
  • Your wp-blog-header.php loads your wp-config.php file
  • Your wp-config.php file loads your wp-settings.php file
  • Your wp-settings.php file loads 17 files from your wp-includes directory, along with your plugins, which may contain tens or hundreds of additional PHP files

Your server has to do all that work just to send some HTML code to Harriet’s web browser! Oh, and I forgot to mention that many of those PHP files are querying a database.

Fighting complicated with more complicated

Dynamic content is slow. But there’s a way to make it much, much faster.

It’s called caching.

Caching is the process of saving dynamic webpages to your server as static HTML files.

Instead of loading all those PHP files listed above and eventually rendering a webpage, your server simply pulls the HTML of the page from your cache.

You can enable caching in WordPress by installing the W3 Total Cache Plugin. It supports CDN integration, asset minification, page caching, database caching, and various other speed-boosters.

But even with all the caching in the world, you’ll have a tough time competing with the raw speed of truly static files. Your server still needs to do the work of routing requests to the appropriate cached page.

And that’s not the only caveat…

WordPress is a hugely complex piece of software, and caching makes it more so.

If you’ve ever used W3 Total Cache, you know what I’m talking about.

Hundreds of options, and it’s never clear how they’ll impact your site speed. It depends on your server configuration. And your choice of CDN. And your database object caching strategy.

And about a million other things.

Rockets are easier to configure than caching plugins. And they say rocket science is hard.

“There are only two hard things in Computer Science: cache invalidation and naming things.” — Phil Karlton

The problem with complexity

Complexity is a killer. Complex systems tend to be less secure, harder to understand, and more prone to breakage than simpler systems.

I know all about breakage. This blog was once powered by WordPress. And cached by W3 Total Cache. Then one day, it broke.

The server was running smooth, but the site was down. I couldn’t even access the admin panel. Not fun.

I fixed it by removing all traces of W3 Total Cache.

This was just one of many occasions in which I’ve had to fix “broken” CMS-powered websites. And it’s all because of complexity.

Rethinking content management

When we use complex content management systems and web frameworks, we’re willing to accept the complexity. We assume that the benefits outweigh the costs.

For a long time, they did. I graduated from building websites with static HTML in 2005. Content management systems were complex. But they were better than the alternative. I moved on, just like everyone else.

Content management systems offered many advantages:

  • Content management. Non-technical people could manage web content. No need to learn HTML (until the WYSIWYG editor does something unexpected).
  • Less code duplication. Instead of duplicating your header and footer HTML code in every file, you create templates.
  • A community. Big CMS systems led to the rise of “CMS developers.” When your WordPress site breaks, it’s not hard to find someone who can fix it.
  • A standardized way of doing things. CMS developers come up with better techniques for getting things done, and the entire community benefits.
  • Code sharing. Many CMS systems are plug-and-play. You can extend them with plugins. No need to reinvent the wheel.

For eight years, I built websites with WordPress and Joomla. And I didn’t look back. Until now.

Static HTML is the future (and the past)

I see two major trends happening in web development right now:

  1. The rising popularity of JavaScript
  2. The rising popularity of static HTML

Everyone’s talking about the first trend. But the second trend has gone under the radar outside of developer circles.

It all started in 2008, when GitHub-cofounder Tom Preston-Werner released Jekyll.

Jekyll is a simple, blog-aware static site generator. It takes template files, Markdown files and custom data and transforms them into a speedy static site.

No caching. No backend. No security vulnerabilities. No complexity.

Just static HTML.

Since Jekyll entered the scene, over eighty static site generators have been released. Journo, Ruhoh, Second Crack, Kerouac, Pelican, Nanoc…

And my personal favorite, Middleman.

Anything dynamic can do, static can do better

Middleman is written in Ruby. It takes the best parts of Rails and Padrino and combines them into a simple yet powerful system for building static websites.

It provides all the benefits of a CMS, with none of the bloat:

  • Content management. I write my blog posts in Markdown. If you need a WYSIWYG editor, Prose.io is a great one. It integrates with GitHub, so collaborating with multiple authors is painless.
  • Less code duplication. Middleman ships with Tilt and the Rails Asset Pipeline. Developing for Middleman is a joy. Once you’ve built your first template, you’ll dread returning to WordPress or Drupal.
  • A community. Middleman is the only static site generator I know of that has a community forum.
  • A standardized way of doing things. Rails developers feel right at home with Middleman. And Ruby on Rails is all about convention over configuration!
  • Code sharing. Middleman can be extended with plugins.

Middleman is also really good at site speed optimization:

  • It makes it easy to combine all your styles and JavaScripts into single CSS and JS files.
  • It automatically minifies your CSS and JavaScript files.
  • There are extensions for compressing assets, minifying HTML, and reducing the size of images
  • You can configure it to automatically deploy to Amazon CloudFront whenever you type middleman build in your terminal. This means that you can serve your entire website from a CDN!

When I rebuilt this blog for the 80-millionth time, I decided to use Middleman. It did not let me down.

The results speak for themselves

According to Pingdom, this blog loads faster than 99% of websites:

My blog loads faster than 99% of websites

According to Pingdom’s famous website speed test, this site is in the 1%.

That was tested from New York, but it’s giving me the same results when I test it from Texas and the Netherlands. It even loads quickly for old Harriet Mandelbaum!

How to join the 1%

Here’s a quick rundown of what I did to make my blog blazing fast:

  • I removed all the CSS and JavaScript code that wasn’t being used (most of Twitter Bootstrap)
  • I combined my nine JavaScript files and 38 SCSS files into one JavaScript file and one CSS file using Sprockets and Sass.
  • I configured Middleman to minify and compress those files.
  • I configured Middleman to minify and compress my HTML files.
  • I set up automatic image optimization with the middleman-imageoptim extension.
  • I lazy-load images, Disqus comments, and Google Custom Search using jQuery.
  • I used an icon font to create my own social sharing buttons, instead of loading assets from Twitter, Facebook, and Google+.
  • I configured the site to deploy to Amazon CloudFront when when I type middleman build using the middleman-s3_sync extension.

If you want to see exactly how I did all that, you can inspect my code on GitHub.

I’m working on an e-book that explains in detail how to optimize your site speed with Middleman.

The book will also cover the nitty-gritty of how to build fast and profitable static sites:

  • How to optimize your static site for search engines
  • How to add comments and social sharing buttons
  • How to make it easy for the non-technical to manage content
  • How to use the Asset Pipeline, Sass and Bootstrap to rapidly build ambitious websites
  • Common mistakes people make when setting up Amazon Cloudfront, and how to avoid them

If you’re interested, sign up for my mailing list below. I’ll send you an email update when the e-book is finished.

I’ll also make sure that you get a 25% discount just for signing up early.

My Setup: Tools I Use to Build Stuff

“My name is Tom Preston-Werner. I cofounded GitHub. I like tater tots and beer.”

Tom Preston Werner, The Setup

I’m a big fan of The Setup, the popular blog where well-known nerds get interviewed about the hardware and software they use to get stuff done.

I’m not famous enough yet to be considered for inclusion, so I interviewed myself. However, the interview with myself did not go well, so I wrote this fake interview instead.

Who are you, and what do you do?

I’m Derek Conjar. I’ve been building websites since I was 11 years old. Or 12. Either way, I was a lesser human being.

I spend lots of time coding HTML, CSS, JavaScipt and Ruby. This website was built with a Ruby-based static site generator called Middleman. You can insult my code on GitHub. I’ve also worked with PHP and WordPress extensively, but I’m trying to move past that. Those were dark days.

What hardware do you use?

I own two MacBooks. One is a six-year-old white MacBook. I haven’t used it in years and am too lazy to list it on eBay.

The other one is an early-2011 15" MacBook Pro with a 1680x1050 resolution, 16 GB of RAM and a Crucial m4 SSD. That thing flies. I can run several VMs at once with no lag. I love it more than my children.

I don’t actually have children.

I own two dual monitors. I don’t use them. I prefer to work without them because I can freely switch between sitting, standing and walking.

Yes, I said walking. This is my battlestation:

My battlestation

My LifeSpan TR800-DT3 Standing Desk Treadmill

I don’t own much physical stuff, and that includes hardware. I do own an iPad but never charge it. I sold my Kindle a couple months after I bought it, having remembered that my iPhone can also function as a Kindle.

Oh, and I love my iPhone 4s! Almost forgot about that. People keep nagging me to give Android a whirl, but I’m happy with my iPhone. Although I will confess that the iOS 7 update was pretty bad.

And what software?

Sublime Text is my text editor of choice. I like vim in theory and use it a bit via ssh, but who has the patience to learn the hundreds of keybindings necessary to actually be productive with it? Maybe I’m not mature enough. Maybe I’ll be a world-changing emacs user someday. We’ll see.

Chrome is my go-to web browser. The developer tools have saved my life more than a few times. And Chrome’s vim emulator extension, Vimium, empowers you to surf the web without touching the mouse. No hands! Maybe I should learn more vim…

In speaking of keyboard shortcuts… If you have a Mac, you need Alfred PowerPack. Seriously. I use it to quickly retrieve files, launch applications, execute terminal commands, flush my DNS cache, view my clipboard history, and go to the bathroom. It does everything with just a few keystrokes. Well, except the bathroom part.

If you have as many hundreds of online accounts as I, you need a password manager. 1Password has never let me down. It’s got extensions for every browser and makes managing hundreds of long pseudo-random passwords effortless. It’s awesome, but not quite as badass as generating passwords with dice.

Here are some other softwares that help me get things done:

  • iTerm for unix command line h4xing
  • iTunes and Spotify for getting in the zone
  • Photoshop for manipulating graphics
  • Middleman for compiling static websites
  • Ruby on Rails for building backend-heavy web apps
  • jQuery for making the DOM less painful
  • Evernote for clipping webpages for future reference
  • GitHub for being extremely useful in general

What would be your dream setup?

I think we should bring mainframes back. Force me to learn some actual computer science.

I’ve been trying to figure out what to do with my living room. I was considering building a laboratory, but a mainframe would be cooler.

That’s enough about me and my setup. What’s your setup?