What is BF Cache? Exploring the Key Benefits of Using BF Cache for a Better User Experience

The bf cache (back / forward cache) is a web browser optimization that is used to enable instant back and forward navigation. It improves the browsing experience, especially for the user who has a slower network or has a slower device.

According to Chrome Usage Data, 1 in 10 navigation on desktop and almost 1 in 5 on mobile are either back or forward. Now, how can you ensure that after navigating back and forward to the web page, they load immediately? That is when the bf cache comes into play! 

Here we will cover the concept of bf cache and the key benefits of using this for a better user experience. 

What is bf cache?

A bf cache (also known as back/forward cache) is a feature that allows the browser to create a snapshot of a visited web page and store it in their in-memory. It is used when the user navigates back or forward between the web page.

Let’s understand it with an example, suppose you have performed a Google search to find some information & clicked on a particular search result to find the some information, but you are not happy with the information & press the back button to go back to the search results, now instead of loading the page again the browser would show saved snapshot.

When a user visits a web page, the browser first downloads and parses the resource files of the content such as HTML files and CSS stylesheets. Then render the webpage content. And finally, JavaScript makes the page interactive.

If the back-forward cache is not enabled for a web page, that means every time the user leaves the page and navigates back to it, the browser will go through the whole process. It will decrease the pagespeed performance of the website.  

Check out: Cache vs Cookie

Which browsers support bf cache?

In web technology, bf cache is not a new concept. Safari (a web browser developed by Apple) added this feature in 2009. 

Now, almost all browsers support the back/forward cache. Here we are mentioning some popular browsers.

• Chrome
• Firefox
• Edge.

The difference between an HTTP Cache and a bf Cache?

• HTTP cache or disk cache is used to store the static resources of the webpage content such as HTM files and CSS files to avoid the redownloading of these static resources. 

• Whereas the bf cache is more comprehensive. It stores the snapshot of the entire webpage including JavaScript in the in-memory.

In the HTTP cache, not all static resources are allowed to be cached. As a result, every time the user visits the website, the browser needs to re-download the content. With the help of the bf cache, this issue can be avoided. 

How to check if your website can be served from the bf cache?

There are various ways that you can check if your website can be served from the backforward cache or not. Here we would check this in two most popular ways to check the website.

• Using Chrome DevTools:

Chrome DevTools allows you to check whether the web page is eligible for the bf cache. To check this you need to follow these 5 steps.

Step 1: Visit the page you want to test in Chrome DebTools.

Step 2: Right-click on the page and click on Inspect option or you can press F12.

Step 3: click on the Application option.

Step 4: Select the Back/forward cache in the Background services sections.

Step 5: Click on Test back/forward cache. 

Then DevTools allows you to see the status indicating whether the website can use bf cache. 

• Using Google PageSpeed Insights: 

Another option is to use Google PageSpeed Insights, to check if the website can be served from the back forward cache or not.

If the tested web page cannot be restored from the bf cache, the audit will fail. By clicking on the warning, you can see a drop-down menu with the failure reasons.

View more: Immutable Caching

These failure reasons can be categorized into three parts.

 Actionable indicates you can make changes to the website to support the back-forward cache.

Pending Support shows that the web page isn’t eligible for the bf cache for now. But in the future chrome supports it.

Not Actionable indicates you can’t fix this issue on the webpage. 

The Most common issues that prevent bf cache

At this point, you have a brief idea about the bf cache. The main reason that prevents bf caching are:

• Using Cache-Control: no-store header in your JavaScript code

The Cache-Control HTTP header holds the instructions for both HTTP requests and HTTP responses. No-store header in cache-control will disable all caches. 

•  Using Unload event in JavaScript:

The unload event occurs when users navigate away from the web page such as submitting a form, clicking a link, entering a new URL, etc. 

During the unload event JS code can execute the task before the web page unloads such as saving the data. 

5 Strategies to optimize a web page for bf cache 

Here we are mentioning the best strategies that you can apply to fix the issues that prevent back forward cache.

1. Use cache-control: no-store only for the information-sensitive page 

If the webpage contains some sensitive information and caching is not needed then use cache-control: no-store to prevent it from being eligible for the bf caching.

Code for node js server:

app.use((req,res,next) => 

{

res.setheader(‘Cache-Control’, ‘no-cacche’);

next();

});’

For a wordpress website, you can use plugins like Cache-control, Cache control by Cacholong, LH Add Headers, etc. to optimize a web page for bf cache.

On the other hand, if the content of the web page is not static then also cache-control: max-age() is used.

2. Update sensitive data after bf cache restore to optimize a web page for bf cache

A bf cache should not be used on web pages that contain sensitive data. Especially when a user visits the website from a public computer, the next user should not be able to visit that page by just clicking the back button.

componentDidMount() {
console.log('componentDidMount')
window.addEventListener('pageshow', (event) = {
console.log('PAGE_SHOW');
if (event.persisted) {
console.log('PAGE_SHOW_PERSISTED');
}
});
}

 You can achieve this by using event.persisted after a pageshow event.

See more: Cache Policy for static assets

3. Avoid using the unload event to optimize a web page for bf cache

The most common way to optimize the bf cache is to avoid using the unload event. Instead of using the unload event, you can use the pagehide event in the method like addEventListener() to detect when a webpage is visible or hidden to a current user.

window.addEventListener('click', warnAboutLostChanges);

function bindWarnAboutLostChanges() {
  window.addEventListener(
    'beforeunload',
    function(e) {
      if (shouldWarnYouLogic()) {
        e.preventDefault();
        return "You have unsaved changes!";
      }
    }
  );

  window.removeEventListener('click', warnAboutLostChanges);

}

4. Carefully adding beforeunload listeners to optimize a web page for bf cache

The beforeunload event is used to display a warning dialog box to inform users whether they want to leave the current page. Chrome and Safari will allow beforeunload event but Firefox will flag the webpage as ineligible for back forward cache.

5. Use rel=”noopener”  in your script to optimize a web page for bf cache

The rel=”noopener” attribute is used to prevent the current page from being able to access the window.opener property. Instead of using a window.postMessage(), you should use rel=”noopener”.

Conclusion 

Here, we cover the key benefits of using bf cache and the strategies to fix it. The benefits of a website serving from the bf cache are to reduce data usage, improve core web vitals, and a better user experience.

To optimize your web page for bf cache by applying the mentioned strategies like Using cache-control: no-store only for the information-sensitive page, Updating sensitive data after bf cache restore, Using rel=”noopener”  in your script, Avoiding using the unload event, Using rel=”noopener”  in your script.

Now, it’s your turn to apply these powerful strategies to your website and make your website more user-friendly. It will also increase the website’s conversion rate.

How to Avoid an Excessive DOM Size? – 5 Easy Ways to Fix it for WordPress.

Seeing Avoid an Excessive DOM Size on your Google page speed test could be very frustrating, especially if you are not a developer yourself, as it might feel similar to deciphering an ancient text, let alone resolving the issue.

There are many possible ways to Avoid an Excessive DOM Size for WordPress websites, which will be discussed here in an easy-to-understand language so even a non-developer can understand the reasons behind the excessive DOM size issues & and act to resolve them.

But first, we have to understand what is DOM, or Document Object Model.

DOM is like a translator between web pages and computer programs. It turns the structure, style, and content of a page into objects and nodes that programs can easily work with.

This means programs, especially those written in JavaScript, can change how a webpage looks and behaves by talking to the DOM. It’s like giving JavaScript the power to understand and play with the building blocks of a webpage, including the text and visual elements.

What is DOM Size?

DOM size is the size of the Document Object Mode. DOM size is basically the number of nodes or elements in the DOM tree.

DOM is a representation of data in the form of a tree structure that consists of elements and nodes. Each element related to a node is a child. Every element in the DOM is known as a node which are branches of a tree. Every branch related to the tree is called depth.

Whenever a web page starts loading, the browser generates the DOM of the page. DOM is a programming interface related to XML (Extensible Markup Language) and HTML (Hyper Text Markup Language) documents. 

It defines the analytical structure of a document and the processes by which a document is manipulated and accessed.

With the help of the Document Object Model,  we can simply acquire and manipulate tags, IDs, or HTML elements/tags. It is a method to show the webpage in an organized hierarchical structure.

Through the DOM, JavaScript gains access to both the CSS and HTML of the webpage and also adds behavior to the elements. DOM is an API that interconnects with XML and HTML documents.

In the Document Object Model, documents are structured in a logical formation resembling a tree, representing the hierarchy of nodes such as elements, attributes, and text content. This structure is akin to a forest or grove containing multiple trees.

The DOM consists of different levels or interfaces. One such level is DOM Core, which is utilized to represent the organized structure of a document. Another level is DOM HTML, specifically designed to characterize an HTML document.

Tags play a crucial role as the structural backbone of an HTML document. In the Document Object Model (DOM), each HTML tag and its content are represented as nodes in a hierarchical structure. These nodes, including elements and text content, are accessible through JavaScript, allowing developers to manipulate and change the content of the page dynamically

For example, the ‘document.body’ object in JavaScript refers to the <body> tag in an HTML document. When you run code involving this object, you can manipulate its properties, such as changing the background color. For instance, running code to make the <body> element blue for 3 seconds would involve modifying the CSS properties dynamically using JavaScript.

document.body.style.background = ‘blue’; // make the background blue

setTimeout(() => document.body.style.background = ”, 3000); // return back

At this stage, we used style.background to alter the background color of the document.body. Style grants programs to effectively access and operate on the content of style sheets. 

What is the ideal DOM size?

An ideal DOM tree must follow some guidelines,

1. The ideal DOM size should have less than 1500 nodes total: 
2.  An ideal DOM should have the highest depth of 32 nodes:
3.  An Ideal Dom size should not have a parent node with beyond 60 child nodes: 

DOM Structure:

Just assume DOM is a family tree. The family tree has a father, mother, children, siblings, and so on.

 Likewise, a WordPress or any other website for that matter website has many elements or nodes. Each node has depth or divisions. This organized structure concludes at the last node or child element where no branches are left. 

The content, headings, etc. are an integral part of the large DOM tree, which is required to be effortlessly operated and improved. It is built on the necessity of programming languages such as HTML, CSS, and JavaScript. 

Generally, you have to search for a way to construct DOM nodes whenever it is required and smash them when it is not required. 

Moreover, avoiding an excessive DOM Size in WordPress will positively influence a site’s real-world performance more than just the PSI or Core Web Vitals. As a result, the loading time of the page is reduced and does make it more user-friendly.

What is a DOM element?

A DOM element is something like a DIV, HTML, or BODY element on a page. HTML is needed to build a DOM which is an in-memory presentation of the page.

Effects of Excessive DOM size on PageSpeed Insights score.

To improve the PageSpeed Insights score, it is necessary to reduce the excessive DOM size. An excessive DOM size leads to slower loading time and poor user experience. It would result in failing core web vital test & lower page speed score numbrs.

Why Excessive DOM size in WordPress is a problem?

The larger DOM size presents unnecessary complexities while rendering a web page. The browser is required to implement extra effort to show the webpage on screen. There are some issues with an excessive DOM size when it comes to WordPress that affect the performance of the web page: It also leads to the higher First Contentful Paint.

 Now, the question is why the effect on page speed of DOM size is a problem. There are multiple ways or problems through which a huge DOM tree can affect or decrease the performance of a page:

• Network Inefficiency and Lazy Loading: 

Whenever you load the page with too many HTML tags, most of the time the browser needs more resources to render or provide the page. As a result, the page loads slower. It happens because of the bloating of code.

Additionally, it expands unnecessary data costs for the users and decreases the loading time.

• Increase is page loading time:

 If an expanded and huge DOM tree is blended with complex style rules then it will slow down the page rendering badly. It affects the page’s load time.

An excessive DOM size will automatically decrease the rendering performance. A browser like Google Chrome requires more computation at the time of loading the first page and every time it is required for a user to interconnect with the page.

• Webpages feel less responsive.

As the browser takes more time to provide and process the content, a huge DOM shows a web page less responsive. This slow responsiveness can badly affect the user’s experience and keep them away from the websites. It also decreases the conversion rate.

 What are the Reasons for the emergence of an excessive DOM size in WordPress?

An excessive DOM Size in WordPress is generated when there are too many HTML tags used on the page or when they are inserted very deeply.

•  Poorly Coded Plugins or Themes Should Be Avoided

While operating a plugin like a calendar plugin or slider that can create a huge number of DOM nodes.  Likewise, poorly coded themes and templates can critically influence the performance of the website.

• DOM node reduction by JavaScript

From time to time JavaScript produces a huge number of DOM nodes. For example, a chat widget can develop excessive DOM nodes available on a page’s DOM. 

• Avoid Page Builders that Produce Bloated HTML

Some Page Builders are required to generate bloated code with a huge number of DOM nodes. Most of the time they are the most important part of the procedure. Themes that are of inferior quality can directly influence an excessive DOM Size in WordPress.

Check: Core Web Vitals Assessment: Failed?

How to avoid excessive Dom size for a new WordPress website?

To avoid an excessive the DOM size for a new website, users are advised to follow the instructions suggested here:

1. Say No to Poorly Coded Themes

If you wish to plan build your website for performance & stay away from an excessive DOM size in WordPress, we suggest to avoid using bloated themes. You can check the performance issue of demo theme and template on Google PSI to see if it’s something worth using on your website.

 2. Remove Irrelevant JS codes

Use browser developer tools to check the performance bottlenecks. This would highlight areas where you can make improvements or remove unnecessary codes.

Also, if you are already not minifying your codes, you should definitely consider it to improve the DOM size.

3. Do Not Use Page Builder without considerations

Page builders are becoming important for website owners because they efficiently drag and drop content accompanied by their pre-built controls. 

But sometimes these plugins produce some supplementary div tags in the HTML that lead to moderate response time.

 Almost all page builders insert too many div tags. To handle this issue, you have to access your HTML and fix it manually. Some page builders take good steps to solve these issues.

For example, Elementor has declared that Elementor 3.0 proceeds with significant DOM improvisation to improve the speed and performance of new websites. You can also use the native WordPress block editor and expand it with block plugins such as Otter Blocks.

4. Stay Away from Complex Codes

Users should try to avoid complex codes to fix the issue of an Excessive DOM Size WordPress. Complicated or dense code, properties, or values can transform the pages unpredictably.

 It also influences the performance and overall experience of the user. Therefore, users should try to keep a distance from the complex codes for their successive and continuous performance of websites. 

See Also: Total Blocking Time

 How to reduce Dom size it for an existing WordPress website?

An Excessive DOM Size in WordPress leads to the slower rendering of visuals and content and drains a bigger chunk of memory. It also leads to slow interactions, and longer script implementations, influencing the site performance and user experience. 

 There are multiple ways to fix an excessive DOM size in existing websites, let’s take a look:

•  Replace the bloated WordPress theme & plugins.

First of all, poorly coded plugins and themes bloat the site’s code and cause DOM to increase. To solve the plugin issue, you have to replace it with a plugin that’s not unnecessary bloated.

Same goes for the themes, avoid bloated multi-purpose themes they might look convenient but most of them come with various options which you might never use but, they bloat the code.

It might not always be possible to change the theme maybe you can look into, we suggest using a performance optimizer RabbitLoader.

• Do not try to Copy-Paste Text into WYSIWYG Editor:

Almost all WYSIWYG (What You See Is What You Get) editors are not capable enough to clean up the pasted code, specifically when they are copied and pasted from some sources, for instance, Microsoft Word. 

Moreover, it copies the styles as well as text. This issue can be fixed by avoiding directly pasting the text into the editor and removing the bloated text/styling of codes.

 The paste option should be used as the Plain Text Option. An HTML cleaner is perfect for this. Alternatively, you can use Gutenberg in the WYSIWYG editor.

• Create Multiple Pages Instead of a Single Long Page:

A large single page on the website represents different contents such as blog articles, contact forms, business information, and so on which can lead to excessive DOM size in WordPress or any other CMS.

Instead, splitting a single long page into multiple pages decreases the number of DOM nodes.

• Implement Infinite Scrolling and lazy loading

A lazy load of the below the first fold of your website is an important way to enhance your initial page rendering, you won’t need to add another plugin on your website if you have RabbitLoader installed, it would take care of the lazy loading.

If its blog page, you can also speed up page rendering by putting restrictions on the highest number of posts on each blog page. Like lazy loading, applying infinite scrolling speeds up the load performance of pages. 

It is needed when the user does not want to scroll the unwanted elements and scrolls the same elements

Final Thoughts

Although you can resolve the excessing DOM size using the tips mentioned above, it’s better to do your planning right & keep this in mind when you first creating your website.

But since it WordPress sometimes you might just can’t do without a specific plugin or theme, for those situation you can use a performance optimizer like RabbitLoader which takes care of all aspects of your performance so you do not need to bloat your website with 10 different performance plugins that conflict with each other.

How To Set Wp-Config.Php To Writable On Your WordPress Website?

If you are running a WordPress website, you often see the “wp-config.php is not Writable” error in your WordPress dashboard when you are trying to add any plugins or switch the theme. 

But what does the “wp-config.php is not Writable” mean and how to set wp-config.php to Writable?

The “wp-config.php is not Writable” error indicates that you can’t modify or edit the file. As a website owner, you often face this frustrating issue that you must deal with. Let’s understand this “wp-config.php is not Writable” error in detail and explore the effective techniques to set wp-config.php to writable.

What Is The “Wp-Config.Php Is Not Writable” Error?

The “wp-config.php is not Writable” error means you don’t have permission to edit or modify the wp-config.php file. The wp-config.php is crucial for your WordPress website as it consists of the essential settings such as site URL, database credentials, security code, and other essential importations. 

When you install WordPress, a wp-config.php file is automatically created. By default, it’s always set in read-only mode to prevent unauthorized access. When you install a new WordPress plugin or switch the WordPress theme, the wp-config.php will be modified. 

Check more: Minify Php

Here, the “set wp-config.php to writable” error occurs. If the wp-config.php file is set to read-only mode, you can’t modify it, which may trigger the “set wp-config.php to writable” error in your WordPress dashboard.

FAQ:

What is the wp-config.php file in WordPress?

The wp-config.php is an essential file for your WordPress site. It contains essential information about your site, such as database credentials, site URLs, and more.

Why do you see the “wp-config.php is not writable” error message?

This wp-config.php is not writable” error message occurs when the wp-config.php is set in read-only mode. 

Why can’t we set the wp-config.php file permissions to 777?

No, it’s not a good practice to set the wp-config.php file permission to 777, which indicates everyone can read, write, and execute the wp-config.php file. This can harm your WordPress site’s security. 

To make the  wp-config.php file writable, you can set the file permission to 664. This allows wp-config.php to be read and modified by accounts in owner groups and read by everyone. 

How To Set wp-config.php to Writable?

To fix this “set wp-config.php to writable” error, the only thing you need to do is change the file permission. By providing proper file permission, you can set a file’s accessibility: who can read, modify, or execute the file.

The file permission consists of three digits where the first digit indicates the permission of the owner’s accounts, the second digit refers to the permission of other accounts in owner groups, and the third digit determines the permission of the accounts of everyone else. 

When you install WordPress, by default the file permission of the wp-config.php file is set to 644. This file permission only allows a site owner to read or write the file. 

You can change the permissions of the wp-config.php file according to your requirements via an FTP client or file manager, which is available in the control panel. Let’s explore the easy process to change the wp-config.php file’s permissions. 

• Step 1: Open the file manager from the web hosting control panel and find the wp-config.php file. 

• Step 2: After finding the wp-config.php file, right-click on it. Then go to the context menu and click on “change permissions” or “file permissions”.

• Step 3: A dialogue box will pop-up for setting permissions. The best practice is to modify the file permission to 664, which indicates that wp-config.php can be read and modified by accounts in owner groups and read by everyone. 

The file permission also can be changed in 666, which means everyone can read and write the file.

• Step 4: when you set the proper permission, you can click on the “apply” or “save” button. 

By applying the above steps you can easily fix the “set wp-config.php to writable” error in your WordPress website. 

However, if you still face the same error after changing the file permission, it can occur for other reasons, such as poor server configuration or file ownership. At this time, you need to contact the WordPress hosting provider to fix this error. 

Conclusion 

Here you have seen the reason behind the “wp-config.php is not Writable” error in your WordPress site and how to set wp-config.php to Writable. By implementing the above steps you can easily change the file permission and set wp-config.php to writable. 

How To Solve Your Web Pages Shifted To The Right Issue

Have you ever faced the problem that you open a website and the web pages are shifted to the right? You are not facing the problem alone. This is one of the common issues that can be annoying for the users. 

Here we will talk about the layout shifts, how you can measure it, the most common reasons for your web pages shifted to the right, and explore the easiest solution to fix this. 

What Does Layout Shift Mean?

Layout shift indicates the shifting of the web page’s content during loading time. In simple words, during loading time, page elements such as images, buttons, links, and fonts are unexpectedly shifted around the web page, which can harm your user experience.  

Let’s understand layout shifts with an example.

Assume, you visit an online store and choose an e-book. After visiting the website, when you are about to click the “download” button to download the book, the entire web page is shifted to the right. Therefore, you finish up by clicking on another button or link. This is an unexpected layout shift. 

How does a layout shift impact a CLS performance? 

CLS calculates the unexpected shifting above the fold and provides a score based on two factors: the impact fraction and the Distance fraction. We will discuss these two factors below. 

Thus, if the web pages are shifted to the right during their rendering time, it would negatively affect your CLS score, and the website would not be able to pass the core web vitals assessment. It would also affect the overall PageSpeed score. 

How To Measure Layout Shift?

Before diving into the direct solution, let’s see how you can measure the layout shift of a website. You can easily measure the layout shifting by measuring two factors:

• Impact fraction

The impact fraction determines how much the visible area between the two frames is affected by a website’s unstable content, such as buttons, links, or other elements, during loading time. 

Impact fraction = the area of the layout shift / total viewport area. For more details, visit the CLS blog. 

• Distance fraction 

Distance fraction determines the distance that an unstable element shifts in the above-the-fold area during the page loading time. 

Distance fraction = the visible area an unstable element vertically or horizontally moves /  the total visible area. For more details, visit the CLS blog. 

Note:  Layout shifts =  impact fraction * distance fraction

Does Layout Shift Affect Your User Experience? 

A layout shift can be one of the causes of a user’s dissatisfaction. It leads a user to click the wrong link or button or accidentally open a Google ad. Thus, the bounce rate would be high for the website.

As the bounce rate is negatively correlated with the conversion rate, the conversion rate would be negatively affected by this layout shifting. Therefore, to enhance your user experience along with the conversion rate, you need to fix the layout shifting problem. 

How To Mitigate This Layout-Shifting Problem

By mitigating this layout shifting issue, you can typically improve your CLS score along with the overall PageSpeed score and the user experience. If you are looking for a solution to avoid the technicalities, you can skip this part and install RabbitLoader to fix this issue. 

Those who love to explore the technical aspect can follow the below strategies to fix the layout shifting problem.  

• Specify The Height And Width Of The Images

Modern browsers are able to set the height and width of the image. This may harm your CLS performance. Rather than letting the browser do this, you need to specify the height and width of your media file to prevent the layout shitting issue.  

• Optimize The Web Fonts 

If you are involved in web development, you are quite familiar with the term “font optimization”. You can easily optimize your fonts by preloading them. To implement a preloading font you can add the <tag> in the head section of your HTML file. This can help you to fix your layout-shifting problem. For more knowledge, visit our link preload blog.   

Also, you also can use web-safe fonts to improve your website’s visual stability. 

Fix your “WebPages Shifted To The Right” problem with RabbitLoader 

As you see, manually fixing this layout-shifting problem can involve a lot of technical effort which can be a little bit difficult for those who are not technically sound enough. 

Here RabbitLoader can solve this shifting layout problem without any coding. 

When you install RabbitLoader, it looks after your website’s visual stability, resulting in a good CLS score. Let’s see with an example. 

A leading website, jnmwebcreations.com was struggling with its poor Google PageSpeed Insights score. In order to achieve a good PageSpeed score, the website installed RabbitLoader for web optimization purposes. 

RabbitLoader boosts the CLS score along with the other performance metrics. It reduced the web page’s impact and distance fraction and increased the score from 0.287 to 0.001 for the mobile version and from 0.367 to 0.003, overall PageSpeed score improvement. 

Your web pages are shifted to the right or left, install RabbitLoader and see how it can mitigate your webpage’s PageSpeed-related issues and boost your PageSpeed performance.    

What Is The Largest Contentful Paint And How To Optimize to Pass the Core Web Vitals. 

The Largest Contentful Paint (LCP) is one of the 3 pillars of the Core Web Vitals. It can be optimized in two ways: either by implementing optimization techniques such as image, CSS, and JavaScript optimization, or using an all in one  performance optimization plugin  like RabbitLoader.

Prioritizing the user experience, Google have added the Largest Contentful Paint to measure a webpage’s initial loading time, Cumulative Layout Shifts (CLS) to quantify the page’s stability, and Interaction to Next Paint (INP) to analyze the website’s interactivity with users. 

Here we will explain the Largest Contentful Paint (LCP) in detail and how to optimize this to improve PageSpeed performance & pass the Core Web Vital test.   

What Is The Largest Contentful Paint (LCP)?

The Largest Contentful Paint (LCP) analyzes the time it takes to display the largest content of your website in the user’s browser. 

This performance metric is used to analyze a page’s initial loading time. A hero image, text blocks (such as headlines, and paragraphs), and video thumbnails can be considered as the largest contentful element.

A good LCP time can help you achieve a desirable PageSpeed scores, lower bounce rate, and higher Google rankings. 

What Is Considered An Ideal Largest Contentful Paint (LCP) Time?

If you want to be in a green zone in the PageSpeed insight test, your LCP time needs to be less than 2.5 seconds. An LCP score between 2.5 seconds and 4.0 seconds is considered moderate performance, and Google always suggests improving it.

If a user needs to wait more than 4.0 seconds, it’s categorized as a poor LCP performance.  

The Difference Between LCP And FCP

Although Largest Contentful Paint (LCP) and First Contentful Paint (FCP) both analyze the initial loading time of a web page, there are some differences in their functionality. 

Where the Largest Contentful Paint (LCP) is used to measure the span of time it takes to render the largest elements (a hero image or text blocks) of a web page, the First Contentful Paint (FCP) calculates the time it takes to display a non-white canvas. 

The Reason Behind A Poor LCP Score

Several factors can affect the Largest Contentful paint (LCP). Let’s mention the most common reasons behind poor LCP performance.

How To Optimize LCP Performance? 

To improve your PageSpeed performance, you need to optimize the Largest Contentful Paint (LCP) performance along with the other core web vital metrics. Let’s dive into the most effective optimization strategies to improve the LCP performance.  

Reduce The Initial Server Response Time

Using a browser and CDN caching mechanism can significantly reduce the initial server loading time by temporarily storing static resources like stylesheets, scripting and HTML files, and images in the browser cache and proxy server.     

Manually increasing a caching mechanism requires too much effort, especially if you are not from a technical background. However, using RabbitLoader, you can easily implement a browser caching mechanism on your website in a few minutes. 

On the other hand, when you use RabbitLoader, you don’t need to invest money for CDN. RabbitLoader reduces network latency through its in-built content delivery network, which has 300+ edge/proxy servers. 

Serve The Images In Next-Gen Format

Though a high-resolution image can make a website more appealing, it can also negatively affect its PageSpeed performance by increasing the page file size. Converting the images into next-gen formats such as WebP and AVIF can improve the website’s loading performance.

Manually converting images into next-gen formats one by one requires a lot of time and effort, especially when you have a large website or any e-commerce website. 

When you are using RabbitLoader, it converts your images into next-gen formats through its bulk image optimization feature. For more details, please read our Next-Gen Formats blog.

Add Lazy Loading

To defer the offscreen images, you need to implement lazy loading to them. By implementing lazy loading (known as on-demanding loading), you can instruct the browser to load only the images required for rendering the viewport instead of all the images when the webpage is loading for the first time. 

The remaining images will load when they are required, improving the LCP time.   

When optimizing your website’s PageSpeed performance with RabbitLoader, you don’t need to implement lazy loading separately. RabbitLoader implements the Lazy loading for below the fold images automatically & improves your LCP score. 

Optimize the CSS & JavaScript files

CSS, JavaScript, and HTML files are fundamental resources for your website. However, unoptimized CSS and JavaScript files can block the main thread and have a negative impact on the LCP of your website.

RabbitLoader optimizes the CSS & javascripts by reducing unused CSS and JavaScript, minifying the codes, and, most importantly, generating a separate critical CSS file that is unavoidable for achieving a good PageSpeed score, where most optimization tools lags behind.

Optimize LCP Performance With RabbitLoader 

As you can see, optimizing LCP performance can be challenging, especially when you have a large website or a non-technical background. However, RabbitLoader makes it very easy. With a few clicks, you can optimize your website’s LCP & other Core Web Vital  metrics.

Install RabbitLoader to optimize your website’s PageSpeed performance and provide your user with a fast-loading website. 

Minimize Main Thread Work: 5 Effective Ways To Fix The Google PageSpeed Insight Warning

“Minimize main thread work” is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.

But what does minimizing main thread work mean? And more importantly how to mitigate the “minimize main thread work” warning?

Web developers can implement various strategies to minimize main thread work, such as optimizing their critical rendering path with CSS stylesheets and JavaScript optimization.

Alternatively, this could also be achieved by adding a link rel= preload tag to the critical resources in your HTML file and implementing the lazy load technique to above-the-fold content to minimize main thread work and boost the Core Web Vitals performance.

But these techniques might look very daunting to a non-coder. Hence, we will see how the no-code solutions RabbitLoader can help you solve the issue if you are not a developer and five other ways you can do it if you are ready to get your hands dirty. 

What Is The Main Thread Work?

When you (the visitor) try to open a webpage on your browser, let’s say it’s the home page of  RabbitLoader.com the browser has to convert the codes in the page to create an image of the webpage in front of you.

To achieve the goal of showing you a beautiful webpage, the browser has to complete a list of tasks, such as parsing the CSS and Javascript files.

Now, some of these tasks are crucial, and some are not crucial. This logical list of crucial tasks can be regarded as the main thread. 

How to Minimize the Main Thread Work?

Google PSI instructions are loud and clear. To make the website load faster, you need to minimize the main thread’s work. In other words, you need to check the list of tasks your browser needs to do to show your website, find the non-crucial tasks, and redirect them from the main thread to the other thread known as the web worker.

This would make your list of crucial tasks on the main thread shorter.

Why Do We Need To Minimize Main Thread Work?

If the main thread is filled with non-critical tasks, that affects the parsing or execution of crucial tasks, which would negatively affect your website’s performance, exposing your users to a slow-loading website and less-than-ideal user experience. 

Minimizing the main thread work can significantly improve your page loading time, which in turn would boost your Google PageSpeed Insights score and Core Web Vitals performance.

But how do you do that? Do you need to hire a developer for that? Or can you do it yourself?

The answer is both, but here we would see how you can minimize the main thread work by using the RabbitLoader Plugin without any coding or expert skills.

5 Effective Ways RabbitLoader Minimizes the Main Thread Work.

Let’s explore the most effective ways to RabbitLoader minimize main thread work to help you achieve a higher pagespeed score & pass the core web vitals test.

• CSS optimization
• JavaScript Optimization
• Implement lazy loading for below-the-fold content
• Add link-preload for critical resources
• Deferring the third-party scripts

CSS Optimization

CSS is one of your website’s core resources. It is used to make your website stylish, and without CSS, your website may look dull. However, an unoptimized CSS can block the main thread and harm your website’s performance. Let’s see how to mitigate this issue.

• Minify CSS Stylesheet

While most web developers add line breaks and unnecessary comments in the CSS stylesheets to make the code more readable, the browser considers these as unnecessary characters in order to render the web page. 

Deleting these unnecessary characters from your CSS code can reduce the file size and improve the total blocking time, automatically improving your website’s page speed.

Manually deleting unnecessary characters from CSS files can be time-consuming. To save time, you must use an optimization tool like RabbitLoader to minify CSS stylesheets. For more details, visit our minifying resources blog.

• Remove the Unused CSS

You often find some CSS rules in your stylesheets which are not required for your website’s design. This type of CSS rule is known as unused CSS and it unnecessarily blocks the main thread task. 

So, Removing Unused CSS can reduce the render-blocking resources by minimizing the main thread work, and improving the performance of core web vital metrics.

Manually removing unused CSS needs a lot of coding knowledge. If you are not from a technical background, install RabbitLoader. 

• Generate Critical CSS 

Generating critical CSS is one of the essential techniques to optimize the website’s page speed performance. By generating critical CSS, you can significantly minimize the main thread task.

While most of the optimization tools are unable to create a separate file for critical CSS, RabbitLoader generates a separate file for critical CSS and reduces the main thread work.  

JavaScript Optimization

JavaScript is mostly known as a render-blocking resource. It increases your website’s total blocking time by increasing the main thread task. By optimizing JavaScript, you can significantly improve the website’s load time by reducing the main thread work.

The best way to optimize JavaScript is to defer the non-critical function. Implementing multi-threading, Code splitting and minification are also effective techniques used by RabbutLoader to optimize JavaScript and reduce the main thread. For more detailson how RabbitLoader does it, you can visit our previous blog speed index.

Implement Lazy Loading for Below-the-Fold Content

Implementing lazy loading can improve a website’s page speed by minimizing the main thread work for the initial loading. 

It allows the browser to prioritise loading images & other resources based on their position on the page, instead of loading the right away. 

RabbitLoader, does this effectively not only for the desktop, but also for the mobile version of the pages on your website allowing your users a smother user experience & you a better pagespeed score. 

Add Link-Preload for Critical Resources

Adding link pre-load in the HTML <head> for critical resources or via an HTTP header in an HTML file is another optimization technique to minimize the main thread. This method is extensively used to preload fonts to solve the text flashing issue popularly known as FOUT..

Deferring Third-Party Scripts

Third-party scripts might be necessary for the convenience they offer but they also bloat up your website & make them slow. Since they are using javascript which is very resource intensive.

During the initial page loading time, these coding files execute and block the main thread, increasing the total blocking time. 

To minimize your main thread work, you need to defer them and avoid them from executing right on load, RabbitLoader does this effectively. 

A word of caution here, if you are using any third party script that is critical your website, you might have to avoid from deferring it, as this might cause the visitor to see a non-functional website initially, or if you are using a user tracking service you might lose the tracking data for few initial seconds. 

Hence it is about a balance between speed & functionality when dealing with third party scripts.

Conclusion

We have exploited the 5 ways RabbitLoader minimizes the main thread work. If you are looking for a non-coding for your wordpress, Woo-Commerce, Php or laravel websites RabbitLoader is the answer to your woes, try it now.

FAQ:

How to minimize the main thread work on the WordPress website?

To minimize the main thread work on the WordPress website, you need to use a WordPress plugin like RabbitLoader. Not only WordPress, but you also use RabbitLoader to minimize main-thread work in shopify.

Minify PHP: Should you do it? The Helpful Tools For it? 

You can easily minify PHP, but is there any point in doing this to optimize your website’s PageSpeed performance?

Minifying PHP can’t improve the PageSpeed performance of your website, however, it can typically increase the code security. When you are minifying or uglifying the PHP code, no one can steal your idea. 

Here, we will cover everything about PHP minification, including its definition, helpful tools to minify PHP and best practices. Let’s see RabbitLoader’s contribution to this. 

What Is Minification?

Before diving into PHP minification, first, you need to understand what minification is and how it works. 

Minification is a technical method for removing unnecessary characters, white spaces, line breaks, and comments from a code without changing its functionality. The ultimate goal of applying the minification method is to reduce the coding file size, automatically reducing the total page file size. 

The coding files that can be minified:

HTML minification:

Let’s understand with an HTML code example. In the code below, you can see that many unnecessary comments, white spaces, and line breaks are used to increase the code’s readability.  However, this affects the PageSpeed performance by increasing the total page size.  

Syntax 

<html lang="en-US">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <!--adding a title for minifying HTML-->

    <title>My minified files </title>

  </head>

  <body>

      <!--adding an image file in HTML file-->

    <img src="minify html.png" alt="My test image" />

  </body>

</html>

After minifying the HTML file, the minified HTML files will look like the below:

<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>My minified files</title></head><body><img src="minify html.png" alt="My test image"></body></html>

CSS Minification: 

Let’s see how it works for CSS files with an example. without minification, The CSS code looks like the below:

Syntax:

body {

  background-color: red;

}

h1 {

  color: lightblue;

  text-align: left;

}

p {

  font-family: verdana;

  font-size: 10px;

}

After minification:

body{background-color:red}h1{color:#add8e6;text-align:left}p{font-family:verdana;font-size:10px}

Explaining PHP Minification With An Example

PHP is an open-source server-side scripting language used in web development to create dynamic web pages. PHP minification involves deleting unnecessary comments, link breaks, and white space from the PHP code that are added by a developer to make the code readable. This would reduce the PHP file size. 

For example: before minification, the code looks like the below. 

// Function used for assigning new 

// value to $string variable and  

// printing it 

function print_string( $string ) { 

    $string = "Example for PHP code"."\n"; 

    // Print $string variable 

    print($string); 

} 

// Driver code 

$string = "PHP minification"."\n"; 

print_string($string); 

print($string); 

?>

After applying the minification method the PHP code looks:

<?php function print_string($string){$string="Example for PHP code"."\\n";print($string);}$string="PHP minification"."\\n";print_string($string);print($string); ?> 

The Helpful Tools To Minify PHP

Manually minifying PHP can be daunting especially when you have a large size of the website. The best practice is to use an online tool to minify your PHP code. Several minification tools are available to minify your PHP code. Let’s talk about the most popular PHP minification tools.

• PHP Beautifier

PHP Beautifier is an online tool designed to minify the PHP file and reduce its total size. To use it, paste your PHP code and click on Beautify. It needs some time to process and then send you the minified PHP code. 

• PHP Minifier/ compressor 

PHP minifier/ compressor is an alternative online tool for PHP minification. It will remove white spaces and comments from your PHP code and reduce the file size. To do so, paste the PHP code into the PHP minifier/ compressor and click on the Minify button. 

How to Minify PHP Manually

When you are minifying the PHP file manually, there are some factors you need to keep in mind to prevent the error. 

• Before starting to minify your PHP, you must take a backup of your original code.
• When the code is in the development process, don’t try to minimize this.
• When you are minifying PHP by any automated tool, make sure the tool is updated.
  
  

PHP Minification With RabbitLoader                                       

When it comes to web optimization, it requires many strategies that require technical knowledge. Total page size reduction is one of the most effective web optimization techniques for improving your website’s PageSpeed.

When manual techniques are daunting for you, RabbitLoader makes your job easier. When you use RabbitLoader on your website, it will automatically reduce the total page size by minifying your HTML, CSS, and JavaScript file size, improving the PageSpeed performance of your website.

Therefore, if you are serious about improving your PageSpeed performance, don’t waste your time installing different optimization plugins when RabbitLoader is available for WordPress, Shopify, PHP, and Laravel-based websites.    

How To Optimize Resource Loading To Increase Your Conversion Rate By 10% 

Have you ever tried to improve your conversion rate by optimizing your website’s resource loading? Although it’s not the first thing that comes to mind when you think of conversion rate optimization, optimizing resource loading can significantly impact the conversion rate. 

To improve resource loading, you must optimize your image, HTML, CSS, and JavaScript files. This can impact not only your conversion rate but also your SEO rankings.   

What Is Resource Loading?

Resource loading is the process of parsing and downloading resources to a user’s browser from the hosting server. A website may load resources such as scripts, stylesheets, images, and HTML files. The webpage is subsequently rendered for the user using these resources.

Let’s understand in a simple way. When a user requests your web page’s content, the browser sends an HTTP request to the hosting server, which sends back the HTML file along with the other website’s resources. 

The browser loads and parses the resources. Once the resources are downloaded, the browser can display your web page to the end user. 

The Importance of Optimizing Resource Loading

Before diving into the direct solution, the first thing that may come to your mind that why we need to optimize your resource loading. Here we will discuss the significance of optimizing the resource loading on your website which includes:

Boost Your PageSpeed and Enhance the User Experience

According to the Queue.it website, “Stress levels increase by 33% when content takes more than 6 seconds to load, the equivalent of a math test or watching a horror movie”. Web optimization is the only way to mitigate this problem, enhancing your user experience.

Users would engage in your fast-loading website, increasing the average on-page time by reducing the bounce rate. 

Increase the Conversion Rate

Conversion rate refers to the percentage of visitors who complete the desired action, such as making an online payment, submitting an online form, purchasing from an e-commerce platform, or taking another action, and converting to potential leads. 

The conversion rate is negatively correlated with the bounce rate. That means if the bounce rate decreases, the conversion rate will automatically increase. Below we will show you 3 case studies of increasing the conversion rate by improving the loading time.  

Improve the SEO rankings

Page speed is an important factor in the Google ranking algorithm. Google always prioritizes a fast-loading website. Thus, in order to increase organic traffic, you need to improve your website’s PageSpeed performance by optimizing the resource loading.  

3 case studies on the impact of Optimizing Resource Loading on increasing the Conversion Rate

As per the case study here, we listed 3 cases that show you the improvement of conversion rate or sales just by increasing the page loading time.

1. Vodafone:

Vodafone is the most popular company, facing a problem with the slow initial loading time and it affects the user experience. Therefore, by increasing the loading time by 31%, Vodafone increases the conversion rate by 5%.  

2. Renault:

Renault is a French multinational automobile company. To improve the core web vitals performance, Renault optimized the PageSpeed performance. Consequently, this website’s conversion rate increased by 13%.

3. Carpe:

Carpe is popular for selling skincare products. Shopify collaborated with Carpe to optimize website performance. By increasing the loading time by 52%, they were able to increase the conversion rate by 5 % and revenue by 15%.

How To Optimize The Resource Loading Using RabbitLoader?

At this point, you are quite knowledgeable about the importance of optimizing the resource loading. But how to optimize the resource loading?

Before you start to panic, we will delve into the most effective optimization technique for optimizing resource loading to boost the conversion rate.  

First, you need to understand the website resources that can be optimized.

Type of resources

Every website has a set of fundamental resources that the browser needs to load to render the web pages which include:

• Image files
• HTML files
• CSS stylesheets
• JavaScript files.

How to Optimize the Image?

Images are the most crucial resource for a website as they make it more attractive. Adding a lot of images is beneficial especially when you have an e-commerce site . However, high-resolution images can affect your initial loading time.  

To mitigate this issue, you need to optimize your image file by implementing the below strategies.

Compress Image Files

JPEG and PNG images can increase the size of your image file. Converting them into a next-gen format, such as modern WebP and AVIF, can decrease the size of the image file without reducing its original quality. This process is known as lossless compression.

RabbitLoader converts all images into WebP and AVIF format with it’s inbuilt bulk image optimization feature. So, by using RabbitLoader, you can losslessly compress your images and optimize the resource loading.

Add Lazy Loading For Above-The-Fold Images

Above-the-fold images refer to the images you can see during the initial loading time. By adding lazy loading to the website, you tell the browser to load only the images that are available above the fold, and the remaining images will load later.

RabbitLoader adds a lazy load to improve the loading time especially the performance of the First Contentful Paint (FCP). 

Add Link Pre-Load For LCP Image

The Largest Contentful Paint (LCP) image is known as the hero image. When you apply lazy loading for above-the-fold images, it loads all images available above the fold. To speed up your website, you need to add a link pre-load for the hero image.

Assume you have a total of 5 images on your webpage of which 3 are the above-the-fold images. Among these 3 images, 1 must be the hero image. By adding a link pre-load in the hero images, you can improve the LCP time.

When you are using RabbitLoader for the above two optimization techniques, you don’t need to add pre-load manually. RabbitLoader will take care of this.

How To Optimize The HTML File?

HTML code creates your website’s content. The browser first parses and loads this HTML file, so HTML file optimization is essential to increase the loading time. To do so, you need to minify and compress the HTML code.

• HTML Minification

To make the HTML code more readable, many developers use line breaks, comments, and meaningful variable names. These unnecessary characters make the HTML file larger.

By minifying the HTML file, you can significantly improve the initial server response time. When you are optimizing your page speed performance with RabbitLoader, it will minify your HTML file.

Note: To improve the loading time, RabbitLoader will minify the CSS and JavaScript files as well. 

• Compress The HTML File

By compressing the HTML file, you can optimize your website’s resource loading time. Compression of HTML files reduces code redundancy by replacing the same string with the pointer. 

RabbitLoader has its own GZIP compressor, which reduces the HTML file size and improves page speed performance.

How To Optimize CSS Files?

Without CSS stylesheets, your website may look messy. CSS stylesheets make your webpage more presentable. When you are optimizing your resource files, you can’t ignore CSS files. Let’s see the technique for optimizing your webpage’s resources.

• Generate Critical CSS

RabbitLoader successfully generates a critical CSS file for your above-the-fold content and improves the initial server response time. Learn more. 

• Remove Unused CSS

If you frequently audit your website’s page speed, you are quite familiar with this warning: Remove unused CSS. Unused CSS refers to styles or rules that are not utilized on the website but are present in the CSS file and increase its size.

By removing these unused CSS styles or rules, you can reduce the CSS file size and improve the core web vitals performance especially in LCP, and FCP.

How To Optimize Javascript Files?

Many developers use script languages, mostly JavaScript, to make their websites interactive. These JavaScript files are often known as render-blocking resources because they block the main thread and increase the Total Blocking Time.

• Defer JavaScript File

The only way to mitigate this issue is by deferring the JavaScript files that are not required for the initial loading, such as alert messages. When you use RabbiLoader to optimize the other resource loading, it will defer your JavaScript file as well.

Conclusion

Optimizing your resource loading can dramatically increase your user experience and conversion rate. If your conversion rate is low, install RabbitLoader and see how RabbitLoader can speed up your website and help[ you achieve a desirable conversion rate.  

What Is First Contentful Paint And How To Optimize It To Pass Core Web Vitals?

Google released First Contentful Paint (FCP) to assess a web page’s initial loading time. To improve your website’s FCP performance, you can either implement optimization strategies like using browser & CDN caching, reducing the HTML, CSS, and JavaScript file size, and removing the unused CSS, or you can install the RabbitLoader performance optimization tool on your website if you are looking for an effortless solution.

Although First Contentful Paint is not a core web vitals metric, if you need to improve your user experience and pass the Core Web Vitals, you can’t neglect FCP. 

Let’s discuss what you need to know about FCP and explore helpful strategies for optimizing it to pass the Core Web Vitals and boost your Google PageSpeed Insights score of your website. 

What Is the First Contentful Paint?

First Contentful Paint quantifies the time from when a user visits a web page to when the web page’s first content is displayed on the browser. This content can include any images (including the logo and background images), text, any <svg> elements, or non-white canvas.

FCP is a crucial metric for your user experience & PageSpeed score. When visiting a web page for the first time, if users spot a blank page, they might get confused about whether the website is loading or not. They will likely leave the page or frantically try to reload it.

Difference Between LCP & FCP

As a competent web developer or website owner, it’s essential to understand how the First Contentful Paint (FCP) differs from the Largest Contentful Paint (LCP).    

Where First Contentful Paint is used to measure the time it requires to display a web page’s first piece of content, Largest Contentful Paint calculates the time it takes to display the largest element of a web page. This largest element can be a hero image or a text block. 

What Is A Good FCP Time?

According to Google, a website’s FCP time needs to be less than 1.8 seconds to pass the core web vitals assessment. If the FCP score is between 1.8 seconds and 3.0 seconds, Google PageSpeed Insights suggests improving the FCP performance to provide a better user experience.

Finally, if the FCP time exceeds 3.0 seconds, your website fails the core web vitals test. To be in a green zone, you need to optimize your FCP time to pass the PageSpeed test.   

The Importance Of Optimizing FCP

Before diving into the solution, let’s explore the importance of optimizing FCP performance. 

• Lower Bounce Rate = Better User Experience

By optimizing your website’s FCP performance, you can significantly increase your user experience. Since FCP makes the first impression on your website, users would be more likely to engage with a well-functioning website. Which results in a lower bounce rate. 

• Improve The Conversion Rate

The conversion rate determines the percentage of visitors who can successfully finish an action on your website and become a lead or a buyer.  A lower bounce rate is much more likely to increase your conversion rate by engaging the visitors with the website’s content.  

• Better Organic Rankings

Google always prioritizes the user experience. Therefore, optimizing your FCP time can significantly improve your PageSpeed score which is a strong positive signal for your Google organic rankings.

The Most Common Reasons For Poor FCP Performance 

While several factors can negatively impact the First Contentful Paint (FCP). Let’s focus on the most common reasons for poor FCP performance.   

How To Optimize Your Website’s FCP?

Let’s explore the optimization techniques to mitigate each of the above mentioned issues that are impacting the FCP to improve the First Contentful Paint time of your website. 

Use Browser & CDN Caching

Using a browser and CDN caching mechanism can significantly reduce the initial server response time and improve the Time to First Byte (TTFB) performance. 

However, adding a browser cache is not enough for web optimization; you need to set efficient caching policies to provide a better user experience and to make sure you are not serving stale content to your visitors.

Manually implementing the browser cache with an efficient caching policy requires extensive technical knowledge. Read our server static assets with an efficient cache policy blog if you wish to explore more on how to do it yourself.  

If you do not wish to go into the nitty gritty of it & just need the issue to be solved, you can install a performance optimization tool like RabbitLoader to implement the browser cache with an efficient caching policy. 

RabbitLoader also distributes the cacheable content between 300+ edge servers worldwide to reduce the latency.

Reduce The HTML, CSS, And JavaScript File Size

When it comes to FCP optimization, reducing HTML, CSS, and JavaScript file size is one of the most effective strategies to improve the FCP time. There are two ways to reduce these resources’ file size: minification & compression. 

While minification removes unnecessary comments, line breaks, and white space from the resource files, by compressing the method, you can reduce the redundancy of the string variable in the HTML, CSS, and JavaScript files. 

When you use RabbitLoader, you don’t need to put any extra effort into the minification and compression process, RabbitLoader takes care of it.

Reduce unused CSS

The term Unused CSS indicates CSS rules that are not utilized in the current web page design but consume space in your CSS stylesheets. This unused CSS would unnecessarily increase your website’s page size.

By removing this unused CSS, you can improve the core web vitals performance, especially the FCP and LCP performance. If you want to remove the unused CSS manually without having proper coding knowledge, it can be risky. One mistake can harm the whole web page’s design.

Therefore, using RabbitLoader would be the safest option if you are not versed in CSS  

Optimize Your First Contentful Paint With RabbitLoader

Web optimization requires a lot of effort and technical knowledge. Thus, many web developers end up using a lot of different WordPress plugins to improve PageSpeed performance. However, using ten different plugins usually harms PageSpeed performance as these plugins conflict with each other.

When you use RabbitLoader, it will implement all the optimization techniques needed to pass the core web vitals and improve your PageSpeed score. Therefore, you don’t need to use other performance optimization plugins, avoiding plugin conflicts and improving PageSpeed performance. 

If you want to seriously improve your website’s PageSpeed performance to provide a seamless user experience, you must install RabbitLoader to improve the First Contentful Paint performance along with the other performance metrics and boost your PageSpeed performance.