.JSON loading slowly on mobile

Design help General
1

Hello Webflow Community!

I am close to launching my first Webflow website and am having an issue with the .json "Fruit bowl with light sweep" image created in AE, loading REALLY slow on mobile, no matter which browser. The site loads quickly first without the "Hero Fruit Bowl" image showing up and about 20 seconds later, the Fruit Bowl pops in. I have tried the site on a brand new iphone 16e and iphone 8+, and both show the same result.

I would really appreciate any insight that you could provide.

I would also like to ask others, if anyone is willing to try the site on their phone and report back how it's loading for you, that would be super helpful! 

Here is the live site URL: https://www.gospel-art.com/

Here is the read-only link:

Thank you all very much!
Cathy

2

Hi Cathy,

Slow loading hero images can significantly impact your site’s performance. Here’s how to optimize it:

Your hero image can be optimized using Webflow’s built-in WebP conversion tool, which can reduce file size while maintaining quality. You can access this at Webflow’s image conversion tool.

To further improve performance:

  • Monitor your image’s bandwidth usage in the site usage dashboard
  • Minimize the number of elements linked to your hero image
  • Simplify any animations or transitions on the image
  • Consider using a compressed thumbnail for mobile devices

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi @CathyMG :waving_hand:
25mb is a HUGE file size just for simple illustration:

image
image820Ă—1246 117 KB

For optimize the page load speed you may just use a static image with similar interaction effect instead Lottie..

4

Thank you Dmitrii for sharing your insight! I appreciate it! I’m not sure how I can get the “light sweep” effect without starting in AE? I will look into it.

Have a wonderful day,
Cathy

5

Hii @CathyMG , Your hero image is a concern that is significantly impacting the performance of your site. You need to optimize that so the site speed issues to be fixed.

WebP Image Format

Try to use next-gen format images ( WebP) for your hero image. It is considered best for use on websites. You can use WebP in image elements or as background images in Webflow, for example :

<img src="path-to-image.webp" alt="Your image description">

Animations

Try to reduce the unnecessary animations or transitions from the images. These animations take more rendering time as well, so keep it less as much as possible.Simple interactions can also give a good design for you rather than going for complexity.

Compression of Elements

Compressing images is one of the ways to solve image optimization issues. So you can use any online tool like TinyPNG or Squoosh.

Alternatively, if you are from a non-tech background and do not want to invest much time in optimization, I recommend trying Website Speedy- an optimization app that gives you an optimized site at its own by automatically compressing images and improving the overall performance score.

(Disclaimer: We are part of the developing team and are happy to assist you in every problem you face.)

6

Here is a DEMO and Read-only :relieved_face:

7

Thank you so much Dmitrii for taking the time to create the demo and for sharing the read-only file! Amazing to see that technique can be done in Webflow. I have a lot to learn about animations in this platform. I will study out the read-only and see if I can create the light sweep.
Any suggestions of a good Webflow masterclass?
Have a wonderful day!

1 Like
8

Here is a “Base” of animation course: Interactions & animations course - Webflow University Courses. And, regarding the masterclass, I would wait until Webflow releases a course on GSAP animation.

Also the similar effect may be done in AE (as you did), but just need to optimize the source image before you import/export from AE. Also the similar animation may be done with the Rive App..

So, there are many options)

9

:+1: All good to know! Thanks again Dmitrii! I am not familiar with GSAP, I will look into it. I have a lot to learn!

I appreciate all of your help on my learning journey! :grinning_face:

1 Like