Did you know that 53% Mobile users tend to quit a website if it fails to load within 3 seconds?
Yes, just 3 seconds.
And by the way, I am not saying this! Google themselves reported this.
And, for this specific reason, Pagespeed is an essential aspect of Search Engine Optimization. And no matter how drastically the SEO scenario changes, Pagespeed will always remain as one of the most important factor. You simply cannot ignore this.
Why?
Ever found yourself struggling on any competitive exam website or any other website that takes too long to load? You felt like quitting the site as soon as your work is done. So think what will your incoming visitors do if they don’t land on your site within a few seconds. Especially when there are alternative websites available on Google?
They will just click back and choose the next website on Google Search. You lost a valuable customer then and there. You lost a conversion even before you got the chance to do so. That’s bad.
So, you see, how it affects SERP and SEO as a whole?
A fast loading website is beneficial not only for getting better ranking on Search Engines, but it also creates a positive impact on your visitors. People love to visit sites that are fast loading. It’s that simple.
In today’s article, we are going to discuss pagespeed optimization techniques. Not just techniques, I will share actionable steps to make your WordPress blog load faster.
Well, what I found out that almost every other page on the internet regarding Website Page Speed Optimization is targeting to get the best possible score on the Pagespeed tools. They are breaking down every aspect of Pagespeed, as suggested by Google, or GT Metrix, or Pingdom, explaining it and giving the steps to achieve that.
But, even after following them, you will notice that you cannot get the desired speeds. Your website still doesn’t load as fast as you expected.
Well, that’s the main reason for me to write up this article. My aim is to make your website load fast, regardless of your pagespeed scores.
Today, in this post, I won’t be going into details of pagespeed optimization, there are already enough of other blogs explaining those stuff. Rather, in this post, I will give a checklist that you can apply directly to your blog and get the results. In fact, I will be directly referring to the steps I followed myself for my blog HiTricks.com.
Tools I Use for PageSpeed Optimization:
Well, first of all, check out my website again. Navigate to the homepage, then load a few posts. You will instantly notice how fast it appears. It will definitely create a long-lasting impression.
So, you must be thinking that I used some magical tools to achieve this. Well, nope!
In fact, in short, I just utilized 3 available tools:
- Cloudflare
- EWWW Image Optimizer WordPress Plugin
- WP Rocket WordPress Plugin
Yes, you read that above. That’s all I used on this blog to get that speed.
So, that’s it. These 3 tools are the only thing I used to configure my pagespeed. Nothing else.
Sounds too good to be true? You must be asking me, what’s the trick man? 😀
Well, these tools can only work at their maximum capacity if your website is ready to receive it. There are a few basic stuff ignored by everyone, which makes the base of your website weak. As a result, you end up with poor speeds, no matter how many tools you use, free or paid.
The Basics:
I should again remind you: Do not ignore the basics. They are important.
Choose a Good Host:
Only if you invest a bit in your hosting, it will give you better returns. Well, particularly in this case, simply Googling up doesn’t always give promised results. Most of the hosting providers offer attractive affiliate packages, and hence those get better promotions, irrespective of the quality of the host. We all fall prey to these.
It is better to get word of mouth for hosting reviews. Browse blogging communities, ask your fellow bloggers for honest opinions regarding hosts.
If you ask me, I will blindly recommend VapourHost. They offers shared cloud web hosting with fast loading ssd servers. I am also happy to declare that HiTricks is running on VapourHost since October 2017, and it has been over 2 years (till the time of writing this post, January 2020) that I am using their service successfully. Try them out. You might like it.
If your website gets a lot of page views per day, it is better to get a VPS.
Choose a Fast-Loading Theme:
Often poorly coded themes result in increasing page-loading times.
Try out the theme demos and navigate a few pages. Try to determine which theme loads pages quickly.
No matter how good your theme might look, ultimately your visitors are coming to your website to read your content, and it should load quickly. Take care of that.
After you have configured these two aspects rightly, your job is 50% done.
Currently, I am using ReHub Theme. It is actually meant for Coupon or Deals Websites, but I found it to be fast-loading and smooth, so I customized it according to the look and feel of my Blog. You can surely check out the Theme on ThemeForest if you want to. It is Well-Optimized for SEO, Fast-Loading, and comes with Visual Composer and other essential tools that you can use to personalize your website according to your need. They do have a lot of Demo Pages, you can check them out too.
The PageSpeed Optimization Checklist:
You know the reason why I wrote this post?
Because, in spite of having thousands of pagespeed optimization guides on Google, people still fail to get it done right. So, I thought of writing a post with actionable tips that will directly help them reduce the page loading speeds, without going into explaining details of each and every aspect. There are other blogs for that. Go through them.
So, before you begin reading the checklist, you should have a self-hosted WordPress site ready. Your blog should be hosted on a fast server and having an SEO optimized theme.
So, let’s begin!
How to configure Cloudflare for faster page-speed?
I guess you have already made an account on Cloudflare and added your website there. If you didn’t check here to know how to do that. We only need the free account on Cloudflare right now.
Once you are done, Go to the Tab Named SPEED:
Auto Minify:
Check CSS
Check HTML
Polish:
Railgun:
Enable Accelerated Mobile Links:
Mirage:
Rocket Loader:
Mobile Redirect:
Prefetching URLs from HTTPS Headers:
Now, move on to the Tab named CACHING:
Purge Cache:
Caching Level:
Browser Cache Expiration:
Always Online:
Development Mode:
Enable Query String Sort:
That’s all that is needed for Cloudflare Configuration. We will now proceed to the next thing: EWWW Image Optimizer.
How to configure EWWW Image Optimizer for Lossless Compression?
Okay first things first. This is something where most views differ, and people choose to use different ways for Image Compression. Well, EWWW isn’t the only option, there are other Image Compression Plugins out there, so if you want you can install any one you like. The most popular ones are WP Smush from WPMUDEV and Shortpixel. Some also prefer using Imagify. Essentially they are paid plugins and all do more or less the same job.
I prefer this one EWWW because it is free, allows to optimize previously unoptimized images and automatically optimizes the images being uploaded. So, you get all your necessities covered for free. I am using EWWW for 3 years and I don’t have any memory issues or any other issues with it. I tried switching to other plugins but I keep coming back to EWWW again and again. Well, if you use EWWW, follow this, else, use any other plugin of your choice.
I also have a Detailed Guide on Shortpixel Plugin, how to set it up properly and use for Free. It comes with a 100 image per month for free plan. It is good for upcoming images, which you are going to upload. But, you cannot optimize your already uploaded images for free. Anyways, choose whatever suits you. 🙂
Beware, there is another plugin named EWWW Image Optimizer Cloud. It is also from the same author and uses cloud API for optimizing images. We don’t need it.
This plugin mostly does everything on its own. Just go to your WordPress Dashboard > Settings > EWWW to configure its settings further.
Under the Basics tab, you can see the JPG, PNG, GIF, and PDF optimization levels. As a free user, we don’t get any freedom of choosing lossy compressions, we need to be happy with lossless ones only.
You can purchase an API Key to utilize the lossy compressions, but they aren’t of much importance. The original size > Lossless compression size is quite big so the size change impacts the loading time hugely. But Lossless > Lossy compression size difference isn’t as big as the former one, so the loading time won’t vary much.
Here are the settings I chose:
Go to Advanced Settings Tab and Turn on Parallel Optimization.
You are done. Now time to Bulk Optimize your images that you uploaded earlier. Go to Media > Bulk Optimize.
Click Start over there and wait till it finishes optimizing all your previously uploaded images.
Well, if you have too many images, it will take time to compress them. Might take hours. Go out and have some coffee.
How to configure WP Rocket Cache Plugin?
Well, this is where the main game starts. Most of the job we need to do are surrounded by this plugin WP Rocket.
First and foremost, this is a paid plugin. It costs $40 per site for a year, and you need to renew it for half the price $20 from the second year onwards to get regular support and updates. Multiple sites and Unlimited sites licenses can be purchased too.
But, if you see, there are a lot of other free cache plugin solutions out there. So, why am I choosing WP Rocket?
Believe me, in the last 2 years, I have tried and tested all the other cache plugins available.
I have tried all the following all-rounder caching plugins:
- WP Super Cache
- W3 Total Cache
- Autoptimize
- WP Fastest Cache
- Litespeed Cache
- Comet Cache
And time and again I have installed a lot of small caching plugins, that are targetted to do a specific task of pagespeed optimization. (Like, say, GZip Compression)
But, no other plugin could give me as much optimized experience as WP Rocket. Additionally, WP Rocket also collects all the necessary stuff you need for pagespeed optimization at one place. You don’t need to install a secondary plugin again. It takes care of everything.
- Page Caching
- Cache Preloading
- Sitemap Preloading
- GZIP Compression
- Browser Caching
- Database Optimization
- Google Fonts Optimization
- Remove Query Strings from Static Resources
- Lazyload
- Minification / Concatenation
- Defer JS Loading
- CloudFlare Compatibility
- CDN
- DNS Prefetching
It also has a Cloudflare Settings option, so that it can work simultaneously with your Cloudflare settings without interfering with each other.
Lastly, unlike many other plugin’s Free / Premium Tier Models, this plugin makes it simple. Just purchase and you get full access to all the features without any limitations. Just decide how many licenses you need.
[Pro Tip: I recommend you to buy up to 3 licenses (or even the Unlimited Licenses) if you can afford, it will save you money when you start your new website at a later point of time.]
So, once you have purchased and installed the plugin, go to Settings > WP Rocket to access its settings.
In Basic Settings Tab, choose the following:
Lazyload:
Enable for Iframes and Videos
Replace YouTube Iframe with Preview Image
Like I said earlier, make your base strong: Choose a fast server and an SEO-Friendly Theme. These are the main reasons behind most pagespeed related issues.
Anyways, let’s move further.
Mobile Cache:
Enable Separate Cache files for Mobile Devices.
User Cache:
SSL Cache:
Emoji Cache:
Embeds:
Cache Lifespan:
Well, let’s move on to the next Tab: Static Files.
Minify Files:
Minify CSS
Minify JS
After you do choose each of the minification settings, clear cache once by hovering your mouse over the WP Rocket button on the Top and selecting Clear Cache, refer to the Image below.
After clearing cache each time, keep checking your website to find out if your site is broken due to these settings.
If you find your website is loading fine, then proceed to the next option. If you find that your website is broken, then check the tutorial given by WP Rocket Team to resolve minification issues with your site.
Combine Files:
Check CSS
Check JS
Again, keep clearing the cache of your website and see whether your site is breaking.
If you use poorly coded themes and plugins, the chances of breaking your site are more. However, if your themes and plugins are coded properly, you won’t face issues with minification.
Check that above article from WP Rocket Team to resolve further issues.
Exclude CSS and Exclude JS:
Remove Query Strings:
Render Blocking CSS/JS:
Check Safe Mode
Check Optimize CSS Delivery
Again, if you notice broken website, check out this article about Render Blocking CSS/JS to troubleshoot it.
Now, try regenerating Critical Path CSS by hovering your mouse over the WP Rocket Button on top then choosing the option Regenerate Critical Path CSS.
It will take some time, and ask you to refresh the page to know the status of the operation. Refresh after some time. If the operation is done successfully, then move on to the next setting, else you need to configure the Fallback Critical Path CSS option just below.
Go to the third tab: CDN and just enable the Cloudflare Settings Option. We don’t need to do anything more here.
Click on Save Changes and you will see another separate tab named Cloudflare. We will come to it later on.
For now, move to the fourth tab: Advanced
Let’s move on to the fifth tab: Database
Go to the sixth tab: Preload
Sitemap Preloading:
Sitemap Crawl Interval:
Sitemaps for Preloading:
Preload Bot:
Check Automatic.
Prefetch DNS Requests:
If you use Google fonts then you can add the following code inside the box, it will decrease the loading time by a bit.
Now, let’s move on to the seventh Tab: Cloudflare
Here, you need your Cloudflare Global API Key. To get that, go to your Cloudflare Profile, and scroll till you see the API section.
Click on View API Key and copy the API Key.
Come back to WP Rocket. You will see it asks for your Cloudflare Registered Email ID and your Cloudflare Global API Key. Enter them. Click Save Changes to Refresh the page.
Domain:
Development Mode:
Optimal Settings:
Relative Protocol:
WP Rocket and work with Cloudflare with optimal settings so that none of them gets in the way of each other. And at the end, you will end up getting the best pagespeed optimization coupled with Cloudflare + WP Rocket.
Move on to the eighth tab: Varnish
If you don’t know whether you have varnish or not, most likely you don’t have. You can still ask your hosting provider about it. They will know.
Come to the ninth tab: Tools
Here, WP Rocket collected some useful tools at one place, which you might need now and then.
Most of the options here are self-explanatory, I won’t go into details here.
You can use the Clear Cache, Preload Cache, and Regenerate Critical Path CSS options from here. These options can also be found on the WP Rocket tab on the top.
The export and import settings option are a good way to export your current setting from one site and import that exact same configuration on another site without needing all the way to configure from the beginning.
And finally, if you feel you are getting any issues with an update, you can roll back to the last stable update.
The tenth and final tab is Support.
If you get any further issues with the plugin, you can write to WP Rocket team about it in details. They will help you out with it.
You are done! Now Check your Pagespeed:
Well, everything is completed. Do a pagespeed test now.
Read this post from WP Rocket to find out Why you should not care about Google PageSpeed Insights to get a detailed idea of what Google recommends you to do versus what suits your blog the best.
GT Metrix also wrote an article about the Difference between different pagespeed tools. It compared GT Metrix, Google Pagespeed Insights, Pingdom Tools and WebPagetest in detail. This should let you understand which one you should use.
If you ask me, I recommend GT Metrix to get an overall idea of your Page Loading Speeds and where you need to improve yourself. This is the tool you should consider taking the suggestions specified.
If you want you can also analyze your website in Google PageSpeed Insights, Pingdom Tools, and Webpagetest, you will get an idea.
Google has also released another tool named Lighthouse for developers. It is a Chrome Extension from Google. You can use it to analyze your website in depth. This is by far the most detailed plugin, that will scan your webpage and give you a lot of suggestions based on your Performance, Progressive Web App compatibility, Accessibility, Best Practices, and SEO.
But again, I should remind you that it will give you suggestions aggressively, and don’t be sad if your output is poor. Most of the websites have similar outputs. You cannot help it much as long as you are on a CMS platform. Only if you are in a mood to explore every aspect of what can be improved, it can help you out, and maybe try to improve it?
Do Pagespeed Metrics Really Matter?
Well, if you came here for a secret recipe, then I should clarify that I ain’t got any. These are the only, what you call, tricks, tips or whatever, to make my website load fast.
And I personally don’t run behind pagespeed metrics much.
I rather focus on the real website user experience more.
- How does the user feel when he lands on the website?
- How fast does the website load?
- How fast can he navigate from one page to another?
These are my aims now.
Once, I was very interested in going through each and every aspect of page-speed optimization and I was obsessed with getting the best scores. I don’t do that anymore.
This is because:
- Pagespeed Scores aren’t permanent: The scores you see GT Metrix or any other tools aren’t permanent. As you update your website every day, it is gonna change. And eventually, that extra millisecond you got won’t matter anymore.
- Try testing your pagespeed consecutively for 10-20 times. Change location, browser etc. You shall find they aren’t the same every time. They vary depending on many factors. So, what’s the point pitching in for the best? It changes every time.
I will also recommend you to try to focus on your website rather than the scores. If your website is slow, you don’t need an external tool to make you realize that, you can feel it right into the moment you browse through your web pages. So, just focus on improving them! Be happy.
HiTricks.com PageSpeed Scores?
I really didn’t want to include this section inside this article, because I already said I don’t care about them. But since you are here reading all the stuff I recommend, I feel you should know my scores too.
So, here they are:
GT Metrix:
PageSpeed Insights:
Pingdom Tools:
Webpage Test:
Google Lighthouse:
That’s all. I ain’t gonna discuss them. I would recommend you to go through the reports and analyze them. Compare them with yours. 🙂
Well, that pretty much sums up the entire thing regarding pagespeed optimization. If you have any further queries, don’t forget to drop a comment below. I will be happy to help you out. 🙂
And finally, don’t forget to share this post with your blogger buddies. This will help them to
What to Read Next?
Well, I have written quite a few informative articles for my fellow Bloggers. You will definitely like them. 🙂
So, I hope these articles will enable you to further enhance your Blogging Strategies. I would like to thank you for taking the time out and going through this post. If you are reading these lines, it shows that you value my writing, something for which I am always grateful to you.
If you have enjoyed reading it, then don’t forget to share this with your Blogger Buddies out there. It will help them a lot to make their website fast. 🙂
Well, time for me to sign off for now. I will be back again with another interesting update. Stay Tuned!
Nirmal Sarkar is a Biotechnologist from the city of Joy, Kolkata. He is the founder of this blog and covers a wide range of topics from Gadgets to Software to Latest Offers. You can get in touch with him via nirmal@hitricks.com
That’s a great answer Nirmal. Thanks a lot. Landed here through quora.
Hi Nirmal,
Useful tips. thanks!.
I have started applying many of the recommendations especially minification of HTML, CSS and JS files.
All said I felt something was off when it comes to removal of render blocking CSS and JS and I found this interesting https://www.speedboost.xyz/blog/why-do-you-need-to-eliminate-render-blocking-css-js and thought of sharing it.
Let me know if there are any alternative for WP rocket cache plugin – any suggestions from your end?
Hi, Thanks for your inputs. Well, WP-Rocket works best for me. Doesn’t need any alternatives. Just install that and remain in peace of mind.
Great content brother. I got cloudfare setting from your post it’s easy to a configuration. Thank you
Thanks for sharing a valuable article. Thanks for sharing about EWWW Image Optimizer.
Thanks nirmal
You are welcome Mitul 🙂