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

RWD BLOAT

0988796fb50136535a69cea314396cfa?s=47 Dave Rupert
November 11, 2014
Technology
40
11k

RWD BLOAT

Responsive Web Design gets a bad rap for performance. I investigate and bust some myths. Originally given at Refresh Austin.

0988796fb50136535a69cea314396cfa?s=128

Dave Rupert

November 11, 2014
Tweet

More Decks by Dave Rupert

See All by Dave Rupert
Vague But Exciting (v3)
0988796fb50136535a69cea314396cfa?s=48 davatron5000
1
170
Progressive Web Apps
0988796fb50136535a69cea314396cfa?s=48 davatron5000
8
950
The Art of Being Wrong
0988796fb50136535a69cea314396cfa?s=48 davatron5000
7
710
Automate Your Tools (Fall 2014)
0988796fb50136535a69cea314396cfa?s=48 davatron5000
4
210
Automate Your Tools
0988796fb50136535a69cea314396cfa?s=48 davatron5000
4
420
Mo‘ Pixels, Mo‘ Problems Fall 2013
0988796fb50136535a69cea314396cfa?s=48 davatron5000
1
350
Mo‘ Pixels Mo‘ Problems
0988796fb50136535a69cea314396cfa?s=48 davatron5000
89
46k
Responsive Web Apps
0988796fb50136535a69cea314396cfa?s=48 davatron5000
9
1.3k
jQuery & Responsive Web Design
0988796fb50136535a69cea314396cfa?s=48 davatron5000
36
2.5k

Other Decks in Technology

See All in Technology
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
962920d4608365b332d0c65f9b3e7ba5?s=48 kosako
10
4.3k
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
F3358acf3b3f8423f2db7718b51b5022?s=48 pei0804
4
3.3k
QiitaConference2022
0684ef0f8b92614508e0c323c3619462?s=48 fuwasegu
0
190
マネージャーからみたスクラムと自己管理化
D14332b39b012820d44d362a3e2a8d98?s=48 shibe23
0
1.1k
Target SDK Versionを上げない Notification runtime permission対応
0c5e92294cc0cfba620641c589db9378?s=48 napplecomputer
0
140
誰が正解を知っているのか / Who knows the right answer
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
1
250
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
6aab1831cbfef013b122d4cdb3c6680f?s=48 tinoue
0
200
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
84ece018b6918e3339fe74075ab3dd18?s=48 lovegraph
0
260
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
4dd89003cc8fe9f21d67b0c99b773436?s=48 daiksy
1
440
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
5acaf9241f1c2e50f3bff920050ae597?s=48 hiranofumio
0
130
History of the ML system in KARTE
290d6f09d5a1df2c2ecb6601011fe5c1?s=48 kargo113
1
660
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6ab47a68ee78e84c34731ce12333deff?s=48 toranoana
0
130

Featured

See All Featured
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
62
10k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.7k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.3k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k

Transcript

  1. RWD BLOAT Dave Rupert @davatron5000

  2. ATTACK OF THE EBSITE

  3. paravelinc.com

  4. retailmenot.com

  5. shoptalkshow.com

  6. “RWD IS BAD FOR PERFORMANCE.”

  7. I’M KINDA POST-RWD

  8. POST EXPLAINING WHY RWD IS A PRETTY GREAT AND INEXPENSIVE

    MULTI-DEVICE WEB STRATEGY
  9. None

  10. “RWD IS BAD FOR PERFORMANCE.”

  11. “Okay. What problems are you having?”

  12. “Oh, you know…

  13. “Oh, you know… jQuery

  14. “Oh, you know… jQuery …uhh…

  15. “Oh, you know… jQuery …uhh… web fonts…

  16. “Oh, you know… jQuery …uhh… images web fonts…

  17. “Oh, you know… jQuery …uhh… images web fonts… …uhh…

  18. “Oh, you know… jQuery …uhh… images web fonts… …uhh… web

    apps?

  19. NOT REALLY RWD SPECIFIC

  20. WEBSITES 2014 1000 1333 1667 2000 12/2014 1/2015 2/2015 3/2015

    4/2015 5/2015 6/2015 7/2015 8/2015 9/2015 10/2015 11/2015 Transfer KB Image KB

  21. “RWD IS BAD FOR PERFORMANCE.”

  22. “RWD IS BAD FOR PERFORMANCE.” A WEBSITE IN 2014

  23. “BLAME THE IMPLEMENTATION, NOT THE TECHNIQUE.” – Tim Kadlec

  24. FORDS AREN’T MADE WELL, SO CARS AREN’T A VIABLE MODE

    OF TRANSPORTATION

  25. “…but surely there’s footprint…”

  26. So I examined the best website ever made…

  27. None
  28. None

  29. FACTS I’m p experienced with RWD I care about performance

    I have third-party ads I have third-party comments I have multiple web fonts Including an icon font! I use jQuery GASP! OH THE HORROR! THE SHAME!!!!!!!1

  30. 16% 24% 18% 24% 14% 3% HTML CSS JS Images

    Fonts Analytics & Ads TOTAL: 174kb

  31. CSS: 24kb Media Queries 2.4kb 10% Vendor Prefixes 1.4kb 6%

  32. JS: 41.2kb jQuery 33.1kb 78% Prism.js, Lettering, etc 7kb 17.3%

    FitVids, FitText 2kb 4.7%

  33. Images: 31.92kb

  34. Images: 31.92kb

  35. None

  36. Fonts: 42.6kb Open Sans 31.7kb 54.1% Symbolset 26.8kb 45.8%

  37. TOTAL COST OF RESPONSIVE WEB DESIGN…

  38. 4.4KB

  39. SO, NOT RWD.

  40. LET’S TAKE A DEEPER LOOK

  41. Home Article PageSpeed (Mobile) 79 78 PageSpeed (Desktop) 93 91

    Start Render (3G) 1.3s 1.5s DOMContentLoaded 1.77s 1.83s Speed Index (3G) 1446 1749

  42. Speed Index (n) Some hippie math that tells you how

    fast it “feels” to load your website.

  43. HOW FAST IS FAST ENOUGH?

  44. http://timkadlec.com/2014/01/fast-enough/

  45. http://timkadlec.com/2014/01/fast-enough/

  46. #PROTIP IF PAUL IRISH FROM GOOGLE SAYS YOUR WEBSITE SHOULD

    LOAD WITH A SPEED INDEX UNDER 1000, YOUR WEBSITE SHOULD LOAD WITH A SPEED INDEX UNDER 1000.
  47. None

  48. PROBLEMS No text until ~2.5 seconds Webfonts blocking type rendering?

    Sub-optimal image spriting (172 icon font)? Time to first-byte is ~500ms, has no CSS in it

  49. BASELINE Home Article PageSpeed (Mobile) 79 78 PageSpeed (Desktop) 93

    91 Speed Index (3G) 1446 1749
  50. None

  51. 0. Normalize CSS Reset Normalize CSS Selectors 679 578 Home

    Speed Index 1446 1376 Article Speed Index 1749 1412

  52. 1. Unblock fonts Fonts in <head> Fonts with loadCSS() Home

    Speed Index 1376 1327 Article Speed Index 1412 1284

  53. function loadCSS( href, before, media ){ "use strict"; var ss

    = window.document.createElement( "link" ); var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; var sheets = window.document.styleSheets; ss.rel = "stylesheet"; ss.href = href; ss.media = "only x"; ref.parentNode.insertBefore( ss, ref ); function toggleMedia(){ var defined; for( var i = 0; i < sheets.length; i++ ){ if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){ defined = true; } } if( defined ){ ss.media = media || "all"; } else { setTimeout( toggleMedia ); } } toggleMedia(); return ss; }

  54. 2. No jQuery

  55. 2. No jQuery

  56. 3. SVG Sprites <svg title="Home"> <use xlink:href="/images/spritemap.svg#icon-house"></use> </svg> http://css-tricks.com/svg-sprites-use-better-icon-fonts/

  57. 3. SVG Sprites Icon Font SVG Sprite Home Speed Index

    1327 1264 Article Speed Index 1284 1222

  58. 4. CSS Cleanup Icon Font SVG Sprite Home Speed Index

    1264 938 Article Speed Index 1222 1126 300pts just for cleaning house!

  59. MAKE YOUR WEBSITE FASTER WITH THIS ONE WEIRD TRICK.

  60. THE NEED FOR PERCEIVED SPEED

  61. THE NEED FOR PERCEIVED SPEED

  62. 5. CRITICAL CSS Calculate style rules that appear “above the

    fold” Print them in an inline <style> block in the <head> Lazyload your stylesheet at the bottom of the page

  63. <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello,

    world! </div> <script> function loadCSS( file ) { // stuff } loadCSS('css/stylesheet.css'); </script> </body> </html>

  64. PAINT WITH THE FIRST PACKET

  65. None
  66. None

  67. 5. CRITICAL CSS Normal Critical CSS Home Speed Index 938

    728 Article Speed Index 1126 1065

  68. FINAL RESULTS Home Article PageSpeed (Mobile) 79 → 98 78

    → 96 PageSpeed (Desktop) 93 → 98 91 → 97 Speed Index (3G) 1446 → 728 1749 → 1065

  69. “Yeah, sure. Maybe on a tiny blog. What about a

    real website?”
  70. None

  71. 47 HTTP Requests 3.6MB
 Speed Index 1307

  72. DESIGN DIRECTION

  73. 3 Webfonts 38 images 1.456MB in animated GIFs Chart.js Scroll-triggered

    animations and a Quiz with audio

  74. Two-color PNGs

  75. PERFORMANCE ANXIETY

  76. Enable GZIP Optimize images Minify and compress JS Lazyload images

    Setup Critical CSS Async/Defer Scripts More image optimization

  77. 50 HTTP Requests 2.4MB
 Speed Index 651

  78. None

  79. HAS 5K RETINA MAC AND A 3MB CONNECTION

  80. None
  81. None

  82. TOOLS

  83. None

  84. LESSON: THROTTLING IS SUPER IMPORTANT SINCE MOST OF THE WORLD

    WON’T HAVE GOOGLE FIBER FOR A FEW MORE YEARS. FUCK YEAH, AUSTIN TX.

  85. PNGQuant

  86. None

  87. LESSON:
 DESIGNERS, YOUR JOB IS NOT DONE UNTIL THE SITE

    SHIPS.
  88. None

  89. LESSON:
 PERFORMANCE IS EVERYONE’S JOB. NOT JUST DEVELOPERS.

  90. THANKS Dave Rupert @davatron5000

  91. ONE MORE THING…

  92. OVERUNDER Simple trivia for social people. Follow @overunderapp

  93. THANKS Dave Rupert @davatron5000