gtag js code causing lcp issues
Hii @meenak149 , I have examined your website using Google Page Insights, and below is the result for your core web vitals.
As you can see, your TBT is fine, but your other Core Web Vitals, like LCP, FCP, and speed index are concerning.
Images Load Delay
As per the analysis, your home banner image is causing LCP to go high.
Suggested Improvement
Image Compression
You already used WebP format and preloading for the home banner image. I would recommend compressing the image by using an online tool available in the market. This will make the image load faster.
Lazy Loading Other Elements
While your LCP image should load immediately, you can implement lazy loading for images that appear further down the page, but remember to apply this only for the images you do not need immediately at the start. This reduces the initial page load time by loading non-critical images only when the user scrolls near them.
Example -
<img src="{{ 'image.jpg' | asset_url }}" alt="Product Image" loading="lazy" />
Render Blocking Resources
Your Javascript and CSS are blocking the FCP of your website.
Suggested Improvement
First, for CSS that is essential for rendering the page (above-the-fold content), you can inline it directly in the <head> section of your HTML. This reduces the time the browser spends fetching external stylesheets.
Example -
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
</style>
Additionally, try to defer Non-Critical JavaScript; this will help to allow the page to display the content first and load the scripts later.
Example -
<script src="{{ 'your-script.js' | asset_url }}" defer></script>
If JavaScript is still causing the issues, i would recommend removing the js line of code from third-party resources.
