Gravatar for ravigupta020287@gmail.com

Question by Ravi, Sep 5, 2018 5:20 AM

How to improve coveo resources load performance?

Hi, we are using coveo cloud for our search solution, in order to use coveo search box or search view component, we have to add the resources related to it, which has large size files and takes lot of time to load it. It is significantly reducing the performance our website. i have uploaded the screen shot of load in network from chrome developer tool.

Is there any way to bundle everything and reduce the file size in order to improve the performance and load it async like require?

2 Replies
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, Sep 5, 2018 9:49 AM

As Martin mentions, you only need the "Coveo Search Resources" component which loads `CoveoJsSearch.WithDependencies.min.js`. Here you are also loading 2 additional JS files:

  • CoveoJsSearch.Dependencies.min.js
  • CoveoJsSearch.Searchbox.min.js

Those files are from the "Coveo Search Box Resources" component. This component is not needed if you are already using the "Coveo Search Resources" component. You will remove almost half of the loaded file size by removing it.

To go further, you could take all the JS files and bundle them. To insert them in a page, you would have to create a custom "Coveo Search Resources" component that renders your bundled file instead of 3 different JavaScript files. You would then need to replace the "Coveo Search Resources" component by your custom component everywhere on your website.

To reduce even more the size of the JavaScript resources used by your pages, you should upgrade to Coveo for Sitecore 4.1 and switch your search UI components from the legacy ones (Coveo folder) to the newer Coveo for Sitecore Hive UI components.

The legacy components (One big Coveo Search Interface component with dozens of options) were created at the time of Coveo for Sitecore 3.0 with the goal to simplify search UI modifications by marketers. They are using version 1 of the Coveo JavaScript Search Framework. They have 2 major problems: The size of the JavaScript resources required to run them is big and the components are not cacheable.

Coveo worked on improving those 2 issues. The result is version 2 of the Coveo JavaScript Search Framework and the newer Coveo for Sitecore Hive UI framework. JS UI v2 has lazy loading of the components code on the page. If a page only uses a searchbox, only the searchbox code is downloaded to the client. It reduces the size of resources. Coveo for Sitecore Hive has split the monolith "Coveo search Interface" component in dozens of small components (pager, results list, result template, query summary...). It is MVC only, works with data sources only (no more rendering parameters), and all the components are cacheable except a single one that works with the Sitecore context.

Gravatar for ravigupta020287@gmail.com

Comment by Ravi, Sep 7, 2018 8:10 AM

Thanks Jeff for the suggestions

Gravatar for ravigupta020287@gmail.com

Comment by Ravi, Sep 11, 2018 8:07 AM

Hi Jeff,

We are using Coveo Omnibox List and Search box views in header of our page, but in order to use omnibox and search box we have to include Search view resources and search box resources which loads large files such as CoveoJsSearch.WithDependencies.min.js

and CoveoJsSearch.Searchbox.min.js.

Do we have to load all the files in our scenario or is there any individual component level js files that we can use which has less size?

Another question i have is, if we have added resources at the top of the page, is it required to add it again in body if we are using coveo search box component in the body again?

In google page speed tool we are getting error about render blocking javascript which has coveo files in it.

Please suggest.

Gravatar for mlaporte@coveo.com

Answer by Martin Laporte, Sep 5, 2018 7:36 AM

I think your are loading too many redundant files here:

CoveoJsSearch.WithDependencies.min.js already embeds CoveoJsSearch.Dependencies.min.js (hence the name), so you don't need the 2nd one.

Also, for a page where you only need the search box, you should only load CoveoJsSearch.SearchBox.min.js which only contains the required stuff, vs the larger CoveoJsSearch.WithDependencies.min.js. And on a search page, you don't need the CoveoJsSearch.SearchBox.min.js file.

Finally, please ensure that the files are served with GZip compression; not sure if it's the case here.

Gravatar for ravigupta020287@gmail.com

Comment by Ravi, Sep 5, 2018 8:32 AM

we have search box and omnibox in the page, Gzip compression is already enabled

Ask a question