Slow Page speed mobile

Design help General
1

I am having trouble with my website page speed performance on mobile, anyone know how to solve it?

image
image1002×560 42.7 KB

https://preview.webflow.com/preview/praxanalytics?utm_medium=preview_link&utm_source=designer&utm_content=praxanalytics&preview=d5e752954081202b9278861b54c7fd68&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Gabriel,

Your screenshot breaks down some of the challenges but one of your biggest ones is that you appear to have used a gif: https://uploads-ssl.webflow.com/6345b50f0d68ce59ff980639/64a6f9d777ab220d03367678_semanal.gif

There are other ways you could illustrate the same thing - such as a scrolling image masked behind a laptop.

You also have a sizeable number of resources, like Google fonts and tracking tags loading. Perhaps consider if you really need all of them?

:slight_smile: Hope that helps.

3

Hey , @Gabriel_Tannhauser

When mobile pages load slowly, it often impacts both perceived speed and user engagement. Most of the time, optimizing images, scripts, and critical content delivery can significantly improve performance.

1. Minimize Main Thread Work

A large amount of JavaScript is being parsed and executed on load.

  • Remove unused integrations and scripts.

2. Reduce JavaScript Execution Time

Heavy or multiple JS files are blocking rendering.

Use defer so scripts execute after HTML parsing, preventing them from blocking initial paint.

3. Reduce Impact of Third-Party Code

Third-party tools are significantly blocking the main thread.

  • Load third-party scripts with defer or async.

  • Delay non-essential scripts until user interaction.

4. Ensure Text Remains Visible During Webfont Load

Add this inside (Project Settings ⇒ Custom Code):

If self-hosting fonts, use:
@font-face {

font-family: ‘YourFont’;

src: url(‘/fonts/yourfont.woff2’) format(‘woff2’);

font-display: swap;

}

5. Add Explicit Width and Height to Images

  • Resize images to actual display size.

  • Use WebP or AVIF formats.

  • Avoid oversized hero/background images.

7. Use Lazy Loading for Third-Party Resources

Some third-party resources can be lazy-loaded with a lightweight placeholder and only initialized when interacted with. This reduces initial JS cost significantly.

Alternatively, if you prefer not to troubleshoot mobile performance issues manually, a third-party tool like Website Speedy can help identify heavy assets, blocking scripts, or other elements that affect load times and responsiveness.

Disclaimer: We are the developers of Website Speedy.