How We Got DynDNS.com To Load Faster And How You Can Learn From It

We’re focused on engineering excellence here at Dyn and are routinely brainstorming ways to continue to improve user experience. As attendees of the Velocity Conference and notorious nitpickers of page load time, we were proud of how fast DynDNS.com loaded…but knew we could do even better.

Why care about load times? Page speed has an impact on sales and conversions and is a big part of the user experience. I dug through our front-end files, cleaning and optimizing our site until we’d sliced our page load time in half!

Here are some tips on how to make some major improvements to your site’s speed:

Do the first big pass at cleaning CSS files

What it did for us:

• Homepage stylesheet: 41.94% file size improvement
• IE-specific stylesheets: 92.11% file size improvement
• Main stylesheet: 11% file size improvement
• Other high-traffic pages: 12.9% file size improvement

By removing unused CSS (I like the Dust Me Selectors plugin for Firefox combined with grep to see what’s no longer being used) and reorganizing the file to combine similar style declarations, I was able to clean up the bulk of the files.

Look for:

• unused styles
• opportunities to condense/combine styles
• inefficient selectors
• opportunities to make sprites in the next step
• unnecessary semicolons, spaces, shortcodes and leading zeros (it’s easy to find and replace for these)
• messy HTML markup – clean up the HTML to create more efficient CSS
• patterns in styles – gzip likes to see patterns, so reorganize styles near each other that have similar strings

A lot of the IE styles were either no longer used or I knew how to clean them up in the main stylesheet. It was worth moving the short list of remaining styles to be embedded in the header so we could eliminate the call to the CSS file.

I then merged the home page CSS styles into the main CSS file, which yielded a 4.94% size improvement, and brought it down to only one CSS call!

Right before I finished, I passed the file through CSS Compressor, which caught any minification opportunities I didn’t. CSS Compressor doesn’t play nice with CSS3 styles and a few other things, so I don’t use the option to export their code, but it gives you line numbers of things to change. Super helpful!

Clean up images

What it did for us:

• 40% improvement in image files’ size
• 85.7% improvement in image files’ calls

I love sprites. I created two types of sprites using the template’s images: one that is intended to repeat (and is 1px wide), and one that is used for no-repeat backgrounds. I created these for the homepage styles and the main styles.

I created the sprites using Photoshop and then exported them for the web. The sprites with transparency I used PNG-8 and limited the number of colors to just those that I needed, or I used PNG-24 if I needed alpha transparency. When I don’t need transparency, I export as JPG and test the quality scale to see how high it should be before I see noticeable file quality decline. I then run every image through ImageOptim, which compresses them further (and does it really well – especially PNGs!) before using them on the site.

Create a style guide and normalize your colors

What it did for us:

• Additional 6% CSS file size improvement

We use a lot of golden yellows and deep grays on DynDNS.com, and I wanted to make them consistent across the site. I created a style guide that details which hexadecimal code to use when you want a bold yellow, light yellow, red warning message, green “changed” message, etc.

I also went through to find the most-used shades of gray; finding them helped determine the only gray hex codes we should use on the site and how they should be used (#aaa should be used for disabled text and borders; #eee can be used as a background, etc.). I went through the CSS and updated it to only use the colors in the style guide; this also helped condense a lot of elements that now use the same styles.

Combine JS files into one

What it did for us:

• Went from three Javascript file calls to one!

Though combining our Javascript files into one file didn’t save us any file size, it did reduce three calls to files down to just one. Be careful as you combine them to make sure you keep their original loading order, and test away! Combining the files will help save round trips to request the file and receive a response over the network.

Create new subdomain to serve CSS and JS

Serving CSS and JS files through a different subdomain will allow your browser to retrieve them at the same time it gets your markup (except for, unfortunately, IE). We also put all of our static files on a separate subdomain to avoid cookies being transferred with each request.

Results

That’s less than half the original page load time!