Website needs a speed boost? How to improve load time

In this guide I will show you how to fully optimize your on page seo and performance. Step by step we will improve our load times and SEO friendlyness, but in this part we’ll only focus on performance, as soon as the other part is published I will link it here.

To have some prove of concept I create a Git repository just for this, each step will be marked as a release.

Performance optimization

A slow website is a no go these days, to make your pages load faster you should optimize your website’s code.

I already shared 7 tips on improving your website’s performance but now let’s turn it up a notch and go hands on with our poorly optimized website.

Let’s start with our current benchmark, without any changes my results are:

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s

4s for a 6-image website with only a few lines of HTML and CSS? Oh boy, let’s get crack’in!

Optimize the images

The biggest gains in performance optimization comes from images, let’s have a look at our images and see where we can improve.

There are two ways we can optimize images:

  • compression
  • resizing

Both are quite easy to do, but how? Let’s visit our site and see how wide those images actually are.

Actual size (in browser)Image size
Image 1340×2257952×5304
Image 2340×5073924×5878
Image 3340×4232268×2835
Image 4340×5125086×7696
Image 5340×5084000×6000
Image 6340×5083762×5643

As you can see, the image size is in our case always bigger than the actual size within the browser. Let’s change that and look at the result!

To resize images use a tool like photoshop, or if you use a CMS or framework you can easily let the system resize the images for you. Have a look at Liip Imagine bundle for this.

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms

What a result! It only took 2s to fix this issue, but look at what a performance boost this gave us, go resize your own images straight away!

Now that the images are resized, let’s compress them for ultimate performance. You can compress your images using an online tool if you system or software does not support it. I used https://compressjpeg.com.

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms
Image compression893Kb19372ms349ms

Not such a big impact, but we didn’t loose any image quality either so win, win!

Optimize assets

Assets such as scripts and stylesheets should be minimized for production, minification means that all whitespace is removed and therefor the file will be smaller.

Taking a look at which files need optimizing:

FilenameSizeLoad time
jquery-3.3.1.js78.9Kb82ms
bootstrap.css25.1Kb116ms
popper.js21.4Kb80ms
style.css322B76ms
script.js237B88ms
custom.css190B56ms

For hosted scripts, please refer to the CDN’s documentation where you can find the .min (minified) version and use that one.

FilenameSizeLoad timeNew sizeNew load time
jquery-3.3.1.js78.9Kb82ms30Kb72ms
bootstrap.css25.1Kb116ms22.8Kb111ms
popper.js21.4Kb80ms7.2Kb37ms
style.css322B76ms308B31ms
script.js237B88ms237B88ms
custom.css190B56ms178B65ms

If you host your own scripts, you can minify them using an online tool or build tools.

All of this results in:

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms
Image compression893Kb19372ms349ms
Optimize assets540Kb19294ms269ms

So far so good, we’re already seeing about 3.8s improvement to when we started, lets see how much further we can go..

Check for errors

Open your developer console and see if any errors pop up, we’ve got a few already, let’s fix them!

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms
Image compression893Kb19372ms349ms
Optimize assets540Kb19294ms269ms
Fix console errors540Kb16248ms215ms

Since we had a few 404s on some unused style, we got to strip them away and saved us from doing 3 additional requests.

Bundle assets

Asset bundling is quite a big one, usually your computer will be faster in downloading one bigger file than downloading several smaller files, I’m eager to see the result for myself so let’s have a look!

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms
Image compression893Kb19372ms349ms
Optimize assets540Kb19294ms269ms
Fix console errors540Kb16248ms215ms
Bundle assets537Kb11242ms217ms

Not such a big impact as I’d expect, but this is because the new HTTP/2 protocol is used, which allows multiple files to be downloaded at the same time. But when you have a large amount of requests, this is one way to decrease it.

Async font loading and optimize your fonts

At this moment we’re loading our Roboto from from Google, we’ll do the same thing but with a javascript plugin called Web Font Loader created by Google and Typekit.

ActionWebpage sizeAmount of requestsLoading timeDOM Load
Nothing30.0Mb194.02s1.58s
Image resizing951Kb19384ms346ms
Image compression893Kb19372ms349ms
Optimize assets540Kb19294ms269ms
Fix console errors540Kb16248ms215ms
Bundle assets537Kb11242ms217ms
Font optimization558Kb13240ms160ms

Not much of a change in loading time, but take a look at the DOM load! Because now the font isn’t blocking the page from loading you’ll see something on your screen a lot faster. This is called elimination of blocking resources.

When using fonts, make sure to only use the fonts and font weights you need.

Conclusion

This part of full on page optimization was about performance gains, specifically page load times and render times. Going step by step we managed to shave a whopping 3.78s off of our initial loading times.

In the next part we’ll discuss about some SEO improvements we can do to the same project, subscribe to our newsletter to stay informed!

Leave a Reply

avatar
  Subscribe  
Notify of