a redirect between the user and the HTML document delays everything in the page…” http://developer.yahoo.com/performance/rules.html#redirects “Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.” https://developers.google.com/speed/docs/best-practices/rtt#AvoidRedirects Use a separate mdot Site
CSS arrives. With the worst possible experience: white page.” “Browsers download CSS they don't need, e.g. print, tv, device-ratio... And most browsers (except Opera and Webkit) block rendering because of these too” Demo: http://www.phpied.com/files/css-loading/mq.php?mq=all http://www.phpied.com/css-and-the-critical-path/
is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */ } https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
width:200px; height:75px; } @media only screen and (-‐webkit-‐min-‐device-‐pixel-‐ratio: 1.5), only screen and (min-‐-‐moz-‐device-‐pixel-‐ratio: 1.5), only screen and (-‐o-‐min-‐device-‐pixel-‐ratio: 3/2), only screen and (min-‐device-‐pixel-‐ratio: 1.5) { #test7 { background-‐image:url('images/test7-‐highres.png'); width:200px; height:75px; /* Editors note: this should use background-‐size */ } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ CSS background image replaced in CSS Downloading Images
width:200px; height:75px; } @media only screen and (-‐webkit-‐min-‐device-‐pixel-‐ratio: 1.5), only screen and (min-‐-‐moz-‐device-‐pixel-‐ratio: 1.5), only screen and (-‐o-‐min-‐device-‐pixel-‐ratio: 3/2), only screen and (min-‐device-‐pixel-‐ratio: 1.5) { #test7 { background-‐image:url('images/test7-‐highres.png'); width:200px; height:75px; /* Editors note: this should use background-‐size */ } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/ OK CSS background image replaced in CSS Downloading Images
It’ll look great on HDPI screens. Vectors are a shortcut for Responsive Images. Note: Canvas content is bitmapped, but you can redraw at higher resolutions.
temple in Angkor Thom, Cambodia"> <div data-‐src="external/imgs/small.jpg"></div> <div data-‐src="external/imgs/medium.jpg" data-‐media="(min-‐width: 400px)"></div> <div data-‐src="external/imgs/large.jpg" data-‐media="(min-‐width: 800px)"></div> <div data-‐src="external/imgs/extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div> <!-‐-‐ Fallback content for non-‐JS browsers. Same img src as the initial, unqualified source element. -‐-‐> <noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </div> http://scottjehl.github.com/picturefill/