Page speed: How to improve your website load speed

Skill level

- Intermediate

Time to complete

- 60+ minutes

Introduction

The very first impression of your visitors is how fast your site has loaded. Even we live in era when everyone has a super fast internet, and frankly, that's only going to improve, proportionally to internet speed, patience of visitors is getting lower generally. This means, if they are looking for some valuable information and your site doesn't load fast enough, good number of them will just close the tab and go to the next site.

Analyze and learn

There are some really good scan tools that can give you an insight about your site speed.
Here are the two most popular ones: Google PageSpeed and Pingdom Speed Test
Both of them will give you a good insight and let you know what you could improve, and also point you to more tutorials how to do it.

Optimising images

Common mistake people do is having high resolutions images on their site.There's absolutely no need for images to be wider than the normal screen resolution. You should keep the images as wide as a normal screen resolution, let's say 1920px for fullwidth images. But if you have a boxed layout, you can just go with the width that's equal with your container width.
Learn how to resize images using Photoshop: Resizing images.
Now when you reduced the resolution, you can optimize your image to make the weight even less. Check this tutorial to see how you can optimize images in Photoshop: Optimizing images
Here's a nice free online tool that will significantly help. It can optimize images for you and that all without loosing quality: TinyPNG

Reducing requests number

To know what we are going to do here, you first have to know what requests are.
When someone visits your website his browser has to deliver him all the content. So, the browser is actually requesting it from the server. That's what's going behind and that's what a visitor is waiting for at all. However, it's not a single request for the complete site. Every image, every stylesheet, every javascript, everything is a unique request.Doesn't matter how big one file is, it's still a request and it takes some time to load. Even if it's a super light file in weight. Our goal is reducing the total number of requests by merging files.

Combining CSS&JS

Are you loading site style in 10 stylesheet files, or everything put together in a single file, it doesn't matter at all! You will still have the same design and same CSS. So, if possible, try to keep all the style in a single file. It's same with javascripts. Experiment with putting all the scripts in one place.

Combining images

Sounds crazy, but this is possible too. In fact, you can notice this method at some most popular sites such as Google or Facebook. It's called Sprite images and it's combining icons to be a single image file. Later, you can use CSS to display just the part of the image you need for your icon. However, this is designed for icons and smaller graphics, you can't use this for large background images. Here is a basic usage tutorial: Sprites

Use font instead icons

You have probably noticed that more and more sites turn to this option. Instead graphics, there's a font that replaces all the icons. If your site has a lot of icons, this is a great method for you. Instead having numerous images and requests, you will be using one font only. You can try with FontAwesome.

Minifying CSS&JS

Stylesheets and scripts are usually large files. Especially if you took our advice and combined all of them into single files. This would be a good moment to minify them. In other words, this means removing any unnecessary characters, empty spaces and such. If you use Google to find an online tool for this, you will find plenty and any of them will do good. Take a note that some tools offer you minifying level. Highest level means hardest way to minify and least file size, however sometimes this removes too much from the file and it can mess up your design. So go ahead and experiment with what level best suits you.

When you need a new functionality for your site, the easiest is to install a plugin and let it do everything for you. However, sometimes this is not really necessary. Lot of times, people use plugins to do some simple tasks for them which could be solved with small piece of CSS or JS added to your theme. Simply remove as much plugins as you can. Why is this so important is because each plugin you install "brings" its own scripts and increase number of requests we spoke about earlier.Also, lot of times plugins interfere between each other.

Enable caching

When you are done with all this, you can enable a caching feature so it will extra improve user experience when it comes to speed. What caching does is saving the content in temporary memory, so every next time user requests the site, instead waiting for all the content to load again, browser pulls out the saved content from that temporary memory.
You can use any of large number of caching plugins, but doing it manually is easy as well. Check this tutorial for example: Leverage browser caching
To learn more about caching, take some time to read our tutorials: Deactivate caching: why you should never build/develop websites with caching activated and 6 kinds of caches to clear

SSL

When user visits a site, content also goes through some security checks. Having a secure connection will skip this process and additionally improve the site speed. This test is a great evidence of this: HTTP vs HTTPs