How to fix mobile site loading issues on iOS devices?

[boydstacken]

Hi There,

The home page on our site is having some difficulties loading on mobile devices (mainly towards iOS devices) and I am trying to figure out how to find and resolve these issues the Shopify Front-End Team mentioned we have. 

Upon analysis, we've observed a significant delay in the initial page load, particularly with the banner on your store. This seems to stem from a 400 error related to a Google font file, contributing to a 2-second delay. 

Furthermore, the loading order of your page's elements appears to be a contributing factor. Specifically, the banner is loaded as the 21st item, preceded by third-party apps like Boost and Klaviyo, three custom JavaScript files, and a theme component JavaScript file.

The cumulative loading of these JavaScript files, especially on devices like the iPhone 13 mini, can indeed impact performance. To diagnose the exact cause and isolate the impact of third-party apps, I recommend conducting tests in a sandbox environment with Boost and Klaviyo apps temporarily removed. This will help us understand their influence on your page's loading time.
 
Moving forward, here are some suggestions to consider:
 

1. Addressing the 400 error with the Google font file is crucial. This may involve updating the link to the font file, ensuring it's accessible without errors, or considering alternative font loading strategies that are more performance-friendly.
2. Re-evaluating the loading order and prioritization of your site's assets could provide significant speed improvements. Techniques such as lazy loading non-essential resources or deferring the loading of certain JavaScript files until after the main content has rendered can enhance user experience on all devices.
3. Given the complexities involved in optimizing for speed, especially with third-party apps and custom scripts in play, working with Shopify Experts might be the best course of action. Our Shopify Partners specialize in performance optimization and can provide tailored solutions that respect your store's unique setup and requirements.

I appreciate any further assistance and insight anyone else can provide.
 

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Here is the solution:

Optimizing the loading of JavaScript (JS) and CSS resources in a Shopify store for faster page rendering:

• Minification and Concatenation:
• Minify your JavaScript and CSS files to reduce their size by removing unnecessary characters like whitespace and comments.
• Concatenate multiple JS and CSS files into fewer files to minimize the number of HTTP requests required to load them.

Example:

{{ '//cdn.shopify.com/s/assets/theme.js.css' | stylesheet_tag }}
{{ '//cdn.shopify.com/s/assets/theme.js.js' | script_tag }}

• Async and Defer Attributes:
• Use the async or defer attributes in the script tags to control when the browser loads and executes the JavaScript files.
• async loads the script asynchronously without blocking the HTML parsing, while defer defers script execution until after HTML parsing is complete.

Example:

{{ 'your-script.js' | script_tag, async: true }}
{{ 'your-script.js' | script_tag, defer: true }}

• Lazy Loading Images and Non-Essential Resources:
• Lazy load images and other non-essential resources to improve initial page load times.
• Load these resources only when they come into the viewport or when they're needed, rather than loading them all upfront.

Example:

<img loading="lazy" src="image.jpg" alt="Description">

• CDN Integration:
• Utilize Content Delivery Networks (CDNs) to deliver JS and CSS files from servers closer to the user's location, reducing latency.
• Shopify automatically serves static assets like JS and CSS through its CDN.

Example:

{{ '//cdn.shopify.com/s/assets/theme.js' | script_tag }}
{{ '//cdn.shopify.com/s/assets/theme.css' | stylesheet_tag }}

Implementing these techniques can significantly improve the loading speed of JavaScript and CSS resources in your Shopify store, leading to a better user experience, especially on mobile devices.

Hope this helps.

If you have any queries further do let us know.

Regards,

San