Website Speed Test Increase Google Page Speed To 100

Some of the links are affiliate links and I earn commission from them. Moreover, as an Amazon Associate, I earn from qualifying purchases.

A website speed test is a common practice of bloggers and website owners. Every website owner and blogger wants to get a 100% score on google page speed insights.

Our goal is to increase a google page speed of a WordPress website. First, we will perform a website speed test of a WordPress site without any speed optimization.

We will note down the performance score and page loading speed. Later we will do website speed optimization, and then we will compare the score and loading speed to see the improvement.

Score Before Score After
Google Page Speed8498
Pingdom Speed Test 7380
GT Metrix Speed Test 9298
Page Loading Speed BeforePage Loading Speed After
Google Page Speed5s2.1s
Pingdom Speed Test 7s1.7s
GT Metrix Speed Test 3.1s2.1s

Below is a table of content which gives an overview of steps that we are going to follow.

What Is Website Speed Test

The website speed test gives the total amount of time taken by a browser to load a website. In technical terms, it is the total amount of time a browser takes to get a response from the server along with downloading all supporting web pages and files.

Website speed test gives not only website loading speed but also some suggestions to improve it. Our job is to analyze those suggestions and implement a fix for them to increase websites loading speed.

Best Free Tools To Test Website Speed

  • Google Page Speed (Recommended)
  • Pingdom
  • GT Metrics

What Is Google Page Speed Score

Google page speed score is a tool developed by Google developers for website speed testing.  It gives a score from 0 to 100 based on the analysis that it does on your website. More score indicates a website is faster than other websites

If a website gets less rating, Google page speed tools also give tips to increase website speed. The speed analysis and suggestions directly come from Google. Hence we should fix these issues to get better search engine ranking.

Good Score For Website Speed Test

Now the question comes on our mind what is a good score for a Website speed test. GT Metrix and Pingdom have different parameters to give ratings. We will consider the Google page speed score because it is reliable, and data directly comes from google.

Google page speed insights divide websites into three categories based on score. A website should always be fast, so a google page speed score between 90 to 100 is excellent.

Below are the three categories of website speed based on the google page speed scores.

  • 0 to 49 (slow): Red
  • 50 to 89 (average): Orange
  • 90 to 100 (fast): Green

Page Loading Speed Test Before Optimization

Now let’s begin the fun part. We will do a website speed test of my blog techieblogging.com without any optimization. Along with the google page speed test, we will do a Pingdom speed test and GT Metrix speed test.

In all three cases, we will note down the page loading speed and performance score. Later we will do website speed optimization and compare the results.

Before any website speed optimization, Google Page Speed score of techieblogging.com is 84. Its seems good but stay tuned and wait for the magic.

Google Page Speed Score Before Website Speed Optimization
Google Page Speed Score Before Website Speed Optimization

Now let’s do a Pingdom website speed test on techieblogging.com before any speed optimization. Note here performance score is 73, and the page loading speed is 7s, which is vast.

Pingdom Speed Test Before Website Speed Optimization
Pingdom Speed Test Before Website Speed Optimization

Finally, let’s do the GT Metrix website speed test on techieblogging.com. Here the performance score is 92, Yslow score is 74, and the page loading speed is 3.1s

GTmetrix Speed Test Before Website Speed Optimization
GTmetrix Speed Test Before Website Speed Optimization

The page loading speed and google page speed score are quite good. Let’s do website speed optimization and speed up a website.

Increase Google Page Speed Score

Now we have the report of website speed test from three different website analyzer. We need to collect all tips and recommendations and start fixing those.

Seems tedious no worries we already have collected all tips which we need to fix to increase google page score to 100%. The exciting part here is that we need only a single WordPress plugin called LightSpeed Cache to fix these issues.

LightSpeed Cache plugin comes by default with ChemiCloud web hosting. You can refer one of our blog which explains the installation process of plugins.

Tips To Increase Google Page Speed

Avoid an excessive DOM size

You do not have much control over excessive DOM size. Its entirely depend upon the WordPress theme you are using. You should avoid using a free WordPress theme.

As a beginner, you can use a free version of a premium theme. Premium WordPress themes help a lot to avoid an excessive DOM size. A recommended theme gallery is HappyThemes.

Best WordPress Premium Themes
Best WordPress Premium Themes

Use Best Web Hosting Service

If you are wondering without any optimization, how come the loading speed so good. The reason is I am using ChemiCloud Shared Hosting and a free version of a premium theme.

You can follow the blog on WordPress Theme Installation and Chemicloud Purchase guide for better clarity

ChemiCloud hosting has servers all around the world due to which it has a low response time. We strongly recommend using Chemicloud web hosting for beginners.

  • Free Domain For LifeTime
  • 50% of On First Purchase
  • Excellent Customer Support
  • Free Website and Domain Migration
  • One Time Coupon Code Discount
  • Free CDN With LightSpeed Cache

Use Cache Plugin

Caching is a method to store web pages and files in web browsers. If caching is used web documents like CSS files, and JS files are downloaded and stored in the web browser during the first time of a user’s visit.

Next time when the same user visits the page, all these documents are pre-loaded which, increases the loading speed of a page. We will use the LiteSpeed cache plugin to enable caching on our website.

If you have installed and activated the LightSpeed cache plugin, then log in to the WordPress dashboard. Click on LightSpeed Cache followed by Settings and then enable Enable LiteSpeed Cache.

Enable Light Speed Cache Plugin
Enable Light Speed Cache Plugin

Now go to the 2nd tab called Cache where more Cache Control Settings needs to be enabled. Under Cache Control Settings make sure you enable the below options.

Cache-Control SettingsOFF/ON
Cache Logged-in UsersON
Cache CommentersON
Cache REST APION
Cache Login PageON
Cache favicon.icoON
Cache PHP ResourcesON
Cache MobileON (If AMP is enabled)

You can leave the rest of the settings as it is and click on Save Changes.

Minify and Combine CSS Files

Minify is a process of removing extra space from CSS files to reduce the size. Minified CSS files are of small size, and a browser can download it faster.

Before CSS MinifyAfter CSS Minify
h1 {
  color: white;
  text-align: center;
}
h1{color:white;text-align:center;}

A website has many CSS files and browser downloads it one by one. We can combine all CSS files into a single CSS file. In this way, a browser has to download only one CSS file which is faster.

We can minify and combine the CSS files in the Lite Speed Cache plugin. Go to Optimize tab and enable CSS Minify, CSS Combine and CSS HTTP/2 Push

Minify CSS and Combine CSS File
Minify CSS and Combine CSS File

Note you should check your website after you enable CSS combine. Some theme does not support this feature. In case of any issue, you can disable CSS combine.

Minify and combine JS Files

A web browser downloads JS file as well from web hosting servers along with CSS files. Hence we should also minify and combine JS files to reduce page load speed.

You can minify and combine the JS file in the Lite Speed Cache plugin by enabling three options.

Minify JS And Combine JS File Lite Speed Cache Plugin
Minify JS And Combine JS File Lite Speed Cache Plugin

Load CSS Asynchronously

Lets first understand what an asynchronous load of CSS file is. Usually, a web browser downloads CSS files first and then downloads other web content.

We can avoid this by loading CSS files asynchronously. It means a browser will download CSS files and HTML files simultaneously which reduce page loading speed. Now enable the Asynchronous load of CSS in Lite Speed Cache by enabling three options.

Load CSS File Asynchronously Lite Speed Cache Plugin
Load CSS File Asynchronously Lite Speed Cache Plugin

You also need to enable the Inline CSS Async Lib option to fix render-blocking.

Defer Loading Of JS Files

In the usual scenario, during a page load if any scripts come then browser stops downloading and execute the scripts first even if it is not necessary. This increase the latency of website loading

Defer loading of JS file runs scripts only after a browser download all HTM files. Defer loading of JS file increases the loading speed of a page. Defer js file load helps to pass Google Page Speed, Pingdom, and GT Metrix website speed test.

Exclude Jquery

We have inlined JS files in previous steps, which include jQuery. Optimizing jQuery can break some functionalities of JavaScripts. Hence we should exclude jQuery optimization.

In Light Speed cache plugin you can Defer loading of JS files and exclude jQuery optimization with a single click.

Defer JS Load and Exclude jQuery Optimization
Defer JS Load and Exclude jQuery Optimization

Set Up DNS Prefetch

In DNS prefetch a web browser starts resolving DNS of external websites before the actual call. DNS prefetch improves page loading speed by downloading resources from different sites before the real call.

In the Lite Speed Cache Plugin, you have to mention the complete domain names to enable DNS prefetch. Now below are the list of standard websites that require DNS prefetch.

Just copy these and paste it in the box under DNS Prefetch.

Common Domain Names Which Needs DNS Prefetch

https://fonts.googleapis.com
https://fonts.gstatic.com
https://ajax.googleapis.com
https://apis.google.com
https://google-analytics.com
https://www.google-analytics.com
https://ssl.google-analytics.com

Set Up DNS Prefetch Lite Speed Cache
Set Up DNS Prefetch Lite Speed Cache

Finally, Click on the Save Button.

Website Speed Tuning

In the earlier section, we have minified and combined CSS to improve website speed. We can further customize these files and reduce website speed latency.

Under the Tuning Tab of Lite Speed Cache enable these settings. These settings can further reduce the loading speed of a website.

Tunning SettingsON/OFF
Combined CSS PriorityON
Combined JS PriorityON
Remove Query StringsON
Load Google Fonts AsynchronouslyON
Remove Google FontsON
Remove WordPress EmojiON

Once you enable these options, click on the Save Button.

Optimize Media Files

Media files contribute a lot to the google page speed score of a website. All website speed test gave a high recommendation on optimizing media files.

Lite Speed Cache provides a lot of optimizing features for the media files. The below table has the list of opting which should be in ON state. In the later section, we will explain these settings.

Once you set up these settings, click on Save Button

Optimize Media SettingsON/OFF
Lazy Load Images ON
Lazy Load Iframes ON
Inline Lazy Load Images Library ON
Optimize Automatically ON
Cron Job Optimization ON
Optimize Original Images ON
Optimize LosslesslyON
Preserve EXIF/XMP data ON
Set Up Lazy Loading Images

Lazy loading of images prevents downloading of all images during the initial rendering of pages. Images will be loaded, when it appears on the page.

Set Up Lazy Load of Iframes

Like Images, we can prevent Iframes from loading during the initial load of a page. Enabling a lazy load of Iframes will optimize YouTube embed videos.

Inline Lazy Load Images Library

Include the lazy load image Javascript library inline. This can improve your speed score in services like Pingdom, GTmetrix, and Google Page Speed.

Compress Image Losslessly

Image compression can reduce the size further, and a web browser can load it faster. In Lite Speed cache images are compressed Losslessly.

Set Up CDN

CDN stands for a content delivery network. These networks can host your website’s images, CSS, and JS files across different Data Center locations.

When a user visits your website, a web browser will download these files from the users nearest data center.

As the CDN network delivers the files from the nearest data center, a page loads much faster. Lite Speed cache has an inbuilt free CDN which is more than enough for CDN set up.

Free CDN Network In Lite Speed Cache
Free CDN Network In Lite Speed Cache

Finally, we have completed All speed optimization set up in the Lite Speed Cache plugin. Now let’s see if there is an increase in Google Page Speed Score.

Page Loading Speed After Optimization

Now let’s perform another set of website speed test for techiblogging.com. Like earlier, we will do the testing on Google Page Speed Tool, Pingdom, and GT Metrics.

After Performing another round of website speed test below are the results.

Google page speed score has increased to 98% from 83%. That’s a fantastic result for a website that is on a shared hosting platform.

Google Page Speed Score After Website Speed Optimization
Google Page Speed Score After Website Speed Optimization

Next, let’s see the results for Pingdom Speed Test. The page loading speed on Pingdom decreases to 1.02s seconds from 7s. The performance grade has also increased to 80.

Pingdom Speed Test After Website Speed Optimization
Pingdom Speed Test After Website Speed Optimization

Finally, let’s see the results for the GT Metrix speed test. The page speed score is now 98%, and the Yslow score is 90% We can also see Page loading speed is 2.7s.

GT Metrix Speed Test After Website Speed Optimization
GT Metrix Speed Test After Website Speed Optimization

Conclusion

Performing a website speed test, collecting data, and fixing the issue to increase the Google Page speed score is tedious. Not only once you must do a regular website speed test to get consistent google page speed score.

You should diversify your website speed testing to other tools such as Pingdom and GT Metrix.

These results are for a website that is hosted on shared hosting plans of Chemicloud. If you need better results, you should consider using dedicated hosting plans.

Now share this blog if it was helpful. In the comment section, let us know which website speed test tools you use. What are the steps you take to increase your google page speed score?

0 0 votes
Rate Us
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Web Hosting + Free Domain At $1.2/mo Use Coupon Code SOLARRAID85Click Here
+ +
0
Would love your thoughts, please comment.x
()
x