React-snap: Improve preloading strategy

[stereobooster]

Improve preconnect, dns-prefetch functionality, maybe use media queries. Example: load in small screen - capture all assets, add with a media query for the small screen, load in big screen add the rest of the assets with a media query for the big screen.

[stereobooster]

• https://github.com/thedaviddias/Front-End-Performance-Checklist
• https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

[mrYakamoto]

Is there anyway to get the preconnect link tag to use https protocol instead of http?

[stereobooster]

Is there anyway to get the preconnect link tag to use https protocol instead of http?

Isn't it doing it right now? What is your issue?

[mrYakamoto]

Isn't it doing it right now? What is your issue?

My content API returns protocol-relative image urls like...
//images.ctfassets.net/foo.jpg
When react-snap runs, i get a preconnect tag for
<link href="http://images.ctfassets.net" rel="preconnect">
Then, since I'm enforcing https:// on my site, I get a mixed content warning for insecure link urls

[valentin7]

Also having the issue of mixed content warning for insecure link urls — also pre-loads some things as http (like hotjar and wistia links) but the page loads in https. @mrYakamoto did you find a solution or workaround for this?
Thanks!

[JeffMusgrave]

I am also getting a mixed content warning on netlify when the site builds. I get image urls like: src="http://localhost:45678/static/media/01-profile.png"

The site is currently entirely front-end, and I've chosen to load everything via JS objects. I've used require("../img/01-profile.png") in the object's image values to make sure it works locally with relative paths.

Has there been any development on this issue?