Faster CSS

Mike Selander / @Mike_Selander
Old Town Media

Why Care About Performance?

Slow Sites don't Make Money

Each 1-second delay means:

11% fewer page views
16% decrease in customer satisfaction
7% loss in conversions

Three Principles

1. Less files

2. Smaller files

3. Need-to-Know

Some Benchmarks

(for a production site)

< 600kB page weight

< 1.5 sec load time

1. Write Less CSS

margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;

Could be:

margin: 20px 30px;
.oil-gas-section
	.oil-gas-section-inner
		.oil-gas-section-content
			.oil-service-box{}

Could be:

.oil-service-box{}
.alignleft{ float: left; }
.left{ float left; }
.image{ float: left; }

Could be:

.left{ float: left; }

You probably don't need frameworks

For Example

Skeleton: 12kB

Whole Site: 24kB

2. Browsers Read Backwards

.nav ul li ul li

Is Read

li ul li ul .nav
.nav ul li ul li

Could Be

.nav .menu{ }
.nav .submenu{ }
.nav .sub-submenu{ }
etc.

3. Avoid Too Many Paints

Browsers paint when you:

Load

Scroll

Change Width

Hover/Focus

4. Fonts Are Heavy

Flash of Invisible/Unstyled Text

Load fonts in HTML, not @font-face

Use:

Don't Use:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Completely defer loading fonts

body{
	font-family: sans-serif;
}

body.loaded{
	font-family: 'Open Sans', sans-serif;
}

5. Critical CSS

You only need to style above the fold on document load


CritCSS Script

Testing Tools

The Overview

Pingdom tools

Practical Tips

Pagespeed Insights

In Depth

Webpage speed test

Cheba Hut

Before

Static HTML site on Cloudflare
Average of 23.9 seconds to load
~ 15mb page weight
170 resources loaded

2,549 hours/year of waiting

4.837 TB/year

$368,640/year in end-user bandwidth

Results

WordPress site on WP Engine

Before After
Load Time 23.9 .75
Page Weight 15mb 2.4mb
Resources 170 61

Got rid of everything we could

2600 lines of HTML

8 js files

5 css files

Mobile first

Do


@media (min-width: 700px){}
@media (min-width: 900px){}
@media (min-width: 1100px){}
							

Don't


@media (max-width: 700px){}
@media (max-width: 1100px){}
							

.jpg - 418 kb

.png - 637 kb

The End

Old Town Media
@Mike_Selander