If your site is taking more than 3 seconds to load either it’s on a mobile device or a desktop, chances are, you are losing a large number of conversion potentials. Low speeded website is not only reducing your profit, it’s also going to affect your search ranking in the long run.
Throughout this article, I’m going to show you how an example site with a performance score as low as 53% to be improved to 98%. This practical guide will help you to implement it in your website to improve page speed and other speed-related factors. At the end of this article, you will get a complete checklist for future use of any other projects.
However, if you are a business owner and struggling with high bounce rate, low conversion rate and poor website speed, you can hire me as technical support provider to investigate the issues and make improvements for you – place an order in Fiverr.
Why Speed Is Important?
The answer in a nutshell is, “No one wants to wait.” In addition as a key person of a website you should consider those three major factors mostly relates to your website.
- Lower bounce rate.
- Increased conversions.
- Better search engine ranking.
There are so many case studies that can be found online on how page speed matters to the bounce rate factor. But the moral of the studies is almost the same which is, that the more time your website needs to load the more potential you are losing in the backend.
Every second counts because page speed affects your conversions on a large scale. If you can reduce your website loading time from 4 seconds to 3 seconds, you can improve your rate of conversion by 7%. So, you can imagine how important it is to reduce your website loading time on all types of devices.
Site speed a quite an important ranking factor, no doubt about that. But the thing is, it’s not the only one. Keep in mind that if your website gives users a bad experience, it’s going to affect your website ranking. So, the relationship between site speed and website ranking is quite relative.
How to measure site speed
To measure your site speed, you can use some tools for free. Although, for some advanced features, you might need paid versions of those tools. But in our case, free versions are good enough to measure the basic website metrics.
• Google Page Speed Insights
• KeyCDN Website Speed Test
• GTMetrix
For our practical case of website, that website scored 69 on performance, which is pretty much bad signal indicating the website is on in a state of low standard.
Why does hosting matters?
When you host your site closest to your major audience it’s going to result in better site speed to the majority audience. However the PHP version of your hosting server is also important because if your website is running on to much older versions of PHP, the website will be vulnerable to hackers and impact the core WordPress processing time which eventually slows down your website performance.
There are two (02) ways to know where your server location is.
- Ask your hosting provider.
- Manual checking by using online tool – gsuite.tools/traceroute
In our practical case, the website we have worked on, the target audience is based on the USA and Trace Root test reports indicating that there are two server is delivering the web files for the requests sent from North America.
This was possible because we used Cloudflare and integrated Content Delivery Network (CDN) for this website
If your web server is located far from your audience, you should ask your hosting provider to transfer your site data to the closest data center of your major target audience.
Things to consider to use Themes and Plugins in a website:
You should consider couple of prerequisites before choosing any Themes or Plugins for your website. For example, if any of your theme or plugin is not compatible with the WordPress version of your website, you should avoid that theme or plugin for your website.
Key factors to check before installing a theme or plugin:
- Choose a theme that is necessary for your site.
- Remove the plugins that have duplicate functionality.
- Try to use plugins with at least 4 * ratings which only load assets on pages where they’ve been used.
- Remove and Delete disabled plugins.
- Regularly Update plugins.
Choosing the appropriate, trusted and secure Themes and Plugins are important. Because, inappropriate themes and plugins can break down your website and reveal security holes for the hackers.
Concatenating and Minify CSS and JavaScript Files:
When you install multiple plugins in a website, each of those plugins sends CSS and JavaScript files to the server to process it before loading. Concatenating is like a process to combine those files in a single one which is much easier for the server to process before loading any page or website.
Remember, minification CSS and JavaScript process can break down your website so you must keep a copy of your site backup first.
- Minify CSS and JavaScript Files.
- Backup your site before doing this step – important.
However, if you are using any other speed optimization plugins, look for these settings and keep them turned on.
- Minify CSS Files.
- Optimize CSS Delivery.
- Minify JS Files.
- Load JavaScript Deferred.
- Delay JavaScript Execution
Content Delivery Network (CDN):
Your website is accessible all over the world. If your server is located in Asia, people from North America will face a good amount of time delay to load your content.
But you cannot host your files in every region practically, right?
To solve this problem, a Content Delivery Network (CDN) is a technological service that stores your content on every server of the provider. Whenever someone visits your website from Europe, files from the closest server are sent to the user, and for this you have to pay the CDN provider monthly or yearly basis.
How to integrate CDN into your website for free:
Although CDN is a paid service that you have to purchase there is a way to use this feature for free for small businesses.
To connect Cloudflare with your website just follow two steps:
- Connect your domain with a Cloudflare free plan account.
- WP-Rocket has an addon of Cloudflare which has to be connected through the Cloudflare Global API key and Zone ID.
How to Optimize WordPress Database:
WordPress uses a relational database structure. All information is stored in the specific assigned table. There are some common WordPress database tables for the basic installation.
For example, the tables mentioned below store this specific information:
| wp_posts | wp_postmeta |
| Title | SEO keyword descriptions |
| Content | Page Layout |
| Date | oEmbed |
| Status | Extra Image Information |
| Excerpt | Breadcrumbs |
WordPress database structure is designed in a developer-friendly way which is why there are so many plugins available in the market. In short, any plugin doesn’t need to create a separate table to store its information whereas it can store its information in the wp_postmeta table.
This is why the WordPress database gets filled up with information as it grows. Even if u revise a post, for example, maybe you insert a link into a line of text of your blog post, WordPress will store a completely separate version of the entire blog post into those related tables.
When the database becomes heavy, it takes more time to process the PHP request that came from the browser, as a result, the site becomes slow in terms of performance.
Manual Database Optimization Process of a Website:
The best way to keep the WordPress database optimized is to use plugins with custom database tables. A lot of contact form plugins store their contact form submissions in their tables.
Every site has different critical plugins like contact forms, membership plugins, or calendars, make sure you reach out to their support and ask them if the information is stored in custom database tables or not. If not, ask them to show you the way how you can optimize it.
Regularly pruning revisions in any database manually is a common way by which you can optimize your database. A simple SQL command will delete all the revisions stored in the wp_posts table of any database.
DELETE FROM wp_posts WHERE post_type = "revision"
However, before executing any SQL command you should back up your site first because any spelling mistake in the SQL command can do severe damage to any live site.
How E-commerce order information is stored in the database?
WooCommerce core makes every order a custom post type and stores it in the wp_posts and wp_postmeta tables. The same process how the post information is processed repeats for E-commerce orders as well.
For each E-commerce order, nearly 60-70 rows of information are added to the wp_postmeta table. Say it’s 62 rows for each order, if you get 10 orders per day, in a whole year about 226300 rows of information will be added to the wp_postmeta table in your database. Numerically it’s huge and not efficient for the speed of a website.
WP Revisions Plugin to Auto Limit the Revision Data:
WP Revisions Control is a free plugin you can use to limit revisions to be stored in a database. This plugin sets limitations for the revision copy to be stored in the database. This will work for WooCommerce Product revisions as well. After installing the WP Revisions Control plugin, you have to set the number of revisions to save for each post type from Settings>Writing>WP Revisions Control
Before installing the WP Revisions Control plugin, make sure you don’t have this type of plugin already installed in your backend. Some managed hosting provider like WP Engine have this type of plugin already installed in their system.
Caching in WordPress
As you should know WordPress works in the backend, when a person visits any post, page, or product the WordPress core queries the database for that specific post, page, or product. Then the database returns the requested data then the WordPress core combines the retrieved data executed by the PHP code to dynamically generate an HTML page. Lastly, the HTML page is saved into the server cache and served to the browser for the person who visited the post, page, or product.
If the user visits the same post, page, or product within a few days, WordPress can skip the whole PHP and database process since the HTML page is already stored in the server cache.
This is the basic concept of caching. There are three types of Server-side Caching:
- Page Caching.
- Database Query Caching.
- Object Caching
Another type of caching that most browsers use is Local Caching. Every time a visitor goes to any post, page, or product it saves all the assets (Like Images, CSS, JavaScript, and other static files) for later use.
Best Caching Plugins for any WordPress Site
There are a lot of caching plugins available and some of them have been around for many years. It’s up to you which one you should use. Before installing any caching plugin, you should research the WordPress repository reviews and then decide which one will be the best fit for you.
The most commonly used caching plugins are:
- Hyper Cache.
- WP Fastest Cache.
- WP Super Cache.
- W3 Total Cache.
- Comet Cache.
- WP Rocket (Paid)
Busting Cache
If you use caching to speed up your site, you have to know how to disable, clear, or bust the cache. Let me give you an example. You can upload an image today, and after three months, you might want to update that image.
Depending on how you update that image in WordPress, along with your settings, determines who will see that image. If you aggressively cache your site, you could be in a situation where you see the new image and your users see the old image.
I actually had this experience on one of my websites when I over-optimized two images and they looked a little blurry, so I re-optimized the image. But even after it was re-optimized, I couldn’t see that new image because it was cached somewhere, and I had to troubleshoot the issue to clear the cache so I could see the updated image.
When this happens, there are a few steps that you can take:
- Empty or Perge any Cache system.
- Disable caching plugin.
- Disable your CDN.
- Version the file.
How to trick the browser by using File versioning in troubleshoot process:
File versioning tricks the browser into thinking that it’s a new file so it downloads it. I’ve always been a fan of versioning your files, and there are a few different ways to do this.
You can convert the file names to something like this:
- style.v2.css or style-v2.css
- path/v2/your file name
- style.css?v=2
Because the file name or path looks different, the browser thinks it’s a new file and downloads it. This is a fantastic way to make sure that no one sees old content. Many CDNs and cache systems will work with any of these versioning formats, but sometimes, you will run into issues with query strings, so keep an eye out for that, this will work for any assets, images, JavaScript, or CSS files.
Finally, clear your browser cache. This is the last step because it only solves the issue for your browser. If anyone else has this issue, it won’t solve it for them and they’ll see old content.
Using caching can really speed up a site, but it can also conceal problems. That’s why you want to get really good at busting your own cache to make sure that all of your visitors are experiencing the latest version.
For my example site I’ve installed WP-Rocket paid version plugin because of its variety of features and an all-in-one place for website speed acceleration. You can even integrate your CDN like Cloudflare or KeyCDN with this plugin.
The best thing about using WP Rocket is its pre-assigned default settings are really useful and once you activate the plugin, the website speed should accelerate almost instantly.
Final Results of Our Practical Website:
We have installed WP Rocket premium plan for our case website and did some manual optimizations as well. Throughout the process, we worked based on results. For example, after few optimizations, we found the Largest Contentful Paint (LCP) was blocking the most of the time to load faster. We re-uploaded those media files doing after few image optimizations.
Finally, you can see a huge improvement on the base of performance of the practical case of website I was working on so far and in other speed test tools like KeyCDN and GTMetrix the results were almost same as well.
