How can I improve my webpage's load time due to a heavy banner image?

How can I improve my webpage's load time due to a heavy banner image?

seoraketten
Tourist
6 0 1

Hello, I have this webshop: https://gel-fun.dk/ and I have ran it through the site speed analysis tools, and it seems that my banner picture is taking a lot of my loading time. I have tried reduce the size of my picture and deleted the "lazy-load" in theme.liquid (banner.liquid) nothing seems to help.. 

 

Does anyone know how I might can higher the speed of my site? 

Replies 8 (8)

oscprofessional
Shopify Partner
15938 2383 3092

Hello, @seoraketten 

I have checked your site in the Google Page insights tool. There is a low score on your website. It needs to be improved, especially on mobile devices.

As I can see your website is having very heavy load with Largest Content Paint and Total Blocking Time.

Below are some factors that might impact the speed of your online store, and how you can address them.
In order to Improve website speed we need to:
- Remove unnecessary code on a high priority basis.
- Compressed images or Defer off-screen images.
- Web Pages need to be reduce in size.
- Reduce JavaScript execution time
- Minimize main-thread work
- Beware of excessive liquid loops
- Decrease thumbnail image size
- Weigh the benefits of installing another app

oscprofessional_0-1709034492641.png

3rd Party App Code: 

oscprofessional_1-1709034817775.png

  • You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
  • 3rd party apps & codes which take time to load and their size. They decrease the speed.
  • Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
  • If you're removing an app, then consider removing the code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
  • Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.

We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it's quite complicated for non-technical people.

You need to work on the following points:

  • Pass core web vitals (important)
  • Reduce JS Payload.
  • Use Critical CSS.
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Apps
  • Preload Web Fonts. 
  •  Use a standard web font.

    Theme Upgrade:

    Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization.

     

    How to avoid showing invisible text:

     

    The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid Flash of Invisible Text in most modern browsers.

     

    If there is anything that needs to be clarified or included, please let us know.  We will surely help you. 

    Have a nice day!

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
seoraketten
Tourist
6 0 1

Thank you so much for such a descriptive analysis 🙂 - I am not really that familiar with high Tech code stuff. Is there anyone who offers help by payment for this?

Sagar_Panchal
Tourist
10 0 1

Yes, you can search on Google by Shopify speed optimization service. You can find many options there.

JohnE10
Shopify Partner
112 14 19

Hi,

 

I ran a quick PageSpeed Insights test on your site. The LCP is making it pretty slow. Let me know if you're still looking for help with this.

Cheers,

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

Sagar_Panchal
Tourist
10 0 1

@seoraketten

Have you tried WebP format for image?

seoraketten
Tourist
6 0 1
  • Yes 🙂 Can’t comprimize the image anymore lower. 
Mymy288
Shopify Partner
3 0 0

Hi @seoraketten , I can improve the speed score for you.

kazi
Shopify Partner
582 88 110

I have checked your store on google page speed https://pagespeed.web.dev/analysis/https-gel-fun-dk/5ad0yf0zx8?form_factor=mobile

 

Here some issues you can optimize

 

You have loading="lazy" on main banner which is lazyload , remove it

 

And....

 

 

Eliminate render-blocking resources  (inline resources)

Properly size images  (Provide correct size for mobile devices)

Reduce unused CSS

Reduce unused JavaScript

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd