Optimize multiple attributes

Attributes
1

Hi there,

Live site: Top Tech Jobs in Engineering, Programming, Design, Marketing, Sales and more | Tech Ladies

We have multiple filter, nest, load, static attributes. We’ve custom script as well to sequence it all(load > nest > filter > static). It takes a fair 2-4 seconds to load filters even with good connection.

Do you recommend some way to optimize it or speed up the filters as soon as possible.

Custom script:

<script>
// ⭐ NEST BEFORE FILTER ⭐

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  "cmsload",
  (listInstances) => {
    window.fsAttributes.cmsnest.init();
    window.fsAttributes = window.fsAttributes || [];
    window.fsAttributes.push([
      "cmsnest",
      (listInstances) => {
        window.fsAttributes.cmsfilter.init();
      }
    ]);
  }
]);
</script>

Have custom script to count items per filter and update whenever any filter is applied - https://8n8qxy.csb.app/jobs.js

TIA!

2

Hey @chintan! Are you using the CMS Load speed boost to load your items?

Regarding the count items per filter, can you please try this code?

setTimeout(() => {
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push(['cmsfilter', function (filterInstances) {
    console.log('filter loaded');

    const [filterInstance] = filterInstances;
    const filtersData = filterInstance.filtersData;

    const updateResults = (filter) => {
      const elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
        (element) => element.textContent.trim() === filter.filterName
      );

      elements.forEach((element) => {
        const resultsTextElement = element.nextElementSibling?.querySelector('.results-text');
        if (resultsTextElement) {
          resultsTextElement.textContent = filter.filterResults;
        }
      });
    };

    filtersData.forEach(updateResults);

    filterInstance.listInstance.on('renderitems', (renderedItems) => {
      console.log('test', renderedItems);
      filtersData.forEach(updateResults);
    });
  }]);
}, 2500);
3

Hi @Support-Luis ! yes, I’m using the speed boost.

Any changes required in the defer/async tags in the script loading :point_down:?

Cleanshot_006854@2x
Cleanshot_006854@2x1224×780 101 KB

4

Hey @chintan! You should not have both async and defer tags on the scripts. I recommend you use the ones provided in the docs.

Apart from that I am afraid there is not much we can do script-wise, try to optimize your items being loaded as much as you can by compressing images and loading only the info that is needed to the item cards