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

3 WE CARE ABOUT RESPONSIVE DESIGN BECAUSE WE CARE ABOUT THE USER’S EXPERIENCE.

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

5 WE KNOW CSS IMPACTS PERFORMANCE. selectors/ FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 5

6 WE KNOW PERFORMANCE IMPACTS BUSINESS. improves-online-business/ FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 6 INFOGRAPHIC BY STRANGELOOP NETWORKS

7 DO MEDIA QUERIES IMPACT PERFORMANCE?

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

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

10 THE TEST SUBJECT: WEBLINC.COM FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 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 11

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

13 CSS PROFILING STATISTICS CSS ParsingReflow Style RecalculationLayoutPaint No CSS No MQs Cascade/End Cascade/Inter Targeted/End Targeted/Inter FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 13 * Average of 5 test runs * in milliseconds

14 PAGE LOAD TIMES (FIRST VIEW) IE 8IE 9IE 10FirefoxChromeiPhone No CSS No MQs Cascade/End Cascade/Inter Targeted/End Targeted/Inter FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 14 * Average of 10 test runs, with outliers removed. * in seconds

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

16 PAGE LOAD TIMES (REPEAT VIEW) IE 8IE 9IE 10FirefoxChromeiPhone No CSS No MQs Cascade/End Cascade/Inter Targeted/End Targeted/Inter FAST, RESPONSIVE DESIGNS - #OPTIMIZEMQ KIMBERLY BLESSING 16 * Average of 10 test runs, with outliers removed. * in seconds

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

18 DO MEDIA QUERIES IMPACT PERFORMANCE? 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

20 REQUIRED READING Reflows & Repaints: CSS Performance making your JavaScript slow? By stubbornella (Nicole Sullivan) performance-making-your-javascript-slow/ performance-making-your-javascript-slow/ Profiling CSS for fun and profit. Optimization notes. By kangax (Juriy Zaytsev) notes/ notes/ And… follow updates from O’Reilly’s Velocity Web Performance and Operations Conference OPTIMIZING MEDIA QUERIES, CSS DEV CONF 2012^PKIMBERLY 20

21 MAHALO! ANY QUESTIONS? KIMBERLY 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