Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Anatomy of a responsive page load, WhiskyWeb 2013

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
April 12, 2013
Technology
10
1.4k

Anatomy of a responsive page load, WhiskyWeb 2013

Longer version of performance talk for WhiskyWeb II in Edinburgh.

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

April 12, 2013
Tweet

More Decks by Andy Hume

See All by Andy Hume
Architecting resilient front-ends, jQuery UK, 2015
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
3
860
Building for performance and resilience
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
5
830
Architecting resilient front ends
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
4
550
Guardian Responsive Design, SmashingConf 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
6
400
Web Fonts as a Progressive Enhancement, Ampersand 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
2
590
Breaking News & Breaking Software, SyncConf 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
0
110
Anatomy of a responsive page load, Responsive Day Out 2013
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
23
3.1k
Responsive Guardian
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
21
780
CSS for grown ups: maturing best practises, SXSW 2012
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
102
46k

Other Decks in Technology

See All in Technology
Citizen 개발기
748a6dc8b4eaba0fde62909e39be7987?s=48 outsider
0
280
Accelerated Computing for NLP on AWS
4e10f0bc53073da7f55420c1a2021c8b?s=48 shokout
1
210
【Pythonデータ分析勉強会#33】「DearPyGuiに入門しました」の続き～Image-Processing-Node-Editor～
26afa82334d1037f0ba602272b950c90?s=48 kazuhitotakahashi
0
150
インフラのCI/CDはGitHub Actionsに任せた
F5c597c41d9bc6a80cce50adbd6c7bd9?s=48 mihyon
0
110
SwiftUI Layout
0863933c047ef45d283fe4e1d26bbddc?s=48 auramagi
1
110
雑な攻撃からELBを守る一工夫 ＋おまけ / Know-how to protect servers from miscellaneous attacks
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
0
520
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
46839cf590a549efe13547c17a6b2fde?s=48 isaoshimizu
5
880
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.8k
さいきんのRaspberry Pi。 / osc22do-rpi
74476e142a767a018d68c5e72e34ee2f?s=48 akkiesoft
6
5.2k
Target SDK Versionを上げない Notification runtime permission対応
0c5e92294cc0cfba620641c589db9378?s=48 napplecomputer
0
140
miisan's career talk
253f81535853f9fddcadaec9b37dc1e0?s=48 mii3king
0
220
JDK Flight Recorder入門
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
1
510

Featured

See All Featured
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
13k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.7k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
920
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k

Transcript

  1. PAGE LOAD Andy Hume THE ANATOMY OF A WhiskyWeb II,

    2013 RESPONSIVE Friday, 12 April 13

  2. Text Friday, 12 April 13

  3. Friday, 12 April 13

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

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

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

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

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

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

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

  11. WHY CARE? Speed Profit http://goo.gl/JNRPt Speed high search ranking http://goo.gl/XhVfk

    Friday, 12 April 13

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

  13. Friday, 12 April 13

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

  15. page load time PERFORMANCE bandwidth battery life server capacity fast

    interface reliability Friday, 12 April 13

  16. page load time PERFORMANCE page load time bandwidth battery life

    server capacity fast interface reliability Friday, 12 April 13

  17. RESPONSE TIME Server-side response time? End-user response time? Time to

    last byte? ALWAYS DEFINE IT Friday, 12 April 13

  18. TIME TO FIRST BYTE Request to start of response Normally

    HTML Nothing displayed yet Includes network latency Includes server-side Friday, 12 April 13

  19. START RENDER Content begins to display Doesn’t mean it’s useful

    content Things can still block afterwards Friday, 12 April 13

  20. LOAD TIME Full page loaded Scripts, images, etc... Site might

    be usable before this Friday, 12 April 13

  21. RANGE OF METRICS Time to first byte Start render time

    Load time KNOW WHICH ONE Friday, 12 April 13

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

  23. WEBPAGETEST.ORG 0.1930 Friday, 12 April 13

  24. WEBPAGETEST.ORG 0.1930 Friday, 12 April 13

  25. WEBPAGETEST.ORG 0.1930 Friday, 12 April 13

  26. WEBPAGETEST.ORG 0.1930 Friday, 12 April 13

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

    13

  28. WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms

    RTT) 0.1930 Friday, 12 April 13

  29. WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms

    RTT) Dulles, Virginia 0.1930 Friday, 12 April 13

  30. WEBPAGETEST.ORG Friday, 12 April 13

  31. WEBPAGETEST.ORG Friday, 12 April 13

  32. WEBPAGETEST.ORG Friday, 12 April 13

  33. WEBPAGETEST.ORG Friday, 12 April 13

  34. WEBPAGETEST.ORG Friday, 12 April 13

  35. Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13

  36. Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13

  37. Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13

  38. Content THREE LEVELS Enhancement Leftovers Friday, 12 April 13

  39. Content Enhancement Leftovers Friday, 12 April 13

  40. Content Enhancement Leftovers Friday, 12 April 13

  41. Content Enhancement Leftovers Friday, 12 April 13

  42. Content Enhancement Leftovers Friday, 12 April 13

  43. Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13

  44. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  45. Content Enhancement Leftovers DOMContentReady event Friday, 12 April 13

  46. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  47. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  48. LOADING CSS Compressed Long cache time One file Content-Encoding: gzip

    Cache-Control: max-age=315360000 Friday, 12 April 13

  49. LOADING CSS <html> <head> <link href="main.css" rel="stylesheet" /> </head> </body>

    <p>Content goes here</p> </body> </html> Friday, 12 April 13

  50. <html> <head> <link href="small.css" rel="stylesheet" /> <!-- For larger viewports

    --> <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

  51. <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For gallery pages

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

  52. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  53. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  54. LOADING JAVASCRIPT Compressed Long cache time One file Content-Encoding: gzip

    Cache-Control: max-age=315360000 Friday, 12 April 13

  55. JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger

    viewports --> <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

  56. JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger

    viewports --> <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

  57. JAVASCRIPT LOADING <script> var s = document.createElement('script'); s.src = "app.js";

    document.head.appendChild(s); </script> Friday, 12 April 13

  58. @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

  59. <script> if (isModernBrowser()) { var s = document.createElement('script'); s.src =

    "app.js"; document.head.appendChild(s); } </script> JAVASCRIPT LOADING Friday, 12 April 13

  60. JAVASCRIPT LOADING var isModernBrowser = function() { return ( ‘querySelector’

    in document && ‘addEventListener’ in window && ‘localStorage’ in window ); }; Friday, 12 April 13

  61. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  62. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  63. IMAGES: SPRITES Friday, 12 April 13

  64. IMAGES: SVG Friday, 12 April 13

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

  66. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  67. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

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

  69. FONT LOADING Progressive enhancement Friday, 12 April 13

  70. FONT LOADING Progressive enhancement Cuts the mustard Friday, 12 April

    13

  71. FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF Friday,

    12 April 13

  72. FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage

    available Friday, 12 April 13

  73. PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO

    SUPPORT WOFF? FONTS IN STORAGE? NO Friday, 12 April 13

  74. POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Friday, 12 April 13

  75. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  76. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  77. Friday, 12 April 13

  78. 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

  79. 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

  80. IMAGES: ON DEMAND Friday, 12 April 13

  81. IMAGES: ON DEMAND Friday, 12 April 13

  82. IMAGES: ON DEMAND Friday, 12 April 13

  83. 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

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

  85. Content Enhancement Leftovers DOMContentReady event Load event Friday, 12 April

    13

  86. Thank-you! http://lanyrd.com/cmhcd @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike

    cc Friday, 12 April 13