Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive and Fast

494 views

Published on

overview how to make responsive websites fast again #perfmatters

Published in: Design
  • Be the first to comment

Responsive and Fast

  1. 1. RESPONSIVE AND FAST ( )Sven Wo fermann @maddesigns
  2. 2. PERFORMANCE
  3. 3. MOTO.OAKLEY.COM 85.4MB page weight 471 HTTP requests 2 minutes 45 seconds until loading screen replaced with content 4 minutes 10 seconds until onLoad event http://hawksworx.com/blog/oakleys-monster-page-of-baubles/
  4. 4. 85.4 MB, 471 REQUESTS! THIS IS NOT RWD!
  5. 5. MOTO.OAKLEY.COM FAIL ok, ok, Oak ey does it better now: JUST 14.2MB, 291 request (more than 70MB ess)
  6. 6. with mobi e user-agent? 6.7MB, 114 requests :/ http://hawksworx.com/b og/oak eys-moto-diet/
  7. 7. This particu ar page weighs in at 8-9 megabytes inc uding a of its assets and advertising […] starts rendering a er about 10.5s http://www.fi amentgroup.com/ ab/weight-wait.htm
  8. 8. ” RWD may make your pages ook better on a variety of devices, but it doesn’t automatica y make your pages oad better on a variety of devices. It’s a about imp ementation. “
  9. 9. M dot or RWD. Which is faster? In conc usion, these findings show that RWD sites can indeed compete with m dot sites in terms of oad time! http://bigqueri.es/t/m-dot-or-rwd-which-is-faster/296
  10. 10. ”B ame the imp ementation, not the technique“ Tim Kad ec
  11. 11. OUR PAGES ARE FAT! 56kb HTML 63kb CSS 97kb Fonts 227kb Videos 329kb Scripts 1.310kb Images ~ 2 MB total http://httparchive.org
  12. 12. DAVE RUPERT RWD-TESTS Media queries are responsib e for ~12% (2.8kb) of my CSS weight. For every 8 ines of CSS I write, one more is needed to make it responsive. In Conc usion: Expect RWD to add ~10% It appears that RWD has added 4.8kb (~2%) to my tota page weight. — http://daverupert.com/2014/07/rwd-b oat/
  13. 13. 85% of mobi e users expect pages to oad as fast or faster than they oad on the desktop. Kiss Metrics
  14. 14. WHEN DO YOU THINK ABOUT PERFORMANCE IN YOUR PROJECT?
  15. 15. Path to Performance by Katie Kovalcin
  16. 16. Path to Performance by Katie Kovalcin
  17. 17. PERFORMANCE CULTURE Performance optimization is a process NOT an event. Performance is a cu tura thing - and starts with design.
  18. 18. If you want to “se ” performance, discuss in sa es, not deve opment.
  19. 19. Amazon's ca cu ated that a page oad s ow-down of just one second cou d cost it $1.6 bi ion in sa es each year. A 2009 A/B Study Goog e has ca cu ated that by s owing its search resu ts by just four tenths of a second they cou d ose 8 mi ion searches per day. FastCompany
  20. 20. WHAT IS FAST?
  21. 21. TIME & USER PERCEPTION Delay User perception 0–100 ms Instant 100–300 ms Small perceptible delay 300–1000 ms Machine is working 1,000+ ms Likely mental context switch 10,000+ ms Task is abandoned I ya Grigorik – High-Performance Browser Networking
  22. 22. 1000MS
  23. 23. BREAKING NEWS AT 1000MS by Patrick Hamann (about )http://www.theguardian.com https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-ve ocity-eu-2014
  24. 24. DESIGNING FOR PERFORMANCE! Book by Lara Hogan
  25. 25. PERFORMANCE BUDGET
  26. 26. PERFORMANCE BUDGET METRICS http://timkad ec.com/2014/11/performance-budget-metrics/
  27. 27. PERFORMANCE BUDGET GOALS There are a coup e of factors for which a certain metric or KPI can be e aborated: page load time page weight PSI (page speed index) Score load time first paint speed index visually complete number of requests or “time to first tweet”
  28. 28. PERFORMANCE BUDGET EXAMPLE €500 month y budget €300 rent €100 groceries €100 clothes
  29. 29. PERFORMANCE BUDGET EXAMPLE €400 month y budget €300 rent €50 groceries €50 clothes
  30. 30. PERFORMANCE BUDGET EXAMPLE 400kb performance budget 50kb fonts 50kb css 300kb images
  31. 31. PERFORMANCE BUDGET EXAMPLE 400kb performance budget 100kb fonts 50kb css 200kb images 50kb javascript
  32. 32. YOU CAN’T SPEND WHAT YOU DON’T HAVE!
  33. 33. GOOD PERF BUDGETS 600KB total page weight 20 requests 1000 speed index 1s start render time Less than 3 seconds to see something on 3G.
  34. 34. MAINTAINING A PERFORMANCE GOAL 3 options: 1. Optimize existing feature 2. Remove existing feature 3. Don’t add
  35. 35. MEASURING http://www.webpagetest.org/
  36. 36. THE NETWORK WATERFALL
  37. 37. WHY IS MY SITE SLOW ON MOBILE? “We’re on rea LTE now?!“
  38. 38. BANDWIDTH VS. LATENCY Bandwidth Maximum throughput of a ogica or physica communication path Latency The time from the source sending a packet to the destination receiving it
  39. 39. LATENCY http://chimera. abs.orei y.com/books/1230000000545/ch01.htm
  40. 40. LATENCY ON MOBILE NETWORKS http://www.aosabook.org/en/posa/mobi e-perf-images/figure1.png
  41. 41. BANDWIDTH VS. LATENCY http://chimera. abs.orei y.com/books/1230000000545/ch01.htm
  42. 42. IT DOESN'T MATTER HOW SMART YOUR PHONE IS, IF YOUR NETWORK IS DUMB — Bruce Lawson (@bruce )
  43. 43. LATENCY 1. Latency defines the speed of the how the web loads. 2. Mobile’s growth means average latency is going up. 3. Optimizing for latency means optimizing for request count.
  44. 44. PREPARE YOUR SITE FOR THE FIRST 14KB TCP s ow start http://chimera. abs.orei y.com/books/1230000000545/ch02.htm #SLOW_START
  45. 45. PERFORMANCE TIPS
  46. 46. CONCATENATE concatenate useful chunks of CSS & JavaScript On 3G, a new 10k request equals ~100kb of concatenated content. But only concatenate styles and scripts, that are used on that page
  47. 47. MINIFY, COMPRESSION AND SHRINKING Minify CSS & JavaScript And GZIP! Compress Images! (Strip Image Metadata)
  48. 48. RESPONSIVE IMAGES
  49. 49. BASIC IMAGE PERFORMANCE TIPS: CSS Sprites (pixel image sprites) SVG sprites optimize images (JPEGmini, PNGmini, …) more advanced WebP, MozJpeg do not deliver larger files than needed
  50. 50. IMAGEOPTIM
  51. 51. SVGO GUI
  52. 52. APPROPRIATE SIZED IMAGES http://twitpic.com/c6kbm3/fu
  53. 53. to remember – average size of a images ~1.3 MB!
  54. 54. WRAP BACKGROUND-IMAGE IN MEDIA QUERIES /* load only on smaller screens */ @media (max-width: 600px) { .module { background-image: url('images/image-max600.png'); } } /* load on screens larger than 600px */ @media (min-width: 600px) { .module { background-image: url('images/image-min600.png'); } } Browsers oad on y matched background-image -› wrap them in @media query if they change between different viewports
  55. 55. RESPONSIVE IMAGES
  56. 56. RESPONSIVE <IMG> WITH SRCSET + SIZES <img src="https://unsplash.it/16/9" srcset="https://unsplash.it/960/540 960w, https://unsplash.it/640/360 640w, https://unsplash.it/480/270 480w, https://unsplash.it/320/180 320w" sizes="(min-width: 1280px) 480px, (min-width: 1024px) 444px, (min-width: 640px) 325px, 100vw" alt="dummy image"> hint for debugging: c ear cache! for srcset, when a arger image resource is in cache, a sma er image down oad is not triggered
  57. 57. srcset/sizes provides information to browsers <picture> provides instructions to browsers.
  58. 58. <PICTURE> art direction images and type switching
  59. 59. <PICTURE> <picture> <source media="(min-width: 650px)" srcset="kitten-large.png"> <source media="(min-width: 465px)" srcset="kitten-medium.png"> <!-- img tag for browsers that don't support picture element --> <img src="kitten-small.png" alt="a cute kitten"> </picture> use or for cross browser-supportrespimage picturefi
  60. 60. LAZY LOAD RESPONSIVE IMAGES - lazysizes is a […] lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. - my blog about CSS for lazy loading images (german) - Responsive Images as a Service lazysizes Responsive Images – lazy loading WURFL Image Tailor (WIT)
  61. 61. WEB FONTS
  62. 62. FONT LOADING 101 IE Firefox WebKit Blink Blocking ✗ ✔ ✔ ✔ Timeout - 3s - 3s
  63. 63. TIPS FOR USING WEB FONTS todays most supported web font formats: .ttf, .woff, .woff2 use woff2! Google Fonts delivers subsetted fonts (only load a subset of a font file [latin/german/french subset]) to supported browsers (Chrome) but in general: host the fonts by yourself, save DNS requests avoid base64 encoding for faster page rendering http://www.sitepoint.com/improving-font-performance-subsetting- oca -storage/
  64. 64. ICON FONTS - CHOSE CAREFULLY! Font Awesome is a fu suite of 519 pictographic icons https://github.com/FortAwesome/Font-Awesome
  65. 65. NOT SO AWESOME!
  66. 66. FONT AWESOME ON ICOMOON.IO If you on y use a bunch of icons, strip down the fi es with icomoon.io
  67. 67. ICOMOON pick your icons
  68. 68. ICOMOON save as font (or SVG) and save Kb!
  69. 69. SVG ICONS (SPRITES) SVG Sprites vs. Icon Fonts
  70. 70. using web fonts on y on arger disp ays (“faster connections”)? @media screen and (min-width: 48em) { body { font-family: 'WebFont', Fallback, sans-serif; } }
  71. 71. PERFORMANCE BUDGET “Is the extra 135kb worth the aesthetic change?” “Does the heavier font kit better represent the brand?”
  72. 72. THE CRITICAL RENDERING PATH The intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixe s
  73. 73. INLINING CRITICAL CSS in ine the most critica CSS & JS to render in this specific viewport (difficu t with RWD - different viewports) <head> <style> /* inline critical CSS */ </style> </head> async who e CSS (with ), maybe use cookies to check if user has cached version of CSS oadCSS.js
  74. 74. DON'T TRY TO OUTSMART THE BROWSER!
  75. 75. FUTURE OF CRITICAL CSS: async CSS with re ="pre oad" <link rel=preload href=/non-block.css as=stylesheet onload=yourLogic() />
  76. 76. More Weight Doesn't Mean More Wait fi amentgroup
  77. 77. More Weight Doesn't Mean More Wait Scott Jeh removed ~8s in oading without removing content
  78. 78. HTTP/2 todays performance tips can be wrong with HTTP/2
  79. 79. PERFORMANCE IS A REQUIREMENT NOT AN EXTRA FEATURE
  80. 80. THANKS FOR YOUR ATTENTION! Sven Wo fermann | maddesigns Twitter: @maddesigns Web: maddesigns.de

×