Website Performance Factors: 11 tips to speed up your site

We all know what a slow website feels like.

Watching the loading bar as it slowly creeps towards complete.

What happens when it takes too long?

You leave.

Life is busy enough, you don't have time to wait for websites to load!

But don't worry. There is lots you can do to make your site fast.

I am going to list the key website performance factors that are slowing down your site and how to fix them.

But before we jump in to the detail, we should pause and ask, why?

Why is website performance so important?

Site Speed Equals Higher Conversion. Period.

Akamai (leading content delivery network) created a report during the holiday period of 2017, that looked at website performance and how this impacted conversion.

The results are staggering.

They found that conversion rate decreased dramatically, as the page load time went up. For example, a 3 second load time on mobile would cut conversion rate in half, down to 1%.

The report also discussed bounce rate (users that leave your site before it has loaded). The report found that if your site is taking longer than 3 seconds to load on mobile, you are going to lose 44.28% of your traffic.

We are all using our mobiles more. In fact, 50.24% of Black Friday traffic was on mobile. Connection speeds are slower on mobile, so the size of your page is more important.

Google also takes site speed seriously. Site speed is now a Google search ranking factor. As of July 2018, your page speed counts towards your SEO.

Now we know why, we can look at the what. Let’s look at the 11 website performance factors you need to consider as a website owner.

1) Page Redirects

Page redirects causes additional delay. The more redirects you have the greater the delay.

This can happen for a number of technical reasons, such as:

• HTTP to HTTPS
• redirection to a mobile-specific page
• between www and non-www links

Use a redirect status tool to check if your pages have redirects and then work with your web developers to resolve them.

2) Above the fold

Above the fold, is the visible part of the screen before a user has to scroll. Prioritize the loading of this content over the rest of the hidden page.

If you have a Hero image at the top of the page, then prioritize the download of this asset before others.

We can also cheat a little by creating a lower resolution hero image. Which we can then swap with the high resolution one later.

This gives the user the impression of faster loading.

3) Load Data Before You Need It

It is possible to load files in advance. If you can predict that a file will be needed later you can preload it. This can speed up other pages as the user browses your site, making them load faster.

Technically, this is done using the link attribute and using prefetch and preload to cache the file upfront.

4) Inline CSS and JS

Include some of your CSS and JS within the page, not as a separate file. This speeds up the page as there is only one call to the server before the page can show. Less server requests, equals faster pages.

Don't overdo this, use the technique for above the fold content only. You don’t want to add more than is needed or the page will start to slow down again!

5) HTTP/2

HTTP/2 is the new version of HTTP. It has one big advantage on page speed. Instead of making many requests for different files, each one creating an expensive connection. It shares a single connection for all file requests. Ask your web developer to enable it on your web server.

6) Use browser caching

How often do you update the design of your site? The answer is probably not that often.

In that case, why not cache some file in the user's browser. The next time they visit, they won't have to download them again.

7) GZIP Compression

This one sounds complicated, but it's really not. It is super easy to enable on your web server, just ask your web developer to turn it on. It works by compressing the file before they are sent. This makes the file smaller and therefore, quicker over the internet.

8) Compress Images

You want to make sure that your images are as small as possible without losing quality.

If you have not compressed yours, try a tool that can compress the image to make the images fast!

9) Minify CSS and JS

Make your CSS and JS files as small as possible. This process is called, minify. It removes all the unwanted text, such as comments and formatting.

I use two tools to help me with this CSSNano and UglifyJS.

10) Load CSS and JS Without Blocking the Page

You can also be clever about when you load CSS and JS. If these files are not required to show above the fold content, then you can load them asynchronously. This is a fancy term, we are telling the browser “show the page to the user and download these files later”.

11) Optimize Fonts

You know that font you spent hours picking? I have some bad news, it's probably slowing down your website.

Fonts are much larger in size than many people realize. Often they are configured to stop the page from loading until the font is ready.

Luckily, some of the strategies mentioned above will also work for fonts:

• If the font is needed later, we can use the preload method mentioned above.
• We can compress with GZIP.
• Also, make sure that the browser is caching the font.

I have one more technique for you to try. We can swap fonts!

For this, we can load the page with a default font (that is already installed in the browser) and then swap it with our fancy font when it's ready.

This can be a strange user experience if the fonts look very different. A tool that is useful is the font style matcher. It allows you to lay a font on top of another to get a good match.

Wrapping Up The Website Performance Factors

We know our site needs to load fast and under 3 seconds on mobile. By achieving this goal, we will increase conversion and reduce the bounce rate.

Implementing these 11 website performance factors will make a huge impact on your site.

I would suggest that you plan to tackle the high impact / easy to fix factors from the list above. Work with your team to identify which ones are the easiest to implement.

Remember to monitor and measure the changes.

If you make too many changes at once, you run the risk of not understanding what has worked.