How to mitigate huge performance impact of a twitch embed?

[Dave_011]

On my site I am embedding a simple twitch and chat embed, using the following html:

				<div class="twitch">
					  <div class="twitch-video">
						<iframe
						  src="https://player.twitch.tv/?channel=mychannel&parent=www.mysite.com&autoplay=false"
						  frameborder="0"
						  scrolling="no"
						  allowfullscreen="true"
						  height="100%"
						  width="100%"
						  title="Twitch Video Embed">
						</iframe>
					  </div>
					  <div class="twitch-chat">
						<iframe
						  frameborder="0"
						  scrolling="no"
						  src="https://www.twitch.tv/embed/mychannel/chat?parent=www.mysite.com"
						  height="100%"
						  width="100%"
						  title="Twitch Chat Embed">
						</iframe>
					  </div>
				</div>

I am then pre-loading the script:

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

(preload at top)

This simple embed however, according to gt-metrix:

• Increases full page load time from <2 seconds, to 23.5 seconds
• Increases total page size from <900kb to 3.54MB
• Increases requests from around 20, to 120+

This just seems absolutely insane for a simple embed, and I’ve got no idea if it’s just me using it wrong, or the twitch embed is just like this? Any help appreciated, thanks.

[BarryCarlyon]

Use one embed instead of two!

Everything

Theres no need to use two iFrames

[Dave_011]

I just implemented this, and it makes very little difference in terms of performance impact. Still a 2MB request and 100+ connections…

[BarryCarlyon]

There there is nothing else you can change. That I can think of or know of.

The only thing I potentially do different is I’ll invoke the player after the document is ready so the page finishes and then goes to build the player.

Since you are literally embedding someone elses website and you can’t change what that website you embedded does really.

[Dave_011]

How would I go about invoking the player after the rest of the document has loaded?

[BarryCarlyon]

document.addEventListener('DOMContentLoaded', (event) => {
  var options = {
    width: 800,
    height: 500,
    channel: "monstercat",
    allowfullscreen: false,
    layout: 'video-with-chat'
  };
  var player = new Twitch.Embed("test", options);
});

Is one possible method, or the JS is before the </body> which should be suitably late.

[Dave_011]

The only issue with the above solution is that it doesn’t allow responsive adjustment, so the chat falls below the video on tablets and mobile, for example.