https://kind-clarke-92e677.netlify.app/
When I run this locally I don’t see the preloading of the icons for Linkedin and Twitter. Is there anything I can do so that these icons don’t load so prominently during first load?
I’ve tried reducing the size and different formats, but still see this preload.
Thanks,
Rebecca
Howdy!
Not sure I’m fully understanding your question but I do see that the browser is loading your LinkedIn image from the index.html response. You’ve got plenty of front-end stuff going on on this page but curling https://kind-clarke-92e677.netlify.app/ directly gives me the static HTML without any of the front-end processing kicking off like it does in a browser. From that, I can see that you have:
<img src='https://res.cloudinary.com/cloudinary-training/image/upload/linkedin.svg' alt={'LinkedIn'}/>
in your static source, meaning that the browser is going to load that synchronously when parsing the page. Is that your problem? You want that image to load async instead?
–
Jon
I tried adding the async attribute but the icons still load in this way.
https://kind-clarke-92e677.netlify.app/
Is there another way I should be loading these images? They’re all pretty small.
The reason I’m checking in with you at netlify is that I don’t see this behavior when I’m running with localhost.
The html is loaded using react’s dangerouslySetInnerHTML
dangerouslySetInnerHTML={{ __html: config.header.social }}
Does this cause a problem in loading the icons used in the html snippet with netlify?
The code is supplied in config for this innerHTML is this:
<li> <a href="https://twitter.com/rebeccapeltz" target="_blank" rel="noopener"> <div class="twitterBtn"> <img async src='https://res.cloudinary.com/cloudinary-training/image/upload/book/twitter-brands-block.svg' alt={'Twitter'}/> </div> </a> </li> <li> <a href="https://www.linkedin.com/in/rebeccapeltz/" target="_blank" rel="noopener"> <div class="linkedInBtn"> <img async src='https://res.cloudinary.com/cloudinary-training/image/upload/linkedin.svg' alt={'LinkedIn'}/> </div> </a> </li>
Thanks for you help with this. If there is anything else I can try to remove this loading anomaly, it would be appreciated.
Rebecca
I modified the code to not use dangerouslySetInnerHTML and instead render static html with data from config. I still see the same problem, so I’m thinking this is an SSR issue.
Rebecca