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.
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:
- 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.
Cloudflare is a CDN (Content Delivery Network) which helps in delivering my content faster by serving them from their servers all over the world. Additionally, it helps in website security too, I have installed SSL (https) on this blog using Cloudflare only. I am using their Free Services only.
EWWW Image Optimizer is a Free WordPress Plugin that losslessly compresses images that you upload to your blog automatically. It can also compress your previously uploaded images. A picture of a few MBs can be reduced to a few KBs without losing its quality much. So, it helps in image optimization for Free. (You can use the widely Accepted WP Smush or Shortpixel for this too)
WP Rocket is a Paid Caching Plugin ($39) for WordPress that helps in minifying and compressing your website, builds cache and more. Yes, there are other free caching plugin alternatives like WP Super Cache, WP Total Cache etc, but this one I prefer for its various configurable options, and gives the maximum customization. There’s a benefit in becoming a paid user.
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.
I should again remind you: Do not ignore the basics. They are important.
Choose a Good Host:
You will be surprised to know that half of your pagespeed issues may be caused due to the fact that you have chosen a poor hosting provider. Just because a lot of hosting is cheap (and some, even are free) does not mean you should jump into them. The reverse is also true, just because some hosts charge you more does not mean they are the best. You should always choose your host wisely and after detailed research.
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:
Most of us blog on WordPress CMS. Instead of just choosing a theme that looks attractive, try testing different themes and 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:
Requires Pro or Higher Plan, so we will skip it for now.
Requires Business Plan, so we will skip it for now.
Enable Accelerated Mobile Links:
Turn Off (If you ever configure AMP then only configure this, otherwise keep it off. We want your default blog page load fast, without trimming down anything).
Requires Pro or Higher Plan, so we will skip it for now.
Turn Off (Only if you want a separate domain for mobile users with different content, then you need this, otherwise, turn it off)
Prefetching URLs from HTTPS Headers:
Requires Enterprise or Higher Plan, so we will skip it for now.
Now, move on to the Tab named CACHING:
This is a one time action, which clears the cache and Cloudflare fetches an updated version of your website. We don’t need to do anything now.
Browser Cache Expiration:
Choose 2 Hours. (If you want longer caching time, you may choose longer time periods too. It won’t leave any direct impact on your blog page loading speeds, so this ultimately depends on your choice)
Enable Query String Sort:
Requires Enterprise or Higher Plan. So we will skip it for now.
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
- 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
- Minification / Concatenation
- Defer JS Loading
- CloudFlare Compatibility
- 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:
Enable for Images
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.
Enable Separate Cache files for Mobile Devices.
Leave it empty. This option mainly generates a cached version for logged in users separately for each user.
If SSL (https) is installed on your blog then you must enable it.
Check the box Disable WordPress Embeds
I chose 10 hours because I want to refresh cached version every 10 hours. If you want you can refresh once in 24 hours. If you publish new content very frequently, then choose a small interval. If you publish contents once in a few days, then 24 hours will do.
Well, let’s move on to the next Tab: Static Files.
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.
Check Google Fonts
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:
Keep Empty if you didn’t face any issues in minification. Only if your website is broken and you follow the tutorial given by WP Rocket Team to troubleshoot the minification issues, you will need these two options to exclude certain files manually.
Remove Query Strings:
Check Remove Query Strings from Static Resources
Render Blocking CSS/JS:
Check Load JS Files Deferred
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.
This option is used when the default CSS Generator fails to work. Again, a properly coded theme should not face any issues, so you should probably check your theme again. WP Rocket Team has written a simple guide on how to use the Fallback Critical Path CSS. Check it here. I am not going into more details.
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
This is only for specifying certain pages/user agents/search engine bots for whom you don’t want to show cached pages. If you just run a simple blog, then just ignore these settings. Those who run real-time sites like e-commerce etc, they have to make certain URLs non-cached. They can configure those pages from here.
Let’s move on to the fifth tab: Database
These settings allow you to optimize your database. You can regularly clean up your Revisions, auto-drafts, trashed posts, spam comments, transients etc. This will help your site load fast further.
Go to the sixth tab: Preload
Check Activate Sitemap Based Cache Preloading
Sitemap Crawl Interval:
Keep 1 second. If it increases server load, choose 2 seconds.
Sitemaps for Preloading:
Enter the URL of your sitemap over there. By default, WP Rocket will automatically detect the sitemap url, so, only change it if you need.
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.
Enter your domain name
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.
You can see a Clear Cloudflare Cache button below. The button comes handy if you want to clear cache.
Move on to the eighth tab: Varnish
If your server uses Varnish Cache then check the option: Purge Varnish Cache Automatically.
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 can also check out the WP Rocket Documentation to get detailed explanations of everything that can be done with the plugin. Help yourself 🙂
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.
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?
Umm, if you are in the mood, you can also check out the Moz article about How to achieve 100/100 with Google Pagespeed Tool. Yes, that’s obviously achievable, if you want to go that extra mile. Well, this will need some coding capabilities too. So, if you are a coder, then this is for you. 🙂
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:
On Google Pagespeed Insights I got a 78 for Mobile and 73 for Desktop. This also will keep varying. There’s no report caching archive feature so I can’t leave you any links for the same.
Google Lighthouse scores are calculated in 100. It gave me 10 in performance, 45 in PWA, 67 in Accessibility, 75 in Best Practices and 90 in SEO (as of 15th January 2018). But, well, take a test for other websites out there, the scores won’t be much better. I did test a few other sites, including Search Engine Land, Search Engine Roundtable, Moz, WP Beginner, IftiSEO, ShoutmeLoud, and a few other websites. The scores were more or less similar. It is obvious that when you need to keep your website design, optimization, and custom coding intact, you need to compromise a bit of performance. But surely, this can be worked out. And improving these scores will directly impact your SEO on Google. So, I will be focusing more on improving these aspects. I will do in-depth research on this and will surely come out with another informative article in future if I am able to find significant ways to reduce your website load further.
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. 🙂
I know you like freebies, hence I have 70+ WPMUDEV Premium Blogging Plugins that will change your blogging career. From publishing posts, managing ads, comments, social marketing, forums, security, site speed, subscription opt-in forms, SEO Plugins, you will get everything you need to become a professional blogger. WPMUDEV has given me full rights to share them. So, you can go and download the original clean plugins legally. Check it out.
I have attended Google AdSense Publisher Meet in 2016 and 2017 and got to know a lot about AdSense Policies and Violations, Ad Placement Optimizations, Content Writing Techniques and Tools, Productivity Tips, SEO Strategies and some Google Webmaster Myths. I have collected them all, directly from Google in my SEO Strategies by Google post.
If you want a plugin to take regular automatic backups of your blog (including the themes, plugins, and the wp database) directly on Google Drive, then check out Updraftplus Automatic WordPress Backup Plugin. It also deletes old backups automatically so you don’t run out of storage space on your Google Drive. And all this happens without needing you to be online.
Last but not the least, I have also written an Error-Free Guide to Set Up Facebook Instant Articles on your blog. If you run a news blog, this will be immensely helpful for you.
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!