Fast, Responsive Designs

1. Fast, Responsive Designs Optimizing Media Queries KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly #optimizemq

2. Aloha! I’m Kimberly Blessing. • 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 Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

3. We care about responsive Design becausewe care about the user’s experience. #optimizemq @obiwankimberly

4. we care about the user’s experience, thereforeWe care about performance. #optimizemq @obiwankimberly Fast, Responsive Designs - #optimizemq Kimberly Blessing - @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, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

6. We know performanceimpacts business. • http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business/ INFOGRAPHIC BY STRANGELOOP NETWORKShttp://www.strangeloopnetworks.com/assets/images/infographic2.jpg Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

7. do media queries impact performance? #optimizemq @obiwankimberly

8. Part 1: Test of different coding Styles Media queries that use cascading expressions 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(…)}} vs • @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(…)}} Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

9. Part 2: Test of Different Code Structures @media blocks consolidated at end @media blocks interspersed throughout /* Component CSS for MVP/LCD */ @media screen and …{ /* Component CSS for “tablet” */ } @media screen and … { /* Component CSS for “desktop” */ } vs • /* All CSS rules for MVP/LCD */ • @media screen and … { • /* All CSS for “tablet” */ • } • @media screen and … { • /* All CSS for “desktop” */ • } x n *MVP = minimum viable product LCD = lowest common denominator Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

10. The test subject: weblinc.com Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

11. Testing Methodology Test Scenarios 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 • 0. No CSS (baseline) • No media queries (MVP/LCD) • Cascading media queries consolidated at end • Cascading media queries interspersed throughout • Targeted screen size media queries consolidated at end • Targeted screen size media queries interspersed throughout Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

12. File size and code complexity * Number of media queries/rules applied at 1024px screen width Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

13. CSS Profiling Statistics * in milliseconds * Average of 5 test runs Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

14. Page load times (First View) * in seconds * Average of 10 test runs, with outliers removed. Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

15. Page load times (First View) Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

16. Page load times (Repeat View) * in seconds * Average of 10 test runs, with outliers removed. Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

17. Page load times (Repeat View) Fast, ResponsiveDesigns - #optimizemq Kimberly Blessing - @obiwankimberly

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. #optimizemq @obiwankimberly

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 Fast, ResponsiveDesigns - #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/ • Profiling CSS for fun and profit. Optimization notes.By kangax (JuriyZaytsev)http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/ • And… follow updates from O’Reilly’s Velocity Web Performance and Operations Conferencehttp://velocityconf.com/https://twitter.com/velocityconf Optimizing Media Queries, CSS Dev Conf 2012^pKimberly Blessing @obiwankimberly

21. MAHALO! Any Questions? KIMBERLY BLESSING obiwan@kimberlyblessing.com @obiwankimberly http://presentations.kimberlyblessing.com/2012/cssdevconf/ Fast, ResponsiveDesigns: optimizing media queries #optimizemq