On improving your site's speed

I regularly get requests from business owners or entrepreneurs about checking out their new website or webshop to give them feedback. Either on the user experience or just to get my perspective as a developer.

I absolutely love this and you should keep sending me these requests. But one "thing" that keeps recurring is that even if your sites look beautiful, they're quite slow to load. Especially on mobile devices.

And that's a big problem to your business because slow sites are ranked lower by Google and they get abandoned more by potential customers. Guess they don't like waiting (surprise!).

In other words, if you ignore learning about web performance as a business owner with a digital presence, you're unnecessarily gambling with your business.

You'll find many statistics out there, but most revolve around keeping your site's loading speed below 3 seconds, preferably below 2 seconds if you want to avoid losing business. Radware did a fine summary of the stats here.

In short, I would be a little freaked out if I entered my local deli tomorrow only to find it completely empty and suddenly, after 10 seconds, the entire interior, cashier, and products jumped into appearance.

It is totally possible to get your site to load fast(er). There are tons of techniques out there, some involving a lot of nerds and a lot of hours. But I want to focus on the quick wins that you can achieve right now, by yourself.

Note: I've also added a more detailed, nerdy bonus section if or when you want to dive deeper into how you can check the performance of your site.

Quick wins and the tools to get 'em

As I said, there are many things you can do, but I want to focus on some simple steps that you can take right now. These involve analyzing problems, optimizing your images, only loading images that are necessary, bundling code together, caching, and thinking critically about the content you put on your pages.

Web Performance Checkers

First off, you need to get a better picture of the current state that your site is in, performance-wise. An easy way to do this is by using web performance checkers. I usually use a mix of the following:

  1. GTMetrix. It combines both Google PageSpeed and something called YSlow into the same report and also allows me to simulate a slow connection from many places in the world. Bear in mind that for a non-nerd, the report details can be overwhelming.

  2. Google PageSpeed Insights. A simpler report than GTMetrix. Just don't get hung up on achieving a 100/100 score, it's usually a waste of time. Use it to get an overview of what's critical and to see how well your site fares on mobile devices.

  3. Pingdom Tools. Gives a great, visual overview of a site's performance and allows you to sort the list of files served after "File Size". This makes it easy to see which files, images especially, that are too large.

Important: Don't panic if either checker gives you a very poor rating. Even modern, professional websites by big companies can get a lukewarm report. Your focus should be on the biggest, most critical wins that move your site from an F to a C (or from red to yellow), not from F to A+.

Image Optimization

One of the quickest wins you can get is to reduce the size of the images you use on your site. Plain and simple. There is no need to upload huge, 6-megabyte images, so applying simple optimizations to your images will do wonders quickly.

To optimize your images, try using services such as Kraken, TinyPNG or ImageOptimizer first to get the file size down. Remember to consider the dimensions of the image as well. Do you really need that header image to be 6000 pixels wide and 4000 pixels high?

A note on dimensions: I sometimes see small profile images or graphics that are no more than 500 pixels in width, but when you check the actual image they use they're several thousand pixels bigger than what's necessary. Even if you optimize your images, the best thing you can do is to crop or scale down your images to the actual size you need and then optimize them.

If your site runs on Wordpress, I recommend that you install an image optimization plugin such as WP Smush or Kraken for Wordpress. They automate the image optimization process for you when you upload images, saving you time.

Lazy Loading

This one is great. Why it's usually reserved for us nerds, I honestly don't know. The idea behind lazy loading isn't even that complicated, really. It can be, but when it comes to images, it's pretty straightforward.

When a potential customer arrives at your site, their browser begins to load all the stuff necessary to display whatever is on the current page. And yes, that means all the many images that first appears AFTER the customer scrolls. That's a bit silly.

So to avoid loading tons of images (or other things, but let's stick to images) that aren't even visible to the customer yet, we only load these images when they actually need them. In practice, this means that as the user scrolls down and gets close to a new image, that's when we ask the browser to fetch the image.

If your site is a bit heavy on the images, because it might be quite visual, lazy loading can be a huge win for both your customer and the site.

Luckily there are many solutions out there that handle lazy loading in all shapes and forms. I deal with Wordpress sites, so I usually install a3 Lazy Load unless I'm doing something very custom. This is a fire-and-forget type of plugin. Install it, activate it and let it handle all the lazy loading for you.

For any other CMS, some kind developer has most likely developed a lazy loading plugin for you to install. Just search for it on Google and try it out by checking your site in a website performance checker after activation.

Caching

Your images are optimized and they're lazy loaded beautifully. I'm proud. Your next step will be to use something called a cache. The concept of caching can be complex and involve a lot of moving parts, but leveraging caching can speed up your site dramatically. I won't dwell on the technical details, but if you're using Wordpress, I recommend WP Super Cache or W3 Total Cache.

For any other CMS out there worth its salt there will be a similar plugin that you can install and activate.

Concatenation and Minification

This may be a bit too advanced, but I'll add this tip anyway. A bunch of different ingredients is needed to make your website, but often it all boils down to HTML (the page skeleton), CSS (style, look and feel) and JavaScript (interactive stuff, logic) playing together in unity.

A common performance tip is to bundle as many CSS and JavaScript files together into as few ".min.css" and ".min.js" files as possible. Only one for each, preferably. CMS themes and plugins are notorious for spitting out a lot of necessary CSS and JavasScript files that aren't bundled (concatenated) or slimmed down (minified).

If you're using Wordpress, I recommend that you install a plugin that handles this bundling, at least in some way. There are many plugins out there, but I usually prefer Autoptimize.

Important: While concatenation and minification are very important optimizations, I'd consult a nerd for this unless you really feel up to the task.

Critical Thinking

Remember, you don't need to optimize something that doesn't exist. The single important thing you can do to improve your site's performance is to think critically about what you put on it in the first place.

Try going through your pages and think "Is this need-to-know or nice-to-know?" or "Do we really need this? Do our visitors really use this information?" Data is your best ally here. What do your user tests say?

Just because your competitor does something, you shouldn't blindly do the same on your site. Being a critical curator of the content on your site, one who cuts away the unnecessary and keeps the online experience tidy makes everything better.

Happy tweaking

The list above is by no means complete. There are tons of things you can do to improve the performance of your site, but if you start out with those approaches I mentioned you'll have a good headstart.

If you're extra curious, Google has a nice list of recommendations as well.

Nerd Bonus: Let's play me

I believe that a great way to learn something new is to observe someone's actions and then try repeating those actions yourself.

Let's say that you've sent me an email about your new website and you want me to check it out. This is what I usually tend to do after clicking your link...

  1. I let the page load. I make a mental note if the site felt slow (did I stare at a white void so long that I started to not focus on your site) and another note on how fast my current connection is. Sometimes I'm on a fast 100/100 Mbps, sometimes it's a mediocre 12/2 Mbps, sometimes it's a very slow, unreliable 3G connection on my smartphone.

  2. Then, in my Chrome browser, I right-click on your site and select the "Inspect" option. This opens something called the Chrome Developer Tools. Don't be alarmed. If you give it 5 minutes it will be your secret weapon as a non-technical CEO of a digital business.

  3. With the Developer Tools open, I navigate to the "Network" tab. On this page, I make sure I have the "Disable Cache" checkbox checked.

  4. Then I reload your site by hitting the F5 key or CTRL+R (CMD+R on a Mac) and wait. The Network page will fill up with tons of stuff: all the images that are loaded, all of the nerdy code (Javascript and CSS files) among other things.

  5. When your site has reloaded, I check in the bottom left part of the Network window to note 5 things: amount of requests, page size, the time it finished, the time for the HTML to finish loading and the total page load time. Like this: An example of what the Network tab can reveal

  6. I then click on the tiny "Img" button next to the "JS" and "CSS" buttons at the top, to filter out everything else than images. Then I can click on the "Size" column's header and sort it, so I can see which images are the heaviest. This gives me a nice overview of which images I need to focus on.

  7. I then click the "JS" button, make a mental note of how things look here and also the state of the CSS by clicking the "CSS" button. This helps me to see if things need to be concatenated or minified.

  8. I move on to other pages, just to see how the performance of the other pages fares. Finally, I run your site through GTMetrix and Pingdom Tools, just to get a few more details.

This is just what happens when you send your site to me. You could call it an occupational habit. If I end up working on performance optimizing your site, I run through what I've shared with you (and a bunch of other stuff) until the site feels snappy and performant.