fast, responsive designs optimizing media queries kimberly blessing production lead at weblinc...
TRANSCRIPT
![Page 1: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/1.jpg)
FAST,
RESPO
NSIVE
DESIGNS
OP
TI M
I ZI N
G M
ED
I A Q
UE
RI E
S
KIMBER
LY B
LESSIN
G
P RO
DU
CT I O
N L
E AD
at
WE B
L I NC
e CO
MM
E RCE
kimber
lyble
ssin
g.com
@
obiw
ankim
berly
CSS Dev
Con
fere
nce
Decem
ber 5
, 2012
# O P T I M I Z E M Q
![Page 2: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/2.jpg)
• 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.
2FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY
![Page 3: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/3.jpg)
WE C
ARE ABOUT
RESPONSIV
E DESIG
N
BECAUSE
WE C
ARE ABOUT
THE
USER’S E
XPERIE
NCE.
# O P T I M I Z E M Q @ O B I WA N K I M B E R LY
![Page 4: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/4.jpg)
WE C
ARE ABOUT
THE U
SER’S
EXPERIE
NCE, THEREFO
RE
WE C
ARE ABOUT
PERFO
RMANCE.
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY
# O P T I M I Z E M Q @ O B I WA N K I M B E R LY
![Page 5: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/5.jpg)
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/
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 5
![Page 6: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/6.jpg)
WE KNOW PERFORMANCE IMPACTS BUSINESS.http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
/
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 6
INFOGRAPHIC BY STRANGELOOP NETWORKShttp://www.strangeloopnetworks.com/assets/images/infographic2.jpg
![Page 7: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/7.jpg)
DO MEDIA
QUER
IES IM
PACT
PERFO
RMANCE?
# O P T I M I Z E M Q @ O B I WA N K I M B E R LY
![Page 8: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/8.jpg)
PART 1: TEST OF DIFFERENT CODING STYLESMEDIA 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(…)}}
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 8
vs
![Page 9: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/9.jpg)
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” */
}
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 9
vs
*MVP = minimum viable product LCD = lowest common denominator
x n
![Page 10: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/10.jpg)
THE TEST SUBJECT: WEBLINC.COM
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 10
![Page 11: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/11.jpg)
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
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 11
![Page 12: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/12.jpg)
FILE SIZE AND CODE COMPLEXITY
Compressed (bytes)
Comp + GZIP
(bytes) # MQs# MQs applied
# CSS rules
applied
No CSS - - - - -
No MQs 22,226 5,467 0 0 251
Cascade/End
43,694 9,954 8 4 485
Cascade/Inter
44,434 9,298 28 21 485
Targeted/End
53,221 10,107 8 2 445
Targeted/Inter
54,152 9,477 29 13 445
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 12
* Number of media queries/rules applied at 1024px screen width
![Page 13: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/13.jpg)
CSS PROFILING STATISTICS
CSS Parsing Reflow
Style Recalculat
ion Layout Paint
No CSS 4.2 0.2 0.2 11.2 6.2
No MQs 6.0 2.2 13.4 9.6 224.2
Cascade/End
8.0 3.8 17.6 16.8 237.0
Cascade/Inter
9.4 3.2 18.4 17.6 252.0
Targeted/End
9.6 2.8 16.8 17.2 256.8
Targeted/Inter
9.6 3.0 20.2 17.4 251.2
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 13
* Average of 5 test runs
* in milliseconds
![Page 14: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/14.jpg)
PAGE LOAD TIMES (FIRST VIEW)
IE 8 IE 9 IE 10 Firefox Chrome iPhone
No CSS 1.0 1.1 1.2 1.9 1.3 3.8
No MQs 1.1 0.9 1.0 1.8 1.0 3.5
Cascade/End
1.0 0.8 1.0 1.9 1.2 4.8
Cascade/Inter
1.1 1.0 1.0 2.1 1.2 4.5
Targeted/End
1.2 1.3 1.0 1.9 1.1 4.7
Targeted/Inter
1.4 0.9 1.0 2.0 1.2 4.6
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 14
* Average of 10 test runs, with outliers removed.
* in seconds
![Page 15: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/15.jpg)
PAGE LOAD TIMES (FIRST VIEW)
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 15
IE8
IE9
IE10
Fire
fox
Chrom
e
iPho
ne0.0
1.0
2.0
3.0
4.0
5.0
No CSSNo MQsCascade/EndCascade/InterTargeted/EndTargeted/Inter
![Page 16: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/16.jpg)
PAGE LOAD TIMES (REPEAT VIEW)
IE 8 IE 9 IE 10 Firefox Chrome iPhone
No CSS 0.5 0.3 0.2 1.3 0.4 1.4
No MQs 0.5 0.3 0.3 1.4 0.4 1.4
Cascade/End
0.5 0.3 0.3 1.4 0.5 1.7
Cascade/Inter
0.5 0.3 0.3 1.5 0.5 1.6
Targeted/End
0.6 0.4 0.3 1.3 0.4 1.7
Targeted/Inter
0.5 0.3 0.3 1.5 0.5 1.6
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 16
* Average of 10 test runs, with outliers removed.
* in seconds
![Page 17: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/17.jpg)
PAGE LOAD TIMES (REPEAT VIEW)
FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY 17
IE8
IE9
IE10
Fire
fox
Chrom
e
iPho
ne0.0
0.5
1.0
1.5
2.0
No CSSNo MQsCascade/EndCascade/InterTargeted/EndTargeted/Inter
![Page 18: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/18.jpg)
DO MEDIA
QUER
IES IM
PACT
PERFO
RMANCE?
# O P T I M I Z E M Q @ O B I WA N K I M B E R LY
YES , MED IA QUERY SYNTAX AND CODE STRUCTURE HAVE AN IMPACT ON PERFORMANCE .
HOWEVER , ATTEMPT ING TO OPT IM IZE MED IA QUER IES MAY NOT Y IELD S IGN IF ICANT RESULTS .
![Page 19: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/19.jpg)
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
19FA S T , R E S P O N S I V E D E S I G N S - # O P T I M I Z E M QK I M B E R LY B L E S S I N G - @ O B I WA N K I M B E R LY
![Page 20: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/20.jpg)
O P T I M I Z I N G M E D I A Q U E R I E S , C S S D E V C O N F 2 0 1 2 ^ PK I M B E R LY B L E S S I N G @ O B I WA N K I M B E R LY
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 (Juriy Zaytsev)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
20
![Page 21: FAST, RESPONSIVE DESIGNS OPTIMIZING MEDIA QUERIES KIMBERLY BLESSING PRODUCTION LEAD at WEBLINC eCOMMERCE kimberlyblessing.com @obiwankimberly CSS Dev Conference](https://reader030.vdocuments.site/reader030/viewer/2022032517/56649c995503460f9495686f/html5/thumbnails/21.jpg)
MAHALO!
AN
Y Q
UE
ST
I ON
S?
KIMBER
LY B
LESSIN
G
obiw
an@
kimber
lyble
ssin
g.com
@
obiw
ankim
berly
http://
prese
ntatio
ns.kim
berlyb
less
ing.co
m/2
012/cssd
evco
nf/
finFA S T , R E S P O N S I V E D E S I G N S : O P T I M I Z I N G M E D I A
Q U E R I E S# O P T I M I Z E M Q