This is really a question about understanding the behavior of Finsweet attributes with Webflow CMS.
I am trying to create a single page medical reference tool for Emergency Medicine physicians using Finsweet attributes.
Here is the page: Search
Try searching for “cefdinir” or “augmentin”. This type of search pulls up calculators that I have built. Each calculator is about 1-2 megabytes in size. They are there via an iFrame from an outside source where I build the calculators. The HTML code is located in the CMS.
When searching, it appears as though the calculator does not load until it has been asked for by the user via the search box. This method seems to work great (but less ideal for someone on a slow connection).
When I put my page into https://tools.pingdom.com/ then I am currently up to an 18 megabyte search page.
My finished product might have ~200 calculators on this single search page and https://tools.pingdom.com/ will likely show the page as 200 to 400 megabytes. But, again, the HTML code is in the CMS and the calculators do not load until asked for.
On a prior attempt, I had the calculators ON the single page instead of the CMS and that did not work; Chrome browser would not load the page after hitting a really large size (part of my learning curve experience, I guess 
).
Question: Hypothetically speaking, do you think I am safe to continue building my product with this current method with ~200 calculators in the CMS or am I going to run into troubles based on how the Finsweet attributes work with the Webflow CMS?
Thank you so much for the help!
https://preview.webflow.com/preview/tldr-med?utm_medium=preview_link&utm_source=designer&utm_content=tldr-med&preview=92e838a38f4915fdcf414dceb51b5444&pageId=63c5eea6b8051f673b6f4b35&workflow=preview
A-A-Ron
Hey @aaronfrydo! You can always try using CMS Load to improve the loading of CMS items.
I also asked ChatGPT for suggestions and it is suggesting these as alternatives:
a. Lazy Loading: Implement lazy loading for the calculators, where the iframes are only loaded when they come into view or when the user specifically requests them. This way, you can reduce the initial page load size and improve performance.
b. Pagination or Infinite Scrolling: Instead of loading all 200 calculators on a single page, you could consider implementing pagination or infinite scrolling. This approach allows users to access a subset of calculators initially and load additional calculators as they navigate or scroll through the page. It can help improve performance and reduce the overall page size.
c. Code Optimization: Review the code of your calculators and ensure they are optimized for performance. Minimize any unnecessary code or assets that could contribute to increased page size. Compress images and files as much as possible without sacrificing quality.
d. Content Delivery Network (CDN): Consider using a CDN to deliver your calculators. A CDN can help distribute the content across multiple servers geographically, reducing the load on a single server and potentially improving load times for users in different regions.
These are all really great ideas @Support-Luis ! Thanks. But for the core question, is the default method of the Finsweet Filter Attribute/Webflow CMS to only load the content when asked for by the user? Like, should I not trust the large webpage size that https://tools.pingdom.com/ tells me I have/will have because, in reality, it isn’t actually loading until the user asks for it? Thanks!
CMS Filter does not handle any loading, it will show and hide the items on your page. If you use CMS Load you can decide how items are loaded and rendered on your page.
Also by default, CMS Load caches the fetched documents for performance, and the cache doesn’t expire until the site is re-published. So visitors going back to your page will have better performance.
I am not sure if you should not trust https://tools.pingdom.com/ or not, but you can give CMS Load a shot.
Awesome! Thanks @Support-Luis
1 Like