Webpage Performance

I’ve been seriously obsessive about website performance lately. It’s one thing to make your site look nice but how it reacts to user interactions is equally important in the overall user experience. Some have even made arguments for a Performance Budget in the planning stages of development and I couldn’t agree more.

You don’t want to be that website that takes two minutes to load and causes mobile users to exceed their data plans. There are a ton of major and minor things we can do to increase the responsiveness (and I don’t mean squishiness) of our websites so they load faster. This post will outline a few of the techniques I used to speed this site up. There’s nothing special or tricky here, but I thought it would helpful to compile some examples together in a single post that should be easy and relevant for just about any site, small or large.

Compress Images

We’ve all been guilty of going a little image happy from time to time. It’s not our fault. I mean, pictures are worth thousands of words, so why wouldn’t we throw them into a web design, right?

Every image is a call to the server and every call to the server costs us milliseconds of load time. Load enough images, and we’re talking about lots of milliseconds of loading and many kilobytes of downloading.

It’s unreasonable to not use images on a site, but it is totally within reason to make those images as small as possible. If you’re using Photoshop, export images for web by pressing CMD+ALT+Shift+S. When it comes to format, I use JPEG by default, but go with PNG if high quality and transparency is required.

We can still make our images a little smaller by losslessly compressing them further. SmushIt is an online tool that does this and has a handy WordPress plugin, but I use CodeKit since I already have it open to compile my code (more on that next).

Compile and Minify Files

Another way we can reduce the number of calls being made to the server is to smash our CSS and Javascript files into one file for each and squash them to their smallest possible size.

If you’re using a preprocessor to write CSS, then you’re already compiling those files. I use CodeKit to watch my CSS and Javascript files. Each time I make a change, CodeKit automatically compiles all my code, then minifies it to the smallest size it can. This is nice because it allows me to write my code locally in as many smaller files as I like, then upload only a single file to the server. Fewer files at smaller sizes makes our sites slim as a supermodel.

Load Scripts Conditionally

Sometimes it makes sense to break our Javascript up into a few smaller files. This is particularly true for larger sites with massive scripts, but also for those where you want to target when and where it is used.

Telling our sites when to use certain Javascript scripts is known as conditional loading. YepNope.js is a great tool that allows conditional resource loading.

For those of us on WordPress, using wp_enqueue gives us the same benefit and support both CSS and JavaScript. To register your files, tailor this snippet to your needs and paste it into functions.php.

function yourtheme_scripts_styles() {
  global $wp_styles;

  // Register our scripts
  if( !is_admin()){
    // Array: script name, path to file, dependency, version, load in header (true) or footer (false)
    wp_register_script('script1', get_template_directory_uri() . '/path/to/file.js', array('jquery'), '1.0.0', true );
    wp_register_script('script2', get_template_directory_uri() . '/path/to/file.js', array('jquery'), '1.0.0', true );
    wp_register_script('script3', get_template_directory_uri() . '/path/to/file.js', array('jquery'), '1.0.0', true );
}
   
// Load our scripts
function yourtheme_conditional_script_loading() {
    // We're telling the site to only load script1 if the homepage is active
    if ( is_home() ) {
        wp_enqueue_script('script1');
    } 
}

// Load our styles
  wp_enqueue_style('global', get_template_directory_uri().'/path/to/styles.css', false ,'1.0', 'all' );

add_action( 'wp_enqueue_scripts', 'yourtheme_scripts_styles' );

Flash That Cache

This is where we get the most bang for our buck and probably the least used and understood resource in our performance optimization tool belt. I’m terrible at it but I’ve been playing around with it a bit and have seen massive improvements in the speed of my site even with the little I know.

Honestly, there isn’t much I add here. I use the W3 Total Cache plugin for my WordPress site because it seems to be a winner in tests like this. I had to toggle the settings until I felt I got the best return, but here is a primer to get you started on understanding what the all mean.

Even though it’s the browser that caches resources, the server can influence it and tools like W3 Total Cache help, as Public Enemy would say, fight the power!

Use a CDN

If you’re like most people, then your site is hosted on a cloud server which means it shares space with lots of other sites. These are great because they’re so stinking affordable but they suck because they often serve our content so freaking slow.

That’s where content delivery networks come to the rescue. They allow you to upload your media (images and such) to their server and send them to the browser at speeds much faster than the common hosting plan. Amazon S3 is the one I see most commonly used. It’s cheaper than dirt (fractions of a penny per requested file) and reliable. All the things we’ve come to love Amazon for, right? I’ve even heard of people hosting their entire site there, which I guess you could do if you really wanted.

Conclusion

These are just a few ways to maximize the performance of a site. Each one is worthy of its own post but, honestly, they’ve all been written about a gajillion times, so hopefully this is a helpful compilation of those ideas.

If nothing else, make sure you’re testing your site’s performance with tools like Web Page Test and Google PageSpeed Insights. Serving the right resources to the right device at the right time is the holy grail of web optimization but even minor improvements like the ones listed here will help create a leaner, speedier site.