Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess! ...
Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess!
TOP 5 MISTAKES OF
MASSIVE CSS!
Nicole Sullivan & Stoyan Stefanov
Thursday, June 24, 2010
FIND US AT...
@stubbornella
@stoyanstefanov
Thursday, June 24, 2010
WHY OPTIMIZE CSS?
• It blocks progressive rendering
test: http://www.phpied.com/files/css-loading/table.php
• It’s verbose (property value pairs cannot be minified like JS)
text-decoration: underline
!= td: u
Thursday, June 24, 2010
TOP 1000 STUDY
1. Grab top Alexa sites
2. Start Fiddler
3. Load each site
4. Export from Fiddler
Thursday, June 24, 2010
<?php
$file = file('alexa.txt');
foreach ($file as $url) {
launch($url);
}
function launch($url) {
try {
$ie = new COM("InternetExplorer.Application");
$ie->Visible = true;
$ie->Navigate2($url);
while ($ie->ReadyState != 4) sleep(1);
$ie->Quit();
} catch (Exception $e) {}
}
?>
Thursday, June 24, 2010
42% DON’T GZIP CSS
Thursday, June 24, 2010
44% HAVE MORE THAN 2
CSS FILES
56%
44%
Thursday, June 24, 2010
56% SERVE CSS WITH
COOKIES
Thursday, June 24, 2010
62% DON’T MINIFY
would get more than 10% savings from YUI compressor
Thursday, June 24, 2010
21% HAVE >100K OF CSS
21%
11%
11%
44%
24%
Thursday, June 24, 2010
HASTE TRACE-BASED PACKAGING
homepage homepage
Date CSS files CSS weight
files weight
Nov 2008 487 1.7MB 24 69KB
May 2009 706 1.9MB 15 64KB
http://velocityconference.blip.tv/file/2293221/ David Wei & Changhao Jiang
Thursday, June 24, 2010
KUDZU
Was introduced to the United States between 1935 and 1950
by the Soil Conservation Service to prevent soil erosion.
Thursday, June 24, 2010
CSS KUDZU!
Thursday, June 24, 2010
“OBJECT ORIENTED CSS
SOUNDS GREAT, BUT WE
HAVE A GIANT MESS!”
how do we get from here to there?
Thursday, June 24, 2010
FACEBOOK DECIDED TO
GO ON A DIET
The CSS was one piece of the puzzle
Thursday, June 24, 2010
Jason Sobel -
Perf Manager Fu
MANY PIECES Nan Gao
Kyle Delong - PHP David Wei & Changhao Jiang BigPipe
Marcel
Laverdet - Tom Occhino - JS
XHP
Makinde Shaun McIntyre -
Adeagbo - JS Automated Spriting
Thursday, June 24, 2010
THEY REDUCED THEIR
RESPONSE TIME BY HALF
in only six months
Thursday, June 24, 2010
WHAT IS OBJECT
ORIENTED CSS?
A philosophy? A framework? A tool?
Thursday, June 24, 2010
MORE LIKE AN EVOLUTION
OF THE LANGUAGE
it makes CSS more powerful
Thursday, June 24, 2010
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Thursday, June 24, 2010
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Until now, we focused all our effort here
Thursday, June 24, 2010
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
But, the architecture lives here
Thursday, June 24, 2010
MUCH LESS CODE
easier to work with newbies
Thursday, June 24, 2010
GRIDS
• 574 bytes
• 14 lines of code
• Percentage widths adapt to
different page sizes
• Includes halfs, thirds, fourths, and
fifths
• No gutters
• Infinite nesting and stacking
Thursday, June 24, 2010
GRANULARITY FAIL
+ STALE RULES
+ UNPREDICTABILITY
+ DUPLICATION
+ SPECIFICITY WARS
= MASSIVE CSS
Thursday, June 24, 2010
5 Text
GRANULARITY FAIL
the CSS objects shouldn’t match the PHP objects
Thursday, June 24, 2010
Thursday, June 24, 2010
Thursday, June 24, 2010
Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
WE WANT TO DO THE
SAME THING WITH CSS
Thursday, June 24, 2010
CREATE THE
BUILDING BLOCKS
Thursday, June 24, 2010
MOST SITES GET THE
GRANULARITY WRONG
and their architecture is set up to fail
Thursday, June 24, 2010
HOW? FIRST, A VISUAL
INVENTORY
Thursday, June 24, 2010
TAKE A PHP OBJECT
Thursday, June 24, 2010
BREAK IT DOWN
Thursday, June 24, 2010
7 SMALLER OBJECTS
Thursday, June 24, 2010
headings
Thursday, June 24, 2010
HEADINGS
Heading - 16px bold #3B5998
Heading - 16px normal #333333
Heading - 15px bold #3B5998 • 12px headings eliminated
Heading - 15px normal #333333
Heading - 14px bold #3B5998 • Blue only for links
Heading - 14px normal #333333
Heading - 13px bold #3B5998 • Bold for all titles
Heading - 13px normal #333333 • Chad Little went through
Heading - 11px bold #3B5998 the entire site eliminating
Heading - 11px normal #333333 duplicates.
Thursday, June 24, 2010
IT’S ALL ABOUT PATTERN
MATCHING
but you have to take a step back
Thursday, June 24, 2010
PHP OBJECTS != CSS OBJECTS
you will be tempted, beware!
Thursday, June 24, 2010
4 Text
STALE RULES
CSS gets crufty
Thursday, June 24, 2010
STALE IS TWO THINGS
❖ Truly stale - rules that are no longer used on the site
❖ Rules used on subsequent PV or activated on user action
Thursday, June 24, 2010
WHAT KIND DO YOU
HAVE?
Thursday, June 24, 2010
WHAT KIND DO YOU
HAVE?
❖ Try dust-me selectors
Thursday, June 24, 2010
WHAT KIND DO YOU
HAVE?
❖ Try dust-me selectors
❖ Track them over time -
‣ changes are more important than an absolute number
Thursday, June 24, 2010
3 Text
UNPREDICTABILITY
Make each object predictable and location independent
Thursday, June 24, 2010
h3
Thursday, June 24, 2010
h3
Thursday, June 24, 2010
A Heading should not become a Heading
in another part of the page.
Thursday, June 24, 2010
AVOID
EXAMPLE
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color undefined for h3, so it will be
‣ unstyled in new modules,
‣ developers forced to write more CSS for the same style
Thursday, June 24, 2010
HOW DO YOU TEST FOR
UNPREDICTABLE CODE?
#foo h3{...}
#bar h3{...}
#baz h3{...}
grep
h[1-6]
Thursday, June 24, 2010
h1-h6
How many? You need site-wide headings
Thursday, June 24, 2010
511
declarations setting styles for h1-h6
56% >10
9% >100
Thursday, June 24, 2010
HEADINGS BEFORE
958
declarations h1-h6
Facebook
Thursday, June 24, 2010
HEADINGS AFTER:
25
Chad Little - Facebook
Thursday, June 24, 2010
2 Text
SPECIFICITY WARS
lobbing specificity grenades over the cube wall
Thursday, June 24, 2010
SPECIFICITY SCREWS UP
THE CASCADE
and the cascade kind of rocks, so how do we use
the good parts?
Thursday, June 24, 2010
SIMPLIFY SPECIFICITY
Thursday, June 24, 2010
.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}
USE HACKS SPARINGLY
And don’t let them change your specificity
Thursday, June 24, 2010
.mod .hd{...}
X
.ie .mod .hd{...}
.weatherMod .hd {...}
USE HACKS SPARINGLY
And don’t let them change your specificity
.mod .hd{color: red; _zoom:1;}
.weatherMod .hd{...}
Thursday, June 24, 2010
#navigation{...}
#header{...}
AVOID STYLING IDS
IDs impact specificity and can’t be reused
IDs are for JS
Thursday, June 24, 2010
X
#navigation{...}
#header{...}
AVOID STYLING IDS
IDs impact specificity and can’t be reused
IDs are for JS
Thursday, June 24, 2010
.nav {color: red !important;}
AVOID !IMPORTANT
except on leaf nodes
Thursday, June 24, 2010
.nav {color: red !important;} X
AVOID !IMPORTANT
except on leaf nodes
Thursday, June 24, 2010
!IMPORTANT
518
declarations using important
12% have greater than 50
Thursday, June 24, 2010
div.error{...}
STYLE CLASSES
rather than elements
Thursday, June 24, 2010
X
div.error{...}
STYLE CLASSES
rather than elements
.error{ most of the code goes here }
Thursday, June 24, 2010
X
div.error{...}
STYLE CLASSES
rather than elements
.error{ most of the code goes here }
div.error{ }
p.error{ exceptions only }
em.error{ }
Thursday, June 24, 2010
html body .myModule div .hd{...}
.myModule2 .hd {...}
GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules
Thursday, June 24, 2010
X
html body .myModule div .hd{...}
.myModule2 .hd {...}
GIVE RULES THE
SAME STRENGTH
Use cascade order to overwrite previous rules
.myModule .hd{...}
.myModule2 .hd{...}
Thursday, June 24, 2010
1 Text
DUPLICATION
CSS kudzu on steroids
Thursday, June 24, 2010
GREP IS YOUR FRIEND
look at the stylesheets globally rather than per page
Thursday, June 24, 2010
margintoo many? You need reset.css
Thursday, June 24, 2010
518
declarations reset margin to zero
64% > 10
14% > 100
Thursday, June 24, 2010
float
too many? You need grids
Thursday, June 24, 2010
733
declarations floated elements
56% > 10
13% > 100
Thursday, June 24, 2010
font-size headings may be disguised in class names
Thursday, June 24, 2010
FONT-SIZE
889
declarations changed the font-size
78% >10
23% >100
Thursday, June 24, 2010
HOW DID FACEBOOK
REDUCE DUPLICATION?
let’s look at an example
Thursday, June 24, 2010
MEDIA BLOCK EXAMPLE
Thursday, June 24, 2010
ALL OF THESE ARE THE
SAME OBJECT
Thursday, June 24, 2010
WHAT DO WE KNOW?
❖ Can be nested
❖ Optional right button
❖ Must clearfix
Thursday, June 24, 2010
WHAT DON’T WE KNOW?
❖ Image width and decoration vary
❖ Right content is unknown
❖ Width unknown
Thursday, June 24, 2010
SEPARATE STRUCTURE
FROM CHROME
Thursday, June 24, 2010
A FEW LINES OF HTML...
<div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img">
<img src="mini.jpg" alt="Stubbornella" />
</a>
<div class="bd">@Stubbornella 14 minutes ago</div>
</div>
Thursday, June 24, 2010
4 LINES OF CSS...
Thursday, June 24, 2010
Thursday, June 24, 2010
HTML SIZE
reduced by 50%
by Stefan Parker
Thursday, June 24, 2010
“Due to these efforts, we cut our average
CSS bytes per page by 19% (after gzip) and
HTML bytes per page by 44% (before
gzip).”
Jason Sobel
http://www.facebook.com/note.php?note_id=307069903919
Thursday, June 24, 2010
Nikolai Panasenko
1–4 of 4 previous next Post a comment