How I Reached a Nearly Perfect Web Page Performance Score

With Google’s shift to a more user-centric way of ranking, a perfect web page performance score becomes increasingly important to get great rankings in search engines. 
However, these ranking factors are about a lot more than increasing speed. 

Wrong configurations or decisions will slow down your website. A faster server won’t automatically help you achieve a perfect webpage performance. In this post, I will share some of the things I did to (almost) hit that perfect score.

What is Web Page Performance, and Why is it Important

For those that are new to this, it might be helpful to give a little background information. I have other posts that provide more detailed information, so I will keep it short.

With the introduction of Core Web Vitals, Google started to factor in many things that influence the ranking of your website. In short: if you have an excellent web page, but it performs poorly and frustrates your visitors, you will rank lower. No matter what keywords you used.
Core Web Vitals and SEO go hand in hand.

To understand what these Core Web Vitals are, I would like to encourage you to check another post I wrote: What are Core Web Vitals.

The short version of that article is: You need to make sure that visitors can view your content fast and without distraction.

How to Perform a Core Web Vitals Audit

You can test your current Core Web Vital score for free here: PageSpeed Insights.

After entering your URL and clicking on the button, it will analyze your web page and return with a score for desktop and mobile. It will also provide you with details about specific web vitals.
See that score as a sort of web page performance benchmark. 100 is the highest score.

Further down the report, you will find tips and information on how to fix or improve Core Web Vitals that return poor results.

Of course, speed is an essential factor. You control the things that influence that speed up to a certain level, depending on your personal preferences and skills. Some sites help you check that speed/performance.

How to Check the Performance of a Web Page

You can check your web page performance score at WebPageTest.
It provides free performance insights in detailed yet technical reports. 

Enter the URL of your page and adjust the settings.
Make sure that you check the advanced settings when testing for mobile. The default for speed is set to cable instead of 3/4/5G.

If you are looking for a single magical solution to improve your web page performance score, you are heading towards disappointment. 
WebPageTest returns a lot of web page performance metrics and related data. You have to pick bits and pieces of information from these reports and work on that specific performance factor.

As with a lot of things, the better you start, the less work is needed afterward. And remember, it is not only about making websites faster.

My Performance Improvement Starting Point

Overall I started pretty well, but I made a few mistakes that brought my performance down. 
I wrote about it in Introduction to Website Performance.

In that post, I tackled a low-security score.
One of the spearpoints of Google is that websites should offer a secure and safe experience.
I fixed that within the time I wrote that post.

It also took way too much time before the browser received the web pages it requested. After removing one of the plugins I use, I saw a significant improvement.
I ended there with good scores, but there was a lot of room for improvement.

My Current Nearly Perfect Performance Score

As proof, before I give you my optimization tips, I want to share my current metrics.
Let’s start with the Core Web Vitals:

I am thrilled with those scores! I know that I can still tweak up the score for mobile, but this is very rewarding for all the time I spend on it.

Solving some of the remaining issues with images and javascript should improve my Largest Contentful Paint metric.

Let’s move on to the WebPageTest web page performance score for desktop:

And as they are pretty alike, let’s do the mobile scores also:

Sweet! These scores were already excellent a couple of weeks ago. But, after Hostinger (my hosting provider) moved me to a new server, I ace it!

The waterfall view shows me excellent scores for the time it takes before the browser receives the page. Awesome!

What I Did to Improve my Performance Score

You have come to the part you were probably looking for: How to improve web page performance. 

Let’s start with the fact that there is no magical performance setting. It is a combination of things, starting with your own decisions, making a website perform well.

I list all optimization techniques I used in order. The first tips are fundamental, then onwards to the significant improvements and finally some expert tips.

You can perform them in any order, selecting a couple, or work on one single aspect, but keep in mind that they all contribute.

#1 Mindset

In the category fundamental improvements, it is all about the way you think.

I have three rules that describe my ‘performance’ mindset:

1. Go for an optimal mobile-friendly experience. Everything you do to improve your mobile web page performance score also improves desktop performance.
   Many things you do to enhance the desktop experience hurt your pages’ performance on a mobile device.
2. Everything has a price. That price can be in dollars, but most likely, you will pay in a performance currency like loading time, render time, or file size.
3. In terms of price and currencies: Be frugal! Don’t fall for the traps like: ‘it’s not that much slower,’ or ‘this plugin does not add a lot of CSS to the styling.’

You will find that you have to compromise a lot. That’s okay, but make sure that you know what the impact of a decision is.
If you aren’t sure, test your performance before and after implementation.

#2 Hosting

Hosting is also a fundamental factor of your web page performance score.
Optimizing a website hosted at a poor-performing server is like improving the aerodynamics of a car with an inferior engine.

From experience, I can recommend Hostinger. They also have excellent customer support, which might be helpful if you get stuck with technical improvements. 

Registration of domain names is easy as pie, as is installing a website.
Depending on the payment period, you can have a solid and feature-rich plan for $2.59 a month.

#3 CMS

If you would create a website in pure HTML, your performance would likely be excellent.
But maintaining it would be an absolute time-consuming pain in the butt.

That is why we use a Content Management System or CMS for short.
The most popular CMS among bloggers is WordPress. Thanks to the built-in flexibility and ease of use, users can do almost everything they want to do.

The fact that the default installation has default settings that fit most users’ needs is why you need to optimize some of it to your specific preferences and circumstances after installing it.

Blogging platforms

If you host your blog on a blogging platform, the administrators of that platform have done a lot of that for you, but they need to restrict you in the things you are allowed to change. You wouldn’t want your blog to go down due to an error on another website. Everything has a price.

My advice would be to self-host and install a CMS that suits your preferences and then optimize it for your specific situation.
If you have no clue about which CMS to pick, then follow the majority and install WordPress.

You can imagine that the level of control you have over the functionality and settings of your CMS is a fundamental performance factor.
Changing these settings can get very technical fast. That is why there are a lot of plugins that do the hard work for you.

I make sure that I update my CMS to the latest version frequently to benefit from all improvements.

#4 Plugins and Add-Ons

Now that we have the fundamental basis of our website, it is time to optimize and go for that perfect web page performance score.

Most bloggers lack the technical skills to adjust the working of their CMS, and plugin developers recognize this. 
I recommend plugins that deal with:

• making and restoring backups,
• handling security settings,
• tweak performance settings.

I also use these plugins, although I disabled some features that I like to change manually.

Plugins that are great for changing security preferences

You will find a lot of them at the WordPress site: Tagged with Security

I tried a couple myself, and with minor differences, most do their job well. I like this one in particular: All in One WP Security and Firewall.
It has a lot of features, and you will find explanations for most of the settings.
Your current security ‘health’ is presented in a nice dashboard.

Performance related plugins

Plugins tagged with Performance

I can recommend installing one of these:

• WP Rocket
• W3 Total Cache
• Autooptimize

The price of plugins

Again, I am not talking about money.
There are plugins for almost everything, and a plugin might make it easier for you as a blogger. Still, it will cost you performance credits. 

Good plugins will cost you less, but nothing is free.

An example
Imagine that you have a plugin that manages and inserts ads for you. Super useful!

The developer of that plugin needs to make sure that the plugin will work and looks good on your website and others. All the HTML, styling, and scripts have to work on all websites, or the plugin is useless.

The chances are that it inserts many scripts and CSS classes that do not apply to your website.
Still, the browser your visitor uses has to load all those unused lines of code, and sometimes the rest of the page even has to wait until they are loaded.

Back to the Mindset tip:

1. Find out what the ‘cost’ of the plugin is.
2. Test and analyze the results if you are unsure.
3. Decide if you are willing to pay that price or if you need to look for another plugin or another solution.

Update

I keep my plugins up to date to the latest versions, test the performance before and after installation, and remove plugins that I don’t use immediately.
Plugins that I customized in the code are set to manual update because I want to test if changes don’t conflict when there is a new version available.

#5 Optimize

It isn’t easy to summarize all optimizations here, and I probably forgot to mention some that I did ‘on the fly,’ but these are good to start with.

When I created The Side Gig Longlist, I had no clue what to optimize, so I relied upon the performance reports and investigated every problem area, one by one, that they showed me. 

I prioritized what I had to fix based on the urgency, and the time it would take me to learn about it and fix it.

The performance plugins I mentioned before will take a lot of work out of your hands. Still, it is a good idea to try to understand what it is they fix for you. 

I’ll go through them as non-technical as I can.

HTTP/2

HTTP/2, in layman’s terms, makes your server handle multiple requests at the same time, instead of one by one. This will significantly improve your performance.
You need an SSL certificate as secure traffic is mandatory for this protocol.

Tip: Hostinger offers a free SSL certificate with their shared hosting plans.
If you haven’t already buy an SSL certificate from your provider.

Enable HTTP/2 push to send files before they are requested. You will find this setting in most performance plugins.

GZip

You know that when you zip a file, it becomes smaller. Gzip does this for websites. It reduces the number of bytes sent. Enable GZip compression for your website.

You can do this by modifying the .htaccess file or use a plugin that does this for you. Both WP Rocket and W3 Total Cache have settings for this.

Minify your HTML, CSS, JavaScript

HTML is what holds your content like text, images, videos, etcetera together. 
It is the basic layout of your page and tells the browser what the headings are, where to place pictures and what part of the content is a link. I’m sure you get it. 

It also holds many spaces, tabs, comments, and other things your browser doesn’t need. 
The process of removing all that unnecessary stuff is called minifying.

The same applies to your stylesheets (CSS) and JavaScript files.
Some suggest combining different CSS files into one single file (and JS files in another), while others recommend against it. I can’t tell you what is wise to do as I haven’t tested it.

Enable minification of HTML, CSS and JS in your performance plugin.

I have not enabled the combining of files because I want them to be loaded only if necessary. The price I pay is that I have to write code to do this.

Whenever possible, I will strip away things that aren’t necessary.
You won’t see me naming an object ‘super-effective-email-input-form.’ It will probably have a name like ‘cfm.’

If you use a theme, this is hard to do, but try this to write some custom CSS. Check reviews to see if a theme is optimized for performance before installing it.

Preload, defer, lazy-loading.

Another important thing is to control when resources like stylesheets and scripts are loaded.

Browsers ‘read’ your page from top to bottom.
If they see that you need a script, they request that from the server. 

You can tell a browser to preload the file, defer the loading of scripts, or load images when they are in the browser’s viewable area. The latter is called lazy-loading.

WordPress V5.5 (remember what I said about keeping up with the latest versions?) implements lazy-loading of images by default.

Manipulating this flow gives you control over how fast the content of your page is available to the visitor.

Most of my CSS is preloaded. I included a small part of the essential styling directly in the HTML. The rest is preloaded and split into pieces that are loaded if necessary.
Styling that is essential for a desktop view is absent on a mobile device. And some styling is only loaded if a page contains certain elements.

The same applies to some of the JavaScripts.

There seem to be some plugins that do this for you, but I don’t have any experience with them.
I modified the header.php and functions.php to achieve this. Let me know in the comments if you like me to write about how I did that.

Enable Caching

By enabling caching, you will tell your CMS to create an HTML copy of your page, and as long as it doesn’t change, it will serve this prerendered page, thus reducing the time it takes to create that page from scratch. 

The price you pay for caching is that some changes may take time to become available. You can force refreshing the pre-rendered pages by purging the cache manually.

Browser Cache

You can also direct the browser to hold some files in the browser cache, reducing the need to request them from the server. Typically, you tell the browser how long it should wait before requesting a new version.

As changes to those files are only loaded once the ‘old’ version expires, you might need to find a way to force a page to get a new version from the server before that time runs out.
It’s a bit too technical for this article, but I add query strings to files affected by the browser cache settings.

Just keep in mind that enabling the browser cache might cause unexpected issues.

Both serverside and browser caching can be enabled in WP Rocket and W3 Total Cache

#6 Images

The use of images and video, or multimedia in general, often makes a page more attractive. Yet, it also adds to the page’s weight.

One tip is to be selective when adding multimedia to your page. Use images that support your content.

At first, my posts had a big image at the top, until I realized that its only function was to make a page more attractive, hoping that visitors would stay and read. 

I removed them and now I focus on the title, the first paragraph but mostly on delivering what I think my visitors expect of my post. 

I also added a couple of preferred image sizes to my WordPress theme. 
Showing images in the right size is an effective performance measure.

Optimize images

Next, I installed a plugin that optimizes the images in several formats. It’s called Smush and it does a great job.
Optimizing, without going into details, reduces the file size by removing information without degrading the quality of the image.

Better image formats for websites

I also have a plugin that converts the JPG and PNG files to the web-optimized WebP format. Older browsers do not support this format, but the plugin takes care of that by offering a fall back JPG or PNG version.

The Pro version of Smush does all of the above at once. I’m waiting to see which plugin will support the even more effective AVIF format before deciding on a paid plugin.

#7 Dynamic Data

A plugin called W4PL generates the collections I show on the longlist pages.
This plugin does an excellent job, but as I mentioned before, everything has a price.
I know that it consumes server time, but I am willing to ‘pay’ that price.

Every bit of data that is generated instead of being written will take time on the server to be processed. Make sure you know what it costs.

I run performance tests before and after I use a new plugin to make sure that it doesn’t affect my performance to much.

#8 Popups, Ads, and Changing Layouts

One of the Core Web Vitals is called Cumulative Layout Shift, or CLS.
It checks if the layout of your page changes after presenting the first content to the visitor.

I’m sure you came across a page before that had a button you wanted to click.
Yet, when you clicked that button, it was in a different spot because an ad or image got loaded.

This negatively affects the user experience and therefore your Core Web Vital scores.

The same applies to popups blocking the content, requesting you to sign up or show you an ad.
Check your pages if this happens and if so, remove the culprit.

Don’t use popups.

#9 Use Content Delivery Networks

A CDN, or Content Delivery Network, stores copies of your pages on several servers and delivers them to visitors based on proximity to and load on those servers.
Simply put, it is similar to caching but over multiple servers.

This mechanism is an effective way to increase performance.

I use Cloudflare.
My provider, Hostinger, has made it very easy to integrate it if you lack technical knowledge.
If you want to do it yourself, then their tutorial will guide you through the process. Cloudflare has a free plan.

#10 Expert Tips

My first expert tip would be to read the part about the first fundamental improvement, the mindset part, again.

The second tip: You are going to make changes. Backup! Make sure you know how to backup and restore your website.

Here are some more tips:

Keep collecting data, make modifications and test again. Become familiar with how your website is performing in general so that it is easier to spot if something is off.

Don’t waste time by trying to run all optimizations first and then test. Changes are you wasted time on some aspects that did not influence your web page performance score.
It’s tedious, but do your improvements one by one.

Learn to code. You don’t have to become a developer, but getting a better understanding of how things work will make your life so much easier.

Some of the changes I made were as small as changing a single line in a specific file. The alternative was installing yet another plugin.

Of course, you can follow a tutorial and perform the steps without knowing what you are doing, but I’m sure you feel a lot more secure if you did.

Trust me. Find some introductory courses about PHP or coding in general. It will be worth it.

A list of quick tips for WordPress users

• Remove unused themes.
• Remove WordPress Emojis.
• Disable unused stylesheets and scripts.
• Check if you need the Heartbeat API. Disable if not.
• Learn how .htaccess works.
• Learn how functions.php works.

Bonus tip for Cloudflare users

You can create three free rules.

• Create a Cache Level rule caching everything.
• Create a Cache Level rule to bypass previews.
• I used the third free rule to elevate security on admin pages.

Conclusion

As with many things, optimizing performance or improving your Core Web Vital scores will require adaptations to different parts of your website.

The better the foundation is, the less you have to improve or fix and the easier it is to get a good web page performance score.

I believe that a frugal mindset, in the context of performance, will benefit you enormously.

Picking the right hosting provider and CMS is also fundamental.
From there, you should collect data, make changes, and test to see if there is any improvement. It worked for me.

What do You Think?

Do you have tips that I forgot to mention here? Or have you read things that you would like me to do a follow-up?

Let me know in the comments!

What’s Next

If you like this post, I would appreciate it if you shared it on your social media.

Thank you for sticking with me on the long article! You are awesome!

Recommended Reading

• Introduction to Website Performance
• What are Core Web Vitals
• How Long Does it Take to Increase Domain Authority
• How to Start a Blog as a Newbie
• Where to Find Infinite Content Ideas