Website Loading Very Slow On IOS

Design help General
1

Hi, I am working with a client building a webflow website and have found that there is an unusual bug

the website does not have a lot of content, yet takes an unusually long time to load on IOS devices.

I removed the Blur effect from the website as that seems to be the common issue found online but that had no affect on the website speed.

the website can sometimes take up to a 90 seconds to finish loading on IOS

any advice would be greaty appreciated.

2

Hi there,

Slow site loading (over 2-3 seconds) typically indicates a need for optimization. Here are the main factors that could be affecting your site’s performance:

  • Large unoptimized images
  • Excessive linked assets
  • Heavy third-party integrations
  • Multiple transitions and transforms
  • Embedded content

You can improve your site’s performance by:

  1. Using Webflow’s WebP conversion tool (https://university.webflow.com/lesson/webp-conversion-tool) to optimize images
  2. Checking the site usage dashboard (https://help.webflow.com/hc/en-us/articles/33961410031507) to identify bandwidth-heavy assets
  3. Limiting linked elements on your pages
  4. Removing unnecessary transitions and interactions

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

3

Hii @Omar_Mahmoud , It sounds like you’re dealing with slow loading on mobile devices, even after optimizations. To help you out more effectively, please share the website for analyzing the performance.

You can improve your site’s performance by applying the following steps:

Heavy JavaScript or CSS Files

  • Large JavaScript or CSS files can block rendering, especially on mobile devices.

  • Minify and optimize JavaScript and CSS files..Render-blocking JavaScript can delay page rendering. Use the defer or async attributes for non-critical JavaScript.
    `

<script src="your-script.js" defer></script>
 <!-- defers the script load until after page is rendered -->`

Lazy Load Non-Essential JavaScript

JavaScript for third-party integrations or non-essential features may be blocking the initial load. You can lazy load JavaScript for things like analytics scripts, ads, or widgets that don’t need to load immediately. Below is an example of lazy load with javascript

<script async>
window.addEventListener('load', function () {
  const script = document.createElement('script');
  script.src = 'your-script.js';
  document.body.appendChild(script);
});
</script>

Font Optimization and Rendering

  • Web fonts can sometimes block the rendering of text, causing slow load times. Use font-display: swap in your CSS to avoid invisible text while the font loads:
    @font-face {
    font-family: “YourFont”;
    src: url(“your-font.woff2”) format(“woff2”);
    font-display: swap;
    }

Preload Key Resources

  • Preload critical fonts, CSS, and JavaScript files to ensure the browser can load and render them as soon as possible.
  • Preload critical resources to prioritize above-the-fold content.

<link rel="preload" href="critical-css.css" as="style">

Alternatively, if you’re still struggling to manually optimize JavaScript performance or want a quicker fix, consider using Website Speedy app—a Webflow app that automates optimizations like JS/CSS minification and lazy loading to improve the site’s performance score or speed.

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