CSS Performance Tooling.md

CSS Performance Tooling

https://www.youtube.com/watch?v=FEs2jgZBaQA&list=UUzoVCacndDCfGDf41P-z0iA

Page Speed Insights

Ideally, you'd want a page speed score of:

• 85 for Mobile
• 90 for Desktop

Look for throttling in device emulation.

Accidental slowness is a problem many of us face.

Speed Index <= 1000ms

Baseline

• Minify CSS (gulp-cssmin), cssshrink
• Minify HTML (gulp-htmlmin)
• Minify JavaScript (gulp-uglify)
• Optimize images (gulp-imagemin, gulp-svgmin)

Benchmarks of css minifiers: http://goalsmashers.github.io/css-minification-benchmark/

Removing unused CSS

http://i.imgur.com/E78GYAD.png

Audits -> Web Page Performance - CSS Styles http://i.imgur.com/sQycMYx.png

gulp-uncss, http://i.imgur.com/0mVwbCe.png

uncss as a post-processor

http://i.imgur.com/Xkz0r5l.png

Source -> Sass -> CSS -> uncss -> minify -> deliver

Worth it?

Questionable. Really useful on larger sites.

CSS Regression Testing

Build-time styles & UI verification, useful for seeing if stuff changes after doing your uncss builds.

http://i.imgur.com/r6Jk6L3.png

Use PhantomCSS for regression css. CasperJS, PhantomJS, PhantomCSS.

Also: huxley, wraith, needle, csscritic, dpxdt

Optimize Critical Path CSS

We want to display something almost instantly to give the effect that the page is fast.

One trick for this is to just render visible content.

1. One RTT render for above the fold.
2. Fast server response. No redirects
3. Must optimize critical rendering path a. Inline critical CSS b. Remove any blocking JS

Scripting alone is not good enough

What do we really need to do?

1. Extract stylesheets from HTML
   • Choice of extraction or defining *.css files upfront
2. Generate the above the fold CSS
   • Decide on target viewports. Multiple? One sweet spot?
   • Keep it small and lightweight: under 14 KB
3. Inline critical-path CSS in
4. Asychronously load the rest of your styles
   • Remove them from the critical path

npm install critical npm install criticalcss npm install penthouse

How does critical work: http://i.imgur.com/DBYX4D6.png

loadCSS.js

http://i.imgur.com/M499ze2.png

critical for gulp

Challenges

http://i.imgur.com/720kAKW.png

Image optimization

• ImageOptim / Imagemin
• GIFBrewery
• Packed Image Diffs
  • Run OSX screencapture every 0.1 secons
  • Run python anim_encoder.py folderName over the ouput
  • Single packed png with diffs between frames. JS for turning png + json into animation

Videos

Good support for the element, smaller size than a gif!

Start static, just ship a jpg! Load video in later.

mod_pagespeed + ngx_pagespeed

http://i.imgur.com/phwy3YI.png

Automate performance measurement

Can catch some really huge regressions that you implement.

npm install webpagetest webpage test <url> webpagetest test <url> --wait 8000 grunt perfbudget

"Someone regressed our performance budget"

npm install psi -> page speed insights grunt pagespeed npm install phantomas

Tier 3: Stylesheet Complexity Analysis

Easiest way to keep your CSS maintanable is to minimize repetition. (or not write it in the first place)

npm install colorguard -> tells you about collisions between colors

npm install parker -> tells you about duplicate selectors, media queries, etc

StyleStats (website)

#perfmatters

1. Don't guess it, test it
2. Measure, optimize & repeat
   • Validate your optimizations. Make sure output is ~1:1
3. Set a performance budget
   • Set goals. Automate performance measurement.
4. Focus on what matters to your users

Notes

Consider using a 'build' step that goes through your generated sources and cleans them up.

Links & Resources

• http://www.webpagetest.org/
• https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide
• https://developers.google.com/speed/pagespeed/insights/
• http://www.stylestats.org/