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.
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
Load Scripts Conditionally
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.
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.