Avoid sending CSS with each search in CartoDB

Question

We’re developing a project with CartoDB and we want to show each element with a custom image.

We are doing this setting the sublayer.setCartoCSS() with something like this:

cartocss: "#map { (…) }
#map[id_elem="6f86c92a-..."]{ marker-file: url(http://[domain]/Upload/image001.png);}
// ... a lot of css ...
#map[id_elem=="6f86c92a-..."]{ marker-file: url(http://[domain]/Upload/image0XX.png);}

And it works! :)

The problem with this solution is that we have to send the CSS of all the elements in each HTTP Request, and that’s not the most efficient way. I have tried to set a @import as CSS, something like this:

cartoDBSubLayer.setCartoCSS('@import url("http://domain.com/cartodb.data.css");');

But it didn’t work.

Is there any way to avoid sending all the CSS in each request?

Answer 1

Not loading CSS isn't supported by the HTTP standard, meaning there is no way to prevent loading it upon a request. This answer (along with others in that question) might help explain better.

The best way to increase CSS performance is to use minification and caching techniques. Some other techniques are explained in this article.

Also, use link instead of @import to allow parallel downloads. See this article for a longer description.