Dev vs. Prod: Optimizing Your Site Without Making Your Build Process Suck

Ian White (Neustar)
Web Performance Mission City B1
Please note: to attend, your registration must include Tutorials.
Average rating: **...
(2.46, 28 ratings)

NOTE: I will be putting the workshop examples on GitHub on Sunday, June 23. Please watch this repo for updates: Velocity 2012

There are plenty of suggestions about website optimizations you should be doing in order to provide the best possible experience for your users. Things like limiting file size, reducing requests, shrinking images, using a CDN, and keeping load times to a minimum. While plenty of literature is available to tell you why you should be making these optimizations, there is a fair bit of handwaving involved when it comes down to actually implementing them without making your build and deploy model totally suck.

Website optimization is always the first thing to go when something’s gotta give. And we do the same thing for every new project. It seems easier to prototype without worrying about optimization, and then tailor a custom solution when we do finally get around to it. But it doesn’t have to be this way. We can take optimization right out of the equation, get it for free, every time, by stepping back and looking at the root of the problem.

Watching Paint Dry
The thing I hear most often about why we avoid dealing with this stuff up front is that it slows down development. Optimization typically includes manual intervention in the worst case, and additional build steps in the best case. Both of these solutions slow down iteration and often produce domain-specific results. In the course of this presentation I will run through several suggestions from PageSpeed and YSlow, and provide concrete examples of how they can be implemented in any project without slowing down the code-compile-deploy loop. The takeaway will be an optimization philosophy you can apply to any language or environment.

Some of the topics covered:

Minification & Combination
Crunching files is a great, easy optimization to make, but it leaves you with code that is completely unreadable. The typical solution makes deployment and debugging a headache. Instead of complicating our build process by building everything up front, I’ll show how we can use open source tools to handle everything on-the-fly.

Compression
To really squeeze maximum performance out of a site, we want content to be gzipped, cached and ready to serve. With a little extra sauce we can create an environment that provides the best available option automatically.

Caching & Versioning
Another top recommendation is to cache everything in the browser as long as possible, as in forever, so that the client never has to ask for the same thing twice. We’ll go over some of the caveats involved in doing this, and with a bit of work, combine minification, compression and versioning all in one pass.

Image Optimization
A few services have cropped up offering to optimize your photos for you. We can get a big chunk of the benefit with zero additional spend by doing it ourselves.

CDN
At this point we should be getting a very respectable score in PageSpeed. But we want to hit top marks, and the only way to get there is by using a CDN. As it turns out, everything up to this point has been designed to work simply and elegantly with your favorite CDN provider.

DRY
Now that we’ve set this up once, the same implementation can be used for every project from here on out. It doesn’t matter if you decide to change programming languages, frameworks, template libraries, or use all of them together. The optimization layer has been abstracted from the code, keeping the development cycle agile and the build process simple.

Photo of Ian White

Ian White

Neustar

Ian White has been working with BrowserMob for the past two years, focused on cloud-based website monitoring and load testing. He came to Neustar when BrowserMob was acquired last year and continues to lead development of the product. Ian has been involved with consumer websites for more than six years, garnering real-world experience with site optimization, scaling and performance testing in the process.

Comments on this page are now closed.

Comments

Picture of Ian White
Ian White
06/26/2012 8:34am PDT

Hi Andrew,

Thanks for the feedback. My intention was to show that the language doesn’t matter, but it’s fair to say that switching languages between “don’t” -> “do” is confusing. I’ll post a full PHP example in the github repo

Andrew Feller
06/25/2012 2:40pm PDT

Interested in the minification portion of the talk. Initial example was a PHP Don’t Do followed up by Python Do, which was a little switcheroo. Perhaps keep examples all PHP or Python?

Sponsors

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Gloria Lombardo at glombardo@oreilly.com

Media Partner Opportunities

For media partnerships, contact mediapartners@ oreilly.com

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

Contact Us

View a complete list of Velocity contacts