Pagespeed Optimization: Ultimate Website Speed Test Guide

9
1701
Pagespeed Optimization: Ultimate Website Speed Test Guide

 

Imagine you are trying to get something and searched on google about that. You have got the search results and you clicked the first website that showed up on the results. But you are failing to see the webpage due to the loading speed of the website. This will make you leave the website and choose the next website from the search results. Internet is all about attracting new visitors and grabbing them forever so that they does not turn away. While proper search engine optimizations can make your website rank on google, you need to maintain your page properly to turn your visitors to loyal followers. Social media marketing can be increased only and only by making your webpage load faster than others. So you should always optimize your pagespeed and try to load as fast as you can.

Website Speedtest Guide by HiTricks:

This is a complete guide for website speedtest where we will discuss how to optimize your wordpress blog loading speed. You will be able to load your blog blazing fast. This will also increase your google pagespeed optimization score to a large extent.

Firstly, this is a lazy boy’s guide to pagespeed optimization. I skipped the codings part, I skipped the details of how it works. Those stuffs you can easily get from the Google Pagespeed Tools where Google themselves wrote a lot of useful info regarding pagespeed optimizations. It deals with compressing webpage with various javascripts (js), cascading style sheets (css) and other codings. You can read details of each type of possible compression and find out how it helps, and exactly what codings you need to hammer if you want to do it manually. It is extremely helpful for people having good knowledge of javascripts, css etc. But unfortunately, users having no coding knowledge won’t get much help from that. I, myself as a newbie, don’t understand much codings and felt real trouble while trying to follow the same. That’s why I wrote up this article. This is very helpful for beginners who want to increase their website loading speed. As said, this is a lazy boy’s guide, you won’t find much of codings here, and mainly I focus on improving pagespeed ranks and not on understanding in depth how it works. So let’s begin.

Don’t just read this article, perform live with us, and you will be able to find the real difference.

Why are pagespeed optimizations necessary?

Perhaps you have overlooked the webpage loading speed of your blog and thought that pagespeed analysis were not an important aspect for your blog. Well, in that case, you are wrong. Here are the importances of pagespeed optimizations:

  1. It helps tremendously in search engine optimization (seo). Faster websites get more domain authority and gain higher ranks on google search results. So this is of course an added advantage.
  2. It helps to keep your visitors forever attached to your blog. They will never have to wait while visiting your site. That will do the trick.
  3. Perhaps you already know, Google’s Mobile Friendly algorithm will start from April 21, 2015. This will favor the sites which are mobile friendly and loads fast. They will get more organic traffic. So its extremely essential to optimize your website.

Website Speed Test Tools to check website speeds:

First you need to know how fast your webpage is and where do you stand currently. Here are the top 3 basic website analysis for you.

1. Google PageSpeed Insights:

This is the first and foremost tool you should consider to know your pagespeed. Notably, this will not give you any page loading time in seconds, rather it will give you an overall score on 100, and tell you how to improve your score. It has two separate optimization areas, Mobile and Desktop. This is the main tool which you should use to compare your pagespeed.

Visit the website from above link, and test your homepage link. The first google pagespeed analysis may give you an unsatisfactory result, but don’t panic, it happens with all of us. If you score below 60, it will be shown in a red colored tab, meaning your page is slow and you seriously need some optimizations. If you score between 60 and 85, it will be shown in yellow colored tab, meaning you have average speeds, and you may consider improving your speeds further. If you score above 85, that means your webpage is fast and you don’t need more optimizations. Still it will show some steps to increase your score further.

2. Pingdom Tools:

This is another tool you may consider for getting your page speed in seconds. It will try to load your website and check how much time it takes in doing so. It will also sort all the elements that loads on your webpage and give you complete details how fast each element loaded. It will also tell your percentile pagespeed score, meaning, you are how much faster / slower than other websites.

Click the above link to visit the website and test your webpage.

3. GT Metrix:

GT Metrix is another useful tool to test your webpage speed. In fact this is the most in depth page speed analyser out of the 3 available. This too gives us a lot of useful info regarding pagespeed improving techniques. Visit the given link and try checking your webpage loading speed.

So you have gone through the basic webpage speed test analysis and have gotten your initial ranks. Don’t worry if it is unsatisfactory, you can easily increase it to a large extent with the help of some simple plugins. Here we will discuss that step by step.

Improve Pagespeed: The Ultimate Guide:

Just install the following plugins and follow the steps to improve your speed to a large extent.

A. A3 Lazy Load:

Install it from the above link or search it in the plugins directory. Activate it. Then come to lazy load settings.

  • Enable Lazy Load: On
  • Enable Lazy Load for Images: On
  • Images in Content: On
  • Images in Widgets: On
  • Post Thumbnails: On
  • Gravatars: On
  • Skip Images Classes: Leave Blank
  • Noscript Support: On
  • Video and iframes: On
  • In Content: On
  • In Widgets: On
  • Skip Videos Classes: Leave Blank.
  • Noscript Support: On
  • Theme Loader Function: Footer
  • Disable On WPTouch: On
  • Disable On MobilePress: On
  • Loading Effect: Spinner
  • Loading Background Colour: Do nothing.

Click Save Changes.

 

B. CloudFlare:

1. Install the extension and activate it.

2. Make an account on CloudFlare Website from here. You will see this on cloudflare website after registering. Refer to tthe image.

CloudFlare Website PageSpeed

 

3. Enter your website there and click on Add website. It will perform a small check, then click on Continue Setup.

4. Then it will load a page: Configure your DNS records. It will look like the below image.

CloudFlare Website PageSpeed

 

5. Don’t do anything. Scroll Down. Click on I’ve Added all Missing Records, Continue.

6. On the next page, choose:

  • Plan: Free plan
  • Performance: CDN + Basic Optimizations (Faster)
  • Security: Medium
  • Automatic IPv6: On
  • Smart Errors: On (Partial)

7. Click Continue. Now you will land in Update your nameservers page. Do nothing. Click I’ve updated my nameservers, Continue.

8. Back to WordPress. Click Settings > Cloudflare Settings.

  • Cloudflare Domain Name: Enter your website url.
  • Cloudflare API key: Click here to get your api key. You will find it at the last option. Copy it and paste it in this column.
  • Cloudflare api email: Write your cloudflare registered email here.
  • Development Mode: Off
  • Https Protocol Rewriting: Off

9. Click on Update Options.

C. EWWW Image Optimizer:

Install and Activate it. Go to Media > Bulk Optimize. Under the column: Optimize Everything Else click Scan and Optimize. It will start optimizing your images. This will take time if you have a large number of images on your blog. Give it some time.

Meanwhile have a cup of coffee. You might be tired of reading this long article. But we guarantee you, its worth the wait. Sit back and relax. Have a Break!

D. GZip Ninja Speed Compression:

Install and activate it. Go to GZip Settings Page. Check the tick mark to enable it. Click Update.

E. W3 Total Cache:

1. Install and activate it. Go to W3 Total Cache Performance > General Settings. Check the box marked Toggle all caching types on or off (at once). Click Save All Changes. You may see some type of error messages like the image below. Just ignore this.

W3 Total Cache Pagespeed Optimization Guide

 

2. Below it you will see Page Cache Menu Box. Page Cache Method: Disk Enhanced.

3. Below it you will see Minify Menu Box.

  • Minify Mode: Manual
  • Minify Cache Method: Disk
  • HTML Minifier: Default
  • Js Minifier: Jsmin (Default)

4. Below it you will find Database Cache. Database Cache Method: Disk.

5. Below it you will find Object Cache. Object Cache Method: Disk.

6. Below it you will find Browser Cache. Check the box Enable.

7. Come to Browser Cache page from Performance > Browser Cache. Check the following boxes:

  • Set expires header

8. Click Save All Settings. Below it you will find CSS and JS, HTML and XML, Media and other Files. Check the same boxes in each category that are specified above. (You can easily determine it when you see it)

9. Come to Minify Settings from Performance > Minify. Check the box Rewrite URL structure.

10. Below it you will find XML Minify Settings. Check the boxes: Enable, Inline CSS Minification, Inline JS Minification, Line Break Removal.

11. Below it you will find JS Minify Settings. Enable it and set it like the image below.

JS Pagespeed

 

12. Go to Google PageSpeed Insights page from here. Test your webpage. Now see the results. Did it improve? Well, need some final manual updating. You may / may not see a suggestion called:

Eliminate render-blocking Javascript and CSS.

13. Refer to the image below. There will be a Show how to fix button just below that. Click it. If you don’t get this suggestion, just ignore this point.

W3 Total Cache Settings

 

14. Here you will see some JS links and some CSS links from your domain mentioned. Hover your mouse over a single JS link and it will be highlighted. Try to copy that particular link.

W3 Total Cache Pagespeed Optiomization

15. Come back to Performance > Minify. On the JS section of that page, click Add a script. Paste the copied JS url there. Similarly add other remaining JS scripts there one by one. Finally click Save All Settings. Refer to the image below where you need to paste that.

W3 Total Cache Pagespeed Optiomization

16. Similarly, copy a CSS link and paste that copied code in the Add a style sheet section of the CSS. Add the remaining css urls too. Hope you got the idea how to do that from the images given above.

That’s all for now. Now check your website speed with the tools given above and feel the difference. Well, we are experimenting more and more and trying to find out how to improve the pagespeed further. If we find some more ways, we will add it for sure.

Some Points to Remember:

1. Google Pagespeed 85/100 is the best. You should target to gain above 85 for your desktop speed.

2. Mobile Speed will always be lower than desktop. Because there are too many limitations in the mobile browser that eats the speed. But try at least getting 70.

3. Pagespeed doesn’t stay same, it fluctuates, more specifically, it decreases. So, just check your speeds every month and optimize accordingly.

Thanks for reading our detailed article about pagespeed optimization. Hope you have tried this out and hope we became successful on increasing your pagerank. Do comment how much google pagerank you have increased. It took us several days to experiment, and then several hours to write the article, though we are absolutely not forcing anyone, we will feel great if you can share this article with your friends. Please do use the share buttons below. Keep visiting HiTricks for more. Thanks.

HAVEN'T JOINED US YET??? 

Be the first to get notified of NEW TRICKS AND TUTORIALS as soon as we publish!

Thanks for Joining Us. Check your Email to Confirm Subscription.

9 COMMENTS

  1. Hi Nirmal It’s Vary Vary Useful Guide For New Blogger…
    Can You Plz Make a Post Or Guide About How To Do Of Page Seo on wordpress..

  2. Great information.
    But one question. How is it possible that my site will load from cloudflare without even changing DNS??
    Thanks!

  3. Hey Nirmal, I implemented your suggested strategy for w3 total cache in techgeekers.com but it restricted loading of many files. and i am now finding it hard to find all the files for these. can you please help me out. although google pagespeed has significantly increased but design is not quite pleasent.
    so will you please look into the matter
    thanks.

    • Hi, just start deactivating plugins one by one and see which plugin is creating the issue, most probably its due to minifying js and css, you can get your site earlier look back. Remove the pagespeed optimization recommendation js and css files by google. You will get back your site look. BTW, you need to maintain a balance between responsiveness of your site and loading speed, more responsiveness will take up time to load, find what suits the best for you, using the plugins given. You can also deactivate every plugin and start from the beginning. This only needs experiments. As most site themes are different, it is not predictable which setting to apply exactly. Hope you got the points.

LEAVE A REPLY

Please enter your comment!
Please enter your name here