Man Yelling at Laptop

This is what your users totally look like when your site is loading slow…right?

The average load time of a website in 2018 is right around 8.5 seconds (machmetrics). That might not seem like a lot, but imagine staring at a white screen for that long waiting for your content. If you’re anything like me, you’ll go back to Google and find a different website or article with the same information. Who has time to wait around? If you’re looking to speed up your website, you’re in the right place. Not everyone has the ability to hire a developer and invest the time it can take to do optimizations, so we’ve compiled a list of things YOU can do to help improve your website’s speed. We’ll explain everything as we go – We promise it’s not hard!

Determine Your Bottlenecks

The first step to speeding up your website is always to determine where your site is slowest. This allows you to target those areas and attack them first. After all, why bother getting a faster car when the speed limit is only 35? You’d be much better off taking a route with a higher speed limit.

In order to determine where your site needs the most help, we’ll be using two popular and FREE online tools: Pingdom’s Website Speed Test and Google’s PageSpeed Insights. Each of these tools provides valuable information that we can use to get your site loading faster!

For the purpose of this article, we’ll be optimizing our own website, mythicdesigncompany.com

After running both of our tests with each of these tools, here are the results we received.

Pingdom’s Website Speed Test

Pingdom Speed Test, Before Optimization

Google’s PageSpeed Insights

PageSpeed Insights, Before

Analyzing Your Situation

Now at first, all of this information might look intimidating. There is a lot of technical verbiage being thrown around here, and it might look like you have a lot to do! Our site in particular doesn’t have that much that it needs in order to improve its speed. From Pingdom, we have a load time of just 1.79 seconds, which is actually pretty good! If you can speed up your website to the point where it’s loading in about 3 seconds or less, that’s great. But of course, less is better, so we’re going to try to optimize what we have anyways.

Odds are, your site probably has similar issues to ours. Now, it could have more, and it could have less, but the principles of what we’re doing remains the same. Google even includes helpful suggestions under each of its tips on how you can make the change!

Looking at Pingdom’s results, we can see that the VAST majority of our website’s homepage is taken up by images. This is VERY common, especially with modern websites that use large hero images, background images, and that type of thing.

Google’s PageSpeed insights, on the other hand, include more detailed info about the site that we’ll tackle later on. Let’s start out with optimizing the images, as that’s likely to be what is holding your site back the most.

Optimizing Your Images

At the time of writing, our website has 15 images on the home page. Over half of these are well over 1000 pixels wide, and add up to a whopping 6.3 MB in size. Now, I hear you saying already – “6.3 MB is not that much space – I have 64 GB just on my phone!” And you’re right, that’s not very much space in terms of storage. But in terms of a website, that’s a TON.

As page load time goes from one second to five seconds, the probability of bounce increases by 90%.According to a recent study by Google, the likelihood of someone leaving your website (bounce rate) increases by 90% as page speed increases from one second to five seconds. That is absolutely huge! You might be driving traffic to your website, but if you can’t get those visitors to stay, what’s the point in them being there at all?

Now, our website is hosted in WordPress. Because of that, there are a ton of free plugins we can use to optimize the size of our images! In our case, we’ve gone with EWWW Image Optimizer as it allows us to do all of the compression on our own server, and we don’t have to sign up for any accounts.

Don’t panic! If your website isn’t on WordPress, there are plenty of options out there for you too, albeit a bit more intensive. If you’re using a different popular CMS such as Joomla, SquareSpace, or Wix, search their plugin stores for the easiest way to optimize your site’s images. Alternatively, we can always do manual image optimization (I know, gross.)

Actually, it’s not so bad. There are a TON of free image compression tools out there like handbrake (which also works great on videos, by the way). Or, if you have Adobe’s Creative Cloud, you can use PhotoShop or Lightroom to optimize your images.

The first thing to check is your image resolution. If your logo is only being displayed at 50px in height, there’s no point to load the 300 pixel tall version. Shrink it down, or better yet, use a seriously small SVG version if you have that option. It will look much better too!

The same goes for your hero images. Sure, you may want to cater to those of us who have super large monitors by making sure your image is in 4k, but realistically, most people are going to be on a 1920×1080 monitor, or on their phones. So shrink that image down and watch your speeds increase!

In our case, we simple went to our media library and click “bulk optimize” using our image compression plugin. According to the results it gave, we optimized over 2000 images and saved 20% in storage space!

Minify Your HTML, CSS, and JS

Minify has gone from being a completely unused term in 2006 to being used all over the website design and development industries. It is very important, and helps a LOT.

Basically, the process of minifying your files is removing all of the unecessary white-space and line-breaks in your code. Might not seem like much,  but every little bit helps, and on large files, it helps a lot. Take a look at the popular CSS framework Bootstrap, for instance. Unminified, it’s main CSS file has over 9000 lines of code and takes up 169kb of space. The minified version – all the same information and functionally the same  – has only 6 lines of code, and takes up 137kb in space. Repeat that across all of your files, and you can save a significant amount of space, make your page smaller, and increase your load times.

Probably the easiest way to minify your files, and our current favorite, is to use Cloudflare. Now, there are a lot of mixed opinions about cloudflare, and there are a lot of other options for this job too. But personally, we like their service, and they do a great job of helping us keep our site’s speed up and load times down.

Once you sign up for Cloudflare, you will need to point your nameservers to the ones they give you. If you’re not sure how to do this, contact your domain registrar to help you make the change.

Once it’s all set up, all you have to do is navigate to the “speed” tab of Cloudflare, and select the checkboxes to minify your files. That’s it, you’re done. Cloudflare will handle the rest for you.

Caching

While we’re talking about Cloudflare, we should mention caching. This is a very important and useful process that basically allows your browser to save a website’s files locally, which lets it load much faster, as it doesn’t have to download all that information.

Cloudflare offers free caching services as well, and if you’re using them already for minification, you might as well enable these services. Normally the default settings are fine, but feel free to mess around with them!

If you’re not using Cloudflare, there are of course other ways to do this too. Since cloudflare offers a free CDN (Content Delivery Network), it’s honestly a great choice. But there are plenty of plugins for WordPress as well as other Content Management Systems that will handle caching for you. Some web hosts, such as Bluehost, handle this on the server side already – Cool! For WordPress, we suggest WP Super Cache.

If you’re doing this manually, you can also edit your .htaccess file directly to add caching. Simple add the following code to your .htaccess file, and you’re done!

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

 

Basically, this tells a visitor’s browser to keep image files for a year, and the rest of the files for a month. This mostly helps repeat visitors and those who are navigating page to page in your site, but the speed is significant enough to make this change worth it.

The Results

After we’ve done all that, it’s time to revisit those speed tests and see where we’re at!

For our Google PageSpeed Insights test, we improved our score from a miserable 20 to a mediocre 50 using ONLY the steps listed above. There’s a lot more we can do, but we made huge improvements in only a few minutes!

In our Pingdom Speed Test, we improved our score from 65 to….. well, 65. BUT that score isn’t what really matters – It’s the load times! We improved from 1.79 seconds to 1.5 seconds, and reduced our total page size from 7.2 MB to just 2.8 MB, a 62% reduction is page size. For a site that is loading fine to begin with, this is pretty good! For a site that had poor load times, the results would be even greater and you would see amazing increases in page speed.

 

I really hope that you found the information in this article helpful if you were looking to speed up your website. The alternative to all this is either having a slow website, or hiring a professional (like us, wink wink) to handle it for you!

Leave a Reply