Can somebody helps me with some advice to improve my web performance

Topic summary

A developer seeks help improving their e-commerce store’s web performance, specifically addressing a Largest Contentful Paint (LCP) of 2800ms that hasn’t improved despite trying image compression and lazy loading.

Key Technical Recommendations:

  • Image Optimization: Preload the hero/banner image with loading="eager" and fetchpriority="high", remove lazy loading from LCP images, resize to exact display dimensions, and convert to WebP format
  • Script Management: Defer or async non-critical third-party scripts (analytics, chat widgets), lazy-load chat widgets, and load scripts after initial page render
  • CSS Optimization: Inline critical above-the-fold CSS, defer non-critical stylesheets, preload web fonts with font-display: swap
  • Layout Stability: Set explicit height/width attributes on images and containers to prevent Cumulative Layout Shift (CLS)

Additional Issues Identified:

Multiple users noted excessive widgets (spinning wheels, fake reviews, autoplay videos, countdown timers) significantly impact performance. The developer acknowledged limited control over content decisions but will escalate to management.

Status: Discussion remains open with actionable technical solutions provided. Developer expressed gratitude and commitment to implementing suggestions. Performance testing screenshots show both LCP and Total Blocking Time (TBT) need attention.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.

Hi there, recently I’m struggling about improve my store’s web performance and the 75% of LCP is 2800ms. I tried some commended solutions like tinify and lazyload images, but it don’t seems to improve much. May some one help me please, I’ll be really appeaciated to any advice, thanks. My store is https://store.runmefit.com

Get rid of all the crazy stuff like spinning wheel pop up, scrolling fake reviews, autoplay videos, scrolling fake “as seen in” block, widgets that have video playing, fake countdown timer, etc. Get rid of all the fakery fluff and it should go down.

1 Like

Thanks for your advice, but I’m just a developer I can’t decide what to show on the website. I’ll show this to my boss though. Thanks again :slight_smile:

I would ditch lozad and focus on native lazy loading.
Also, I’d prioritize first banner image loading using preload parameter in Liquid filters: image_tag and lazy load the others.

1 Like

Hey!

I checked your site’s performance scores on PageSpeed Insights. The main issue is that your LCP is taking too long to load, especially on mobile. This usually happens when the main banner image or top content loads slowly because of unoptimized media or scripts. You can few things like:

Optimize your main images

Your homepage banner and product visuals are likely large files which slows things down.
Resize images to the exact size your theme displays for example, 1600px wide for banners
Converting them to WebP format reduces size without losing quality.
If your hero section is a slideshow try keeping just one image for faster loading.

Reduce render-blocking scripts

Some apps or scripts stop your page from showing until they finish loading.
Disable or remove apps you don’t use anymore — every extra app adds a bit of code that slows loading.
Ask your developer to defer or async non-critical scripts. This means the browser will show the page first, then load the rest quietly in the background.

Remove unused CSS and old theme files

Sometimes older themes or app remnants keep extra code that loads unnecessarily.
Go to Online Store > Themes > Edit Code and check if there are old .css or .js files that aren’t in use.
You can also switch to a Shopify Online Store 2.0 theme; they load cleaner and faster by design.

Fonts and design elements

Custom fonts and animations look great but can slow down LCP.
Use system fonts where possible.
If you must use a custom font, load only 1 or 2 styles (for example, regular and bold).
Avoid animations above the fold they delay the main image from appearing.

These small fixes together can easily improve your mobile speed and bring your LCP

If you prefer a simpler way to handle image compression, cache control, and script optimization automatically, you can try Website Speedy App it’s helps improve to performance without needing code changes

(Disclaimer: We’re affiliated with Website Speedy, a performance optimization tool. If you’d like, it can automate these improvements for you, but the free fixes above will also help)

1 Like
  1. Make sure the main hero or banner image loads eagerly (loading="eager") instead of lazy-loading.
  2. Resize images to exact display dimensions and compress using tools like TinyPNG or Shopify’s built-in image optimization.
  3. Ensure your theme is updated to the latest version for performance optimizations.
1 Like

Hi @keny55555 ,
Improve TBT Performance

  • Load third-party scripts after page load.
  • For scripts that are not essential for the initial render (analytics, chat widgets, marketing tags), add defer or async attributes.
  • Lazy-load chat widgets

Largest Contentful Paint (LCP)

  • LCP is delayed because hero images, banners, or large product images load late.
  • Preload LCP image
  • Add fetch-priority=“high” on the lcp img tag
  • reomve lazy load from lcp img tag

First Contentful Paint (FCP)

  • Inline critical CSS for above-the-fold elements (header, nav, hero section).
  • Defer or async non-critical CSS/JS files. Example:
<link rel="stylesheet" href="theme.css" media="print" onload="this.media='all'">
  • Preload key web fonts and use font-display: swap. Example:
<link rel="preload" as="font" type="font/woff2" href="{{ 'your-font.woff2' | asset_url }}" crossorigin>

Cumulative Layout Shift (CLS)

1 Like

wow thank you, thats truly helpful, I’ll working on it

Hi @keny55555

I notice you mentioned the LCP situation in the question and I made a speed test of your website on my laptop again, the final result is indeed not pleasing.

Apart from LCP data, you should pay more attention to TBT as well, as it is mostly related to the theme element including backend codes and store contents like pictures or layout. If you would like to further optimize on this aspect, image compression is very necessary. You can also click here to learn more about the suggestions if need external helps. Thank you!

Try to preload that image and reduce that image size.
If possible use JPG or WEBP image format.

1 Like

Hello @keny55555 ,

I hope you are well!

I think everyone just provided the right answer but you need to also load the script with async and use the non essential script with defer.

Also, the time taken by CSS is 350 MS which can be fixed by loading non critical CSS with defer
Example
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

Additonally, you need to lazy load the video with the syntax preload=“none”.

1 Like

Nonsense, your the domain expert assert yourself from being given a responsibility with inability to fix it.
Explain it as tests need to be ran to prove what is costing money in lost conversions.

a/b test turn the app off and on and monitor reports.
If app B decreases perf by 20 points, and 20 points in perf loses X conversions, does app B generate the revenue to justify that loss.

all the rest of the stuff can be utter voodoo if your not experienced in perf optimization.

1 Like