Anatomy of a responsive page load, WhiskyWeb 2013

PAGE LOAD Andy Hume THE ANATOMY OF A WhiskyWeb II,
2013 RESPONSIVE Friday, 12 April 13

Text Friday, 12 April 13

Friday, 12 April 13

http://www.flickr.com/photos/freefoto/2231356418/ Performance Friday, 12 April 13

WHY CARE? http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/ Friday, 12 April 13

WHY CARE? Speed Profit http://goo.gl/JNRPt Friday, 12 April 13

WHY CARE? Speed Profit http://goo.gl/JNRPt Speed high search ranking http://goo.gl/XhVfk
Friday, 12 April 13

http://www.flickr.com/photos/teosaurio/7509743298/ Lazy Friday, 12 April 13

Friday, 12 April 13

http://www.flickr.com/photos/teosaurio/7509743298/ The web has bitten us Friday, 12 April 13

page load time PERFORMANCE bandwidth battery life server capacity fast
interface reliability Friday, 12 April 13

page load time PERFORMANCE page load time bandwidth battery life
server capacity fast interface reliability Friday, 12 April 13

RESPONSE TIME Server-side response time? End-user response time? Time to
last byte? ALWAYS DEFINE IT Friday, 12 April 13

TIME TO FIRST BYTE Request to start of response Normally
HTML Nothing displayed yet Includes network latency Includes server-side Friday, 12 April 13

START RENDER Content begins to display Doesn’t mean it’s useful
content Things can still block afterwards Friday, 12 April 13

LOAD TIME Full page loaded Scripts, images, etc... Site might
be usable before this Friday, 12 April 13

RANGE OF METRICS Time to first byte Start render time
Load time KNOW WHICH ONE Friday, 12 April 13

http://webpagetest.org webpagetest.org Friday, 12 April 13

WEBPAGETEST.ORG 0.1930 Friday, 12 April 13

WEBPAGETEST.ORG iPhone 4 / iOS 5.1 0.1930 Friday, 12 April
13

WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms
RTT) 0.1930 Friday, 12 April 13

WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms
RTT) Dulles, Virginia 0.1930 Friday, 12 April 13

WEBPAGETEST.ORG Friday, 12 April 13

Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13

Content Enhancement Leftovers Friday, 12 April 13

Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13

Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April
13

Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13

13

LOADING CSS Compressed Long cache time One file Content-Encoding: gzip
Cache-Control: max-age=315360000 Friday, 12 April 13

LOADING CSS <html> <head> <link href="main.css" rel="stylesheet" /> </head> </body>
<p>Content goes here</p> </body> </html> Friday, 12 April 13

<html> <head> <link href="small.css" rel="stylesheet" />  <link href="larger.css" media="screen and (min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13

<html> <head> <link href="main.css" rel="stylesheet" />  <link href="gallery.css" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13

13

LOADING JAVASCRIPT Compressed Long cache time One file Content-Encoding: gzip
Cache-Control: max-age=315360000 Friday, 12 April 13

JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" />  <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> <script src="app.js"></script> </head> </body> <p>Content goes here</p> </body> </html> NETWORK NET Friday, 12 April 13

JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" />  <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> <script src="app.js"></script> </body> </html> NETWORK NET Friday, 12 April 13

JAVASCRIPT LOADING <script> var s = document.createElement('script'); s.src = "app.js";
document.head.appendChild(s); </script> Friday, 12 April 13

@if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD
http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Cutting the Mustard Friday, 12 April 13

JAVASCRIPT LOADING var isModernBrowser = function() { return ( ‘querySelector’
in document && ‘addEventListener’ in window && ‘localStorage’ in window ); }; Friday, 12 April 13

13

IMAGES: SPRITES Friday, 12 April 13

IMAGES: SVG Friday, 12 April 13

IMAGES: ASSET FONTS @2x @?x Friday, 12 April 13

13

http://www.flickr.com/photos/spacemanbob/1084139169/ Web fonts Friday, 12 April 13

FONT LOADING Progressive enhancement Friday, 12 April 13

FONT LOADING Progressive enhancement Cuts the mustard Friday, 12 April
13

FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF Friday,
12 April 13

FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage
available Friday, 12 April 13

PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO
SUPPORT WOFF? FONTS IN STORAGE? NO Friday, 12 April 13

POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:
BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Friday, 12 April 13

13

Friday, 12 April 13

IMAGES: NEW SPECS <img alt="Describes the image." src="medium.jpg" srcset="small.jpg 640w,
small-hd.jpg 640w 2x, med-hd.jpg 2x" /> srcset attribute Friday, 12 April 13

IMAGES: NEW SPECS <picture alt="Describes the image."> <source src="s.jpg"> <source
media="(min-width:320px)" src="m.jpg"> </picture> Picture element Friday, 12 April 13

IMAGES: ON DEMAND Friday, 12 April 13

IMAGES: ON DEMAND <div data-alt="Describes the image." data-src="small.jpg" data-src-high="large.jpg" data-width="180"
data-height="100" > </div> Friday, 12 April 13

IMAGES: APPROPRIATE https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux Friday, 12 April 13

13

Thank-you! http://lanyrd.com/cmhcd @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc Friday, 12 April 13

Anatomy of a responsive page load, WhiskyWeb 2013

Anatomy of a responsive page load, WhiskyWeb 2013

More Decks by Andy Hume

Other Decks in Technology

Featured

Transcript