So what do we mean by “fast”?We do need to take a minute to talk about what kind of speed I’m referring to. In short, all the speed. More specifically, three kinds of speed:
1) Loading timeThis would be the time it takes for all of the information to download to your users’ devices. This is affected primarily by the speed of the internet connection, and the actual size of the files. You can’t do much about the connection, but you can do a lot about file size.
2) Processing timeAfter your files are downloaded, they have to be processed and rendered by the browser. All of that processing and rendering is affected by how well your code was written, and everything else going on on the user’s phone, tablet, or laptop/desktop. The only thing you can control is your own code, but that makes a big difference.
3) Perceived website speed, or perceived performanceAnd then there’s the psychological factor. Fast websites can look and feel like they’re going slow. Slow websites can be made to feel a tiny bit faster with the judicial application of some tricks. This part is all about studying your user, and letting them know what’s going on when they interact with your website or app. You need to pay attention to all three aspects of website speed to make your site feel like it’s going fast. And the bigger the site is, the more there is to optimize. Let’s get started, then.
Unused codeCSS that sits in your stylesheet and doesn’t do anything makes your files unnecessarily bigger. Okay, so this one might seem like a no-brainer; but it still happens to the best of us. You take out some content and forget to delete the old CSS. You change a container element’s class or ID, and forget to delete the old CSS. You write some CSS, realize there's a better way, and forget... you get it. Throw multiple front-end developers into the mix, and you’ve got a recipe for an unwieldy, unmanageable stylesheet, or collection of them, if you’re not careful. Unused code slows down page loading by virtue of its very existence as data. It slows down development because it can confuse people reading the stylesheet. It can also mean slower rendering times, because it’s just more CSS for the browser to look through while it matches all of the CSS to its appropriate HTML elements. Whether you review and delete all old CSS manually, use automated tools to help you find unused CSS selectors, or just delete things at random until something breaks (don’t do that), you’ve got to take that old code out.
CSS selectorsSpeaking of how the browser matches the CSS with the appropriate HTML, it’s time to look at CSS selectors. Much has been written about which selectors render the fastest, which ones are slow, whether you should bother with the slow ones at all, and so on. The problem is that much of this information is old. Back in the year 2000, Dave Hyatt (a developer working on Safari, and active member of the W3C’s CSS Working Group) wrote this:
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance.
If you’ll take a look at the document that quote came from, you’ll see that he was talking about selectors like :first-child and other pseudo-selectors. And he was right. He still is; but in the last fifteen years, computers have advanced a little bit. Nowadays, the extra effort required of the computer to render that CSS shouldn’t be noticeable by anyone except those using the cheapest of cheap mobile devices. That is a concern in itself, so really, it will depend on the project at hand, your target demographics, and so on. Simply put, use your best judgment, and perhaps don’t go overboard on the pseudo-selectors. Otherwise, unless your pages reach book-length, the selectors you use should have very little effect on your site’s performance. Still, take a look at the document linked above and get familiar with what renders the fastest and what doesn’t. You may still find the information useful. You can also see this article from CSS-Tricks for a slightly more recent take on the subject.
Resource-heavy propertiesOf course, there are also CSS properties that take longer to render than others. The classic properties like width, height, and color are still the fastest. The ones that tend to take a little longer (and may vary from browser to browser) tend to be CSS3 properties like box-shadow. The process of adding a drop shadow to an element is complex, as far as rendering web pages is concerned. What’s interesting to note is that, as pointed out on HTML5 Rocks, the processing power required can vary greatly depending on the specific dimensions of the drop shadow. This article indicates that the same holds true for other properties such as border-radius and transform. Again, these would have little effect on the rendering of a page on your average desktop or laptop. Mobile devices might take a bigger hit, though, and the experience could suffer as a result. Everyone hates choppy scrolling. Still, that has to be weighed against the cost of using images to produce the same effects. Anyone remember the things we did to get rounded corners, once upon a time? Just don’t go overboard, and your styles should render fast enough.
CSS animationsNow we get into other territory. CSS animations can be blazingly fast, or they can slow down the browser to the point that gaming rigs have trouble keeping up. This is partially because not all animation is rendered equally. Some of the heavy lifting is done by the hardware, whereas other kinds of animation have to be rendered entirely by the browser’s own functions. This is especially costly on mobile devices. In another article on HTML5 Rocks, the CSS properties that are the fastest to animate are position, scale, rotation, and opacity. Check out the article for a more complete overview of what can be animated while keeping the “cost” low.
Use CSS preprocessorsHere’s where I offer you the most practical advice that I, the author, can give you. Use CSS preprocessors like LESS, SASS, and Stylus. Sure, if you use them wrong, you can generate larger stylesheets than you intended; but the potential benefits are worth it. For example, if you want to reduce the number of HTTP requests made to the server (always a good idea), include all resets, frameworks, into one LESS/SASS file. When it compiles, it will all be in a single stylesheet. Plus, most preprocessors offer the option to output all CSS in minified form. This way, you can use as many different files as you need for code organization purposes, without unduly affecting file size.
Images & compressionWhen you take video out of the equation, the biggest thing on any given content-driven site is the images. Images tend to be big, bulky, and slow as hell when they’re not optimized. Now, with the proliferation of retina screens forcing us to use bigger images if we want things to look good on every device, the problem isn’t going to get any easier to solve. And worse, it’s an issue that’s easy to forget about until you end up spending more than intended on bandwidth. When every byte counts, we can’t afford to forget. The good news is that this isn’t a new problem by any means. Why is that good? It means that there are tons of potential solutions to pick from, and you can use more than one of them at a time. In fact, that’s generally a good idea. So until ISPs and hosting companies start giving us all unlimited free bandwidth (don’t hold your breath), here are some things you can do:
Use responsive imagesNow, returning to those aforementioned retina screens, what do we do about them? How do we save on bandwidth there? This is where we turn to the element and the image-set property. They’re relatively new, and not fully supported, but they do allow browsers to pick the appropriate image size for the device that’s being used. So while this won’t save you any bandwidth for someone viewing your site in their iMac, it’s not as big of a deal because they’ve most likely got broadband. Someone on their phone, meanwhile, gets a smaller version of the same image, keeping them from waiting too long.
Pick the right format for the jobMany image size woes get fixed once you learn which image format to use in any given situation. I could go on about the specific image formats, how the compression works, and so on, but you really only need to remember a couple of things:
- For complex graphics, such as photos, use the JPEG format.
- For simpler graphics that use few colors, like icons and logos, use SVG and/or PNG.
CompressionThere are two kinds of compression that you can use on your images. First, we have lossy compression. This is used on lossy formats like JPEG. It allows you to compress any image about as much as you like with the understanding that the quality will get worse and worse and worse. Things will get pixelated and lose definition. Lossless compression is used on formats like PNG, and can reduce their file size to some extent. However, it has its limits. There always comes a point at which it is impossible to make an image smaller without losing quality. If you have Photoshop or a similarly advanced image editor, it’s often best to use those to compress your images so that you can see what the output will look like when you’re done. (Automatic tools, especially online tools, in my experience, tend to compress things maybe a little too far. Nevertheless, I’ll be listing the best compression tools that I’ve found in the links section below.)
Implement image compression and resizing in your CMSIf you’re using a CMS like WordPress, it will automatically resize images that are too large. It’s also easy to find plugins that will automatically compress them for you. Mind you, I only recommend automatic compression in cases where you know you’re going to be uploading lots, and lots of images of similar quality for the same purpose. A photo blog is one example. If you’re running a site where users are uploading their own images, well… automatic resizing and compression is an absolute must, and that’s why every social network does it.
General tipsHere are a couple bits of advice that didn’t fit in any of the three categories above.
Minify everything“Minifying” your code just means that all extra spaces and line breaks get taken out. This can reduce file size rather significantly. It might sound like a lot of work, but there are tools out there for minifying CSS and JS automatically, and keeping the minified files separate for your source files, for fairly obvious reasons. As previously mentioned, various CSS preprocessors can output all of your code in minified form in the first place.
Compress everythingProvided your server is set up right, all of your code can be sent to the browser in a compressed format. Text files compress very well, reducing the size of the files sent considerably. Now, your server does have to take an instant or two to compress the files it sends, and the user’s browser has to decompress them, but this is usually worth the bandwidth trade-off. For a full explanation of how this works, see How To Optimize Your Site With GZIP Compression.
Cache your siteBrowser caching happens automatically to some extent thanks to modern browsers. A browser goes to a site, and temporarily stores the images and other information it finds there. That way, if the same user returns within a given period of time, the browser doesn’t have to ask for the same images all over again. It just loads the ones it already has, and requests any new images that it might not have. There is, however, something you can do to tell browsers what to cache and for how long, as seen in this guide.
Server cachingAnd then there’s server caching. Server caching basically just takes your site and puts a sort of ”copy” of it between your users and your actual server. Why would you bother? Well, it’s especially useful for people who are using content management systems on a large scale. Having your users access a temporary copy of your site instead of the actual thing reduces the number of calls to your database. Information gets displayed and loaded faster because it doesn’t have to be re-processed every time. Depending on how it’s set up, server caching can also reduce bandwidth costs in general. Basically, the bigger your site is, the more reason you have to look into caching it.
LinksAnd now, the section you’ve all been waiting for: the list of links! We’ve got tutorials and guides, mostly, and a couple of image compression tools to recommend.
From the Yahoo Developer NetworkYahoo! may not be as big a deal as it once was, but their developer network has a lot of good stuff on it. This includes their Best Practices for Speeding Up Your Website, which covers some of the basic things you can do. Some of it covers the same ground as this article, but there’s more besides. In the introduction, I mentioned perceived site speed, also known as perceived perfomance. If you’d like to read more about that, check out A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App.
Effeckt.cssEffeckt.css is a set of CSS-based animations that are designed to render fast, no matter what platform the user is on.
Optimize CSS deliveryThis is a guide to making sure that your CSS gets downloaded and processed as fast as possible by the browser.
5 Tips for More Efficient jQuery SelectorsAnd sometimes, you probably will end up using jQuery. If you’re going to do that, at least you should know how to write jQuery selectors that won’t slow you down. And here’s where Sitepoint has you covered.
A Beginner’s Guide to Image File FormatsRead this for more information about image formats on the web. The information is a bit old, but still valid, and good to know.
Image optimizationThis is a more technical guide to image optimization provided by the Google Developer Network.
Compressor.ioCompressor.io is one of the more impressive tools that I have personally encountered. It’s an online app, so you’ll have to upload any files that you want to compress, but it can do wonders for JPGs. It offers both lossy and lossless compression options, each with pretty amazing results, and it can do batch processing as well.
TrimageTrimage specializes in lossless compression, but it can be installed on your own computer, on Windows, Mac, or Linux. Since it installs to your computer (and yes, comes with various command line options as well as a GUI), it can easily be run automatically as part of a development workflow.
ConclusionAs always, there’s a lot more to learn. But armed with the information we’ve provided, and the resources we’ve linked to, you’ll be on your way to building sites and apps that don’t annoy the Hell out of your users. And that’s the first step towards impressing them.
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.