css and image optimization
TRANSCRIPT
Agenda
1. Reducing CSS file sizes 2. Rendering 3. Reducing HTTP requests 4. Optimizing image file sizes
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
Long selectors
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
C-style indented declarations
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
What? Not unique enough?
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
One is probably enough
CSS recipe for disaster
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
Lame
So?
#sidebar #menu ul li.blogroll { color: green !important; font-weight: bold;}
Legend: • easy stuff • tough stuff
Reusable CSS
.linklist {color: green; ...}
/* widgets */.module {...}.gallery {...}
/* utilities */ .clearfix {...};.flip {...}
Minifying CSS
• Strip white space, comments • Some micro-optimizations • ~30% savings • can’t rename • YUICompressor, CSSTidy • Inline code too!
http://tools.w3clubs.com/cssmin/
Browser-specific CSS
• IE6,7 vs. others • -webkit-, -moz-, -o- • -ms-, _, *, zoom • automated • savings? 3-5%, mileage vary
http://phpied.com/files/css-parse/css-strip.html
CSS blocks rendering
• The worst component type • Place way at the top • Inline all @media print, etc
http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/
Web Fonts
• Don’t go overboard!• Subset • Gzip!
http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot
Fewer HTTP requests
• Inline images: in CSS sprites with data: URI scheme
http://csssprites.com http://spriteme.org
Fewer HTTP requests
• data: URI scheme
$ php ‐r "echo base64_encode(file_get_contents('my.png'));” iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
MHTML - one part
Content-Location: myimageContent-Transfer-Encoding: base64
iVBORw0KGgoAAAANSU....U5ErkJggg==
MHTML - multi parts Content-Type: multipart/related; boundary="MYSEPARATOR"
--MYSEPARATOR
[here comes part one]
--MYSEPARATOR
[here's part two]
--MYSEPARATOR--
The double-dash of doom
MHTML – all together /*Content-Type: multipart/related; boundary="MYSEPARATOR"
--MYSEPARATORContent-Location: myimageContent-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg==--MYSEPARATORContent-Location: anotherContent-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg==--MYSEPARATOR--*/.myclass { background-image:url(mhtml:http://example.org/styles.css!myimage);}.myotherclass { background-image:url(mhtml:http://example.org/styles.css!another);}
MHTML + data URI
• drawback: repeats the same encoded image • solution: browser-specific CSS • or… an ingenious hack
MHTML + data URI
• image header + css + data /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0
Reality:
IE:
Others:
http://habrahabr.ru/blogs/webdev/90761/
Gradients .hd { background-image: -moz-linear-gradient(top, #641d1c, #f00); background-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00)); filter: [...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000); -ms-filter: "[...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000)"; }
No-image UI
• rounded corners • gradients • glows, shadows • rgba
http://www.phpied.com/ css-performance-ui-with-fewer-images/
http://css3please.com
Multi-purpose “mask” images
• one image on top of different solid colors • for themes, social profiles…
PNG-8
• Palette image (like GIF) • 256 colors (like GIF) • Smaller than GIF (GIF++) • Alpha transparency (GIF++)
Study of the images on the top
1000 sites
Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?
Top 1000 – how?
• URLs from Alexa top sites • open Fiddler • php script that opens/closes Explorer with each URL • enjoy! • Export images from Fiddler
Top 1000 – GIF to PNG
$ optipng *.gif$ pngoptimizercl –file:"*.png”(1 min/1000 files)
23.79% savings
Take-home
1. Think reusable CSS 2. Reduce HTTP requests:
- sprites, data URIs - CSS3, reusable images
3. Smush all images