Sunday, February 7

Notes : CSSconf EU 2014 | Addy Osmani: CSS Performance Tooling

When you want to be fast, you have to give up the things slowing you down.



3 Tiers of Optimization Tooling

1. Baseline
Minification, concatenation, Image optimization, Compression (Gzip, Zopfil), Asnyc scripts, Leverage caching, WOFF2 for fonts, Spriting. Avoid redirects

2. Get fast, Stay fast.
Inlining critical css, deferring non-critical assets to avoid render blocking, removing unused CSS, visual regression testing to verify changes. Performance bench-marking.

3. Nice to haves
Reduce duplicate colors, selectors, font-families, sizes.

Try to ship something in the range of 0 - 1000ms time. Sites that are slow to load loose visitors.

Step 1 : Measurement
Speed Index - The average time at which visible parts of the page are displayed. Expressed in milliseconds and dependent on size of the viewport.

Lower speed index score is better.

Step 2 : Performance Budget
It is basically you saying that I have this minimum expectations. For example, trying to get 1 sec page load.
Max 200ms server response.

Use webpagetest webapp..

Google's pagespeed app is also very useful. Ideally you should have a pagespeed of 85 on mobile and 90 on desktop.

The average page size is 1.8MB. Most of the size is due to images.

Use gulp image minification tools, css minification tools etc.
Optimizing HTML, CSS, Javascript etc.

What else advanced techniques that we can do to improve performance.?

1) Removing unused CSS.
Google devtools has an option which tells you how much unused CSS you have.

UNCSS - Powerful tool.



CSS Regression testing
Use phantomcss and regression.js

2) Optimize critical path CSS
Optimize critical rendering path. Just render visible content.
To do that, we can do inline css instead for it to fetch for the CSS file.
This is not just a scripting problem and it cannot be solved alone with javascript. This problem is a Multi part problem and needs to be automated. What do we really need to do?



a) Extract stylesheets from HTML - Choice of extraction of defining *.css files upfront

b) Generate the above the fold CSS - Decide on target viewports. Multiple? One sweet spot? Keep it small and lightweight under 14kb

c) Inline critical-path CSS in

d) Asynchronously load the rest of your styles - Remove them from the critical path.

3) Optimizing Images
Tools available and can be used
ImageOptim, GIFBrewery, Packed Image Diffs

Is it important for you to show animation on screen? Will just a jpeg not work? Important question when developing a website.

4) Use of mod_pagespeed enabled on your server.

===================================================================

Automate Performance measurement
1) WebPageTest CLI
2) Grunt-PerfBudget
3) PageSpeed Insights CLI
4) Grunt-PageSpeed
5) Phantomas CLI

Stylesheet complexity Analysis
Easiest way to keep CSS minimal is to minimize the repeatations.
Some tools like
1) Parker
2) Grunt-ColorGaurd
3) Stylestats



Be the first one to Comment!!!

Post a Comment