• Issue: Requests take longer to complete
• Solution: Reducing requests improves performance

• DNS lookups
• File count
• File size

<object data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EClown%20Car%20Technique%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/small.png);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/medium.png);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/big.png);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="images/medium.png" alt="Fall back for IE">
<![endif]-->
</object>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
  preserveAspectRatio="xMidYMid meet">
 <title>Clown Car</title>
 <style>
  svg {
    background-size: 100% 100%; background-repeat: no-repeat;
  }
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 }
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 }
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 }
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}
 }
 </style>
</svg>

• Touch Event: 300ms delay
• provide user feedback, fetch, update when ready

el.addEventListener('click', myFunction);
el.addEventListener('touchend', myFunction);*

<meta name="viewport"
 content="width=device-width;
          initial-scale=1; maximum-scale=1;">