Menu icon Foundation
Does Interchange allow page load time to vary?

Can I utilize interchange to reduce load time for mobile? In other words, if I design my pages so that "heavy-weight files" load from partials that are specified (with Interchange) only for large screens, will that result in those partials not appearing in the network resources that a mobile devlice downloads?

Somehow, when I was first learning about Foundation, I assumed this would be the case. But I have compared the timelines/network calls made at different screen sizes (using Chrome's Audit tools) on some of my FND-5 web pages, and can detect no significant difference.

Best practices for mobile demand that page load be as quick as possible, and the overhead in my FND-5 pages is currently WAY too great. If Interchange can't help here, its value strikes me as sorely lacking. (Is there any enhancement on FND 6 for this?)

interchangePage LoadSpeed IssuesMobile First

Can I utilize interchange to reduce load time for mobile? In other words, if I design my pages so that "heavy-weight files" load from partials that are specified (with Interchange) only for large screens, will that result in those partials not appearing in the network resources that a mobile devlice downloads?

Somehow, when I was first learning about Foundation, I assumed this would be the case. But I have compared the timelines/network calls made at different screen sizes (using Chrome's Audit tools) on some of my FND-5 web pages, and can detect no significant difference.

Best practices for mobile demand that page load be as quick as possible, and the overhead in my FND-5 pages is currently WAY too great. If Interchange can't help here, its value strikes me as sorely lacking. (Is there any enhancement on FND 6 for this?)

This post has been closed. No new replies can be added.

Corey Schaaf over 3 years ago

The simple answer to your question is Yes. 

The whole purpose of interchange is to keep your code from loading things that are only needed for small, medium or large platforms. 

Also, Interchange evaluates rules in order, and the last rule to match will be used. For this reason, you should order your rules from smallest screen to largest screen.


Based on the example from the DOC it would look something like this:

<div data-interchange="[assets/partials/interchange-default.html, small], [assets/partials/interchange-medium.html, medium], [assets/partials/interchange-large.html, large]"></div>