a lot depends on response times. Possibly once you start using the API you will notice a difference from the time it takes yahoo to retrieve the info as well. If it's better or worse or variable depends on a lot of things out of your control. You could consider having one of those whirly "loading" things if you don't want your users to be put off by a blank screen.
if you are interested in making it really dynamic, you might consider creating the html on the fly, so that you can load in as many games as you like and not have to worry about adding extra html to accommodate...
Code:
<body>
<div id="results"></div>
<script type="text/javascript">
function showGame(o){
var thediv=document.getElementById("results")
var base=o.query.results.json.streams;
for (var i = 0; i < base.length; i++) {
var div1=document.createElement("div");
div1.className="article";
var div2=document.createElement("div");
div2.className="cl";
div1.appendChild(div2);
var div3=document.createElement("div");
div3.className="image";
var link=document.createElement("a");
link.href="http://dayzlive.com/";
var pic=document.createElement("img");
pic.src=base[i].channel.logo;
link.appendChild(pic);
div3.appendChild(link);
div1.appendChild(div3)
var div4=document.createElement("div");
div4.className="cnt";
var h4=document.createElement("H4");
h4.innerHTML=base[i].channel.name;
div4.appendChild(h4);
var p1=document.createElement("p");
p1.innerHTML="<b>Viewers: "+base[i].viewers+"</b> "
div4.appendChild(p1);
div1.appendChild(div4);
var div5=document.createElement("div");
div5.className="cl";
div1.appendChild(div5);
thediv.appendChild(div1)
}
}
var myurl=encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")
scr=document.createElement("script");
scr.type="text/javascript"
scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
document.body.appendChild(scr);
</script>
</body>