- 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
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
- 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.
- Liquid, HTML, and CSS listings VS JSON and JS listings.
- CSS carousels VS JS carousel.
- 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?
- Lower JS payload
- Having a lower LCP and FCP
- TBT is reduced through this process
- Improved CLS
All these will result in Core Web Vitals improvement and a better page speed score.