+45 36 99 04 05 ( 7.00 - 12.00 ) kontakt@webfar.dk
Home 5 Webshop 5 Make your website and webshop faster

Make your website and webshop faster

19. May 2022 | Webshop, Wordpress

There’s nothing worse than a slow website. You and your customers become frustrated and switch over to the competitor, even before anything has been added to the basket. Even Google “penalizes” slow websites with lower rankings in the search results.

Fortunately, there’s a lot you can do to make a website run faster, thus providing users a better experience and a boost in search engines.

In this article, we’ll look at 6 different factors that can help speed up your site. These include:

  • Choice of hosting and server
  • CDN (Content Delivery Network)
  • G-Zip compression
  • Caching
  • Image optimization
  • Combination of CSS and JavaScript files.

But why is it important that your website/shop runs quickly? There are several reasons. The most important is that most people are impatient. Surveys show that 53 percent of mobile visitors abandon a site if it takes more than 3 seconds for the site to load.

As mentioned earlier, there’s also Google to consider. Google sees a slow website as not user-friendly. And Google has an interest in showing the most user-friendly websites at the top of the search results. Therefore, there’s a risk that your site will be “pushed” to page 2 or 3 in Google’s search results if it doesn’t run fast enough.

How fast is my site?

Before you start optimizing your site, you need to know how fast/slow it runs and how you can improve it. There are various tools for this. The tools can also give you an idea of what makes the most sense to focus on.

Google PageSpeed Insights

PageSpeed Insights is Google’s own tool. Here you enter the address of your site, click “Analyze”, and shortly after you get a score and an overview of what you can do to optimize the speed.

Google Page Speed Insights

PageSpeed Insights generates two reports: one for mobile and one for desktop. Typically, the score for mobile is lower than for desktop. This is quite natural as mobile phones are typically not nearly as fast as desktop computers. If you scroll further down, you get an overview of what you can do to improve the speed.

Pingdom Website Speed Test

Pingdom Website Speed Test is another tool that also provides an insight into how the speed looks.

Here, among other things, you have the option to choose from which location the tool should test the site. Pingdom has several servers around the world from which you can test the speed. If your site’s target group is within a smaller geographical area, it’s a good idea to choose the server closest to the target group. That way, you get the most accurate picture.

If your target group and users, on the other hand, are spread over a larger geographical area, you should choose the server location closest to the majority of the target group. If you belong to this part, there’s help to be found with a so-called CDN. We’ll return to that later.

Pingdom Website Speed Test

Pingdom Website Speed Test does not divide the result into mobile and desktop like Google does. Instead, you get a “performance grade”, the size of the page, how long it took to fetch the page, and the number of requests. The performance grade is a score divided into A, B, C, D, E, and F, and the closer you get to 100, the better performance grade you get. Requests are the number of server calls – the number of times the browser requests and fetches something from the server (images, JavaScript files, and CSS files). It goes without saying that many requests take longer to complete than fewer.

Like Google’s PageSpeed Insights, Pingdom Website Speed Test provides you with a thorough review of what can be done specifically to achieve a better performance grade.

It’s fine to use both tools, but we recommend initially using the Pingdom Website Speed Test because it provides a simpler overview. Typically, you’ll get the information you need to start with: page size, load speed, and number of requests.

But now onto what this is really all about – making your site faster.

Choosing Hosting and Server

When choosing hosting and a server (where your website resides), there are several factors to consider. It’s worthwhile to spend some time figuring out what type of hosting you need, where in the world the hosting server is located, and what hardware and technology are used in the servers.

Location

The closer the server is physically to the user, the faster the user will perceive the site to be. Therefore, it’s essential to choose a host with servers near your target audience. If your audience is spread across large parts of the world, then the server’s location isn’t as important. But it makes most sense if it is close to the majority of the people who use your site. Therefore, when choosing hosting, always ensure to choose a provider with servers physically close to your target audience.

Server Type

It’s also worthwhile to understand what type of server you need. Roughly speaking, servers can be divided into three categories:

  • Shared hosting
  • VPS hosting
  • Dedicated hosting

Shared hosting is the most basic and cheapest solution. Simply put, you “rent” space on a server, which you share with others. This means that other websites are hosted on the same server where your site resides. If you have a smaller site or webshop, shared hosting can be an okay solution, but since you share a computer’s resources with others, speed issues can occasionally arise if there’s extra pressure on the particular server.

If you have a larger site with many visitors, it’s worthwhile considering a VPS solution.

VPS hosting is a combination of shared hosting and dedicated hosting. VPS stands for Virtual Private Server and is a physical computer that runs multiple servers at once. A VPS server has a fixed portion of this computer’s resources allocated. This means you don’t share resources with others in the same way. A VPS server therefore operates independently of the other servers on the computer. This allows you to set up your server almost as you want. This type is typically faster and more secure than shared hosting, but the price is usually significantly higher.

Dedicated hosting is a standalone computer that only runs one server – you don’t share hardware with others. With a dedicated server, you get full control over all settings. This type of server is a bit more expensive than the others but provides the best performance and security.

Hardware

When choosing the type of server you want, it’s also possible with some hosts to choose the hardware you want in the server. Here, it’s best to choose a server with a fast processor, a good amount of RAM, fast SSD drive, etc. But again, it depends on what your site is to be used for. If it’s a blog that only gets a few hundred visits per month, the hardware isn’t as important. If, on the other hand, it’s a webshop with thousands of visitors per day, it’s worthwhile investing in hardware with better specifications.

CDN (Content Delivery Network)

If your server is located in, for example, Denmark, visitors from Denmark, the Nordic countries, and Europe will experience higher speeds than visitors from the USA, Asia, and Australia.

It goes without saying that it takes longer to send information over long distances than short ones. If some of your visitors are geographically located far from the server, it might be a good idea to consider a CDN.

CDN stands for Content Delivery Network. As the name suggests, it’s a network that delivers content to visitors.

The network consists of servers around the world. Each of these servers is a “mirror” of the site that resides on your main server. In this way, visitors located far from the main server can receive content from a server closer to them. When a person accesses your site, the system automatically determines where he/she is and ensures that they receive content from the server that is closest to them.

Content Delivery Network

In addition to users who are far from the main server experiencing faster response times, it also provides better security as the content is distributed across many servers. Furthermore, you’ll also experience better uptime. If, for example, your main server goes down, a copy of the content will still be available on the various servers in the network that is displayed to the visitor.

Some of the most popular CDN services are Cloudflare, Sucuri, StackPath, and KeyCDN.

GZIP Compression

Just as you can make music files smaller by compressing them to another format – for example, mp3 format – you can also make HTML, CSS, and JavaScript files smaller by compressing them. These are the files that are sent to your computer from the server when you access a page on the internet.

This is where GZIP comes into the picture. GZIP is a data compression process that reduces text files in size. When you send a request to a web server to display a particular page, the process of compressing HTML, CSS, and JavaScript files begins. Once it’s done, they’re sent to your computer, where your browser takes care of decompressing the files (unpacking them) and displaying them. In this way, you save bandwidth because the files take up less space than originally while they are being sent.

The process of compressing and decompressing is much faster than if the files were sent directly. It’s possible to achieve a file size reduction of up to 70 percent with this technique. Therefore, it makes good sense to activate GZIP on your server.

There are several ways you can set up GZIP. Typically, you can activate it directly in the control panel of your hosting provider.

If your site is hosted on an Apache server (WordPress etc.), you can also add a code snippet to the .htaccess file, located in the root of your website’s file system. Here you will need to log in with FTP or through your control panel to access the file system where you can edit the .htaccess file.

A third, and perhaps the easiest solution, is to install a plugin in your CMS. If you use WordPress, there are many different options. If you search for GZIP under plugins, you will see a number of different plugins. Make sure to choose a plugin that has good reviews and is regularly updated.

If your site uses a CMS other than WordPress, there might not be a wide range of plugins available for this purpose. If that’s the case, use one of the first two options to activate GZIP.

Read more about how to activate GZIP compression here.

Caching

In short, a cache is a directory with files from pages that you (or others) have already visited, temporarily displayed to the user. In this way, resources aren’t used to send and fetch the same data over and over again.

There are two types of cache, which are good to know.

Client-side caching

When you visit a website, your browser automatically saves text, images, and other content from the pages you visit. This copy of a website’s files is placed in your browser’s cache. When you access the same page at a later date, the browser uses the files in the cache that were saved the last time you visited it. In this way, the browser doesn’t have to spend time fetching the same files again, as they’re already stored locally on your computer.

Your browser’s cache is limited to the amount of space allocated to it. When space starts to run out, the oldest saved files are automatically deleted from the cache. But it can sometimes also be a good idea to clear the browser’s cache yourself. If you, for example, have made a small change on a page that doesn’t “break through”, it may be necessary to clear it before you can see the change.

It’s also possible through so-called headers, sent from the server, to tell the browser how and how long different files should be cached.

Server-side caching

Unlike client-side caching, server-side caching takes place on the server where your site is hosted. Here, the server stores versions of pages that have previously been built and composed of files and data from the database, and sends them directly to you. Therefore, no time is spent on accessing a database, for example, making the whole process faster. However, it has the same disadvantage that the cache needs to be cleared from time to time. The server takes care of this when new content is added. But here, it’s also possible to control your cache and clean it as needed.

Images

Images take up a lot of space. A lot. Therefore, it’s incredibly important that you only use the most necessary images. You should also ensure that your images are the right size and don’t take up too much space.

Crop Your Images

Always make sure to crop your images to the size they should be. Firstly, it looks better, and secondly, there’s a lot to save on file size. Your images should only display what you want to show to your visitors. Moreover, there’s no reason to use images in a resolution that’s too high. If there is only room to display an image that is 800 pixels wide on a page, there’s no reason to crop the image wider than 800 pixels.

An exception, of course, is if the purpose of the image is to be downloadable and printable, one should be able to zoom in and see more details, etc. In that case, it’s fine to upload it to the website in high resolution.

Use the new formats

For many years, .jpg, .png. and .gif have been the only image formats that could be displayed in a browser. This has worked fine, but over time more have emerged and gained ground in different browsers. This has happened because it has become possible to compress images even further while maintaining the image quality or minimally reducing it.

Most newer browsers now support the formats WebP, JPEG 2000, and JPEG XR, which are the most prevalent new formats.

Therefore, when possible, save your images in one of these new formats.

It’s also possible to get various plugins for CMS systems, which automatically convert your images. In other words, your site is scanned and the “old” images are automatically replaced everywhere on the site, after being converted.

Lazy Load

The moment you access a page on your computer, the browser starts to download all the images, files, etc. associated with it. If, for example, there are ten images on a page, all ten are downloaded, regardless of whether the user will ever see them. This generates a lot of file requests to the server, and time is spent downloading files that may not be needed.

With lazy loading, images load individually, but only when it’s “their turn”. This means that the images that can be seen on your screen when the page loads will be displayed as always. But all the images placed below the visible part of the page will only load when the user approaches them – i.e., when the user scrolls down the page. In this way, only the images that the user needs are loaded.

There are various plugins for different CMSs that can help with this, but most newer browsers already support it. All you have to do is insert a loading attribute into your HTML img tags.

Lazy Load

WordPress recently ensured that all images are displayed as “lazy” by default.

Plugins

There are many different plugins that can help optimize your images. If your shop runs on WordPress, we recommend either Imagify or Smush. Both ensure that your image files are optimized, compressed, and that they are “lazy loaded” in the best way possible. You can also manually compress your images here.

File Combination

A website is composed of various text files. Many of them are CSS and JavaScript files. CSS files tell the browser what a page’s layout, colors, etc. should be and JavaScript files add extra features and interactivity. When a page loads, all these files need to be retrieved from the server (unless they have been cached). This results in a server call per file, which we know takes time.

It can quickly result in many server calls if your site is large and has many extensions in the form of plugins and themes. Therefore, it can be beneficial to combine all CSS and JavaScript files into larger composite files. This way, the files become larger, but the advantage is that they only need to be retrieved from the server once.

File Combination

There can obviously be exceptions where you only use a particular script on a specific page, where it doesn’t make sense to combine it with other files. There’s no point in loading a script on a page where it’s not used. If you have many such files, they should obviously not be combined with the general files.

The easiest way to combine files is by getting a plugin or extension for your CMS that does it all automatically.

Plugins and extensions (WordPress)

There are a plethora of different plugins and extensions that can assist with various possibilities.

WP Rocket

One of the best for WordPress is WP Rocket. WP Rocket is a “package solution” that can optimize your site in many areas. It has built-in cache settings, it works well with most CDNs, it integrates easily with Imagify (the same developers made it), and it can combine CSS and JavaScript files across the board. Additionally, WP Rocket offers its own CDN network.

WP Rocket currently costs 49 USD per year, which includes a year’s updates and support.

WP Fastest Cache

WP Fastest Cache is another option and does pretty much the same as WP Rocket. However, the difference is that WP Fastest Cache comes in a free version and a paid version. The paid version, WP Fastest Cache Premium, closely mirrors WP Rocket in terms of features, but lags slightly in user-friendliness compared to WP Rocket.

One of the advantages, however, is that you don’t pay for the plugin on an annual basis. WP Fastest Cache Premium is a one-time purchase, which among other things means that there are no limitations on updates.

Conclusion

It’s important to have a fast site. It’s great for your users and good for your placements in Google’s search results. Therefore, we encourage you to start optimizing your shop right away.

The easiest solution is to use an extension/plugin that handles most of it for you.

You can also tackle one small thing at a time. For instance, you can start by getting your site on a CDN and then ensure that all your image files are reviewed, optimized, and replaced where necessary, etc.

The most important thing is that you get started and ensure moving forward that your site is in top shape and operates optimally.

We hope you found inspiration with this post.

Share This