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!
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);
Hi @Support-Luis ! yes, I’m using the speed boost.
Any changes required in the defer/async tags in the script loading
?
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