Performance on the web has never been a hotter topic than it is now. Everyone cares about how fast a website loads. That’s why performance is an area we as a web hosting company work extra hard on.
In this guide, you’ll learn everything you need to know about performance optimizing your website with WordPress as the focus.
- Why is performance and load times so important?
- How do I measure the performance of my website?
- Different ways to improve performance
- Use cache for more efficient loading
- Minify and optimize resources
- Optimize images and videos
- Placing resources on a CDN
- Optimize the tables in your database
- Optimize your website code
Why are performance and load times so important?
We know from studies and experiments that we humans are impatient. Waiting is boring, and we prefer not to.
Businesses of all sizes have seen a clear correlation between faster website speeds and increased sales and engagement on the site. A slow website, on the other hand, loses visitors who move on. Because on the internet, there’s always a competitor a click away ready to take your visitor.
In performance terms, don’t forget about Google. You’ve probably already heard that Google penalises websites that are slow so they don’t rank as high in the search results. It’s true. Exactly how much is a secret, but it matters.
Why does Google do it? Well, because we humans are impatient. Google wants the searcher to find a good search result. Otherwise, people stop using Google. To evaluate what is a good result, they use a variety of criteria (their algorithm). Since we visitors think performance is important, Google weighs that in too.
In the end, it’s all about the visitor. A faster website makes it easier and smoother for the visitor to find the right information and satisfy their needs. That makes it important for you, too.
How do I measure the performance of my website?
It is important to use a tool that makes a modern analysis of the website. Two tools that do good analysis and also give you recommendations are Google Page Speed Insights and GT Metrix.
The reports they provide are basically based on the same technology, but GT Metrix includes a bit more and gives you more choice in how the measurement is performed, including from which country.
Keep in mind. When measuring your performance, keep in mind that the geographical distance between the test server and your website server matters. If you can, choose a test server that is geographically close to your main target audience.
Ways to improve performance
Performance optimization is a big topic. There are many different things you can do. Some affect a lot, others affect little. Every little helps, as the saying goes.
The most important thing is to keep performance in the back of your mind at all times. To think about performance all the time and to work in such a way that performance is a continuous work.
You can divide performance optimisation into a number of different sub-areas. Some are technical and have to do with the code and structure of the website. Others are editorial, which you need to consider when publishing new content.
1. Use cache for more efficient loading
Every time a visitor reaches your site, a lot of things happen that you might not think about. A lot of files are loaded, content and settings are retrieved from the database and then displayed to the visitor. Same thing every time.
Most websites look the same to all users. If I visit the site now, and you visit it in five minutes, it’s probably the same site.
Cache is computer language for temporary storage. Instead of retrieving all the data and doing all the data computation for each visitor, the system saves what was retrieved the first time in a temporary file. The temporary file is much faster to load. This also makes the website faster.
When you update a page, these temporary files need to be cleared to make the latest information visible. Otherwise, the old information will be displayed to the visitor.
There are different levels of cache. One is at server level, and the other is in the browser.
At the server level, calculations and retrievals from the database and code are handled. The result is saved to temporary files on the server, or in the server’s memory.
The browser stores resources that you load for the visitor, such as images, fonts, style sheets (CSS) and JavaScript. Your website tells the browser how long you want it to save before it reloads the file.
Are you using WordPress with us? Learn more about the best way to set up the cache here.
To cache or not to cache?
Does cache really solve performance problems? The answer depends a bit on how you look at it. Is the site faster with cache? Definitely. Does it solve the basic problems that make it slow? No, not at all.
A website can be slow for a number of reasons. Let’s look at two different examples:
Large resources (images, scripts, etc.)
Let’s say you load a lot of large images, style sheets, scripts or similar on your website. The larger the file size of the resource, the longer it will take to download it.
By using cache, we can make sure that the browser saves the file for a long time. The first page load the visitor makes will take some time. But then the rest will go faster.
However, the best solution to the problem would have been to optimise the resource itself. Made the image file smaller in file size. Reduced the amount of unnecessary CSS or JavaScript loaded. In short, optimized what is actually loaded and tried to make it as small as possible.
A lot of data computation
Instead, say the site is heavy on data processing. Maybe the database is large, or complicated calculations are running every time a page is loaded. Every time a visitor reaches your site, these calculations happen. The more, and the more complicated, the slower it goes.
Using a server cache, these calculations can be stored either as temporary files or in the server’s memory. Instead of the calculation being done every time, the visitor can automatically receive a static page that has been calculated. Of course, this is much faster.
The best solution, however, would have been to optimise the code itself. Does it need to run so many calculations? Have I done something in the code to make it slower? Can I readjust so that not so much data is loaded?
Cache is one tool among many
In conclusion, cache is good and an obvious part of the toolbox. But you need to have the right expectations. Cache is not a magic that just solves all performance problems. It is a tool to optimize to the maximum.
So you should aim for the site to load as well as possible even without cache. With cache, it will only get better.
Do you have a dynamic website, such as an e-commerce site?
When you use cache, a temporary file is usually saved that will apply to all visitors. You need to be careful about this if you have a dynamic website. For example, it could be an online shop that has a shopping cart, or if the site allows logging in.
In these cases, a misplaced cache risks displaying the wrong information to the wrong users. For example, it may be possible to access another user’s account. Or see someone else’s shopping cart. The reason is the temporary storage of a finished website.
There are a few different options, depending a bit on how much is unique on the page for the visitor.
You can use edge page includes (or similar). A way to retrieve fragments of the site that are unique (such as a shopping cart). This is useful if you have only a small part of the site that is unique, while the rest is the same for everyone.
You can also let your system create individual caches for each user. This is useful if you have users who frequently visit your site. At least several times a day.
You can also choose not to use the full cache. The big benefit of caching is that you save loading time by allowing the same computed page to be presented many times to multiple visitors. If each page load is unique and changes, the gain is lost.
What should you do with cache?
For a fast website, you should do the following:
- Ensure that static resources are cached in the browser for as long as possible.
- Ensure that dynamic pages are cached to reduce the number of times full downloads need to occur
- Use an object cache to speed up retrievals from the database
2. Minify and optimize resources
In addition to the actual data computation, you are likely loading a variety of resources onto your site. Style sheets (CSS), JavaScript, images, fonts, tracking pixels and more are all examples of resources. Some of them may be on your own server. Others on another server.
When you measure how long your website takes to load, these resources are often the ones that take the longest. Larger files (in file size) take longer to load than smaller ones. That’s why it’s important to optimise the resources you load.
Are you using WordPress with us? Learn more about how to best optimise resources practically here.
Minimise the overall amount of resources
You should always aim to minimise the amount of resources you load overall. The fewer, the faster. You should keep this in mind when installing extensions, tweaking the look and feel or creating content.
A common performance thief is fonts, for example from Google Fonts. Every extra font and variant you load affects the loading time. So choose a few fonts (preferably no more than two) and only the styles you really need.
Reduce the number of external calls
External resources are usually tracking pixels or scripts located on a server other than your own. Sending a request for a resource on another server and getting it back takes time. How long depends a lot on how fast the other server is yet, and how far away it is geographically.
A good rule of thumb is to reduce the amount of external calls you make to the most necessary ones. They will always take the most time.
Enable DNS prefetch on external calls
For the external calls that you have left, you should enable so-called [DNS prefetch]. In simple terms, this means that your server checks where it can find the external resources so that it can load faster.
Minify CSS and JavaScript
When you write code, you have a lot of empty space. Spaces, blank lines, comments. Without this, the code would be difficult to work with and develop. But for a browser, it’s completely unnecessary. Through minification, we can automatically make CSS and JavaScript files smaller and therefore faster to load.
Reduce the amount of unused CSS and JavaScript
Not all code is used everywhere. By loading only the code that is actually used, we make the site smaller in size, and therefore faster. Here’s what you need to think about when developing your site. Don’t load a script on a page when it’s not needed.
In many systems, you can also do this automatically in conjunction with minification for CSS.
Loading images and JavaScript with delay
When loading resources, the site will wait until everything is loaded. Usually, however, not all images or JavaScript are needed for the visitor to use the site.
By delaying the loading of images and JavaScript, you are telling the browser to prioritise what is important, and then load the rest while the visitor is using the site. This leads to improved loading times.
For images, you can also load a low-resolution placeholder while the larger images are loading.
3. Optimize images and videos
Media on a website is usually the one that takes the longest to load. Images and especially movies are usually large files in relation to everything else on your site. At the same time, media is important for creating a good experience.
It may sound strange, but many images can be optimised a lot without getting worse image quality. In simple terms, this means that the image file is cleaned of some data. The quality will be slightly worse, but often not noticeable to the eye. Usually it reduces the file size by more than 50%.
Many publishing systems or extensions to systems automatically optimise the images you upload so you don’t have to worry about it. This is by far the most convenient way to work with image optimisation.
Are you using WordPress with us? Learn more about how to best optimize images and videos practically here.
If you use videos on your website, especially as backgrounds, you need to think extra hard about size. Movies get big quickly and take a long time to load. You need to do this yourself on your computer before uploading the film.
You should aim for as small a file size as possible. Even above about 1-2MB you will notice a significant performance degradation. This requires the film to be compressed, short and not too large in dimension. So you’ll have to skip full HD.
4. Place resources on a CDN
If you have a lot of visitors from different parts of the world, it may be worth looking into using a Content Delivery Network (CDN) for static resources such as images, CSS and JavaScript.
Geographical distance matters on the web too. It will be faster for you to connect to a server if it is geographically close to you. For a typical website, however, you won’t notice much difference within a region. Within Sweden, or even within Europe, is not a big problem. But with longer distances than that, loading times will increase.
The way a Content Delivery Network (CDN) works is that it spreads your resources across different servers around the world. You in Sweden might download them from a server in Stockholm. The visitor from the UK will get from a server in London. The visitor from the eastern US might get it from a server in New York.
Since the resources are usually what take the longest to download, this can increase the performance of the site a bit.
Do I need a CDN?
If you have a service with us at Oderland (our servers are in Sweden) and your main target audience is in Sweden, a CDN will not make much difference. However, if your main audience is in the US or Asia, it might be something to consider.
If you have a business-critical website with many visitors from around Europe, you may also have some benefit from a CDN as long as they have many servers around Europe.
There are many good CDN solutions on the market such as Cloudflare or Amazon AWS. A good CDN costs a little money per month and the amount often depends on how much traffic you have.
5. Optimise the tables in your database
The vast majority of publishing systems, including WordPress, use a database to store content and settings. Like many things, it needs some love and maintenance.
Over time, a database becomes fragmented. A large database that is fragmented slows down the entire site. Optimizing your tables through PhpMyAdmin sorts the data and makes the database, and thus your site, faster.
Optimizing tables is something you can profitably do on a regular basis.
Are you using WordPress with us? Learn more about how to practically optimize the tables in your database here.
6. Optimize your website code
The real determinant of how fast a website runs is how good the code is. Code can be more or less efficiently written and therefore run more or less fast. Everything from how database queries are asked to how the logic in the code is structured affects how fast the site runs.
To sum it up less technically: the more features you add, the slower it will go because more logic needs to be executed by the server for each visit.
If you’re using WordPress, this can include reducing the number of extensions and avoiding adding large extensions that do more than you need.