Presentation is loading. Please wait.

Presentation is loading. Please wait.

FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE CSS Dev Conference.

Similar presentations


Presentation on theme: "FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE CSS Dev Conference."— Presentation transcript:

1 FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference December 5, 2012 #OPTIMIZEMQ

2 From Philadelphia, PA Known for front-end architecture work at AOL, PayPal, and Comcast Representative on the HTML and CSS Working Groups and the Web Standards Project Co-author of HTML5 Cookbook and Adapting to Web Standards Aloha! I’m Kimberly Blessing. 2 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY

3 WE CARE ABOUT RESPONSIVE DESIGN BECAUSE WE CARE ABOUT THE USER’S EXPERIENCE. #OPTIMIZEMQ @OBIWANKIMBERLY

4 WE CARE ABOUT THE USER’S EXPERIENCE, THEREFORE WE CARE ABOUT PERFORMANCE. FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY #OPTIMIZEMQ @OBIWANKIMBERLY

5 WE KNOW CSS IMPACTS PERFORMANCE. http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css- selectors/ http://www.stubbornella.org/content/2010/07/01/top-5-mistakes-of-massive-css/ http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/ FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 5

6 WE KNOW PERFORMANCE IMPACTS BUSINESS. http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites- improves-online-business/ FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 6 INFOGRAPHIC BY STRANGELOOP NETWORKS http://www.strangeloopnetworks.com/assets/images/infographic2.jpg

7 DO MEDIA QUERIES IMPACT PERFORMANCE? #OPTIMIZEMQ @OBIWANKIMBERLY

8 PART 1: TEST OF DIFFERENT CODING STYLES MEDIA QUERIES THAT USE CASCADING EXPRESSIONS @media screen and (min-width: 600px) { body {color:black} } @media screen and (min-width: 768px) { body {margin:1em} } @media screen and (min-width: 975px) { body {background:url(…)} } MEDIA QUERIES TARGETED TO SPECIFIC SCREEN SIZES @media screen and (min-width: 600px) and (max-width: 767px) { body {color:black} } @media screen and (min-width: 768px) and (max-width: 974px) { body {color:black; margin:1em} } @media screen and (min-width: 975px) { body {color:black; margin:1em; background:url(…)} } FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 8 vs

9 PART 2: TEST OF DIFFERENT CODE STRUCTURES @MEDIA BLOCKS CONSOLIDATED AT END /* All CSS rules for MVP/LCD */ @media screen and … { /* All CSS for “tablet” */ } @media screen and … { /* All CSS for “desktop” */ } @MEDIA BLOCKS INTERSPERSED THROUGHOUT /* Component CSS for MVP/LCD */ @media screen and … { /* Component CSS for “tablet” */ } @media screen and … { /* Component CSS for “desktop” */ } FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 9 vs *MVP = minimum viable product LCD = lowest common denominator x n

10 THE TEST SUBJECT: WEBLINC.COM FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 10

11 TESTING METHODOLOGY TEST SCENARIOS 0. No CSS (baseline) 1.No media queries (MVP/LCD) 2.Cascading media queries consolidated at end 3.Cascading media queries interspersed throughout 4.Targeted screen size media queries consolidated at end 5.Targeted screen size media queries interspersed throughout DATA COLLECTION File size and code complexity metrics CSS profiling statistics, collected using Opera’s Developer Tools Page load times for home page (first and repeat views) on major desktop browsers and iPhone, collected with WebPageTest FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 11

12 FILE SIZE AND CODE COMPLEXITY Compressed (bytes) Comp + GZIP (bytes)# MQs # MQs applied # CSS rules applied No CSS ----- No MQs22,2265,46700251 Cascade/End43,6949,95484485 Cascade/Inter44,4349,2982821485 Targeted/End53,22110,10782445 Targeted/Inter54,1529,4772913445 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 12 * Number of media queries/rules applied at 1024px screen width

13 CSS PROFILING STATISTICS CSS ParsingReflow Style RecalculationLayoutPaint No CSS4.20.2 11.26.2 No MQs6.02.213.49.6224.2 Cascade/End8.03.817.616.8237.0 Cascade/Inter9.43.218.417.6252.0 Targeted/End9.62.816.817.2256.8 Targeted/Inter9.63.020.217.4251.2 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 13 * Average of 5 test runs * in milliseconds

14 PAGE LOAD TIMES (FIRST VIEW) IE 8IE 9IE 10FirefoxChromeiPhone No CSS1.01.11.21.91.33.8 No MQs1.10.91.01.81.03.5 Cascade/End1.00.81.01.91.24.8 Cascade/Inter1.11.0 2.11.24.5 Targeted/End1.21.31.01.91.14.7 Targeted/Inter1.40.91.02.01.24.6 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 14 * Average of 10 test runs, with outliers removed. * in seconds

15 PAGE LOAD TIMES (FIRST VIEW) FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 15

16 PAGE LOAD TIMES (REPEAT VIEW) IE 8IE 9IE 10FirefoxChromeiPhone No CSS0.50.30.21.30.41.4 No MQs0.50.3 1.40.41.4 Cascade/End0.50.3 1.40.51.7 Cascade/Inter0.50.3 1.50.51.6 Targeted/End0.60.40.31.30.41.7 Targeted/Inter0.50.3 1.50.51.6 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 16 * Average of 10 test runs, with outliers removed. * in seconds

17 PAGE LOAD TIMES (REPEAT VIEW) FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY 17

18 DO MEDIA QUERIES IMPACT PERFORMANCE? #OPTIMIZEMQ @OBIWANKIMBERLY YES, MEDIA QUERY SYNTAX AND CODE STRUCTURE HAVE AN IMPACT ON PERFORMANCE. HOWEVER, ATTEMPTING TO OPTIMIZE MEDIA QUERIES MAY NOT YIELD SIGNIFICANT RESULTS.

19 CSS OPTIMIZATION RECOMMENDATIONS Understand any resets and frameworks you use. Trim unused code and rewrite inefficient selectors or declarations. Schedule periodic code reviews to prune unused code, based both on old content and old browsers. Reevaluate your browser support matrix. Limit the use of browser hacks, polyfills, and prefixed properties. Profile CSS selectors and optimize for right-to-left parsing. Regularly test site performance, compare data before and after code changes to understand impact 19 FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING - @OBIWANKIMBERLY

20 REQUIRED READING Reflows & Repaints: CSS Performance making your JavaScript slow? By stubbornella (Nicole Sullivan) http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css- performance-making-your-javascript-slow/ http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css- performance-making-your-javascript-slow/ Profiling CSS for fun and profit. Optimization notes. By kangax (Juriy Zaytsev) http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization- notes/ http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization- notes/ And… follow updates from O’Reilly’s Velocity Web Performance and Operations Conference http://velocityconf.com/https://twitter.com/velocityconf http://velocityconf.com/https://twitter.com/velocityconf OPTIMIZING MEDIA QUERIES, CSS DEV CONF 2012^PKIMBERLY BLESSING @OBIWANKIMBERLY 20

21 MAHALO! ANY QUESTIONS? KIMBERLY BLESSING obiwan@kimberlyblessing.com @obiwankimberly http://presentations.kimberlyblessing.com/2012/cssdevconf/ fin FAST, RESPONSIVE DESIGNS: OPTIMIZING MEDIA QUERIES #OPTIMIZEMQ


Download ppt "FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE CSS Dev Conference."

Similar presentations


Ads by Google