Don’t be a jerk. Optimize your site.

After going back to some old projects for maintenance, I realized just how bad my habits used to be for site speed optimization.

I didn’t commit any one great sin, but there are several key things that I do now that have clear results, as I discovered the other day when I took just a few steps. Your reaction may be ‘duh’, but I want to make sure that we’re all aware of these few points that can make a huge difference. Especially with so much mobile traffic, I would consider these to be critical steps to take for developers.

These will help regardless of platform, and doesn’t even touch on server configuration. That is a whole other realm of crazy. But these are steps that developers can execute with minimal time and effort.

  1. Reference the HTML5 Boilerplate .htaccess and use the whole thing or at least use parts of it. This will enable gzipping and serve your file types correctly.
  2. Concatenate and minify all your CSS. This may be obvious, but limiting your server requests and making them as small as possible needs to be a priority.
  3. Concatenate and minify all your JavaScript. Just like your CSS, this needs to be loaded in as few requests and in the smallest file size possible. Stop loading all twelve of your plugins with twelve separate requests.
  4. Optimize your images. There are plenty of tools out there for both manually and automatically optimizing all the images used in your site. For Mac users, there’s a free one called ImageOptim.
  5. Use a cacheing plugin, like W3 Total Cache for WordPress or CE Cache for ExpressionEngine. There are plenty of options for other platforms as well.

GUIs like CodeKit and task managers like Grunt and Gulp can accomplish points 2 through 4. They thrive at automating these as you save and update your files.

These are five steps that any capable front-end developer should be able to implement with minimal effort. Make it part of your workflow.