High Performance CSS

High Performance CSS Antony Kennedy @booshtukka antony@silversquid.com

Aspects of Performance

Aspects of Performance • File Size

Aspects of Performance • File Size • Domains / CDNs

Aspects of Performance • File Size • Domains / CDNs • Minimise HTTP Requests

Aspects of Performance • File Size • Domains / CDNs • Minimise HTTP Requests • Caching

Aspects of Performance • File Size • Domains / CDNs • Minimise HTTP Requests • Caching • Rendering / Selector Efﬁciency

File size * div#a-really-long-class-name { background: #000000 url(“../assets/images/backgrounds/silver bullet background.jpg”) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst-list-item span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; } 325 bytes

File Size Naming Conventions

File Size Naming Conventions • It should make sense

File Size Naming Conventions • It should make sense • Camel case

File Size Naming Conventions • It should make sense • Camel case • Save special characters for special situations

File size * div#a-really-long-class-name { background: #000000 url(“../assets/images/backgrounds/silver bullet background.jpg”) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst-list-item span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; }

File size * div#reallyLongClassName { background: #000000 url(“../assets/images/backgrounds/silver bullet background.jpg”) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; }

File Size Folder Structure/Filenames

File Size Folder Structure/Filenames • Put folders for CSS in the same folder

File Size Folder Structure/Filenames • Put folders for CSS in the same folder • Use hyphens, not spaces

File Size Folder Structure/Filenames • Put folders for CSS in the same folder • Use hyphens, not spaces • Stick to lower case

File Size Folder Structure/Filenames • Put folders for CSS in the same folder • Use hyphens, not spaces • Stick to lower case • Abbreviate

File size * div#reallyLongClassName { background: #000000 url(“../assets/images/backgrounds/silver bullet background.jpg”) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; }

File size * div#reallyLongClassName { background: #000000 url(img/bg/silver-bullet.jpg) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; }

File Size Shortcuts

File Size Shortcuts • Background to set colour

File Size Shortcuts • Background to set colour • Colours

File Size Shortcuts • Background to set colour • Colours • Zeroes need no units

File Size Shortcuts • Background to set colour • Colours • Zeroes need no units • Decimals beginning with zero need no zero

File Size Shortcuts • Background to set colour • Colours • Zeroes need no units • Decimals beginning with zero need no zero • Use shorthand

File Size Shortcuts • Background to set colour • Colours • Zeroes need no units • Decimals beginning with zero need no zero • Use shorthand • Font / Background / Margin / Padding

File size * div#reallyLongClassName { background: #000000 url(/img/bg/silver-bullet.jpg) repeat-x top left; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } body ul li.ﬁrst span a { background-color: #aaffff; border-width: 0px; font-size: 0.78em; }

File size * div#reallyLongClassName { background: black url(/img/bg/silver-bullet.jpg) repeat-x 0 0; margin:0; } body ul li.ﬁrst span a { background: #aff; border: 0; font-size: .78em; }

File Size Syntax

File Size Syntax • We don’t need whitespace except for selectors, shorthand properties, and values with spaces in (these need quotes)

File Size Syntax • We don’t need whitespace except for selectors, shorthand properties, and values with spaces in (these need quotes) • We don’t need the ﬁnal semi-colon

File Size Syntax • We don’t need whitespace except for selectors, shorthand properties, and values with spaces in (these need quotes) • We don’t need the ﬁnal semi-colon • We don’t need comments

Think that would suck? I don’t blame you.

But! Use a miniﬁer and: Forget about it.

File Size Minify

File Size Minify • Use a build script to run YUI Compressor

File Size Minify • Use a build script to run YUI Compressor • Use the right image types

File Size Minify • Use a build script to run YUI Compressor • Use the right image types • Make your images smaller

File Size Minify • Use a build script to run YUI Compressor • Use the right image types • Make your images smaller • Run ImageOptim against your images

File Size Minify • Use a build script to run YUI Compressor • Use the right image types • Make your images smaller • Run ImageOptim against your images • http://imageoptim.pornel.net

File Size Minify • Use a build script to run YUI Compressor • Use the right image types • Make your images smaller • Run ImageOptim against your images • http://imageoptim.pornel.net • Gzip your CSS

Miniﬁed * div#reallyLongClassName{background:blackurl(/img/bg/silver- bullet.jpg) repeat-x 0 0;margin:0}body ul li.ﬁrst span a{background:#aff;border:0;font-size:.78em} 160 bytes

325 bytes to 160 bytes! A 50% reduction!

Number of Requests

Number of Requests • Browsers impose a limit on simultaneous connections per domain

Number of Requests • Browsers impose a limit on simultaneous connections per domain • Cookies are sent with every request

Number of Requests • Browsers impose a limit on simultaneous connections per domain • Cookies are sent with every request • Every request has an overhead

Number of Requests Max Connections

Number of Requests Max Connections • Browsers typically allow 2-6 simultaneous connections per domain

Number of Requests Max Connections • Browsers typically allow 2-6 simultaneous connections per domain • Connections have to queue

Number of Requests Cookies Sent With All Requests

Number of Requests Cookies Sent With All Requests • Cookies can get pretty big

Number of Requests Cookies Sent With All Requests • Cookies can get pretty big • Most resources don’t care about cookies

Number of Requests Use Subdomains or CDNs

Number of Requests Use Subdomains or CDNs • More domains == more simultaneous connections

Number of Requests Use Subdomains or CDNs • More domains == more simultaneous connections • css.company.com

Number of Requests Use Subdomains or CDNs • More domains == more simultaneous connections • css.company.com • img.company.com

Number of Requests Use Subdomains or CDNs • More domains == more simultaneous connections • css.company.com • img.company.com • js.company.com

Number of Requests Use Subdomains or CDNs • More domains == more simultaneous connections • css.company.com • img.company.com • js.company.com • More uncookied domains == smaller requests

Request Overhead ! “Where is the website?”

Request Overhead ! “Hello, website!”

Request Overhead ! “This is what I need.”

Request Overhead ! “In your own time.”

Request Overhead ! “He didn’t. She didn’t!”

Request Overhead ! “No, you hang up. No, I love you the most.”

Number of Requests Fewer Requests > Small Files

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data!

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data! • But! More domains == more DNS lookups.

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data! • But! More domains == more DNS lookups. • Don’t go over the top with domains. But reduce requests where possible.

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data! • But! More domains == more DNS lookups. • Don’t go over the top with domains. But reduce requests where possible. • Concatenate your ﬁles.

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data! • But! More domains == more DNS lookups. • Don’t go over the top with domains. But reduce requests where possible. • Concatenate your ﬁles. • Use CSS sprites for buttons/hover states

Number of Requests Fewer Requests > Small Files • 423ms in total – only 2ms is transfer of data! • But! More domains == more DNS lookups. • Don’t go over the top with domains. But reduce requests where possible. • Concatenate your ﬁles. • Use CSS sprites for buttons/hover states • Data URIs ain’t all that.

Aspects of performance

Aspects of performance • File Size

Aspects of performance • File Size • Domains / CDNs

Aspects of performance • File Size • Domains / CDNs • Minimise HTTP Requests

Aspects of performance • File Size • Domains / CDNs • Minimise HTTP Requests • Caching

Aspects of performance • File Size • Domains / CDNs • Minimise HTTP Requests • Caching • Rendering

Thank you! Antony Kennedy @booshtukka antony@silversquid.com

IT’S ALL ME ME ME ME ME ME ME ME ME ME www.slideshare.net/booshtukka Antony Kennedy @booshtukka Book coming on Apress www.zeroedandnoughted.com BooshTukka on iTunes http://antonykennedy.com MF Boat Event http://mfbo.at antony@silversquid.com

High Performance CSS

by booshtukka on Nov 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

High Performance CSS — Presentation Transcript