Make content appear fast on the screen. Presentation from Responsive Day Out 2013
PAGE LOADAndy HumeTHE ANATOMY OF AResponsive Day Out, 2013RESPONSIVE
View Slide
Text
Content-Encoding: gzipCache-Control: max-age=315360000
Content-Encoding: gzipCache-Control: max-age=315360000OK. NOW WE CAN TALK
http://www.flickr.com/photos/freefoto/2231356418/Performance
page load timePERFORMANCEbandwidth usebattery lifeserver capacityfast interfacereliability
page load timePERFORMANCEpage load timebandwidth usebattery lifeserver capacityfast interfacereliability
ContentTHREE STAGESEnhancementLeftovers
Content Enhancement Leftovers
Content Enhancement LeftoversDOMContentReady event
Content Enhancement LeftoversDOMContentReady event Load event
NO. 1TRADE OFFhttp://www.flickr.com/photos/funkypancake/477244177/Trade-off: Script loading
SCRIPT LOADING<br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
SCRIPT LOADING
SCRIPT LOADINGappendChild(script)<br/>HTML<br/>CSS<br/>JAVASCRIPT<br/>HTML<br/>CSS<br/>JAVASCRIPT<br/>
DOMContentReady event Load eventContent Enhancement Leftovers
<br/>if (isModernBrowser()) {<br/>var s = document.createElement('script');<br/>s.src = "app.js";<br/>document.head.appendChild(script);<br/>}<br/>CUTTING THE MUSTARD
@if(isModernBrowser) {}CUTTING THE MUSTARD
http://www.flickr.com/photos/number10gov/4600963461/Trade-off: CSS download
CSS DOWNLOAD
CSS DOWNLOAD@if(isWideDevice()) {}
RESPONSIVE SERVER
RESPONSIVE SERVERRelies on device detectionDeviceAtlas, WURFLRESS
NO. 3 ( 4)TRADE OFFhttp://www.flickr.com/photos/harikrishnanb/4264996356/Trade-off: Web fonts
http://www.flickr.com/photos/spacemanbob/1084139169/Web fonts
FONT LOADINGProgressive enhancement
FONT LOADINGProgressive enhancementCuts the mustard
FONT LOADINGProgressive enhancementCuts the mustardSupports WOFF
FONT LOADINGProgressive enhancementCuts the mustardSupports WOFFlocalStorage available
PRE-RENDERCUT THEMUSTARD?NO FONTS SHOW FONTSNONOSUPPORT WOFF?FONTS INSTORAGE?NO
POST-RENDERSTORAGEAVAILABLE?NO FONTS SHOW FONTSNODOWNLOAD FONTS:BASE64 ENCODEDIN JSONCACHE FONTSIN STORAGE
http://www.flickr.com/photos/zigazou76/4412946911/Trade-off: Images
RESPONSIVE IMAGES
Why media queries?THE FUTUREModules, patterns, systems,components, OOCSS, SMACSS,StandaloneViewport is irrelevant
RESPONSIVE IMAGESdata-src="small.jpg"data-src-high="large.jpg"data-width="180"data-height="100">
PERFORMANCERESPONSIVE
PERFORMANCE
Thank-you!http://lanyrd.com/scdtfx@andyhumeCreative Commons LicensedAttribution, Non-Commercial, Share Alikecc