0:00 / 0:00

CSSconf EU 2014 | Addy Osmani: CSS Performance Tooling

Name: CSSconf EU 2014 | Addy Osmani: CSS Performance Tooling
Uploaded: 2014-10-14T10:43:27Z
Duration: 46 min 28 s
Channel: JSConf
Description: Addy Osmani explains how to automate CSS performance optimization, including critical-path CSS generation and removing unused styles.

JSConf

286K subscribers • 33 videos on Hallway

YouTube

Recommended by 2 people: 1 in engineering communities and 1 curated list.
Presented by Addy Osmani, Google
May be out of date. The tools, versions or practices it shows have likely moved on.

Intermediate. Assumes working knowledge.

40K views12 years ago2 recommendations

Web development CSS and layout Web performance

Addy Osmani explains how to automate CSS performance optimization, including critical-path CSS generation and removing unused styles.

You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in less than 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering duplicate selectors, colors and more. Along the way, we might even optimize a well known conference site and send them a pull request to help keep the web fast. The tools we'll discuss can be used with Grunt, Gulp, Make or horse so strap yourself in and get ready for a ride into the crazier side of CSS performance optimization. ADDY OSMANI Addy Osmani is an engineer at Google focusing on tools to help improve developer productivity and satisfaction. He works with the Chrome team on projects like Polymer and is the the lead engineer on Web Starter Kit and Yeoman. He is known for his in-depth articles on web application architecture and the front-end. Outside of Google, Addy enjoys hacking on open-source projects like TodoMVC, Grunt-UnCSS and Critical. He has authored books on JavaScript design patterns and Backbone.js. twitter.com/addyosmani addyosmani.com/

Why it's here

2 people recommend this

What people say. Recommended for learning how to optimize above-the-fold CSS and improve page load performance.

programming-talkscurated list on GitHubRecommends

Under “CSS”

CSS Performance Tooling 00:46:28 by **Addy Osmani** (2014)

View the list

u/TheDude121in r/Frontend • 12 years agoRecommends

On “Do you guys personally practice `Eliminate render-blocking JavaScript and CSS in above-the-fold content` as Google PageSpeed states?”

Most websites can easily work flawlessly with jquery (and its dependent scripts) in the footer. Unless your website have an app-like properties, you don't really need scripts in the head. About inlining some above-the-fold css, depends if its really gonna make a difference, mostly based on the main css file size, and the percentage of it being used on that page. There is a great talk by Addy Osmany from Google on this topic, where he demonstrates a complete website optimization process.

2View on Reddit