HTML preconnect

I’d like to use an HTML’s preconnect on my HTML page because I know Algolia will be used and removing the connection times (by connecting while my app is waiting for my JS bundle to download & parse) would shave off 100’s of MS, up to 1s it appears of blank white page time. Example:
<link rel="preconnect" href="https://foo.com">

However, Algolia sends requests to connect to URLs similar to:

https://eHd3hg818-dsn.algolia.net
https://eHd3hg818-3.algolianet.com
  1. Are these URLs stable to my application? Or what URLs can I use to preconnect to?
  2. When Algolia is loaded, two requests are made. Is the first to locate the Algolia server containing my data and the second to request the data? Just curious.

Hi @jbb,

Thanks for your question!

You should use preconnect for “eHd3hg818-dsn.algolia.net”. This will work for the main request that happens.

Unless you are overriding the client, the requests shouldn’t go to algolianet or [1-3] servers.

Let us know how this works for you or if you have more questions!
Best regards,

Thank you Cindy!

I don’t want to override the client, just performance optimizing my app. I’ll prefetch the eHd3hg818-dsn.algolia.net URL version.

  1. Is that URL stable for my app? (Its format makes it look like it could change unexpectedly or next time I update react-instantsearch.)
  2. Why are there two requests to Algolia? The first is to eHd3hg818-dsn.algolia.net (what does it do? ) and the second to https://eHd3hg818-3.algolianet.com (URL seems to vary) contains the response body. I was expecting to see only one request to Algolia.

(react-instantsearch-dom: 6.0.0-beta.0)

  • Oh I see, the first part of the URL is my App ID and is stable.
  • Weirdly, now I’m only seeing one request. But in the past, I was seeing two requests like below, sometimes both were 200OK if I recall correctly:

But I’m happy to see only one request as expected now. Hope it stays like that.

Thanks!

Got it working! Because it’s an XHR request, it’s also necessary to add a crossorigin attribute:

<link rel="preconnect" href="https://foo.com" crossorigin />

Hi @jbb,

I’m glad you got it working!

For a little more context, there may be more than that but preconnecting to the -dsn one will have the most impact.

This documentation may help!

Let us know how this works for you or if you have more questions!
Best regards,