Speed Up WordPress By 17% To 67% [Case Study]

20

Today, I’m Going to Show you a case study that Boosted my Client Site Speed by 67% 

You can also Download this free Speed Up WordPress Checklist to boost your site speed.

And it really really works for any WordPress site,,,,

Here is a Proof

final report of pingdom tool
final report

From Above Screenshot, it is clear that how well this Speed Up WordPress Checklist works. Now, it’s time for me to walk you through the entire 5-step process of Site Speed Optimisation.

Speed Up WordPress Site Without Touching A Line Of Code

Here, is a Quick Over View of the Tools, Plugin, and  Service that we are going to use in Site Speed Optimisation Process.

Number of Site Speed Tools (Free)

  • PageSpeed Insight By Google
  • Pingdom Tool
  • Dotcommoniter
  • UpTrend
  • Giftofspeed
  • Varvy Tool

Number of WordPress Plugins (Free/Paid)

  • WP Smush
  • Compress JPEG & PNG images
  • WP Faster Cache Plugin
  • WP-Optimizer
  • p3 Performance Plugin

Number of Services (Free)

  • Cloudflare(CDN)

At the end of Site Speed Optimisation Process, we only use CND and WP faster Cache Plugin.

Don’t Have a Time To Ready This full Article Right know. Don’t Worry,,,,

Take This Article Offline Free

[et_bloom_inline optin_id=”optin_9″]

So lets we start……..5 Step Process to Speed Up WordPress.

Step #1: Check the “Status” of the Site-Speed

There is a lot of tools that we can use to check the status of the Site-Speed. But, I personally use Pingdom and PageInsight Tool to check the status of Site Speed.

  1. Pingdom Tool
  2. PageSpeed Insight By Google

This Tools will help you to assess the amount of work that needs to be done to Speed Up WordPress site.

1. Pingdom Website Speed Test

Pingdom Tool report
Pingdom Tool

The Static of the report shows that;

  • Load Time 6.22 Second
  • Page Size 7.2MB
  • Number of Request 80

Note: –  Always check your site Speed where your website performing very Poor. It will help you to find all the Factor that affecting your site speed easily.

Let we First Understand all these metrics

  • Load Time: – Total time is taken by the User To load (Download) your website or page. Its Primarily Depends upon the Size (MB) of a page and Number Of Request.
  • Page Size: – Page Consists of images, HTML, CSS, JAVA Script etc,,,, the Total Amount of the data (MB or KB) use to make a web Page is called page size and it generally Refers in MB or KB. Smaller page Size means, Fast loading.
  • Request: – Whenever you load a Page from the web servers, It does so using HTTP which means your computer sends a request for some file. More request means More delay in the loading process of a page.

Let We Dig Dipper In Pingdom Report First

Check the Report and Try to find the factors that affect the speed of the site.

First, check out “Content size by content types” Tab

Dig the Pingdom Report

From the Report, we can see the total size of the page is 7.24 MB. In which 6.69 MB out of 7.24 MB, is only the size of its images. That means our actual website page size is only .55MB (550KB).

VRfilmepro.com is a news site and they use a lot of image on its Home page. Suppose, if we neglect the impact of the image size then our page site is less than 1MB means faster loading of the page.

On the right side of the screenshot, under “Request By Content Type” Tab

You can see 41 Request is only due To the images on home page. By Reducing the number of images we can reduce the number of Requests. Less request means less delay in the Page loading.

Now Under “Content Size By Domain”  Tab

Maximum Load of the domain
Maximum Load

VRfilepro is only the Website that taking the maximum size that is 98.1% and Number of Requests send my the primary domain is 71.

Look at another example, to understand how we can use this Tab to Speed Up WordPress

VRfilepro has some pages where they mention the image (gif image) of another site in their article.

Using another site image on his page or site
another site image

The size of this GIF image is 12.83MB and Vrfilempro content size is 1.46MB. so total size is 14.40MB.

Simply deleting that type of image from the content can decrease the loading time of a site.

Last But important from all of them

File Request Tab

Under This tab, You can sort your content by

  1. Load Order
  2. FileSzie
  3. File Type
  4. URL
  5. Load Time
sort content by file size in pingdom
sort content by file size

From, Screenshot you can see that there is one CSS file that taking of size 89KB. We can also fix this type of CSS file Request without touching a single line of code.

So with the help of Pingdom Tool, We will reach at the end of that, the major factor that affecting the speed of the site is IMAGESSSSSS and some CSS file.

2. Google Page Speed Test Tool

Check your site speed with PageSpeed Insight by Google

PageSpeed Insight Mobile Report

Google page speed test report for mobile
Google page speed

PageSpeed Insight Desktop Report

Google page speed Desktop report
Desktop Report

Just by looking at these results, we know that the website really needs some improvements.

Especially on its page speed.

google speed test report
google speed test report

First of all look at the Optimisation of Image Recommended by the Google.

Google clearly give us the clear cut view of the images that need some attention. By Optimising these images we can improve the site speed and Reduce the Number of Requests.

need attention on image in google page speed tool
need More attention

In Eliminate render-blocking JavaScript and CSS tab. You can see Number of CSS file that also needs Some attention.

Css optimization by google page speed
CSS optimization

In Pingdom Tool, we have to dig Deeper to find this but in the Google page speed test it just a front of you.

Another important Tab is Enable compression

Gzip is another form of compression which compresses web pages, CSS, and javascript at the server level before sending them over to the browser.

Gzip compression enable check in google page speed test
Gzip compression

You can check if your WordPress site is already using Gzip compressed or not, optimizedby using

  1. Giftofspeed
  2. Varvy Tool
varvy Tool check the Gzip Compression
varvy Tool

Minify JavaScript, HTML and CSS

Minification of resources means removing unnecessary characters from your HTML, Javascript, and CSS that are not required to load, such as:

  • White space characters
  • New line characters
  • Comments
  • Block delimiters

This speeds up your load times as it reduces the amount of code that has to be requested from the server.

Now we also know the Minar factors that affect the speed of the site. Let’s make a list of them.

Step #2: List of Minar and Major Factors

To Speed Up WordPress, we must have to find the Major and Minor factor that affecting the speed of a site. More factor you and find and resolved, faster your website perform.

We already find that the Major and Minor factors. Let make a List of them;

Major Factor

  • Imagessss

Minor Factor

  1. Minify JavaScript, CSS and  HTML
  2. Enable compression (Gzip)
  3. Reduce server response time

What we can Do more

  • Can Use Cache Plugin and
  • Content Delivery Network (CDN)

Now,  it’s time to Fix all this issue to Speed Up WordPress.

Step #3: Solve The Major Factor

There are Two methods to Compress the size of image

  1. Compress image Manually or
  2. By Using Image Compress Plugin

1. Compressing Image manually is a hard and Time taking process but the result is very Good.

If your have only a few images on the website, for example near about 80 to 100 then go with the Manually Process. Learn more about compress image size manually.

2. By Using image Compress Plugin. If your site is Large and has a lot of image on it then manually Compressing is very difficult. So here we can use a plugin to compress the size of the images.

There are a lot of plugins to do this work. But I usually prefer a

  • WP Smush.
  • Compress JPEG & PNG images.

Let we check Which plugin is better than another plugin

First of all, check the size of the image on your Machine (computer).

Size of the original image on computer
Size of the original image

Now, upload the same image on the WordPress two-time to test both tools.

upload the image on website
upload the image

Note: – Take a backup of your site before doing anything.

First, we deal with WP Smush and then we use Compress JPEG & PNG images Plugin for another image.

  • Download WP Smush (Free/Paid) and Activate the plugin on your WordPress. After Activation of the plugin, Go to Media>> Library.
  • You will see the option Smash Now! in the library.
compress the image with smush
compress the image

Just click on that and you will see the progress report after a few Seconds.

  • Click on Smush Status,
Image reduce by the 31.8KB
Image reduction 31.8KB

Your image is reduced by the 31.8KB means by 3.2% only,

Let, we compress the Second-same image with Compress JPEG & PNG images (500 images Free /after that paid) plugin.

  • First, download and activate it on your WordPress and deactivate the WP Smush image compressor.
  • Again, Go to the Media>>library and check this time you will see the different button.
compress the second image with other plugin
compress the image
  • Now click on compress button and check the result with the second plugin.
Image reduce by 59%
Image reduce by 59%

Here, You will see the image size reduce by 59%.

  • Click on Detail to get more Information.
original and compressed size of the image
original and compressed size
  • You can see a drastically change in the size of the image without Losing its Quality.
  • Open the image and check the size of the image and quality of the image.
open image to check the size of image
check the size of the image

There is the only reduction in the size of the image but the quality of the image remain same.

  • Now…. Deactivate the “Compress JPEG & PNG image” plugin and Activate the Wp smush again.
  • Go to Media>>Library and check the image already compressed.
image already optimize
already optimize

In some case, You will see an imagoptimisedthen you can Use WP-Smush Plugin to further reduce the size of the image.

So, In short, “Compress JPEG & PNG images” is the best plugin to reduce the size of the image in the market.

Now Doing Bulk-Optimization.

  • Click on Media and Select Bulk Optimization and hit the start Bulk Optimization Button.
  • You can compress first 500 images free for one month.
Compress JPEG & PNG images tool reduce the image in wordpress
Compress Static

This Plugin tell us,

  • Number of image on the website
  • Number of uncompressed images
  • Total estimated Cost to reduce all image
  • After and Before Image Data Base Size.

Click the Bulk optimization and Wait for the completion of the process.

Note: –  Don’t Close the window until it complete.

Now,,, Our major Problem is solved. Let us look the Pingdom report again.

Pingdom result after compress image
after compress image

You can see that

  • Page Size reduce by 3.8 MB (Drastically reduce)
  • Load time Reduce by 1.4 Seconds (one and half a second)

You Speed Up WordPress By 1.4 Seconds. But the Number of Requests still same. (Wil will fix this in Step 4)

Let us check the Size of the image on the Home page again in the Pingdom Report.

size of page in pingdom tool
a size of the page in Pingdom tool

See, Homepage Size Reduce from 6.69MB to 2.88MB. Means there is a 3.81MB reduction in the Homepage size.

Also look at the Google Page Speed Test Report.

google speed test after image compress
after image compress

Only by just Compressing the size of the image. we get  25+ grad in the Mobile and 27+ grade in Desktop in Google Page Speed Test.

desktop test of google
desktop test of Google

But, here if you dig the report of Image Optimization you will see there is some image that still not fully compressed

google page speed optimize image
optimize image

If you want more grade you have to fix more images.

  • Move your cursor on the top of the link then an address of the image will appear.
  • Copy the link and open in the browser and check the image.
open the image in google page speed
open the image

Download the image and compressed it manually

Now, Go to your Media>>library and delete the old image and update the post with new compressed image.

Note: –  More image you fix more grade you will get in the Google page speed test report.

Howz Your Site Performing In other Countries?

Let us first check the speed of the Site in world Wide Level.

Here is some tool,

  1. Dotcommoniter
  2. UpTrend

Dotcom-monitor Tool Test your site speed From 24 Different Countries.

dotcommoniter.com result report
dotcommoniter.com result

This Report result almost similar to Pingdom Tool Report result.

  1. Load time 4.0sec
  2. Page size 3.4MB
  3. Request 85
  • Click on View waterfall and then click on the summary to dig more dipper.
performance Report of dotcomemoniter tool
performance Report

Here you will see the clear cut percentage View of the CSS, HTML, JS and other files.

You can also check the number of images on the page and other File. This will help you to check how many images, CSS, HTML, and JS you fixed and how much left.

Also, Use Uptrend to check the site speed

uptrend tool
uptrend tool

Now you have the status of your site in other countries. Let’s move to the next step.

Step #4: Solve The Minor Factor

Now, let us Focus on the other factor in Google page speed test report that affects the page speed of the site.

Factor Effect the speed of site

Manually Fixing of all these issues is time-consuming and very Difficult process especially for non-Techie Person.

So, I’m Using a plugin, to do this Job. There is a lot of other Plugins, like

  • Wp3 Total cache,
  • Wp super fast and
  • WP Faster Cache Plugin.

But, I personally recommended WP Faster Cache Plugin Because it is easy to use and have a lot of other features to Speed Up WordPress.

Check this compression between WP Faster Cache and Other Plugin.

  • Download the WP Faster Cache Plugin and Activate it on WordPress.
Activate the Wp faster cache plugin
Activate the plugin
  • Now you will see a New Tab ( WP Faster Cache) on the Left side.
  • Open the Tab and tick all the Boxes available in free version and save the setting.
Wp faster cache Plugin option
Wp faster cache Plugin

Now, again,

  • Run the Google Page Speed test and check the effect of this Plugin on the site.
With free Wp faster Plugin
Wp faster cache Plugin

You can see that

  • Enable compression
  • Reduce server response time
  • Minify HTML
  • Prioritize visible content

are now fixed. But some of them still need intention.

Manually fixing of this error is very tough and techie process. So, I go with Paid Version of the Plugin.

  • Click On WP Faster cache plugin and then click on Premium tab And Select Buy.
buy Wp Faster Cache Plugin
buy Plugin
  • Now again Open Wp Faster cache Tab and Tick all the boxes and save the setting.
select all option in the wp faster plugin
select all option

Note: – If you don’t want to buy the plugin that you can use Autoptimize with WP faster Cache plugin.

Download and active the Autoptimize plugin on wordpress

Now click on Autoptimize under Setting Tab and tick all three option

autoptimize setting
autoptimize

Note: – It may be not working with some site that why I recommended WP Faster Cache Plugin.

  • Again run the Google page speed test and check the report.
only  3 option left in google page speed test
only 3 option left

You will see that Only 2 option are left.

Google Not recommended to fix Leverage Browser Caching for all the pages.

It is good for the static website, but if you publish a new post on the daily bases or Update your old Post Frequently then skip this option, otherwise your change will not reflect until Leverage caching not expire.

Now, It’s a time to check the site Performance in another country.

dotcommoniter report after optimization
after optimization
  • Load Time Reduce by 1.5 sec
  • Page Size Reduce By .2 kB (200KB)
  • Request Reduce by 22

See the difference between after and Before the Minar issues.

before and after report
before and after a report

how well WP Faster Cache plugin compress the CSS, HTML, and JS and Reduce the number of request by 22

It’s not looking great, look at the report of the Uptrends

uptrends report 
uptrends report

How well Your site now Performing in the Other countries.

Now, the Question is???????

Why My Google Grade Still Low?

Google Speed Optimization Grade Depend upon the number of the error you resolve.

For example,

Check your image optimization option in the Google speed test.

 alot of image have to compress
image have to compress

Some image still needs attention. You have to manually reduce the size of the image to get more grade.

Let us check the Google Grade of My site www.hitechwork.com. it’s a Normal Blog site and does not, have too many images on the homepage.

hitechwork google page speed test report
hitechwork Report

You can see that, I have 81 Grade in Mobile and 91 In the Desktop just due to the WP Faster Cache Plugin.

and Without Plugin, my Mobile Grade is 35 and desktop is 40

Without wp faster cache Plugin
Without wp faster cache Plugin

If I Dig the report of the Image optimization, there are only 3 images that not fully optimized.

image optimization report
image optimization report

If I Fix this issue then I will cross the 90+ grade.

The Most Interesting feature of the Wp faster Cache plugin is,,,  The Ability to Compress the image.

  • Open Plugin and click on Image Optimization Tab, If you are using a Premium Version.
wp faster image optimization Plugin
image optimization

Here, you will compress the size of the image.

Step #5: Clean Up WordPress

Again Here we recommended taking the backup of your site before domain anything.

Clean Up Data Base

As I told You Wp faster cache plugin have a lot of other option to Speed Up WordPress.

  • Open your Wp faster Cache Plugin and click DB (Data Base).
wp faster cache plugin clean DB
clean DB
  • Now Just Click on Red Icon To Clean Up your Data Base. In addition to optimizing your database, this plugin will also remove post revisions, auto drafts, spam comments and more.

If you do not have a Premium Version of Wp Faster Cache Plugin you can use WP-Optimizer To clean up a database.

wp-optimize plugin
wp-optimize plugin

Check the Performance of the Plugin

One way to see which plugins are affecting your site’s performance is to use a tool called P3 Plugin Profiler. P3 Plugin Profiler will give you a detailed breakdown of your plugin’s usage and help you determine which plugins are causing the most problems.

  • Download the p3 Performance Plugin and Active it and
  • Run the test,
p3 performance
p3 performance

Find Which Plugin Increasing Load On your site and Delete it or Replace it with other Plugin.

Note: After checking the Report, delete this plugin.

If you are using a W3 Total Cache plugin, you can see in the Report how much it impact on the loading of the page. That why we recommended Wp faster cache. It is Light and faster cache plugin.

p3 performance pluginb report
p3 performance

Delete Unnecessary and inactive Plugin

Make sure you do not have an unnecessary plugin on your site, even in the inactive Condition. It only increases the load on a server or on site.

SetUp CDN

To Speed up WordPress, You can use Content delivery network means CDN To Boost your WordPresss Site Speed. At this time we are using Free service of can use CDN but you can use Paid If you want.

add your domain in the cloudfare
add your domain

Now hit the Scan DNS Records and wait for a movement.

  • After scanning the DNS record you will see a continue button. click on it
wait and continue for cloudfare
DNS
  • Leave setting as it as and click on continue
click on continue
Leave setting as It is
  • Select free website plane and
  • Click on continue button.
select your plane and click on continue
select your plane

here, you will find you’re a new DNS.

  • Copy this DNS and Go to your Domain Registered account.
  • Find Mange DNS and replace your Old DNS with New DNS.
replace older dns with new one
replace older DNS with new one

If you do not have an access to the Domain Registered account then contact your Domain Registrar and tell him to update your DNS with New DNS

wait for 24 hr to update the DNS setting.

Need 24hr to update setting
Need 24hr

Everything is Done. You, don’t need to configure Wp Faster Cache Plugin with CloudFlare. Note: But you have to disable 2 option for the

Note: – You have to disable 2 option for the CloudFlare account (by default, it is disabled. but better to check it again) here is a proper guide “Wp faster cheche with CloudFlare“.

Now It’s Your Turn to implement this setting to your site and share your site.

Take the backup of your site Before doing anything. I recommended Updraft Plus Plugin

Quick Recap To Speed Up WordPress Guide

Step1: – Use both tools to check the status of site speed.

Step 3: – Compress the images

  • Compress the image Manually (if your website is small ) or
  • Install and activate the Compress JPEG & PNG images Plugin and Click on Media>>Bulk Optimisation And Optimise all the image.
  • Now Use WP Smush to reduce little bit more image size.

Step 3: – Set Up Cache Plugin

  • Install and activate the premium version of WP Faster Cache Plugin. or
  • If you don’t have a premium version of the plugin the use Autoptimize with wp faster cache

Step 4: – Optimise your site data Base.

Step 5: – Set Up Content Deliver Network

Don’t forget to share your site speed Report with the Us at Facebook

Recommended Resource

  • If you want to Dig more then here is the best guide By KeycDN Give you a Good Technical Knowledge

Remember to share this post with anyone who might benefit from this information, including your Facebook friends, Twitter followers and members of your Google+ group!

If you have any suggestion or problem about “Speed Up WordPress” please feel free to comment below.