Page load speed is one of the ranking factors that the big old G takes into consideration to rank websites, and as a website owner, it’s your job to make sure that your website page speed performance is actually optimized to make sure that it will pass Google’s page speed standards, but as for me, page speed was actually not on my top priority because when I was starting this blog, I was focusing more on content, plus the fact that whenever I check my website in my browser, I thought that it was already loading fast enough based from my “feelings” whenever I try to view my website in the web, and not considering the actual metrics from a reliable website speed test.
The Awakening
It was only two days ago when it got into me, and it was actually just by accident, I was only searching the internet for “backlinking strategy for 2017” and it so happened that the number 1 result in the Google search ranking is the post from GotchSEO, so I clicked it to see if there’s something useful in the post. In the post, the first thing to consider is to fix the technical errors in your website, and it was there when I got introduced to Google’s Pagespeed Insights. To tell you the truth, It was actually only that day that I heard of this Google PageSpeed Insights, but I do know other sites and tools that provide website page speed test like Yslow and GTMetrix but for some unknown reason, Google’s Pagespeed Insights has never been in my system (which is actually a bit ironic because I am trying to rank my website in Google) until two days ago.
So having this “newly found” information, I tried to test my site’s page load speed on it and below are the initial results of my website’s page load speed performance for both mobile and desktop
Mobile
Desktop
What actually caught my attention and got the surprise of my life is the result of my desktop page load speed, because you know, 17??? WTF Really??? I was actually expecting the result to be on the lower end since I haven’t done any page speed optimization on my website, but 17? I really didn’t expect that. So having slapped in the face by these results, I said to myself that it’s about time to speed things up, so I did a few research on how to improve website speed as well as fixed some of the issues as suggested by Google PageSpeed Insights and the result after all the things I did is quite impressive really – I was able to improve my mobile website page speed performance by 38% and improve my desktop page speed performance by a whopping 424%. How I did it? It only requires 4 steps and you can read it below.
Step 1: Website Image Optimization Part 1
Step 1.1 – Installing WP Smush
One of Google PageSpeed Insight suggestion is to optimize my images, so I tried searching the internet for a wordpress plugin that performs website image optimization and what I found is WP Smush. I downloaded and installed the plugin to compress my images and it actually done its job. From the image below, I was able to save 9.8% of space by compressing the image size
However, when I tried to check again the page load speed, nothing actually changed. My mobile page speed was still at 53 and my desktop page speed at 17, and because of this, I decided to perform some major overhaul to my images, particularly on the featured images which is elaborated in step 1.2
Step 1.2 – Image Resize and Change Image Format
My initial image is actually a bit big at 1200px by 628px, I initially chose this image size because this is the size of facebook images for link posts, so that when I post my articles in facebook, the image would fit perfectly into my facebook post, but it’s only now that I realized that because of this, my website page speed was significantly affected, so I did some editing and reduced my image dimension to 768px by 432px. Another thing I did is to change the image format from PNG to JPG, which is actually a recommendation I saw from WP Smush pro features, and instead of buying the pro version, I just painstakingly changed all the featured images format from PNG to JPG, and after I’m finished with all of this, I tried to perform again another website page speed test, and below are the result
Mobile
Desktop
The website page speed for mobile was actually reduced by around 17% from my previous test and I have no idea why, but what’s really interesting in this page speed test is the result of the desktop, and as you can see for the desktop, it’s website page speed actually improved by 205% which was actually amazing! But it doesn’t end here because I did more page speed optimization which you can see below
Step 2: Reduce Blog Post from 10 to 5
Another thing I did is to reduce my blog posts appearing on my homepage and I believe it will improve the website speed a bit more because it will load fewer images and data. Initially, the settings for my homepage is to show 10 posts so I reduced it to 5 just to test if it will improve my page speed, and below are the result
Mobile
Desktop
And my guess is actually right, the mobile website page speed improved by 14% and the desktop page speed improved by 15% from the previous page speed test.
Step 3: Website Image Optimization Part 2: Enabling Photon
Photon is actually a feature included in my Jet Pack Personal Plan Subscription, and its purpose is to perform website image optimization, so the images will load faster, thus improving website performance in terms of page load speed. I don’t know if it’s a good thing because there are actually no settings and all you have to do is to switch it on. Anyway, since I am subscribed to the personal plan of Jet Pack, why not try it as well, and below is the result after I enabled Photon on my website
Mobile
Desktop
Enabling Photon improved the page speed performance of my mobile by another 14% and the desktop by another 10%. I am already loving Jet Pack now! First, the Vaultpress, which saved my online store and now this! I really think that the $3.5 per month is actually a pretty nice investment!
Update: Photon is actually included even in the free version of Jet Pack, so you can activate it even without subscribing to the paid plans
Step 4: Installation of a Caching Plugin
Another thing that Google PageSpeed Insights suggested is about compression, minification and other terminologies that I really don’t have time to read, but I do know that it’s all about website caching so that’s what I did, and in this step, I tried 2 of the best caching plugins, one is free, (W3 Total Cache) though you can upgrade to a pro version and the other one paid (WP Rocket) and see below the results
Step 4.1 – Installed W3 Total Cache
Everything outside of website image optimization like database optimization, minification, deferring JS preloading, and other things that you don’t even want to know will be handled by a caching plugin. For caching, I first tried W3 Total Cache, the reason I selected this plugin is based from the positive reviews that I have read about it, and it was actually pretty good as what you can see from the result below
Mobile
Desktop
Using the W3 Total Cache did improve the website page speed even further. My mobile page load speed has improved by another 21% and now sits at 69/100 and my desktop page load speed is now at 85/100, which has improve significantly by an additional 29% from my previous website page speed test results.
I can actually stop here now as the result of my website’s page load speed is now more respectable compared its initial test result, but I really want to try a little bit further, and although I already like the result of using W3 Total Cache, I actually had a bit of a problem setting it up because it has so many settings that I don’t know what those thing do, and besides, I am really a little bit curious about WP Rocket and what it can really do, so why not test it as well.
Step 4.2 (optional) – Installed WP Rocket
This is optional but you can try it as well if you want. Also, I uninstalled W3 Total Cache before I used this so that I will know how much my website page speed will improve with WP Rocket, plus I don’t know what will happen if both plugins were turned on so for safety, I turned W3 Total Cache off.
Also, getting WP Rocket is only out of my curiosity; but after getting it, I actually liked it because unlike W3 Total Cache, it only has a few settings to tweak, and as for the result, see it below
Mobile
Desktop
As for the result, there is only a little more improvement in comparison with W3 Total Cache, my mobile website page speed has improved by an additional 6% while my desktop website performance in terms of page load speed has improved by 5% compared to using W3 Total Cache, so you can actually skip on getting WP Rocket, and just stick with W3 Total Cache but still, what I really like about this plugin is its ease of use, so getting this would still be a good investment.
All in all, after all the things I did to improve website performance in terms of page load speed, my mobile page load speed has improved from 53/100 to 73/100, which is about 38% while my desktop website page speed has improved from a miserable 17/100 to a world class 89/100, which is actually a huge 424% improvement!
Learning from this exercise
There are actually 2 main points that I have learned from this to improve my website page speed, and I will be taking it to consideration from now on
Point #1: Perform Website Image Optimization
I really didn’t consider this before, although I have heard a lot of this in the past, I haven’t really done some major website image optimization until today. And as what you can see from my actual experience, just by optimizing your images can already improve your page load speed by 200% (for desktop) so make sure to find time to optimize your website images, and if you have a spare change, I highly recommend that you invest on a website image optimization plugin like Photon (Included in Jet Pack Personal Plan). Aside from that, I now learned that JPG images load faster than PNG’s so use JPG instead of PNG.
Point #2: Use of Caching Plugin
I think this one should be a must for every WordPress website owners. The only reason that I don’t have it installed before is because I was more focused in my contents, but now, after seeing the results and the huge page speed improvement when using a caching plugin like W3 Total Cache or WP Rocket, I will make sure that a caching plugin is installed on my future sites.
The 400% improvement is actually an amazing feat, but I would also like to point out that results could vary from website to website, and since mine was poorly optimized in terms of page load speed from the very beginning, it actually provided me a lot of room to improve my website’s page load speed, but you can still try my methods to see for yourself as well.
And you might ask, how about the result from other website speed test? Well, I actually tried to perform another website page speed test, but this time on GTMetrix just to validate and provide some second opinion…
Nice right? 🙂
Now it’s your turn. How about you? What’s your website page speed? And have you done any page speed test on your website recently? What’s your result? Was it bad? What steps did you do to improve your website performance in terms of page load speed? Share it below
Update:
I further improved my page load speed by migrating my website to SiteGround. Right now, my page load speed registers at around 600ms as per my test in Pingdom, and I actually made a short study and tested all the WordPress managed hosting plans of SiteGround in terms page load speed. You can go to this link to read my complete SiteGround Review
Muito bom essas dicas, já estou usando essas ferramentas.
Nice Article. Thanks
Nice article very helpful. Thank you