Exploring The 15 Best Google Fonts for Enhancing Your User Experience

Among approximately 1500 Google fonts, choosing the best Google fonts for your WordPress website could be a daunting aesthetic choice. But fonts do more than just enhance the aesthetics of your website, web fonts can have a huge impact on your PageSpeed score & Core Web Vitals too.

Google fonts

Hence spending some time to research the best Google fonts to improve the visual stability to give your visitor a seamless user experience might be a worthwhile investment. 

Let’s explore the best Google fonts for your website. These fonts will not only make your website look aesthetically appealing but also ensure your core web vital metrics speciality CLS does not fail and you can achieve an excellent pagespeed score.

What is Google Fonts?

Google Fonts is a library of free and open-source fonts developed by Google. Web developers and designers can & do use Google Fonts to improve the typography of their websites. 

The Google font is hosted on Google servers, allowing your developer to link directly in their HTML and CSS code.

Why are Google fonts so popular among website developers?

  • Google fonts are free:

Google allows web developers to use the free & it is open-source. Anyone can use Google fonts for personal and commercial needs without any license fee or restriction. As the fonts are open-source, web developers can also modify them according to their needs. 

  • Google Fonts are easy to integrate:

This free Google font is very easy to use on any website. Web developers and designers can easily integrate Google Fonts into their web applications by adding an HTML link or CSS stylesheets.



If you haven’t used it before, you can copy the following code onto the head section of your website, to try it out.

<link href=

        'https://fonts.googleapis.com/css?family=Roboto|Pacifico' 

          rel='stylesheet'>

    <style>

        h1 {

            font-family: 'Lobster', cursive;

        }

        p {

            font-family: 'Pacifico', cursive;

        }

    </style>
  • Google Fonts has a Vast Selection:

Google web fonts allow a wide range of typefaces, from classic to modern, including Serif and sans Serif. 

No matter what message you wish to convey to your visitors, you can almost always find a suitable font.

  • Optimized for Performance

Google developed free font while keeping performance in mind it ensures efficient font loading across different browsers, providing your users a much better experience regardless of the browser they are using.

What Are The Disadvantages of Using Google Web Fonts?

Using a web font on your website instead of a local font can allow you to create a mood for your website, which would plant visual clues in the reader’s mind.  

Document

Get The Best PageSpeed Score

For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required

However, more often than not these web fonts can harm your website’s performance as well as user experience, these eye candies can bring some unwanted consequences to your website. The 2 most common such issues are,

  1. Flash Of Unstyled Text (FOUT).
  2. Poor CLS (Cumulative Layout Shift) Score.

Let’s look at the negative impact web fonts can have on your website’s performance,

  • Flash Of Unstyled Text (FOUT)

Web fonts take time to load when they are externally hosted. During the font loading, the browser renders your web page’s content in the local fonts. After completion of the font load, the browser changes the content in web fonts.   

Thus, your user might notice a flash or glitch-like effect a split second after loading your webpage. This is known as a Flash Of Unstyled Text or FOUT, and it harms your user’s visual experience.  

  • Poor CLS Score in PageSpeed Insight Test.

Cumulative Layout Shifts, or CLS, is one of the Core Web Vitals metrics used to measure visual stability.  

If the Flash Of Unstyled Text issue frequently appears on your website, it will affect your CLS score in the pagespeed report. Thus, your overall pagespeed score will be impacted.

One quick and easy way to improve your CLS score is by fixing your flash of unstyled text. If you do not wish to get technical & make the necessary changes in the code, you can use the RabbitLoader plugin for your wordpress website, RabbitLoader optimizes your webpage to provide greater visual stability without any coding.

What Are Web-Safe Fonts?

Web-safe fonts are considered the default fonts for websites as they are available across various devices and web browsers, such as Google Chrome, Mozilla Firefox, Internet Explorer, and others. 

Let’s explore the different types of fonts that are commonly considered web-safe fonts.

A serif font is an older typeface. Some examples of serif fonts which are web-safe fonts:

Google fonts, serif fonts

Sans-serif fonts are the modern version of serif fonts that include:

Google font, sans serif fonts

Monospace fonts are commonly known as fixed-width fonts. These types of fonts are mostly used in computer programming. Some common web-safe monospaced fonts are:

google fonts, monospaced fonts

These are also known as the default fonts of the browser. 

The Importance of Using Web-Safe Fonts

Using web fonts might lead to FOUT issues and negatively affect your CLS score. Thus, instead of using just any web fonts, you need to consider choosing a web-safe font on your website to mitigate the FOUT issues and provide a consistent user experience. 

Web-safe fonts are pre-installed in the browser and do not take any additional time to load. Hence, by using web-safe fonts, you can prevent visual instability on your website. Consequently, the performance of your CLS will improve.  

The 3 Best Strategies for Using the Best Google Fonts on Your Website?

When using the right Fonts on your website for better visual effects, remember that it can affect its loading performance and lead to a poor user experience. Here we are disclosing some strategies that you need to follow to avoid this problem.   

Choose Fonts That are From the Same Font Family

When you use Google fonts on your website, the fonts need to be from the same font family. This will reduce your font loading time.

For example, when you use Source Sans Pro fonts on your website for body text, you should also use fonts in the same Sans serif family for font combination/ font pairing, such as Alegreya Sans for your logo, Fira Sans for your branding, Work Sans for any graphic design, and so on. 

Try to Use The Web-Safe Fonts

As discussed earlier, web-safe fonts are pre-installed on the browser, and we have also mentioned the web fonts that you can use on your website to enhance your user experience. 

Use Preload in Your Google Fonts

By adding a preload attribute in your HTML file, you can instruct the browser that the element needs to be loaded fast. You also need to preload your Google web font to avoid the Flash of Unstyled Text (FOUT) issue on your website.

You can use the below code to preload your Google font.

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2">

If you are looking for any codeless solution, you must install RabbitLoader. RabbitLoader will automatically preload your Google fonts and optimize your website’s performance. 

The 15 Best Google Fonts for Your Website

Which Google fonts should you use on your website to help it pass the Core Web Vitals test and deliver a consistent user experience? Here’s a list of the 15 best Google web fonts that are web-safe and help you achieve a better PageSpeed score.

  1. Arial (Arial MT)
Font familySans serif fonts
Release date1982
PurposeReport, magazine, presentation 

You can copy the below code for implementing Arial font on your website.:

<html> 

<head> 

<link href='https://fonts.googleapis.com/css?family=Arial' rel='stylesheet'>

<style> 

<! Implementing Arial font>

   body { 

       font-family: Arial, sans-serif; 

   } 

</style> 

</head> 

</html>
  1. Roboto
Font familySans serif fonts
Release date2011
PurposeLogos, headline, body text

You can use the syntax for implementing  Roboto font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>

<style>

<! Implementing Roboto font>

body {

    font-family: 'Roboto';font-size: 22px;

}

</style>

</head>

</html>
  1. Noto Sans
Font familySans serif font
Release date2013
PurposeWebsite design, mobile app, presentation

The syntax for implementing Noto Sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>

<style>

<! Implementing Noto Sans font>

body {

    font-family: 'Noto Sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Source Sans
Font familySans serif fonts
Release date2012
PurposeBody text on a website

The syntax for Source sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Source Sans' rel='stylesheet'>

<style>

<! Implementing Source sans font>

body {

    font-family: '  Source sans';font-size: 22px;

}

</style>

</head>

</html>

These 4 fonts are web-safe fonts. If these 4 web-safe Google fonts can’t fulfil your requirements,  Apart from them, you can use the below free Google fonts for your website design along with RabbitLoader which can mitigate your website’s issues.

  1. Open Sans
Font familySans serif fonts
Release date2011
PurposeA paragraph in your webpage

The syntax for implementing open sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>

<style>

<! Implementing open sans font>

body {

    font-family: 'Open Sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Tenor Sans
Font familySans serif fonts
Release date2010
PurposeMobile app, website, e-book

The syntax for implementing Tenor Sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Tenor Sans' rel='stylesheet'>

<style>

<! Implementing Tenor Sans font>

body {

    font-family: 'Tenor Sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Quattrocento Sans
Font familySans serif fonts
Release date2011
PurposeDigital poster, banner, logo, presentation

The syntax for implementing Quattrocento sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Quattrocento Sans' rel='stylesheet'>

<style>

<! Implementing Quattrocento sans font>

body {

    font-family: ' Quattrocento sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Alegreya Sans
Font familySans serif fonts
Release date2013
PurposeDigital poster, banner, logo, presentation

The syntax for implementing Alegreya sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family= Alegreya Sans' rel='stylesheet'>

<style>

<! Implementing Alegreya sans font>

body {

    font-family: '  Alegreya sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Droid Sans
Font familySans serif fonts
Release date2007
PurposeAny digital document

The syntax for implementing Droid sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Droid Sans' rel='stylesheet'>

<style>

<! Implementing Droid sans font>

body {

    font-family: ' Droid sans';font-size: 22px;

}

</style>

</head>

</html>
  1. PT Serif
Font familySerif fonts
Release date2010
PurposeE-book, magazine, and website

The syntax for implementing PT serif font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=PT serif' rel='stylesheet'>

<style>

<! Implementing PT serif font>

body {

    font-family: ' PT serif';font-size: 22px;

}

</style>

</head>

</html>
  1. PT Sans
Font familySans serif fonts
Release date2009
PurposeAny electronics documents

The syntax for implementing PT sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=PT sans' rel='stylesheet'>

<style>

<! Implementing PT sans font>

body {

    font-family: ' PT sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Josefin Sans
Font familySans serif font
Release date2010
PurposeDigital poster, branding, etc

The syntax for implementing Josefin sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Josefin sans' rel='stylesheet'>

<style>

<! Implementing Josefin sans font>

body {

    font-family: ' Josefin sans';font-size: 22px;

}

</style>

</head>

</html>
  1. DM Sans
Font familySans serif font
Release date2019
PurposeAny digital content such as blogging, social media and others.

The syntax for implementing DM sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=DM sans' rel='stylesheet'>

<style>

<! Implementing DM sans font>

body {

    font-family: ' DM sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Fira Sans
Font familySans serif font
Release date2013
PurposeDigital interface, branding

The syntax for implementing Fira sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Josefin sans' rel='stylesheet'>

<style>

<! Implementing Fira sans font>

body {

    font-family: ' Fira sans';font-size: 22px;

}

</style>

</head>

</html>
  1. Nunito Sans
Font familySans serif font
Release date2017
PurposeWeb design, UI/UX design project

The syntax for implementing Nunito sans font in your HTML file:

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Nunito sans' rel='stylesheet'>

<style>

<! Implementing Nunito sans font>

body {

    font-family: 'Nunito sans';font-size: 22px;

}

</style>

</head>

</html>

Conclusion

If you are rebuilding your website or trying to improve your core web vital metrics (especially for CLS) performance, you need to choose the best Google fonts for your website to improve your visual stability.

Sometimes, changing the font on your website can be difficult. In this case, you need to use RabbitLoader to optimize your website’s performance by fixing the visual issue. If your website has some other visual issues like layout shift or FOUC, RabbitLoader will also mitigate them. 

Document

Get The Best PageSpeed Score

For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required

Google Pagespeed Insights: The Ultimate Guide To Boost Your Pagespeed With The 7 Most Powerful Strategies

Are you struggling with a low pagespeed insights score?  A low pagespeed score often leads to poor user experience which in turn results in a low conversion rate & lower SEO rankings.

Don’t worry! You are not alone. A lot of website owners are struggling to improve their pagespeed insights score. Let’s discuss the pagespeed insights score and the powerful strategies to improve this. 

Pagespeed Insights

If you are not from a coding background, that’s perfectly fine. As we will mention the solutions that can be implemented by non-coders like you and me

What is Google Pagespeed Insights?

Google PageSpeed Insights (PSI) is a tool developed by Google, that measures the pagespeed of your website. It analyzes your website’s pagespeed performance for the desktop version and the mobile version and scores on a scale of 0 to 100.

Pagespeed Insights

Google PageSpeed Insights also suggests how to improve the pageSpeed score. It provides both lab and field data about your website. Lab data is used for debugging issues whereas field data is useful for real-world user experience.

What are the Core Web Vitals?

Core Web Vitals are a set of performance metrics developed by Google, used to measure the user experience for loading performance, visual stability, and interactivity of your web pages. 

core web vitals

Let’s take a look at the three pillars of core web vitals

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID) is now replaced with Interaction to Next Paint (INP).
  3. Cumulative Layout shift(CLS) 
  • Largest Contentful Paint (LCP):

The Largest Contentful Paint (LCP) is the user experience (UX) metric, which measures how long it takes to render the largest piece of content in the visible area. The largest content can be:

  • Images
  • Video poster images (images that are shown to the user before loading the video)
  • Background images
  • Block-level text
Largest contentful paint, lcp

In order to pass the Core Web Vitals assessment, your website should have a Largest Contentful Paint (LCP) of 2.5 seconds or less. Whereas if a user waits more than 4 seconds on your website to see the content, that indicates a poor user experience.

LCP rangeRemarks
< 2.5 secondsGood
2.5 seconds – 4.0 secondsImprovement Needed
> 4.0 secondsPoor
  • First Input Delay (FID):

First Input Delay (FID), also referred to as Input Latency, is used to measure how long it takes for your web page to react to the first interaction

In simple words, it is the measurement of the time that occurs between when a user interacts with your website and when their browser responds. 

First Input Delay,fid

According to Google, a score of less than 100 milliseconds is considered a good score whereas a score is more than 300 ms is a poor score.

FID rangeRemarks
< 100 msGood
100 ms- 300 msImprovement Needed
> 300 msPoor

Important Note: In March 2024, FID was removed as a Core Web Vital. It is replaced by a stable Core Web Vital metric INP (Interaction to Next Paint).   

  • Interaction to Next Paint (INP):

Interaction to Next Paint (INP) is a newly launched performance metric by Google that is used to measure user interface responsiveness.

In simple words, Interaction to Next Paint focuses on measuring your web page’s response according to user interaction with the website.

Interaction to Next Paint, inp

Similar to the other performance metrics, the INP score can be in one of the three thresholds. A good INP value should always be within 200 milliseconds.

INP rangeRemarks
< 200 msGood
200 ms- 500 msImprovement Needed
> 500 msPoor
  • Cumulative Layout shift(CLS):

Cumulative Layout Shift (CLS) is one of the pillars of Core Web Vital metrics that calculates the shifting of the webpage’s elements while the page is being loaded and rendered.

cumulative layput shift,cls

In simple words, Cumulative layout Shift is used to determine the visual stability of a web page from a user perspective by considering the below factors:

  • Layout shift
  • Impact fraction (how an unstable element impacts the visible area between two frames)

You should strive to reach your CLS score within 0.1 to provide your audience with a better user experience.

CLS rangeRemarks
< 0.1Good
0.1 – 0.25Improvement Needed
> 0.25Poor

Other performance metrics are present that impact your website’s pageSpeed insights performance.

  • First Contentful Paint (FCP):

First Contentful Paint (FCP) is a user-centric metric that is used to measure how long it takes for a user’s browser to load DOM elements (images, videos, text, etc) of your web pages.

First contentful paint, FCP
FCP rangeRemarks
0 – 1.8 secondsGood
1.8 seconds -3.0 secondsImprovement Needed
> 3.0 secondsPoor
  • Speed Index (SI):

Speed Index (SI) is a web page load performance metric, that measures how quickly the contents of your web pages are visibly populated. SI is dependent on the size of the visible area.

Speed index, SI
SI rangeRemarks
0 – 3.4 secondsGood
3.4 seconds – 5.8 secondsImprovement Needed
> 5.8 secondsPoor
  • Total Blocking Time (TBT):

Total Blocking Time (TBT) measures how long your web page responds to specific user input. Several factors can be the reason for TBT like poorly optimized code, excessive plugin use, server performance, and large file sizes.

Total Blocking Time,tbt
TBT rangeRemarks
0 – 200 msGood
200 ms – 600 msImprovement Needed
> 600 msPoor
  • Time to First Byte (TTFB):

Time to First Byte (TTFB) measures the time between a user’s browser requesting your web page and when it receives the first byte of information from the server. Different factors that can reduce your TTFB score: slow DNS lookups, SSL connection, and so on.

time to first byte,ttfb
TTFB rangeRemarks
< 800 msGood
800 ms – 1800 msImprovement Needed
> 1800 msPoor
  • Time to Interactive (TTI):

Time to Interactive (TTI) measures the amount of time your website has been rendered and is ready for user input. The factors that significantly impact TTI are excessive resource requests and large resource sizes.

Time to Interactive,tti
TTI rangeRemarks
0 – 3.8 secondGood
3.9 second – 7.3 secondImprovement Needed
> 7.3 secondPoor

Why is Google Pagespeed Insights score important for your website?

Let’s dive into the importance of a high Google PSI score for your website.

  1. User Experience

A higher pagespeed Insights indicates a fast-loading website, which leads to a better user experience for your visitors. A user is more likely to engage with your website’s content and stay longer on your website. It will increase the average on-page time of your website.

pagespeed score
  1. SEO Ranking

Google considers the pageSpeed as one of the important factors in its ranking algorithm. A fast-loading website tends to rank higher in  SERPs (Search Engine Results Pages), which can boost organic traffic.

  1. Conversion Rate

The conversion rate measures the percentage of visitors who convert to lead. A fast-loading website can positively impact conversion rate, as users are more likely to complete the desired action.

Conversion rates

The desired action might be completing a purchase, downloading an ebook, filling up a form, signing up for a trial, booking a demo, subscribing to a course, or something else.

How to Measure Your Website’s PageSpeed Insights Score?

PageSpeed can be measured easily in Google  Pagespeed Insights (PSI). Let’s dive into the process of measuring PageSpeed in Google PSI.

Step 1: Go to Google PageSpeed Insights. Enter any web page’s URL and click on Analyze.

Pagespeed Insights

Step 2: After analyzing the web page’s page speed performance, It will provide a mobile score as well as a desktop score based on the overall performance of the core web vital matrix. 

Step 3: you can also see the suggestion for improvement of the pagespeed performance.

What is considered a good PageSpeed Insights Score?

  1. If the PageSpeed insights score is greater than 90, it is considered a good score.
  1. A Pagespeed insights score between 50 to 89 indicates the webpage’s pageSpeed performance needs to be improved.
  1.  A pagespeed insights score of less than 50 is categorized as a poor score. It means the web page fails the site speed test.
PageSpeed Insights Score

The Chrome User Experience Report (CrUX) dataset provides Real-user experience data in Google PSI. PSI reports are based on real users’ FCP, LCP, FID,  CLS, SI, TBT, and TTI experience.

Let’s see the weightage of each performance metric for Google pagespeed insights.

Performance metricsWeightage 
First Contentful Paint (FCP)10%
Speed Index (SI)10%
Largest Contentful Paint (LCP)25%
Total Blocking Time (TBT)30%
Cumulative Layout Shift (CLS)25%

There are several alternative tools are also available like GTmetrix, and Lighthouse that you can use for website speed tests. 

The difference between Pagespeed insights vs lighthouse

While Google PageSpeed Insights and Google Lighthouse, both tools are used for pagespeed performance, their scores differ based on certain factors. Let’s understand these performance factors and how they make the score different. 

img-21
Google PSILighthouse
Data Sourcing MethodsGoogle PSI scores are based on controlled environment data(lab data) as well as real-user data (field data).Lighthouse uses only lab data. (real-user data).
Test LocationGoogle page speed Insights is an automated tool that runs from the Google server.Lighthouse is a manual tool that runs from a local Chrome browser.
Number of pages AccessedIn PSI only one webpage can be analyzed at a time.In Lighthouse, multiple pages can be tested at a time.
Network ThrottlingGoogle Pagespeed insights runs the website without throttling a fast network connection.

Then, it simulates how the web page would have loaded on the slow connection.
Lighthouse in Chrome DevTools allows a user to select between simulated and browser-level “applied” throttling. 
CPU performancePagespeed Insight measures the CPU performance of a web page by evaluating the time to fully load the web page’s content (HTML, JavaScript, and media files).Lighthouse reports include the data on the web page’s CPU performance, FCP, and DOMContentLoaded time.
Chrome versionPagespeed insights uses the latest version of Google Chrome. So it can be different from the user’s Chrome version.While Lighthouse uses the same Chrome version as the end user. 

7 ways to improve your website’s pagespeed score?

Now, you have a brief idea about Google PageSpeed Insights score. Also, you have seen the importance of a high pageSpeed insights score. Let’s dive into the strategies to improve the page speed performance by optimizing the website performance.

  1. Optimization of all images is the most effective way to improve your website’s pagespeed score:

Images are the most powerful form of communication. An image can convey a message very quickly. So, for any website, images are one of the essential resources.

However, large-sized images can decrease the pagespeed insights performance score by increasing the load time of the web page. 

To improve the website’s pagespeed performance, you need to reduce the image size as much as possible. You can convert your large image files to WebP, AVIF format.

If your website has 10 images of 2 MB, that indicates a total of 20 MB images need to be downloaded. But when these images are converted in WebP and AVIF, it will likely reduce the total size to a maximum of 500 KB. so, automatically the page loading time will be reduced.

img-22

RabbitLoader converts your large PNG and JPEG images into modern webP and AVIF formats. It will compress the images without losing quality. You don’t need to optimize the images one by one. Bulk image optimization will be done automatically when you are using RabbitLoader. 

If you have a WordPress website, you just need to install and activate this plugin. Apart from the WordPress website, RabbitLoader is also available in Woo-Commerce, Shopify, PHP, and Laravel websites.

  1. Minification of HTML, CSS, and JavaScript files can reduce page loading time:

HTML, CSS, and JavaScript are the fundamental elements of any web page. HTML creates the content of a webpage whereas CSS Stylshhets make the webpage stylish. And finally, JavaScript is used to make the webpage interactive.

Usually, the file sizes become large due to unnecessary uses of spaces & comments in the code to make the code more readable. These large files increase the page load time.

minify css,js,pagespeed insights

Minification is the process of removing all unnecessary spaces, Comments, and characters from a file. When a file is minified, the file size will reduce, which leads to a faster loading website. 

The best way to effortlessly minify these files is by using RabbitLoader if you don’t have any coding knowledge. RabbitLoader will manage this minification of your HTML, CSS, and JavaScript files.

  1. By enabling lazy loading you can improve your pagespeed insights score:

RabbitLoader will also help you to speed up your website by enabling lazy loading. Lazy loading (also known as on-demand loading) is an optimization strategy to improve the website’s performance if your website has a lot of images. 

lazy load,pagespeed insights

Instead of loading the entire webpage, Lazy loading only renders the images that are visible above the fold

Lazy loading also is applied to other media files such as videos, and the webpage’s content like text as well as comments. 

  1. Using browser cache to speed up your website:

Browser caching is the most common optimization technique. Browser caches temporarily store the static resources of a web page such as HTML files, CSS Stylesheets, images, and scripts. So, the browser doesn’t need to load from the first to render a web page. 

Let’s understand with an example.

  • You are visiting RabbitLoader.com for the first time.


  • Your browser downloads the static contents(images, CSS stylesheets, JavaScript) into the cache.


  • The next time you revisit RabbitLoader.com, these static contents are loaded from the browser cache. 


  • Thus, significantly decreasing this loading time.

Implementing a browser cache manually requires a lot of time as well as effort. There are several cache plugins available like RabbitLoader, W3 total cache, and many more. 

However, when you are using RabbitLoader for other optimization techniques, then why do you invest extra money in other cache plugins? RabbitLoader will also take care of this browser caching.

  1.  By Generating Critical CSS you can improve your website’s performance:

Eliminate render-blocking resources, the most popular warning in Google Pagespeed Insight can be fixed by generating critical CSS.

critical css generator

When a browser encounters a CSS stylesheet in HTML files, it typically blocks the rendering process. Not all CSS stylesheets are needed in the viewport. That’s why it’s crucial to generate critical CSS for your web page to boost PageSpeed.

But, how to create Cricial CSS to speed up your website?

Don’t worry! RabbitLoader automatically grabs the required CSS to visualize the view-port content and inlines it. By creating critical CSS files for every web page, RabbitLoader optimizes the CSS stylesheet size with a 98% improvement. 

As a result, you can achieve a good Google PageSpeed Insights score. Without generating critical CSS, you can’t achieve a 90+ pageSpeed score.

CSS Optimization, pagespeed insights

In the above picture, you can see that RabbitLoader optimizes an original CSS file (2.35 MB) into just 35.03 KB by generating critical CSS, indicating it reduces the CSS File’s size by 98 %.

  1. Deferring JavaScript can improve the performance metrics:  

Though JavaScript plays a crucial role on a website, it is not the critical piece in the first place, especially when we are talking about page loading speed.  

<!DOCTYPE html>  
<html>  
<head>  
<script src = "myscript.js" defer>  
</script>  
  
</head>  
<body>  
<div>  
<h1> RabbitLoader.com </h1>  
<h3> This is an example of defer attribute.  </h3>  
</div>  
</body>  
</html>  

RabbitLoader uses the defer attribute to indicate your script will only execute after rendering the Web page. Deferring JavaScript can improve FID, TBT, and TTI metrics.

So, your website’s pagespeed will automatically improve.

Check Also: PageSpeed Optimization Services

  1. Use Content Delivery Network (CDN) to Reduce Network Latency:

A physical distance between a user and the origin server can be the reason for latency. RabbitLoader’s integrated Content Delivery Network (CDN) reduces this distance by distributing static content across the edge servers worldwide. So, the page loading time will automatically decrease.

Without CDN

Without CDN

With CDN

img-28

FAQ:



1. What are Render-Blocking Resources?

Render-blocking resources are stylesheets, scripts, and HTML files that block the browser from rendering the web pages’s content above the fold. These resources affect the report of core web vitals assessment

Conclusion

If your website’s Google PageSpeed Insights score is poor, you need to improve this score by speeding up the website for a better user experience as well as SEO rankings. Here, we have suggested the most powerful strategies to reduce the loading time.

If you are not from a coding background, you must use some page speed optimization plugins to achieve a good PSI score. Also, it’s important to keep in mind that using too many plugins can reduce the page load time.

The solution is here. When you are using RabbitLoader, no other optimization tools are required to boost the pagespeed insights data.

WP Rocket vs RabbitLoader: Which Plugin Would Improve Your PageSpeed Score Better ?

WP Rocket is the most popular cache plugin in the WordPress ecosystem. Since 2013, WP Rocket has been leading the optimization scene for wordpress websites. But how does it compare to RabbitLoader?

Here, we will see a detailed comparison between WP Rocket and RabbitLoader, explore the usability of both optimization plugins, and compare the pagespeed scores after installing the plugins individually on the same website. 

img-29

We would test both the plugins on cellofy.shop one by one & see which plugins helps the website reach a higher pagespeed score in the pagespeed insight test.

WP Rocket vs RabbitLoader: in short

WP Rocket is a premium cache plugin to optimize your wordpress website for better pagespeed performance. With close to 4 million websites using the plugin as claimed by WP Media, it is the leading cache plugin by some distance. 

Over the years Wp cache has moved from just being a cache plugin & have introduced other optimization features too, namely minification, preloading & a few more features to make it more than just a cache plugin.

But when you are using WP Rocket, one would still need to install Imagify for image optimization. If you feel the need for a CDN service you need the premium RocketCDN. And for lazy loading, you need Rocket lazy loading.

In comparison, RabbitLoader is an all-in-one optimization plugin, you would not need any other optimization plugins to improve the performance of your wordpress or woocommerce website.

What is WP Rocket

WP Rocket is a premium wordpress cache plugin. The goal of this plugin is to speed up your website, which is necessary to improve the user experience as well as SEO rankings.

wp rocket

Other than the cache, WP Rocket also uses various optimization techniques like caching, minification of CSS stylesheets, JavaScript files, among others. Wp Rocket being a premium plugin you would have to shell out money even if you wish to try it on your website to gauge your needs.

What is RabbitLoader

RabbitLoader is an all-in-one pagespeed optimization plugin that uses a premium Content Delivery Network (CDN), caching, image optimization, lazy loading, and other techniques to reduce web page loading time for your WordPress website.

rabbitloader

When you are using our RabbitLoader, you don’t need to use different plugins for caching,Image optimization, CDN or even minification. Everything that’s needed to optimize your website is done by RabbitLoader itself without you having to toggle through 10 different settings.

Another advantage of RabbitLoader over WP Rocket is the availability of a forever free version. So if your website is not yet receiving a lot of traffic, you can just use RabbitLoader for free and spend the money to get more traffic.

Major Differences Between WP Rocket and RabbitLoader

Now you have a basic idea about WP Rocket and RabbitLoader. Lets see the differences between WP Rocket and RabbitLoader. Here we are mentioning some key differences between these two plugins.

WP RocketRabbitLoader
Image OptimizationTo optimize images, you need to activate the Imagify & yes, you have to pay for it separately too as the free version only allows 200 MB per month.RabbitLoaderOptimizes your images in WebP & AVIF formats using lossless technology. 
CDNSimilar to images you need another plugin, known as RocketCDN. As you guessed it, it is  a premium CDN.RabbitLoader uses integrated CDN with over 300 PoPs.
Premium CDN ChargeAn additional $7.99/ Month for using the premium CDN.No additional charges.
Critical CSSWP Rocket does not generate critical CSS for your pages.RabbitLoader Generates Critical CSS for all your pages, making them load much faster. 
Free versionWP Rocket doesn’t have any free or trail plan.RabbitLoader has a forever free plan  with 5,000 monthly page views.
PlatformsWP Rocket is exclusive to WordPress.RabbitLoader is available for WordPress as well as Shopify, PHP, and Laravel websites.
PricingWP Rocket’s pricing starts from $59/year.Imagify is $99/year. Rocket CDN is an additional  $89/Year

In Total you need to pay $250/ year to optimize your website’s Performance.
Starting from $191/annual. 

When you are using RabbitLoader, no other plugins are required. So, there is no additional charge required to optimize your website pagespeed.

What are the Similarities Between WP Rocket and RabbitLoader

Performance Optimizer: 

Both optimization plugins, WP Rocket, and RabbitLoader can improve Core Web Vitals, address Google pagespeed Insights suggestions, and help you to achieve good pagespeed performance scores. Although the pagespeed score you can reach using these plugins would be different for each of them.

Browser Caching:

Caching can store static files like HTML files, CSS stylesheets, JavaScript files, media files, and images. It minimizes the work for the server, the server wouldn’t have to serve that content over and over and serve the web page for the users if you leverage browser caching.

For example, when you are visiting our website RabbitLoader.com, your browser will download the RabbitLoader logo in the cache. The next time you visit RabbitLoader.com, this logo is directly loaded from the cache. This is how you can save data per web page.

  • WP Rocket and RabbitLoader, both can improve your website speed by generating HTML files so that in the future, users can access them quickly. It also stores static resources like CSS stylesheets, JavaScript, and image files in the user device’s local memory.

Premium CDN: 

A Content Delivery Network (CDN) is a network of interconnected servers that help to speed up a website’s loading time. It reduces the physical distance between the server and the user and proves the latency.

  • Although there is a free CDNs present in WP Rocket, its effect on the latency is next to none as it has very few PoPs.

For a better experience, WP Rocket has a custom with more PoPs. Known as RocketCDN, It offers unlimited bandwidth.

  • RabbitLoader has an integrated Content Delivery Network (CDN) with 300+ edge locations.CDN cache can save the version of your wordpress website and load this when the same user visits it. The CDN also saves the hosting resources.

WP Rocket vs RabbitLoader: Performance Comparison

We can make all the comparisons we want but as they say the proof is in the pussing, so let’s see how WP Rocket fares against RabbitLoader, to find out we would analyze a demo woocommerce website cellofy.shop in three different cases.

Once without any optimization plugin, then after installing WP Rocket & finally we would be testing it with RabbitLoader installed. 

Also, we will attach the video of the test along with the screenshots of the results.

Case 1- Checking website’s pagespeed without using any performance optimization plugins.

Let’s check the pagespeed performance score of cellofy.shop without plugging any performance optimization tools. 

As expected it didn’t do very well in the pageSpeed test and you managed to achieve a measly 36 for the mobile version and 50 for the desktop version.

Mobile Mode:

In mobile mode, the performance score is just 36. Which indicates this website fails the performance test for the mobile version. Which is not a good sign for any website, specially keeping the mobile first policy google in mind. 

Below are the pagespeed metrics which had a heavy impact on the website’s low pagespeed scores.

Without any plugin Mobile

Desktop mode:

While the desktop division of the The pagespeed performance score is also not very high either, it looks far better than the mobile version. 

Below are the pagespeed metrics that had the biggest impact on its pagespeed score.

  • First Contentful Paint (FCP) – 1.9s
  • Large Contentful Paint (LCP) -2.4s
  • Total Blocking Time (TBT) – 650 ms
img-33

Case 2- Let’s check the website’s pagespeed after installing WP Rocket

While installing Wp Rocket is like any other plugin in the wordpress ecosystem, you would need to “configure” it, go to each other individually & activate them.While it might give the user some satisfaction of them doing the optimization, it is nonetheless a time-consuming process.

But what’s the impact of WP Rocket on the pagespeed score?

            Mobile mode:

Well as far as the mobile version goes, it’s next to no improvement, not only that we can see the Total block time is surprisingly increased after using WP Rocket plugin. Not the best way to spend you 60 odd dollars.

with wp rocket

Desktop mode:

However, we do see the value of the WP Rocket in the desktop version of the website. The optimized version of the website managed to achieve a respectable 78 on the pagespeed score.

We can see FCP, LCP & TBT all improving from their previous states to a somewhat respectable score.

img-35

See the test video :

Case 3 – Checking the website’s pagespeed after installing RabbitLoader

Finally we would install RabbitLoader after uninstalling WP Rocket of course, & check the performance of cellofy.shop, The website is checked within just 5 minutes of installing the plugin and here are the results.

Mobile mode:

Here, after installing RabbitLoader the mobile pagespeed score has improved drastically, while WP Rockets improved the score from 36 for the optimized version to just 37 RabbitLoader manages to bump up the pagespeed scores to a very respectable 82. 

The score improvement is the pagespeed test is the result of improvements made in,

  • FCP ( From to 5.0 seconds to just 3.3 second)
  • LCP ( From to 5.8 seconds to 3.6 seconds) and
  • TBT ( From 1440ms to 40 ms)
img-36

Desktop mode:

Finally, for the desktop version, WP Rocket achieved a respectable 78 from the original score of just 50. RabbitLoader archived a near perfect 99 out of 100. So how did RabbitLoader achieve such an unrealistic looking, near perfect score? That too for the home page?

RabbitLoader has reduced the FCP from 1.9 seconds to just 0.6 seconds.While LCP came down from 2.4 seconds to just 0.7 seconds and the TBT became just 10 ms from 650 ms on the unoptimised website.

with rabbitloader

See the test video:

Checking the website’s pagespeed score table view: without any plugin, with WP Rocket, and with RabbitLoader plugin

Without Any PluginWith WP RocketWith RabbitLoader
Mobile PageSpeed Score363782
Desktop PageSpeed Score507899

Conclusion

If you are planning to optimize your website or improve the current optimization, now you have the information on your side to make a judgment call. 

If you have enough time on your hands maybe spend a day installing both WP Rocket & RabbitLoader on your website & see the differences in score yourself.

Maybe you are using WP Rocket for a long time, maybe it’s time you try RabbitLoader which can give you a bit more performance, that little bit of an edge that might become a deciding factor for the search engine to rank you higher or  lower than your competition.

FAQ:

1. Can I use Cloudflare caching with a WP Rocket?

Yes, you can use Cloudflare with WP Rocket & RabbitLoader both  to enhance your website’s security. Both are compatible with Cloudflare.

2. Which plugin provides superior mobile optimization: WP Rocket or RabbitLoader?

Both WP Rocket & RabbitLoader optimize your website’s mobile optimization. We check the pagespeed performance on a live website and posted the results here for your to interpret the results.

3. What are the key benefits of using WP Rocket for website performance?

WP Rocket is a popular WordPress plugin that is used to optimize performance your wordpress or woocommerce website by implementing various techniques such as browser caching, minifying HTML, CSS, and JavaScript files, using premium CDN (RocketCDN), and many more.



Lighthouse Speed Test : 5 Simple Tips on How to Improve Your Website’s Performance

Google Lighthouse is a free tool that helps you analyze the quality of web pages on your website. It audits your pages for accessibility, performance, and SEO and recommends changes to improve them.

Let’s assume the Lighthouse is the speedometer of a car that not only shows the car’s speed but also shows suggestions to improve the speed. You can use the recommendations from the Lighthouse report to improve your website further.

What is Google Lighthouse?

The major focus of Lighthouse audits is Google’s Core Web Vitals. Core Web Vitals is a set of three metrics i.e. Google uses them to calculate the speed of the web page and overall user experience (UX).

Lighthouse speed test

Lighthouse uses six metrics to generate the performance score. These are

  1. Largest Contentful Paint (LCP),
  2. First Input Delay (FID),
  3. Cumulative Layout Shift (CLS), 
  4. First Contentful Paint (FCP),
  5. Interaction to Next Paint (INP), 
  6. Time to First Byte (TTFB).

The good thing about Lighthouse is that it not only shows you a report on all the important Core Web Vitals information. It also gives you actionable insights in just a few seconds to improve several site aspects like web accessibility and SEO. 

Core web Vitals Lighthouse

It is very important to run a Lighthouse audit on your site to see specific performance weaknesses related to your site that negatively influence the user experience.

Unwrapping the Lighthouse Speed Test Report and Metrics

Lighthouse checks your website and assigns it a score across five various categories.

1. Performance Audit

In this audit, Lighthouse calculates how fast a web page loads and how quickly it becomes interactive.

It presents your performance for the five-speed metrics mentioned below:

  • First Contentful Paint (FCP): FCP is a performance metric that calculates how fast a user can see the actual content on your page such as images, text, videos, and so on.
  • Largest Contentful Paint (LCP): LCP calculates the time it takes for the largest and most important visible element to load. It could be an image, a block of test or even a video on the page.
  • Cumulative Layout Shift (CLS): CLS calculates the shifts in the layout that take place during  the loading of the webpage, it calculates the stability & predictability of the elements within the webpage. 
  • Speed Index (SI): Speed Index is a page load performance metric that displays how fast the contents of a page are visible to the users. It is the average time at which the visible sections of the page are shown.
  • Total Blocking Time (TBT): It evaluates the page’s load responsiveness to user input. It is useful to remove your FID score in lab data. They both calculate different things i.e. user input and user interaction but by upgrading TBT you simply improve FID which is a Core Web Vitals. 
Performence audit

Lighthouse provides an overall performance score for all these metrics based on your page performance. The score should be anything between 0 to 100.

If the score is anything between 90 and 100 it means your page is effectively optimized for user experience. A score below 90 needs some improvement in your performance for which Lighthouse provides suggestions.

2. Accessibility Audit

Lighthouse’s accessibility test evaluates how well the users who use assistive technology are capable of using your website. It looks at elements including links and buttons to check if they are appropriately described.

Accessibility Audit

The accessibility score connects to how usable your website is for all users, in all their diversity.

It also analyzes site images to check whether alt text is present or not. It is required for users with poor vision to understand what the image is all about while using a screen reader.

Like the performance report, the accessibility report also provides you with a score out of 100. It also provides recommendations to improve your overall accessibility.

3. Best Practices Audit

This audit checks whether your page is created on the latest standards of web development. Additionally, it conducts a brief audit of generally approved best practices for web development. Lighthouse examines whether:

  • The page is free from all browser errors.
  • If your website is using a secure connection, such as HTTPS
  • The page allows users to paste passwords in the password section or allows the usage of password managers.
  • If the page has a valid source map.
  • The page developed a good user experience or UX by preventing geolocation and notification permission requests on page load.
  • All JavaScript libraries are protected and free from any vulnerabilities and so on. 
Best practice

All the above-mentioned audit factors provide you with a score out of 100. The report on best practices also highlights some particular elements that need your attention to improve the score.

4. SEO Audit

Lighthouse assesses the SEO of a website by considering elements such as structured data, meta tags, and headings. It checks if your page has valid structured data or not, whether your page is mobile-friendly, and so on. It then provides a score out of 100.

It gives suggestions to enhance the search engine visibility of your website which is essential to operate organic traffic.

img-43

5. Progressive Web App (PWA) Audit

The last section of the Lighthouse metrics is PWA. It checks whether the site meets the standard of Progressive Web App to provide an excellent user experience.

PWA audit

The PWA audit measures whether your web app is 

  • Installable on various devices and contains features such as push notifications and offline functionality.
  • Reliable and fast on mobile networks and provides offline functionality.
  • PWA-optimized by configuring a custom splash screen, redirecting HTTP traffic to HTTPS, and more.

The test runs your website against these audit factors and represents one of the PWA badges. It also provides recommendations to improve the overall PWA performance.

How to Test Speed and Performance using Google Lighthouse

There are a few tools that can run a Lighthouse audit on the website. If you wish to avoid installing an extension or running a command, you need to use the web.dev or Chrome DevTools. Let’s take a look at the instructions for each one of them:

1. Chrome DevTools

To run a report in Chrome you need to go through these steps:

  • First, you need to open Google Chrome in incognito mode.
  • Then you have to navigate to the website you want to run the audit on.
  • After that, you should Right Click anywhere on the page and then click Inspect.
  • Then you should look for the tab called Lighthouse which seems invisible as it is hidden behind the arrows at the top of the developer tools section.
  • As soon as you reach here you must click Generate Report to see the complete Lighthouse Audit. Please note that it may take a minute or two for the audit to show the report.
Chrome-dev-tools-lighthouse

2. Pagespeed.Web.Dev

An easier way to audit a web page with Lighthouse is pagespeed.web.dev. It is a browser-based tool where you need to enter the URL of your website.

web.dev

As soon as the audit is finished, Lighthouse presents you with a detailed report. Note that it does not provide two separate reports for desktop or mobile, so you can see only one analytics report. 

3. Chrome Extension

Another popular way to run an audit on the website is Chrome Extension. You need to install the Lighthouse Chrome Extension on your Chrome browser. After that, you should visit the web page you want to test. 

Lighthouse chrome extension

Open the Chrome Extension menu and click on the Lighthouse symbol. Click on Generate Report to perform the audit. After that, it presents you with a detailed report.

5 Simple Hacks to Improve Pagespeed Score in Google Lighthouse

There are various ways to improve your Lighthouse performance on your website. Now take a look at some of them to provide you a taste of how you can upgrade the Lighthouse metrics: 

1) Optimize Your Images

By compressing every photo you can optimize your images. Images are required to be responsive and scaled to the screen size. The images should have SEO-friendly titles, alt texts, and alt descriptions. 

Adding alt text and descriptions provides screen readers with an easy way to represent imagery for people with no vision. This performance connected them to a long list of audits completed for Lighthouse’s Accessibility score. 

Image Optimization

They also give context to site crawlers. Thus, this optimization enhances both SEO and Accessibility scores.

It could be difficult if not impossible to manually optimize hundreds & thousands of images. You can automate the process by using any image optimizer similar to RabbitLoaderif you are on wordpress CMS.

2) Use Appropriate File Names

Filenames do not seem necessary but context is important for both accessibility and image optimization. 

You should use dashes instead of spaces. For instance- A-picture-of-an-island instead of a picture of an island. You should try to keep names that are appropriate to the imagery. 

3) Optimize Your LCP

To optimize your LCP score you have to shrink your video sizes. You should always be aware of the size of your background images.You would need to optimize your fonts completely.

Set-up page caching is also helpful in boosting your server response time remarkably and helps in improving the Largest Contentful Paint (LCP). 

Optimize your LCP

LCP presents a website’s loading time. It calculates how fast the web page renders its largest elements as well as text blocks and images.

It might become too messy & conflicting if you use a plugin or a tool for each of the optimization you need  hence you should try an all in one optimization tool like RabbitLoader.

It is a cache-based speed optimization plugin to improve the LCP score of your website. RabbitLoader reduces the time it takes for a site to load its largest element through compression and caching technologies. It ensures that the largest content element is quickly visible on the user’s screen.

4) Deffer Irrelevant CSS or JavaScript 

If you are facing difficulty in improving Total Blocking Time (TBT) and Time To Interactive (TTI), you need to check whether there is any irrelevant CSS or Javascript file available that is slowing down the rendering of the page.

Js and Css optimization

RabbitLoader efficiently defers non-critical Javascript files, specifically those belonging to third-party services, and third-party plugins like chat widgets, pop-ups, analytics, and so on.

With the help of RabbitLoader, site owners look for better website performance, user engagement, and decreased page load times.

5) Reduce Unnecessary Plugins

On platforms like WordPress & many other CMS’s a large number of packages or plugins are available to improve the performance of your website, but as you keep installing the plugin to improve each aspect of performance they add up & start conflicting with each other & since you now have installed a lot of plugins those plugins would make the website even slower.

Uninstall plugin

Instead of using one plugin for image optimization and one for caching, try RabbitLoader .You do not need several plugins for caching, image size reduction, CSS, HTML, and Javascript minification, compression, and so on. You just need to install RabbitLoader and it will optimize your website in a few minutes.

Final Thoughts 

Google Lighthouse provides operative insights to improve the user experience, accessibility, and overall performance. By recognizing the areas for improvement, you should evaluate your site for better user engagement, more successful online presence, and higher search rankings.

What Is Total Blocking Time (TBT) & How to Optimize It to Boost The PageSpeed Score?

You may have encountered the term Total Blocking Time (TBT) while analyzing your PageSpeed performance in Google PageSpeed Insights or GTmetrix. But what is Total Blocking Time?

Google added this Total Blocking Time (TBT) metric to its PageSpeed & lighthouse tests to analyze the span of time when the main thread is blocked and the user needs to wait to see the website’s content.

Total blocking Time

Google PageSpeed Insights considers TBT along with four other metrics to determine the PageSpeed score. 

Here, you’ll learn everything you need to know about Total Blocking Time (TBT) and how you can easily optimize your TBT performance by using RabbitLoader without needing coding skills. 

What Is Total Blocking Time (TBT)?

Total Blocking Time (TBT) accounts for 30% of the overall Google PSI score. This performance metric is used to analyze the load responsiveness of a website. In simple words, TBT measures the span of time, a long task (which takes more than 50 ms ) blocks the main thread and negatively affects your page’s usability. 

TBT

Let’s understand TBT with an example. Assume, there are a total of 4 tasks in which task 1 takes 150 ms, task 2 takes 30 ms, task 3 needs 100 ms, and finally, task 4 requires 350 ms.The TBT for these 4 tasks combines would be 450 ms (100+50+300).

Task Time Required (in milliseconds )Blocking time (in milliseconds )
Task 1150(150-50)= 100
Task 230Not considerable 
Task 3100(100-50)= 50
Task 4350(350-50)= 300
Total required time= 630 msTotal Blocking Time= 450 ms

How To Measure Total Blocking Time?

You already understand how Total Blocking Time is calculated. Here we will mention the helpful tools to measure the Total Blocking Time. There are several tools available to measure TBT. Let’s discuss the two most popular online tools to measure it.

Google PageSpeed Insights

Total blocking time peformance

Google PageSpeed Insights considers 5 performance metrics to determine the PageSpeed score. Among these 5 metrics, TBT is one of them. To know how to measure it in Google PageSpeed Insights, read our PageSpeed Insights blog.

GTmetrix 

GTmetrix is the best alternative tool for measuring PageSpeed performance. Its advantage over Google PSI is that it allows customizing the test location and device. For more details, read our post on GTmetrix.  

Total blocking time tbt gtmetrix

What Is An Ideal Total Blocking Time?

In order to categorize the performance of Total Blocking Time (TBT), google sets some boundary values. To be in a green zone, your Total blocking Time should be less than 300 ms for the whole page Let’s explore the criteria.

TBT time (in milliseconds)StatusColor 
Less than 300 msGoodGreen
In between 300 ms to 600 msModerate (need to improve)Orange
More than 600 ms PoorRed 

The Reason Behind A High Total Blocking Time

Before discussing the solution, it’s important to know the reason behind a high TBT. Let’s explore the most common causes that can inflate the Total Blocking Time (TBT).

  • A high JavaScript execution time due to the unoptimized JavaScript files
  • An unoptimized  CSS file
  • Using a huge number of third-party scripts
  • A high main thread work. 
  • An excessive DOM size. 
Total Blocking Time

Optimize TBT With RabbitLoader

Optimizing Total Blocking Time can be challenging as it requires extensive modification of resource files such as stylesheets, HTML, and JavaScript files. To prevent these technical aspects, you can install RabbitLoader. Let’s see how RabbitLoader optimizes your TBT.

  • Compress Your Resource Files
  • Minifying CSS and JavaScript 
  • Optimize Your CSS Files
  • Optimize JavaScript Files

Compress Your Resource Files

Compressing is a method for easily reducing the size of your resource file by minimizing the redundancy in your coding file. The most popular two types of compression are GZIP and Brotli.

The most traditional compression method is used in GZIP, whereas the Brotli uses a modern algorithm. 

RabbbitLoader uses the Brotli compression method and compresses your HTML, CSS, and JavaScript files, resulting in significant improvement of The Total blocking Time performance.  

Minifying JavaScript And CSS Files

When it comes to improving the TBT performance, minification of JavaScript files and CSS stylesheets is one of the unavoidable optimization strategies. By removing white spaces and unnecessary comments from your CSS and JS files, you can easily reduce the total file size.   

Total Blocking Time (1)

Doing this manually can be a daunting task for a large website, by just installing RabbitLoader, you can easily reduce the file size by minifying your JS and CSS files without any tweaks.

Optimize Your CSS Files

Although a CSS file’s aesthetic contribution is huge in a website’s design, an unoptimized CSS can negatively affect the performance of TBT metrics, leading to a slow loading speed. 

There are two ways to optimize your CSS files: reducing the unused CSS and generating critical CSS. When you use RabbitLoader, it will optimize your CSS stylesheets by identifying and reducing the unused CSS and creating a file for your critical CSS. For more details, on how CSs is optimized by RabbitLoader you can read the Reduce Unused CSS blog and the Critical CSS blog. 

Optimize JavaScript Files 

JavaScript optimization is another process that can significantly reduce the TBT and mitigate the Google PageSpeed warning “Reduce JavaScript Execution time”. Some techniques are involved in JavaScript Optimization which includes:

TBT graph
  • Add a defer attribute in the HTML file for each non-critical JavaScript function.
  • Code splitting.
  • Minifying and compressing JavaScript files. 

When you use RabbitLoader for other optimization purposes, you don’t need to worry about each optimization technique. RabbitLoader will look after your JavaScript optimization among other optimization techniques needed for a lightning fast website. 

Conclusion 

The Total Blocking Time (TBT) is one of the most important performance metrics that holds 30% weightage of the overall PageSpeed score in Google PSI. To increase user engagement on your website, you need to optimize the performance of TBT along with the other performance metrics. 

Optimize your WordPress, Shopify, Php or Laravel websites with just a few clicks, improve their PageSpeed performance in just 5 minutes by  installing RabbitLoader.

Document

Get The Best PageSpeed Score

For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required