Website page speed is very slow in mobile devices

Design help General
1

The website is being load very slowly on mobile devices. Especcialy the hero section is loading very slow. Please, give me some advices to increase the speed of the website.

Here is my site Read-Only: [LINK][1] Webflow - Robbit

Link to the website: https://robbituz.webflow.io/

2

Hi there,

Slow loading times in hero sections are often related to image optimization and resource management. Here’s how you can improve your site’s performance:

Your hero section’s loading speed can be improved by:

  • Using vector images where appropriate
  • Compressing raster images
  • Matching image display sizes to their natural dimensions
  • Minimizing external resource references (scripts, images)
  • Using interactions strategically

The site usage dashboard (https://help.webflow.com/hc/en-us/articles/33961410031507) can help you identify bandwidth-heavy assets. For image optimization, try our WebP conversion tool (https://university.webflow.com/lesson/webp-conversion-tool) in the Assets panel to compress your images while maintaining quality.

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

3

I did all suggestions, but no result. Any ways to handle this problem?

4

image
image1920×1249 130 KB

As see this screenshot, the lighthouse result is also good. But still the website is slow

5

https://robbituz.webflow.io/ website url

6

Check your network tab, over 600 downloads in the first 9 seconds, 25 MB.
Looks like you have a ton of custom fonts, videos, and maps loading with the page.

image
image1846×1310 265 KB

7

image
image2108×540 35.6 KB

as you see there is only used fonts uploaded in webflow. How to delete other unused fonts?

I have four youtube videos that will be shown only in modal.

I have also one google map in footer.

8

the youtube videos with only appear when button is pressed. Initially it has style display: none

9

image
My youtube videos are not custom code, I used webflow’s youtube component. Should I delete them to increase a speed?

10

image
image1166×198 44.8 KB

How to solve this problem? I used google maps in my website with webflow’s custom maps component

11

Thank you very much. I make some changes and there is an improvement. Please, can you answer to above written questions?

12

All I can say is the browser do doing a lot of work, pulling a lot of content. The things that stood out to me in my quick glance were the fonts, videos, and map, but there’s obviously a ton more than that.

The process of optimizing is to dig into that and refine. Remove anything you don’t need. Setup lazy loading techniques for things you don’t need yet, optimize assets you do need, etc.

It’s a big cleanup project, with a bunch of R&D on optimization techniques.

There’s something happening to delay the initial viewable page; could be the fonts & css load time, or it could be interactions or a loading screen.

My guess is YouTubes should not interfere there, as they’re IFRAMEd content which shouldn’t interfere with the rest of the page load. But if you want to make the page more efficient I’d design some lazy loading there, to prevent the IFRAME itself from loading until the modal is invoked ( or at least after everything else crucial has downloaded, to optimize how your bandwidth is used on phones ).

I’d temporarily replace the map with a static map image; it will account for a lot of the files and that will help you debug.

13

Hello @AbdulvohidS , thanks for sharing your website . After reviewing your website on Google Page Insights, It seems like you’re facing slow mobile performance , especially with the hero section taking a long time to load. As per the report FCP and TBT scores are high .

These are the key areas we can target to improve your website’s mobile speed:

Reduce JavaScript Execution Time

  • Break up long-running JavaScript tasks into smaller chunks and use requestIdleCallback or setTimeout to execute non-urgent scripts during idle periods when the browser isn’t busy rendering the page.
    window.addEventListener(‘load’, function () {
    requestIdleCallback(() => {
    // Run non-critical scripts after the page load
    });
    });

Optimize Critical CSS and Inline Critical Styles

  • Inline critical CSS to prioritize the rendering of above-the-fold content. This reduces the amount of CSS the browser needs to fetch and render for the initial paint.
  • You can extract critical CSS from your page (for elements that appear above the fold) and embed them directly into the of your document.
<style>
  /* Inline critical CSS for above-the-fold elements */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .hero {
    /* styles for the hero section */
  }
</style>

Optimize Hero Section Image
A significant contributor to LCP is often images, especially large hero images. Below are unique solutions to optimize images and improve LCP on your Webflow website:

  • Compress the hero image and consider using WebP format, which provides high-quality images at smaller file sizes.
  • Use responsive images in Webflow, which automatically serves the most appropriate image size based on the device’s screen size.
  • Preload critical assets like the hero image so that it is prioritized for loading.
    <link rel="preload" href="your-hero-image.webp" as="image">

Alternatively,If you’re looking for an automatic solution to improve your site’s performance, consider using Website Speedy app—a Webflow app that automates FCP, LCP and other Core Web Vitals optimization to improve the site’s performance score or speed.

(Disclaimer: We are the developers of this app and happy to answer any questions.)