How to improve the loading speed of your website and boost your SERP

We have prepared this article to explain why your site’s performance is so important and how to improve your website's loading speed.

Regardless of the goals set, a fast-loading website is a huge advantage. Fast sites have a lower rejection rate and a higher conversion rate. As a result, you get more readers or customers, and Google algorithms improve your site’s position in search results.

Google Speed Update: the beginning of the speed era

Google released a report in 2016, claiming that 40% of mobile device users leave the page if it loads in more than 3 seconds.

In the middle of January 2018, Google announced the start of a new project that aims to improve search results for mobile devices. In July 2018, the Speed update was implemented — the update of the Google algorithm that aims to reduce websites' position with a low loading speed. Since then, loading speed has become an important factor in determining your site’s position in Google search results.

Google realized that people become less and less willing to wait to get a result when browsing the web.

People want to quickly pay bills on finance sites, get rapid results when they’re browsing vacation reviews, and view an article immediately when they click through. And if there’s too much friction, they’ll abandon the site and move on.

ThinkWithGoogle

Along with other UX factors, external links, and the value of content, the site's loading speed has a strong and direct impact on SEO performance.

How to improve the loading speed of your website

When it comes to a website, many factors can slow down the page's loading. The most common factors are: large images, many scripts and external files, bad hosting, and the list goes on.

So, what can you do to improve your website’s loading speed?

The simplest method is to “optimize” the web page. This means that you reduce the amount of data that is downloaded when a user accesses your website. Here are some simple tips to help you improve your website’s load time:

Choose the right image resolution.

A large image (3000+ pixels) looks great, but unfortunately, it takes up a few megabytes or even more. Choosing the right resolution is the first step in optimizing images and lightening the page. Remember, the higher the resolution, the larger the file size.

However, I have to consider the fact that for Retina type displays, the pictures must have a double resolution compared to the one you intend to use.

Image compression is easily done in software dedicated to editing photos. If you don’t have the knowledge to work with dedicated software or don’t have the budget to purchase image editing software, a quick and inexpensive way is to use image optimization sites.

I’ll detail the image optimization process in the paragraphs below.

Opting for the right image format

If you want to improve your website's loading speed, you should also choose the right image format.

We have 4 options to choose from JPEG, PNG, SVG, and WEBP. Each of these formats has its advantages and disadvantages. If we choose the right format for the right image, we will get high-performance files.

  • The PNG format is better suited for images with a small number of colors or shades and transparent backgrounds.
  • The JPEG format is better suited for images with a large number of colors and details.
  • The SVG format is a format that works well for simple images with a small number of details (e.g., logos or simple illustrations)
  • The WEBP files are considered more modern, are very well optimized, and support transparency. According to Google, WEBP files are 26% smaller than PNG files and 25–34% smaller than JPEG files.

It is good to know that the PNG format includes 2 sub-formats: PNG-24 and PNG-8. The difference between them is the number of colors that the image can include. If you are unsure which format will be more suitable, choose the original format for saving the file.

Optimizing your images

Before placing the images on the site, you can remove a few more kb using free tools like EZgif.com. They have helped me save hundreds of megabytes over the years. Upload the image, choose the optimization percentage, and the website algorithm takes care of the rest. At the end of the optimization, you get a good quality image, but of a much smaller size.

An interesting workaround, which allows us to get clearer images, is to double the size and reduce their quality. An image with a width of 400 pixels and a quality of 80% will be about the same size as an image of 800 pixels and a quality of 40%.

Personally, I prefer to use EZgif for quick photo manipulation and optimization. The site offers various tools to optimize, edit, convert, and even animate images.

Minify JS and CSS code

In addition to images, JavaScript codes and CSS files are also downloaded when accessing a site. They can also be large and are worth optimizing.

When it comes to code, if it includes errors, it will slow down the site's loading even more. To have an optimal website, the code behind it must be valid and correct.

To minimize the codes, you can use different tools that will eliminate all unnecessary characters, comments, blank lines, and shorten long sentences while preserving all the code's functionality. These programs will reduce the size of CSS and JS files from 25% to 95%.

The website I use to minify JS files is JScompress, and to minify CSS files, I recommend using CSSminifier.

Combine JS and CSS into fewer files

Another factor that can cause your website to load slowly is the number of requests. The more requests your website makes, the slower the page will load.

This is because each file your website has to load, a request is made to the server. Just like everything in life, whenever a request is made, a response is expected. This back-and-forth process takes time that adds up to the total loading time.

A good approach is to plan and combine or merge as many files as you possibly can into one. It is better to load a larger file in terms of loading times than to load multiple smaller ones. Just don’t overdo it. Do not try to cram up 20 files into a single one. Keep the file size in mind too. Try to find a balance between the file size and the number of files that have to be requested.

Combining JS or CSS files has its benefits, but it can cause some errors if it is not done right. In the case of JavaScript, if you have errors in your combined files, the whole script execution might stop, causing all kinds of problems.

To get the best results when combining your JS files, I strongly recommend doing it manually (if you know what you are doing) to get the best results. If you don’t know to do it yourself, you can use online tools to do it for you. These tools are not perfect, but if you do not have too much JavaScript and the code is not too complicated, they should do a good job.

A tool I have used in the past is Shrinker, which allows you to combine JS and CSS files. You can use one of the 3 ways to combine the files:

  • Copy-paste the code from each file to the text area on the website
  • Upload all the files from your local drive
  • Add the URL to your files.

How to check your website and get personalized tips on how to improve the loading speed of your website

If your website's loading time is less than 3 seconds, then, according to Google, you are on the right track. Is your loading time above 3 seconds? Then you might need to improve the loading speed of your website. If you don’t know what your loading speed is, you can analyze it with the help of tools like:

GTmetrix: This tool measures the time required to load the website fully, shows you how and the order in which the files are loaded, and gives you recommendations to improve the loading speed of the site.

Google PageSpeed Insights and Web.dev: Will give you information about the site’s performance when accessed from your mobile phone.

Conclusions

When it comes to speeding up your website, there are a lot of things you can do. Some factors can really slow down your website; that is why you need to plan, test, and optimize. All processes above are a great way to improve your speed and thus your search engine ranking.

Besides optimization, you should definitely choose a good web hosting company. Try to avoid the cheaper hosting plans as they tend to offer lower performance.

If you decide to build your site using a CMS, I strongly recommend using a specialized hosting provider with plans specifically for that certain CMS. These plans are more on the expensive side, but they are worth every penny and can make a huge difference when it comes to your website’s performance.

Blogger at https://mrbushcraft.com and Founder of https://stacky.me - I write about startups, SEO, development, and design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store