Implement HTML, CSS, and Liquid instead of JS to reduce TBT for Better Performance.

There are some scenarios where HTML, CSS, and Liquid for Better Performance can be used instead of JS. Whenever possible, we will use HTML and CSS instead of JavaScript for design implementation to reduce blocking time (TBT).

• Use HTML, CSS, and Liquid  instead of JS
• Reduce JS payload and TBT related to JS

It will be helpful in what scenarios implementing HTML, CSS, and liquid instead of JS should be done and a UI developer should make sure to give this thought while implementing a design.

How to Improve Performance use HTML, CSS, and Liquid Instead of JS

Using Liquid, HTML, and CSS for layout and design is generally faster and more efficient than JavaScript.

There are many ways to make a web page interactive, including transitions, custom animations, and filters. these can be achieved by CSS and JS both. CSS makes it much faster and easier than JS if the design part is not affected by user interaction.

Here are some Examples

1. JS Mega Menu VS CSS Mega Menu: Mega Menu in shopify can be created with CSS animation instead of JS. If done we will be reducing JS payload and JS execution both these factors will have a positive impact on TBT.
2. Liquid, HTML, and CSS listings VS JSON and JS listings.
3. CSS carousels VS JS carousel. 
4. On scroll, we load the CSS transition applied to the announce bar.

What are the Benefits of using HTML, CSS, and Liquid Instead of JS?

1. Lower JS payload
2. Having a lower LCP and FCP
3. TBT is reduced through this process
4. Improved CLS

All these will result in Core Web Vitals improvement and a better page speed score.