10 Tricks That Will Improve Your Website Speed

Elena Conacel -

After working on optimizing Creative Tim’s website speed, I decided to write down some of the things that can help increase speed as much as possible. One piece of advice, that is very important, is to decrease the pages’ load time as much as possible. Any digital product should offer the user a great experience and a fast site improves overall quality and increases your users’ satisfaction. Bottom line is that everybody deserves a fast web experience, so treat your users the best possible way.

Following, I will reveal the steps that helped me increase our website speed. Let’s take it one by one:

1. Get yourself a fast server

Your venture starts here: choose a suitable hosting for your website! If your web server is slow, it doesn’t matter how much you optimize the site, it will still be slow – you’ll be blocked by the powers above.

Hosting with a professional configuration can help you a lot, so talk to your web host about moving to a faster server or getting a dedicated one. The greater the increase in your traffic, the greater the need to increase the bandwidth for your site. Make sure to have an allowable bandwidth, that can also handle your peak moments. And yes, a faster server does cost you more, but a slower server that drives your conversion down could cost you even more.

If you are using WordPress, you can see some good options for you here.

We use Heroku for Creative Tim and would definiely recommend it to you too!

2. Optimize your images

The code from a website pages is usually quick to download, but images are much larger and have a higher loading time.

First of all, when you are using images, make sure to choose the right format. There are different type (.gif, .jpg, .png) for different purposes (like displaying a photo, a graphic, an image with few colors, or an image consisting of many colors). Our advice is to try using .jpeg as much as you can, since this format is that easiest one to load.

Second of all, don’t scale your images using HTML. If you need a picture that is 400×400 pixels, create an image that is exactly 400×400 – not bigger, nor smaller. Don’t use an image that is 800×800, because the full picture needs to be downloaded, when a smaller one can do the trick.

If you are looking for image editing tools, check out this blog post by Crazy Egg.

3. Make your Design responsive

By now, we should refer to responsive design just as design. But if your site is not yet optimized for all devides, you should definitely start making your design responsive. Beginning April 21, Google started using mobile-friendliness as a ranking signal in search results, rewarding websites that are fully optimized for mobile platforms.

The changes in Google’s ranking algorithm make it easier for mobile users to find relevant results, that is optimized for their devices, so make sure your site is one of them!

If you want to learn more about responsive web design, you can start with the basics at W3Schools or go for our favourite framework, Bootstrap.

4. Optimize CSS and javascript Delivery

Keep your CSS and Javascript in single files outside of your HTML files. Instead of duplicated CSS or JS code on multiple pages, you should just import the external files wherever they are needed.

5. Enable browser caching

When you are visiting a website, the elements you see on the page are stored on your hard drive in a cache or temporary storage. Next time you go to the same page, the browser will load the page without sending another HTTP request to the server.

When you set an expiry date for your resources, the browser will store those resources in its cache and the page will load faster, because it will already have those resources available. We suggest having at least one week cache lifetime for your static resources.

If you want to learn more about caching, you can see more details in this article about methods of enabling caching.

6. Enable compression

Large pages are bulky and slow to download, and since you don’t want to mess with their content, especially if it’s high quality, you should consider zipping them. Compression reduces the bandwidh of your pages and increases your website speed. We suggest using a tool called Gzip, and since 90% of today’s Internet traffic travels through browsers that support Gzip, it is probably the best one.

7. Minify Resources

Every unnecessary piece of code adds to the size of your page, so you should eliminate HTML comments, CDATA sections, whitespaces, empty elements, line breaks and indentation in your page. Make it as lean as possible, and your page size will decrease, making your loading time speed up.

This is what Google recommends:

 

8. Avoid bad requests

IF you have broken links, they will result in 404/410 errors and lead to wasteful requests. Try to pay attention to your URLs, look for broken ones and fix them ( don’t forget to double check your images). To get things going more quickly, you can use this online broken link checker.

9. Minimize redirects

It is sometimes necessary to redirect the browser from one URL to another, in order to indicate a new location of an URL, track clicks or connect different parts of a site. But redirects trigger and extra HTTP request and add latency. Use them only if there is no other solution for it.

These are some of Google’s recommendations:

  • Never reference URLs in your pages that are known to redirect to other URLs.
  • Never require more than one redirect to get to a given resource. For instance, if C is the target page, and there are two different start points, A and B, both A and B should redirect directly to C; A should never redirect intermediately to B.
  • Minimize the number of extra domains that issue redirects but don’t actually serve content. This might be tempting, so you could catch incorrec user input also, but it can end up in a cosly circle.

10. Use a page speed optimizer

Coming directly from Google, you can use a PageSpeed Insights tool to get suggestions that will speed your page. Some of them I have touched in the points before and I’m sure there will be a lot more specific to your case. It’s a very good resource, especially if someone with a technical background can look over them.

One more thing: don’t forget to make a backup before you start making the necessary changes. If you have any tips or questions, be sure to let me know in the comment section below. 🙂