Does your website already meet all the speed optimization requirements of Google Pagespeed Insights? Anno 2021 it is important to have a website that loads at the speed of light. In fact, Google is increasingly judging websites by user experience metrics, of which website speed is an important one. There are a number of useful website speed optimization hacks you can use to make your website lightning fast. In this article we will discuss the most important ones.
Google developments 2021
The Google algorithm is actually constantly evolving, so it’s no wonder that a few things are going to change this year as well. In June, an important update called “Core web vitals” will be implemented. In short, Google is going to judge websites more strongly based on user experience factors using ‘Core Web Vital statistics’. This includes factors such as page speed, responsiveness and the stability of content while loading.
Google has promised that website owners have until June 2021 to improve their website metrics on user-friendliness, speed and structure. Since then, Google saw a 70% increase in users engaging with Lighthouse, PageSpeed Insights and Search Console’s Core Web Vitals report in preparation for the update.
What does this mean for my website speed score?
Google Pagespeed Insights is actually a misleading name because the test measures more statistics than just website speed. This also means that you won’t achieve a score of 100% if speed is the only optimization priority you have for your website. Factors such as user friendliness and structure must also be taken into account. Therefore, in this article we also look at these factors, in addition to the website speed optimization hacks.
Create a solid foundation by choosing a good hoster
How fast your website is, is for a big part determined by your hosting provider. If your website is running on a server that responds slowly, then there is little point in starting to optimize your website. That’s like tuning up a moped: you can optimize all you want, but you won’t succeed in making it fast enough to drive on the highway. For this, you need a car.
If you choose a solid WordPress hosting provider, your website will have more hosting capacity, and you will notice this almost immediately in the loading time. The two hosters we can heartily recommend are Kinsta and SiteGround. Both are very good and score excellent on speed, support and security.
Go for full size images and compress them
Most websites are full of images. This often also means that images are the cause of a significant portion of the loading time. Therefore, we recommend testing the loading time of your website thoroughly and to reduce the size of unnecessarily large images to the actual size.
WordPress already helps by saving each image you upload in different formats. You can further reduce and scale images in the WordPress media library, but also – if you are handy – on your own computer before uploading. You can use any image editor that exists; from Photoshop to Paint.
When you have set the format of your images correctly, there is a second optimization possible for the loading time of your images: compression. This means that the images are “packed” as best as possible into small packages, without losing too much quality. In this way you can quickly save several megabytes on dozens of images.
Load content above the fold first
One factor that relates a lot to user experience is how quickly content above the fold loads. In other words, content that is visible without the visitor having to scroll down. Because Google wants to provide users with a pleasant experience, a lot of value is placed on how fast this content is loaded.
How does your content load correctly above the fold? This has to do with how your website’s codes are structured. Some tips we can give you are:
- Remove CSS and Javascript that block the loading of the content above the fold. This way you load the visible elements first, then the rest.
- A technique that has become very popular in recent years is Lazy-loading. This loads images only when they are needed.
- Reduce the data above the fold by compressing and/or combining scripts.
- Make sure that the important content above the fold comes into view first, before other elements are loaded.
Fair is fair, this does take some coding. Not too versed in coding, or don’t have anyone on staff? We’d be happy to help you out.
Optimize your website code
An important point for website speed optimization is to optimize the code of your website. You do this by combining and/or compressing scripts. Loading JavaScript later by moving it to the footer also helps in improving your website code.
Combining scripts
Combining scripts means nothing more than putting all the separate files together in one file. It’s basically like combining the contents of three Word documents by placing them one after the other in one document. The file size of the one combined script is actually no different from that of the separate scripts added together. Yet you improve the loading time, because your web browser has to make a new connection to load each file. And that takes time.
Because the browser now does not have to connect for three scripts, but only for one, the speed of the loading time increases. Two excellent plugins that allow you to combine JavaScript and CSS are WProcket and NitroPack.
Compressing scripts
When you have combined all scripts as much as possible in the previous step, you can now start with compressing the combined file. For scripts, compression mainly means that unnecessary spaces, comments, tabs and whitespace are removed from the code so that the total file size decreases. This is called minifying. You can find numerous WordPress plugins that optimize the code for your website, but sometimes they create more problems than they solve. The plugin that we found most useful for compressing scripts is WProcket.
Move JavaScript to the footer
JavaScript files contain code related to the functionality of your website. And CSS files make sure the website and the functions are displayed in a certain way. Since search engines care that your website is fully displayed as quickly as possible, it helps to load CSS files first, and JavaScript files as late as possible. A free plugin that can do this for you is Scripts to Footer.
Check carefully that your website is still functioning optimally after activating this plugin. It often requires some technical knowledge to tune all JavaScript files so that they do not cause problems in the footer.
Use caching
A cache makes your website faster by preventing the web server from having to load the same page over and over again. The website will load faster on your next visit because the browser has already saved it, so to speak. It is very easy to set up caching. If you have a WordPress website, you can do this using the plugins WP Rocket and W3 Total Cache.
Loading static content externally with CDN
Normally, images and scripts are loaded from your own server. A Content Delivery Network (CDN) is an external hosting party that copies and offers all your static content (images, PDFs, videos, but also scripts that rarely change). When a visitor visits your website, the dynamic content (the code of your website that changes per request) is still delivered by your own server, but all static content can be retrieved from somewhere else. Because the requests of a visitor are spread over two servers, the load per server is lightened and a request can be handled faster. This improves your website speed.
Read more about the best CDN providers of 2021 in the article by Techradar.
Remove and relocate render blocking resources
A website has several components that are not directly interesting to a visitor, but which must be loaded either way. Think of certain CSS, Javascript or tools like Google Analytics and Google Tag Manager. If these scripts are loaded first, the visitor has to wait longer for the things that really matter. And this is not what our friend Google likes either.
To solve this you can do a few things:
- Minify your JavaScript and CSS. This means removing all extra white space and unnecessary description in the code.
- Add JavaScript and CSS to each other. To do this, take several .js and .css files and combine them.
- Delay loading JavaScript. It can be useful to delay loading JavaScript files until everything else on the page has loaded. A reliable way to delay loading JavaScript is to use asynchronous loading.
A handy plugin that can get you well on your way to removing and moving render blocking resources is WP Rocket
Website maintenance
The final point for website speed optimization is maintaining your WordPress environment. Many website owners neglect this task which makes their website slower and sometimes even let it crash. Therefore, always make sure that your theme, plugins, WordPress and PHP version are up to date. Also try to remove all plugins you no longer use, they take up unnecessary space and slow down your website speed.
But don’t take Google too seriously..
Actually, we mainly recommend that you take the score and recommendations of Google PageSpeed Insights with a grain of salt. A 100/100 Pagespeed score does not guarantee a lightning-fast website, but only shows that you meet Google’s website optimization requirements. This means that Google values your website more than websites with a lower score. Which of course is a big advantage if there is a lot of competition for similar content on which you want to rank. Yet, this does not say everything because website speed is only a small piece of the puzzle. There are many more Google ranking factors (2021) that are important for a good score in the search engine.
To assess the speed of your website a bit more objectively, you can also use other tools like GTMetrix and Pingdom Website Speed Test. Just like Google, these tests give recommendations on how to optimize your website speed. This data will hopefully get you very far in speeding up your website and making it search engine friendly!