Do you want a faster website? Then you have landed in the right place! Further down, I will show ten different ways how you can optimize for speed.
A fast website is essential no matter what type of website you run.
Here are some reasons why:
- Google sees web page load time as a factor in SEO rankings
- Visitors expect a page to load in less than 2 seconds
- About 40% leave the website if it does not load within 3 seconds
In other words, if the charging time is longer than 3 seconds, you risk losing about 40% of your potential customers. NOTE! This is a generalized number and can vary from industry to industry.
How customer behavior looks on different sites varies a lot. We expect some types of websites to load faster than others and this is simply due to the standards and expectations created in the various industries.
But, in any case, the effect is the same: the
slower the loading time of the page, the more potential customers lose patience.
It therefore comes as no surprise that speed is extremely important in both conversion optimization and onpage SEO .
Below I explain some methods to start optimizing for a faster page but you should start by answering the question…
How fast is the website?
Always test how fast your website is before you start optimizing it. This is not only important to understand how fast it actually charges, but also to be able to analyze which factors cause longer waiting times.
When you think of CHARGING TIME, what do you really think of? Are there any of the points below?
- How long does it take for any content to appear on the screen? (First contentful paint)
- The time until the content has finished loading “above the fold”, ie. what you see on the screen without having to scroll? (First meaningful paint)
- The time until all dynamic functions are interactive on the page? (Time to interactive)
- The time until the whole page has loaded from top to bottom, incl. everything that the visitor cannot directly see? (Total load time)
There is really no right answer because all of the above factors are very relevant KPIs that somehow describe a web page’s load time.
Analyzing these individually can help you identify and understand how slow the page is. In addition to this, it becomes easier to determine the type of problem that is causing the long charging time.
How to get a faster website – a step-by-step guide
- Optimize large images
- Enable lazy loading
- Minify HTML, JavaScript and CSS
- Turn on caching
- Get rid of unnecessary external widgets
- Reduce the number of HTTP requests
- WordPress? Delete unnecessary plugins
- Get faster server and web hosting
- Load the page’s resources in chronological order
- Asynchronous load
NOTE! Keep in mind that in addition to the tips below, there may be additional ways to improve site load times.
- Large images – often one of the primary causes of slow web pages
For some pages, image optimization can be a simple and effective way to make the page faster. This is simply because images are often very large files in their original formats.
If you have never thought about this, I recommend that you do the following:
- Choose one of your posts (where you have pictures)
- Copy the URL of the post and type it into Google’s Page Speed Insight tool to identify large image files
- Optimize the large image files and update them in your post
Reduce the size of unnecessarily large image files
As illustrated in the screenshot below, they can see the heading “Properly size images” in the Page Speed Insights report. It shows all images that can be resized and / or compressed.
NOTE! I did the test on a randomly selected page and have therefore erased the address.
As you can see in the right column of the image, Google has calculated that you can potentially save 242 KB by optimizing three images. This can also save over 1 second in charging time! It is a lot!
Do you have similar results on your site? Then you can learn more about compression and image optimization here .
Get a CDN if you have an image-heavy page
One way to automate the image optimization process is to use the Content Delivery Network (CDN).
What is CDN (Content Delivery Network)?
In short, CDN means that the content of the page is available in several separate servers in different geographical areas, instead of only on your own web server. This in turn means that the traffic not only loads your own web server, but that it is instead distributed on several servers. Especially if you have a lot of heavy image files on the page, this can be an effective way to achieve a faster page.
Many CDN services also have automated image resizing and compression capabilities. If you have a large site and you have the resources, it is most likely worth paying for such a service. There are also free versions but often these involve certain compromises.
1. Lazy loading – load only content that is visible on the screen so that everything relevant is loaded faster
Web pages are often long. Some users see only a fraction of them.
Web surfers spend an average of 57% of their time at the top of the page (above the fold), according to Norman Nielsen Group’s survey from 2018. On most pages, this is not far from the truth.
Source: Norman Nielsen Group
A large proportion of visitors thus see only a fraction of the page’s content, which means that it is unnecessary to sacrifice speed to load content further down the page.
For this reason, I recommend checking out lazy loading, which means that the browser only loads the images that the visitor can see on the screen at the first moment.
In this way, you can reduce the load during the primary loading of the page and create a faster experience when landing on the page.
In the Page Speed Insights report, you can also see that Google recommends lazy-loading under the heading “Defer offscreen images” (see example image below).
In this example, you see only a quarter of all the images that were on the tested page. In total, I added up to 3.5 MB!
With lazy loading implemented, these 3.5 MB would only be reloaded and when the images are visible on the screen. The tool also claims that this could potentially save over 13 seconds from the total charging time.
NOTE! This does not mean that the page feels unfinished for 13 seconds, but because the images “below the fold” load in the BACKGROUND, it can make the page feel choppy when using interactive functions. It can thus affect the KPI Time to Interactive, as Google calls it.
2. Minify HTML, CSS and Javascript
This piece may sound a bit technical. But, fortunately there are many automated options for minification, so do not be funky.
What does minify HTML, CSS and Javascript mean?
A simplified explanation… Your website contains first and foremost HTML (content) and CSS codes that tell the browser what everything should look like. The more dynamic elements of the page, such as web forms, are often built on Javascript.
All of these consist of codes that can be “cleaned up” by eliminating unnecessary tags and characters in many cases. Cleaner code (fewer characters) results in smaller document sizes that are faster to load.
That’s exactly what minification is all about.
For example, a CSS code for an object might look like this:
.header {
padding: 45px;
text-align: left;
background: white;
color: # 333333;
font-size: 32px;
}
As you can see, the code is presented in a structured way to make it “easier” for people to work with it.
Minifying CSS basically means that the code is made less humane but more “machine-friendly” by changing the structure and instead presenting everything in one and the same rhyme.
Minified version of the code above removes all unnecessary characters (often spaces):
.header {padding: 45px; text-align: left; background: white; color: # 333333; font-size: 32px;}
The minification above saved 21 spaces .
In other words, when you apply this to all the elements on your page, we are talking about thousands of characters (depending on the complexity of the page, of course). The effect can thus be significant.
In addition to spaces, minifying code can mean removing other “unnecessary codes” that are unusable for the browser.
To minimize your codes, there are countless plugins that can do the work for you. Especially for WordPress, there are several plugins that can do this. On this WordPress site, I am currently using Autoptimize for this purpose
3. “Caching” – to not load the same things over and over again…
Have you noticed that websites you have visited before often load faster than pages you have never visited before? If so, the reason for this is most likely caching.
What is caching?
In short, caching means that when you visit a website, some of the page’s content will be stored in your computer (cache).
This happens if you have caching enabled. If you do not have it, I strongly recommend that you activate it.
By storing / caching the contents of the visitor’s computer, you get the following benefits:
- The browser does not have to load as much content every time the visitor lands on the website
- Faster experience for returning visitors, as well as visitors who visit multiple pages on your site
Caching will thus speed up the page only for those who see several pages on your domain and thus has no effect when new visitors land on a landing page for the first time.
If you use WordPress, you can very easily activate caching using plugins , such as:
- W3 Total Cache
- Autoptimize
- WP Fastest Cache
- m.fl.
There are many options, both free and paid, so you should probably be able to find someone who suits you and your site.
4. Remove heavy external widgets that are not loaded from your own server
Have you installed a plugin that shows a flow of your Facebook, Twitter or Instagram posts? Or maybe a similar widget connected to an external service?
It may be worth checking out as these can have a noticeable impact on your landing page load times.
In the example below, you can see how much “damage” such a widget can do. The example is from a randomly selected page that I inspected using the Google Chrome Inspection Tool.
All 18 resources above come from Facebook. The only benefit it provides is that the visitor can like the company’s Facebook page directly on the website, without navigating to Facebook.
What does it cost the page in terms of speed?
- About 450 KB of data transfer
- More than 1 second more work for the browser
- Another 18 HTTP requests (Read more about requests in the next paragraph)
Is it worth it? Hardly… There is certainly a solution with fewer compromises. If it’s really necessary, keep it.
Fortunately, these files were loaded among the last on the test page, and thus the perceived speed is not affected by the most important content at the top of the page very much.
On the other hand, these can affect how quickly the page’s dynamic elements become interactive and how long the page will be perceived as sluggish, ie. Time to Interactive.
5. Reduce the number of HTTP requests
In the example above, I mentioned HTTP requests (server requests). Thus, it is about the number of resources/files that the browser must load when a visitor lands on your page.
In general, you can assume that the more requests the browser has to make, the longer it will take before the page has finished loading. It is not always so unambiguous, but it is a good starting point.
To find out how many requests are made, you can, for example, use the following free tools:
- Google Chrome Inspection Tool (as in the example above)
- Pingdom Speed Test tool (as in the example below)
What is the optimal number of HTTP requests?
There is no single answer to what is an optimal number of HTTP requests because it depends on what each unique web page must be able to present to the user.
But to get a comparison number…
In May 2019, the median number of requests was 74 on desktop devices and 68 on mobile devices (according to the HTTP Archive). For relatively simple pages, however, one should strive to have much fewer. Many experts recommend staying below 30 requests.
How can you reduce the number of requests?
Review the resources your site is currently loading and get rid of the resources you do not need. Examples of how you can proceed are:
- Get rid of unnecessary images – The browser loads each image separately and thus each image creates an additional request. Therefore, remove all unnecessary images from your pages.
- Load only relevant CSS files , ie. only the files that are relevant to the specific URL. It is unnecessary to load style sheets for pages that the visitor does not see.
- Get rid of unnecessary features that increase the number of requests – like Facebook in the example in the previous paragraph.
- Combine many CSS files into fewer wholes so that the number of individual CSS files is reduced (and thus also the number of requests).
- etc
6. Are you using WordPress? Remove unnecessary plugins
If you use WordPress and have loaded a lot of plugins for different purposes, it may be a good idea to check if you have unnecessary plugins enabled.
There are many good plugins for WordPress that save you time and improve page performance. However, if you have many plugins enabled that you do not use, it can have a negative effect on page performance.
Do a review and make sure you:
- Do not have multiple plugins for the same purpose
- Do not have unused plugins enabled on the page
Before you load new plugins, you should also ask yourself: Do I really need a plugin for what I want to achieve?
There is a plugin for everything nowadays! But… that does not mean you need a plugin for everything you do on the site. If there is something you can do yourself, do it. Install additional plugins only when necessary.
7. Get faster server and web hosting
Many people get a cheap web host to start with to get started with the website. I think this is a good idea, especially if you are a hobby blogger who does not make money on the site.
But when you start getting more traffic and you start marketing your site, it’s time to make sure you have a professional and effective web host. This is because it can have a big effect on how fast the page loads, especially when the number of traffic increases. So it is not enough just that you work with the structure of the page.
8. Load the page’s resources in chronological order
As previously stated, you should strive for the content at the top of the page (above the fold) to load quickly.
Another step to achieve this is to examine the order in which the page’s resources are loaded and strive to load them in chronological order “from top to toe”. In this way, priority is given to the most significant content that affects the perceived loading time the most.
9. Asynchronous load
Asynchronous loading is also a factor that can affect the perceived speed.
When the visitor arrives at your site, the browser starts requesting and receiving files from your server. Some files load quickly while others load more slowly.
Without asynchronous loading, the files will stay in line and when the first file has finished loading, the next file will start loading, and so on.
When enabled, however, multiple javascript files can be loaded simultaneously, instead of stopping the process and queuing the files. Therefore, asynchronous loading can have a significant effect on the loading time, especially for websites that use javascript.