This means that if you click on that link and purchase an item I will get a commission, at no extra cost to you!
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.
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.
In the category fundamental improvements, it is all about the way you think.
I have three rules that describe my ‘performance’ mindset:
- 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.
- 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.
- 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.
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.
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.
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 with most of the settings.
Your current security ‘health’ is presented in a nice dashboard.
Performance related plugins
I can recommend installing one of these:
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.
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:
- Find out what the ‘cost’ of the plugin is.
- Test and analyze the results if you are unsure.
- Decide if you are willing to pay that price or if you need to look for another plugin or another solution.
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.
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, 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.
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.
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.
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 then this is hard to do, but try this is you need 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.
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.
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.
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.
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.
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.
Free Performance Audit
An idea started to form into my mind now that I reach the end of this article.
I wonder if I would be able to do performance audits as a service and if anybody would be interested in this service.
To test this idea, I came up with the following:
I would like to know if you would use this service if I were to offer it.
Follow this link and complete a small questionnaire for a chance at a free audit if you do.
The first responder will get a free audit. This way, I can test if I like to do it, and you get the opportunity to see if it is valuable to you at no cost.
I will leave the form open for a month.
The second and third free audits will go to two randomly picked responders.
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!
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!
- Go for an optimal mobile-friendly experience. Everything you do to improve your mobile web page performance score also improves desktop performance.
May 9, 2021 |
Starting a blog is a great way to share your thoughts and stories while building a source of income on the side. It might seem hard, and frankly, it can be, but with a little help and guidance, you really can have your own blog out there in no time.
I would like to help you get your own blog online, which is why I wanted to write this blog post.More about ‘How to Start a Blog as a Newbie’ here
May 9, 2021 |
As Google focuses more and more on rewarding excellent user experience, it is time to start looking at more than just some performance indicators.
This post will explain what core web vitals are, what user experience has to do with it, and what they mean for the SEO ranking of your blog or website.
I know that this isn’t the sexiest topic and that it looks very technical as you scan this post, but as always, I will do my best to keep it understandable for non-techies!More about ‘What are Core Web Vitals’ here
May 4, 2021 |
If you want to get the most out of Pinterest without spending hours of your time on your Pins, then you should use Tailwind for sure.
Let me explain Tailwind and what you can do with it in this first article of a series of posts on how to get the most out of Tailwind.More about ‘Get Better Pins in Less Time with Tailwind for Pinterest’ here
May 3, 2021 |
There are a gazillion images that you can buy or download for free, but when it comes to that picture you need for your blog…
No problem, I hear you think; there are also hundreds of photo-editing applications available, so let’s get one.
But when you start them and take a look at all the tools the user interface offers you, you feel the first signs of frustration growing in the back of your mind.
And then there was Canva!
April 28, 2021 |
Finally, I found time and a topic to write another Fix-It Friday post about. Today I want to implement tracking affiliate clicks with Google Analytics 4.
There are many ways to track if visitors clicked your affiliate links, and plugins like ThirstyAffiliates make it very easy to do.
I want to have these reports appear in my Google Analytics dashboard without depending on the implementation of a third-party plugin, so I can switch plugins without losing information.More about ‘Tracking Affiliate Clicks with Google Analytics 4’ here
April 28, 2021 |
Would you like to give your Pinterest boards a more professional look? Then keep on reading as I will explain in this easy step-by-step mini-tutorial how you can create Pinterest board covers in minutes!
March 5, 2021 |
By now a lot of you already know some of the basics of getting your pins noticed on Pinterest. You need to make your pins pop so they get noticed in that overwhelming stream of pins.
They need to have bright, beautiful colors, big fonts, not too much text, and as a lot of pinners claim: they also need fresh and original images.
Now, I don’t disagree, but I do believe that pins without images can be beautiful and noticeable too.
Made with Canva
I use Canva to create my visuals for Pinterest and while I was playing with some new concepts, I got a result that I believe is really nice and decided to write this ‘Make Your Pins Pop’ post.
In this short tutorial, I would like to explain how I did it (it’s really easy).
Before we start I will show you the end result, in case you missed the pin.
This tutorial is about how I did the ‘shadows’ of the word ‘outstanding’.
Canva has a lot of very user-friendly tools, even in the free version, but still, they are limited. Tools like Photoshop have far more features, but it is pretty complex and difficult to learn.
Canva is perfect for quickly designing pins, Instagram visuals, printables, business cards and-so-forth.
If you haven’t started using it, then do yourself a favor and register for an account. It has a free version, but you probably want to go premium fast. You can try the Pro version for free over a period of 30 days.
Now, here is the pin I used it on:
You see that I’m playing around with different ways to make simple words attractive, without using images.
A Little More Work
As I said, Canva has a lot of tools. The neon glow is a default one.
I used the same word twice and placed them on top of each other to emphasize the effect of a glow behind it.
The long shadows are a little more labor-intensive.
If you have a blog or want to start one, then I can imagine that you have less time available. The following steps will take more time, but because of the user-friendliness and easy learning curve of Canva, you will find that after two or three times, you will speed up automatically.
Create a new design (preferably a pin template) and select a suitable font from the list.
I recommend not using the fancy ones, but keep them bold and beautiful.
Align the text to the sides and center it. Make sure you have enough space left on the sides.
We are going to create a textbox for every character of the word.
I chose to keep the outer characters ‘flat’.
Place them above the matching characters in the complete word. Canva ‘snaps’ them in place when you get close to the right position.
I have placed them a little lower in my example, for illustration purposes. You need to align them perfectly.
Give them a dark color and a subtle shadow.
With all the separate characters selected, right-click and select ‘Group‘.
Right-click again en select ‘send to back’. Make sure that you do not lose the selection (by clicking on something else).
Now with the cursor keys on your keyboard, shift the selection down and maybe to the right a bit. Three times down was enough for me, but since this may look different from other fonts, I recommend you judge by sight.
you can play with the effect by shifting left or right also.
I hope you still have your selection because we need a copy of it. Use your keyboard again (CTRL-C, CTRL-V) to copy and paste.
The copy will show up on the top layer, but it will not be aligned. Align it again with the full word.
Right-click and ungroup the selection.
Select only the outer characters and delete them.
I set the transparency of these characters to 80%. You will find it in the right-upper corner (click the checkerboard).
Make a group of the remaining characters (select them all, right-click and select group) and send it to the back.
Using your cursor keys, shift them into position again.
That’s basically it.
Repeat the process until you have no more characters left.
You can play around with adding more copies when you need to make a transition (if the offset between two layers is too big, you will start to notice a more jagged edge)
You can also play with the settings of the shadow.
The words ‘HOW TO’ were done using the same principle, creating the illusion of a long shadow.
This brings me to an important tip: You don’t have to make it perfect!
The suggestion of a shadow is enough. It doesn’t have to be completely realistic.
Your pin will be viewed for just a couple of seconds. Your design has to grab the attention, the content (your text) will take over.
I had a lot of fun playing with the possibilities this method gives me on top of the features Canva already has. Hopefully, you have learned a thing or two from this mini-tutorial.
Show me your pins. I’m curious about what you are going to create! Make your Pins pop!
O, and while you are at it, maybe share mine?
Thank you for reading! You are awesome!
January 24, 2021 |
Let’s start with what I want to accomplish while playing with lists in WordPress. It might give you a bit of an idea of what this post is going to be about.
The Side Gig Longlist is based around lists. In WordPress, this is quite easy to do, especially with an awesome plugin that I will talk about later.
What I would like to do is to add some properties to the list-items (the posts) in order to provide more data to my visitors.More about ‘Fix-It Friday – Playing With Lists in WordPress’ here
January 24, 2021 |
The idea of this hopefully useful post is that I would like to explore and share with you how to get more out of a 404, or page not found, error.
Like a lot of bloggers, I am using WordPress as my CMS, but I expect that this information will also be useful if you use other platforms.More about ‘Fix-It Friday – Get more out of a 404’ here
January 24, 2021 |
Have you ever added a plugin to your beautiful WordPress theme that was brilliant but didn’t work well with the styling of your theme? This post will learn you a bit about fixing styling issues in WordPress.
Some plugins will let you customize their styling, but often this is limited and sometimes there is no way to customize it at all.
In this post I will explain what options you have to fix this, so you can add another tool to your skillset. Don’t worry if you are not a techie, I got your back!
More about ‘Fix-It Friday – How To Fix Styling Issues’ here
My name is Jip, and I created the Side Gig Longlist to learn all I can about blogging and making money online.
Having decades of experience in information technology, I decided to explore all the non-technical aspects of blogging, marketing, and promoting.
I also happen to like sharing the things I know and learn with others.
This blog is my platform to experiment, learn, and share.