How to Make Website Faster by 720% + 100% PageSpeed Score

Having a slow website?

Want to know how to make your website faster?

No problem.

I’ve been in your place before, so I understand the struggle and tiredness of having a slow loading website.

But I’ve found the correct ways to make my website load fast, so can you too.

After this guide, you’ll be able to speed up your slow website and make it fast like new.

Forget about those who say you must get high-end expensive servers and premium plugins to get high speed, you don’t need that to be fast.

I’ll show you step-by-step how I speed up my slow-loading web page and make it load near instantly.

 

Speed Performance Results (Before and After)

I have a long-form post with lots of texts and images.

These are the initial page speed performance (before I do any speed optimization):

  • PageSpeed Score (GTmetrix): 80%
  • YSlow Score (GTmetrix): 72%
  • Fully Loaded Time (GTmetrix): 4.1 seconds
  • Total Page Size (GTmetrix): 2.05MB
  • Requests (GTmetrix): 117
  • Performance Grade (Pingdom): 77
  • Load Time (Pingdom): 3.73 seconds
  • Load Time (WebPageTest): 6.787 seconds
  • First Byte (WebPageTest): 2.549 seconds
  • PageSpeed Score – Desktop (Google’s PageSpeed Insights): 81
  • PageSpeed Score – Mobile (Google’s PageSpeed Insights): 65

AND this is what I got (after the speed optimization):

  • 0.5 seconds fully loaded time on GTmetrix (720% improved from 4.1 seconds)
  • 100% PageSpeed score on GTmetrix
  • 94% YSlow Score on GTmetrix (Optimum score without CDN)
  • 96 Performance grade on Pingdom (Optimum score with lots of images)
  • 0.449 seconds load time on Pingdom
  • 0.848 seconds load time on WebPageTest
  • 0.427 seconds first byte on WebPageTest
  • 100 PageSpeed score (Desktop) on Google’s PageSpeed Insights
  • 96 PageSpeed score (Mobile) on Google’s PageSpeed Insights

Here’s the comparison of before and after the speed optimization:

 

Complete Website Speed Optimization (Step by Step)

A great result always starts with a first attempt.

Here’s my 1st attempt to optimize my website speed.

 

Attempt #1: Optimize Images

The first step is clear since I have a lot of images, it’s logic to optimize them in the beginning to lighten the burden of my website.

Since I’m using SiteGround hosting, I get a free WordPress plugin – SG Optimizer that comes with powerful caching and image optimization.

Of course, I’ll not use the caching feature because not all of you are using SiteGround hosting, so I pick another free WordPress cache plugin that is available to all of you.

But for image optimization, the SG optimizer is almost similar to any other free image optimization plugin in terms of functionality, so I may just use it since it won’t make much difference.

After I run the image optimization for all my images and turn on images lazy loading, here are the results:

As per GTmetrix, the fully loaded time reduced from 4.1 seconds to 2.4 seconds, that’s 70.8% faster in loading speed, while for Pingdom, the load time dropped from 3.73 seconds to 1.43 seconds, that’s more than 160.8% improvement!

In terms of scoring, the PageSpeed score boosted from 80% to 98% and the YSlow score increased by 14% from 72% to 88%.

Also, the total page size (GTmetrix) dropped from 2.05MB to just 278KB, and the requests reduced from 117 to 14, that’s a huge improvement.

Note: Pingdom will still measure the total file size even after lazy load, so from this point onward just ignore its file size metric.

The magic here? 

Lazy load.

Image lazy loading is a feature that allows your site to load an image only when it’s visible to the user.

That means your page doesn’t have to load all the images (which are far below in the post and is not visible to the reader) at the initial landing. 

Due to lighter size and fewer requests, the load time and speed performance scores also improved significantly.

Takeaway #1: Always use image lazy load on your website.

 

Attempt #2: Cache My Webpage

Caching is one of the effective and easy ways to achieve a significant speed improvement for your website.

In a nutshell, caching will create a static version of your dynamic page on the first load (or pre-load) and serve it to the subsequent users.

By doing this, your website doesn’t have to run the whole page generation process when a user visits your page, which saves up a lot of time in running those heavy backend PHP scripts and database queries.

In my case, I use W3 Total Cache to cache my website, a powerful WordPress cache plugin that’s free to use.

Caution: Make sure you backup your website before using the cache plugin, as it has a slight chance to cause your website down.

 

W3 Total Cache Best Settings

Here are the exact settings of my W3 Total Cache during the first attempt of configuration.

General Settings:

  • Page Cache (Disk: Enhanced) – Enabled
  • Minify (Auto) – Enabled
  • Opcode Cache – OFF
  • Database Cache – OFF
  • Object Cache – OFF
  • Browser Cache – Enabled
  • CDN – OFF
  • Reverse Proxy – OFF
  • User Experience (*Lazy Loading, Disable Emoji, Disable Wp-embed) – Enabled
  • Fragment Cache (Disk) – OFF
  • Miscellaneous – OFF
  • Debug – OFF

*If your image optimization plugin already has a lazy load feature, then you should disable the lazy loading feature in W3 Total Cache.

Page Cache (Only enable the following):

  • General
    • Cache SSL (HTTPS) requests – for a website with https only
    • Cache posts page
    • Don’t cache pages for logged in users
  • Cache Preload
    • Automatically prime the page cache
      • Update Interval: 900 seconds (default)
      • Pages per interval: 10 (default)
      • Sitemap URL – Enter your domain sitemap (eg: http://yourdomain.com/sitemap_index.xml) or leave it empty
    • Preload the post cache upon publish events
  • Purge Policy: Page Cache, CDN
    • Posts page (default)
    • Post page (default)
    • Blog feed (default)
    • rss2 (default)
    • Purge limit – 10 (default)
  • REST API
    • Don’t cache
  • Advanced
    • Compatibility mode
    • Garbage collection interval – 3600 (default)
    • Comment cookie lifetime – 1800 (default)

Minify (Only enable the following):

  • Rewrite URL structure
  • HTML minify settings (Enable)
    • Inline CSS minification
    • Inline JS minification
  • JS minify settings (Enable)
    • Before </head> – Default (blocking)
    • After <body> – Default (blocking)
    • Minify
  • CSS minify settings (Enable)
  • Advanced
    • Update external files every – 86400 seconds (default)
    • Garbage collection interval – 86400 seconds (default)

Browser Cache (Only enable the following):

  • General
    • Set Last-Modified header
    • Set expires header
    • Set cache control header
    • Set entity tag (ETag)
    • Set W3 Total Cache header
    • Enable HTTP (gzip) compression
    • Remove query strings from static resources
    • Don’t set cookies for static files
  • CSS & JS
    • Set Last-Modified header
    • Set expires header
    • Expires header lifetime: 31536000 seconds
    • Set cache control header
    • Cache Control policy – cache with max-age
    • Set entity tag (eTag)
    • Set W3 Total Cache header
    • Enable HTTP (gzip) compression
    • Remove query strings from static resources
    • Disable cookies for static files
  • HTML & XML
    • Set Last-Modified header
    • Set expires header
    • Expires header lifetime: 3600 seconds
    • Set cache control header
    • Cache Control policy: cache with max-age
    • Set entity tag (ETag)
    • Set W3 Total Cache header
    • Enable HTTP (gzip) compression
  • Media & Other Files
    • Set Last-Modified header
    • Set expires header
    • Expires header lifetime: 31536000 seconds
    • Set cache control header
    • Cache Control policy: cache with max-age
    • Set entity tag (ETag)
    • Set W3 Total Cache header
    • Enable HTTP (gzip) compression
    • Remove query strings from static resources
    • Disable cookies for static files
  • Security Headers
    • HTTP Strict Transport Security policy
    • Referrer Policy

User Experience (If you are using lazy loading from W3 Total Cache):

  • Process HTML image tags
  • Process background images
  • Script Embed method: async
 

Alternatively, you can just download my configuration file (in zip file), unzip it, and import it to your W3 Total Cache. 

To import, just go to General Settings – Import/Export Settings, choose my configuration file and click ‘Upload’.

After all the W3 Total Cache settings are done, I knew there would be some great improvements.

And to my expectation, here are the results:

Impressive.

The fully loaded time decreased from 2.4 seconds to just 1 second as per GTmetrix, that’s 140% load time improvement. As per Pingdom, the load time dropped from 1.43  seconds to 0.711 seconds, that’s more than 100% speed improvement too.

The Pingdom’s Performance grade also jumped 15 points from 80 to 95.

Takeaway #2: Always cache your website.

Almost there.

Next, I would like to try setting up a CDN to see if it can improve my website speed.

 

Attempt #3: Setting Up a CDN (Content Delivery Network) 

At this point, I try to set up the Cloudflare CDN with W3 Total Cache to see if it can give better improvement on load time.

 

How to Setup Cloudflare CDN with W3 Total Cache (Tutorial)

Here are the exact steps and configuration of Cloudflare CDN and W3 Total Cache:

  1. Sign up a free Cloudflare plan
  2. Change and point your DNS server to Cloudflare servers
  3. Configure Cloudflare settings
  4. Install Cloudflare extension and configure W3 Total Cache
 

Step 1: Sign up a free Cloudflare plan

Sign up a free account with Cloudflare.

Add your domain address.

Select ‘Free Plan” and click ‘confirm’, after the scanning of your DNS record, click ‘continue’ to proceed.

Next, you’ll have to change the nameservers from your domain registrar to point to Cloudflare servers.

 

Step 2: Change and point your DNS server to Cloudflare servers

Login to your domain registrar account and change it under custom nameservers.

The DNS propagation can take up to 24 hours to complete, but usually, it’s completed in less than an hour for my cases.

Go back to Cloudflare and click ‘Done, check nameservers’ to proceed.

On the next screen, select ‘Full’ for your SSL/TLS encryption mode.

And enable to following:

  • Always Use HTTPS
  • Auto Minify (Javascript, CSS, HTML)
  • Brotli

Then, take a rest and wait for the DNS propagation process to complete.

 

Step 3: Configure Cloudflare settings

Once your website is active on Cloudflare, all you need to do is go to the ‘Speed – Optimization’ tab in Cloudflare and enable the Rocket Loader.

Also, do a quick check and make sure the following are enabled:

  • Auto Minify (Javascript, CSS, HTML)
  • Brotli
  • Rocket Loader

That’s it.

Since the Cloudflare CDN is configured to do the minification work, so you have to disable the minification function of Javascript, CSS, and HTML in W3 Total Cache.

 

Step 4: Install the Cloudflare extension and configure W3 Total Cache

Go to your W3 Total Cache settings and select ‘Extension’.

Activate Cloudflare and click ‘setting’.

Authorize the W3 Total Cache with your Cloudflare Global API.

To get your Cloudflare Global API, go to your Cloudflare profile – API tokens – view Global API key.

Once authorized, enable the following setting:

  • CloudFlare: Caching
    • Cache level: Aggressive 
  • CloudFlare: Content Processing
    • Rocket Loader: On
    • Minify JS
    • Minify CSS
    • Minify HTML
    • Server side exclude
    • Email obfuscation
  • CloudFlare: Protection
    • Browser integrity check
    • Always online
  • CloudFlare: IP
    • IP geolocation
    • IPv6
  • CloudFlare: SSL
    • SSL: Full (https everywhere)
 

Done. Now your website is configured to work on the CDN network provided by Cloudflare.

Here’s the result I got with the above settings:

The result with Cloudflare CDN is good, I can get down to 0.8 seconds, but that’s the best I can get.

It’s good but still not the best I think, I am aiming for lower than 0.8 seconds load time (after taking into account the first byte from server response).

So I discard the CDN option and stick back to my original setup.

Takeaway #3: CDN does not necessarily make your website faster.

 

Attempt #4: Manual Speed Optimization

To improve the speed performance of my website further, I use the Waterflow diagram from GTmetrix to figure out the elements that can be further improved.

Here are the few things that causing a longer load time:

  • Google Analytics script
  • Astra font (astra.woff)
  • Sassy social shares queries from admin-ajax.php

For Google Analytics, since I’m not really using it for now, so I just remove it.

For Sassy social shares, the long load time is because for the plugin to display the latest share counts, it needs to send AJAX requests to the server to fetch shares.

To solve this, I disable the share counts display feature.

Left the Astra font.

To solve this, I preload the astra.woff earlier using the following code in functions.php.

add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
  $load = false;
  return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
  ?>
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
  <style type='text/css'>
  <?php
  echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
  ?>
  </style>
  <?php
}

Besides, I also want to get a 100% PageSpeed score on GTmetrix, and I’m just 1% away, due to “Defer parsing of JavaScript”.

So I go ahead and modify the js minify settings in W3 Total Cache.

Minify – JS minify settings – Before </head> – Non-blocking using “defer”

After all my manual speed optimization, here are the results I got:

Yes. Finally!

0.5 seconds fully loaded time, 100% PageSpeed score, and 94% YSlow score on GTmetrix.

0.449 seconds load time and 96 Performance grade on Pingdom.

0.848 seconds load time and 0.427 seconds first byte on WebPageTest.

100 Desktop Speed score and 96 Mobile Speed score on Google’s PageSpeed Insights.

I’m satisfied with the results.

Takeaway #4: Use the GTmetrix report’s recommendation to optimize your website.

 

Attempt #5 (Bonus): Cloudflare CDN Re-Visit

After I do the manual speed optimization, I’d like to know the final outcome I can get with Cloudflare CDN.

I did the exact same setting as above and run the test on GTmetrix, and here’s the result:

The load time is the same, but the PageSpeed and YSlow scores are improved!

But, is this the best setting for both Cloudflare and W3 Total Cache?

Since W3 Total Cache also has a minify setting, so I wonder if it’s better to enable the minification on W3TC instead of Cloudflare.

I make the following changes to run the test again with GTmetrix:

Cloudflare

  • Minification (Javascript, CSS, HTML) – Disabled
  • Rocket Loader – Disabled

W3 Total Cache plugin

  • Cloudflare extension
    • Rocket Loader – OFF
    • Minify JS – Disabled
    • Minify CSS – Disabled
    • Minify HTML – Disabled
    • Server side exclude – Disabled
    • Email obfuscation – Disabled (Enable only if you are getting many spam emails)
  • General setting
    • Minify (Auto) – Enabled

After purged all the cache, here’s the result I got:

Better.

100% PageSpeed Score, 97% YSlow Score, 0.8s Fully Loaded Time, 183KB Total Page Size, and 11 Requests.

Hence, if you would like to configure W3 Total Cache with Cloudflare CDN, I’ll recommend you to use the minify feature in W3 Total Cache.

That means, just stick back to my best W3 Total Cache settings above, and use Cloudflare as a CDN for the best speed performance result.

Takeaway #5: Always do the test and let the results speak.

 

Speed Test Results (Summary & Comparison)

After some speed optimization and testing on my web page, here are the results I got:

  • 0.5 seconds fully loaded time, 100% PageSpeed score, and 94% YSlow score from GTmetrix.
  • 0.449 seconds load time and 96 Performance grade from Pingdom.
  • 0.848 seconds load time and 0.427 first byte from WebPageTest.
  • 100 Desktop PageSpeed score and 96 Mobile PageSpeed score from Google’s PageSpeed Insights.

For the YSlow score, I’m fine with the 94% because the remaining scores require a CDN with cookie control and I’ve no plan to get the CDN at the moment (load time is more important than scores), so it’s the optimum score for me.

Same for Pingdom Performance grade of 96, the remaining score required fewer HTTP requests, but the problem is Pingdom doesn’t take into account the lazy load, so the actual requests when a user onboard to my page is not accurate (refer GTmetrix requests for accurate data) and that’s the tool’s limitation, 96 is the optimum score to me.

Of course, I can get a 100 Performance grade by removing the images or using the homepage with a few images instead, but that’s no point, as always, load time is my priority.

Takeaway #6: Focus on load time over performance scores.

Again, here’s the final speed performance results summarized:

Speed Optimization Before and After: How to make website faster

And here’s the speed performance results by stages:

Speed Optimization Results: How to make website faster
 

How Much You Need to Get a Fast Website (Cost Revealed)

You may ask…

What’s the cost to achieve this kind of website speed and load time?

To me, it’s not a cost, it’s an investment.

Well, here’s my exact setup and total investment:

SiteGround ($5.95/mo.) + Astra theme (free) + W3 Total Cache (free) + SG Optimizer (free).

See, you don’t need to invest a lot to get a fast website, all you need is to invest right on the right tools.

I used to spend more to get a slower website until I found the correct ways to get a fast website, which I’ve shown to you.

The best decision I made is to switch over to SiteGround shared hosting, it’s a top-notch hosting service that gave me the best return of my investment (best value), you can read my story here.

And if you need a CDN, just get the free Cloudflare CDN and you still can achieve 0.8 seconds load time, which is faster than most websites.

That’s all. Your only investment is a high-quality shared hosting.

Here is my advice:

Don’t listen to those who said you need an expensive hosting plan, premium theme, and premium plugins to have a fast website.

Of course, if you are running a resource-heavy website, that’s a different story.

But for most bloggers or webmasters that are just starting or running a few small to medium websites, those expensive setups are just overkill, and you are wasting your valuable money.

All you need is just a high-performance shared hosting and some powerful tools that are free.

Don’t get me wrong, I’m not saying you shouldn’t pay for a tool or service for better features and supports, I’m saying it’s not the criteria to get a high-speed website, and you’re always welcome to pay for a good tool or service if you know what you want and what you’re paying for.

For the free tools like theme and cache, I’m not just simply grabbing one and calling it a day, instead, I did my research and test to find the best one that’s free.

You can see the test results I done at the following articles:

Like I always said, do your research and make a quality investment for what you really need.

Takeaway #7: Make quality investment for the best return.

 

FAQ

1. My website is slow, what’s the problem?

A slow website can be due to a slow server, a heavy WordPress theme, a large number of images, slow external scripts, excess HTTP requests, heavy WordPress plugins, plugin misconfigurations, and more.

2. How to make my website run faster?

The first step is to get a high-speed hosting because it’s the foundation of your website performance. 

Next, you can get a light WordPress theme, compress your website’s images, and install caching for your site. 

Lastly, you can use the correct speed optimization methods to further increase your website speed.

3. Is W3 Total Cache good?

Yes. It’s one of the best WordPress cache plugins that are free to use.

4. What is the best setting for W3 Total Cache?

Please refer to the section ‘best W3 Total Cache settings’ which I show you my exact configurations to get 0.5 seconds load time and 100% PageSpeed score.

5. Should I use a CDN?

If your website contains a lot of static files like images and you are targeting a worldwide audience, setting up a CDN does help in distributing your website contents faster.

6. Does CDN make your site faster?

Not necessarily, it can make your site faster, or slower. In my case, it’s slower.

 

Conclusion

To get a fast loading website, all you need is the right tools and the right speed optimization methods.

Besides, you don’t have to go for a 100% PageSpeed score, a green score is already better than most websites, and sometimes getting a higher score can be a downgrade for website functionality and usability.

Talking about the website load time, the lower is better but not always the best, sometimes you need to gauge between functionality and speed.

For example, you want to put a newsletter form on your site to get subscribers but the form’s script is making your site load longer for 0.5 seconds.

If building a subscriber list is one of your website goals, then it’s not a big deal to sacrifice that 0.5 seconds for the subscribers.

You are more likely to get a low load time and 100/100 PageSpeed scores by using a minimalist website with minimal Javascripts, CSS styles, HTTP requests, images, and external script. But on the flip side, this will directly limit your website’s design, functionality, and usability. 

For a website, the speed is very important but is not everything, there are still other important elements that you should not compromise.

Nonetheless, you should always aim for the fastest speed by optimizing your website without sacrificing important functionalities.

 

Now is your turn, what’s your best fully loaded time?

Next Posts:

Top 20 Fastest WordPress Theme (Free) – Tested

Top 12 Best WordPress Cache (Data-Backed)

The Fastest Shared Hosting for Your Websites

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *