CSS Performance Tooling

Presented at CSSConf.eu, September 2014.

Video: https://www.youtube.com/watch?v=FEs2jgZBaQA

You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in < 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.

Transcript

1. @addyosmani +AddyOsmani CSS PERFORMANCE TOOLING
2. When you want to be fast, you have to give up the things slowing you down.
3. Optimising Performance.
4. 3 Tiers Of Optimization Tooling 1. Baseline ◦ Minification, Concatenation, Image optimization, Compression (GZip, Zopfli), Async 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 benchmarking. 3. Nice to haves ◦ Reduce duplicate colors, selectors, font-families, sizes.
5. Waiting for my page to render. Why care about optimization tooling?
6. 300-1000ms 1 second + 10 seconds + Later. 0-100ms Human Perception in 2014
7. Case Study Assume cable speeds used for testing unless otherwise noted.
8. Optimizing JSConf.eu
9. JSConf.eu Friday 3G
10. JSConf.eu Friday Cable
11. JSConf.eu Monday Cable
12. Make JSConf.eu an instant experience.
13. Make your site an instant experience.
14. Step 1: Measure
15. https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/metrics/speed-index The average time at which visible parts of the page are displayed. Expressed in milliseconds and dependent on size of the viewport. Speed Index
16. Lower score is always better SI Visualized
17. ~1s page load Max 200ms server response time Speed Index under 1000 Performance Budget
19. Monday Mobile 3G (Fast) Cable
21. Friday Ideally 85 Mobile 90 Desktop
22. Monday Regression
23. https://www.flickr.com/photos/tamakisono/668326457
26. https://www.flickr.com/photos/mipsyretro/5593568015 #ILoveRoamingCharges
28. Profiling Tools Are Now Everywhere!
29. Accidental slowness is a problem many of us face.
30. soup.io The web
31. HTTPArchive - August 2014 Average page size 1.8MB ~1.2MB images ~0.3MB scripts & styles
32. http://perf.fail/ Perf.fail
33. Step 2: Optimise
34. It’s basically Tinder for Node modules
36. Party like it’s 1977.
37. Build Tools Make Had no logo so it gets a platypus
38. Minify CSS, HTML, JS & Images
42. Minify duplicates, colors, keyframes, pseudos, filters, font-weight
45. CSS, JS, HTML, Image minification New Speed Index 1321 Old Speed Index 2093
46. Remove unused CSS
48. HTML CSS DOM CSSOM Render Tree Layout Paint Network Deliver only the goods that will be used Hello • Wrong way to think about unused CSS ◦ “I just want to ship the CSS for current page” ◦ “I’m going to ignore styles used in other pages” • Right way ◦ What site-wide CSS am I shipping that is not used by any pages?
49. Isn’t using 56% of the site wide styles being shipped Page A
50. Isn’t using ~56% of them Page B
51. Isn’t using ~59% Page C
52. Pattern? Maybe. Optimize, then check mileage.
54. Removing unused CSS Load files and execute JavaScript Extract Stylesheets from HTML Filter out selectors not found in HTML PhantomJS css-parse Stylesheets concatenated & parsed Remaining rules converted back to CSS
56. uncss: { dist: { options: { ignore : ['#added_at_runtime', /test\-[0-9]+/], media : ['(min-width: 700px) handheld and (orientation: landscape)'], csspath : '../public/css/', raw : 'h1 { color: green }', stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'], ignoreSheets : [/fonts.googleapis/], urls : ['http://localhost:3000/mypage', '...'], // Deprecated timeout : 1000, htmlroot : 'public', report : 'min' }, files: { 'dist/css/tidy.css': ['app/index.html', 'app/about.html'] } } } Gruntfile.js
57. uncss: { dist: { files: { '_site/stylesheets/screen.css': [ '_site/index.html', '_site/sponsors.html', 'site/_news.html', '_site/schedule.html', '_site/speakers/index.html', ... JSConf Gruntfile.js Include ALL site URLs
58. UnCSS as a post-processor HTML, JavaScript Sass Minified HTML CSS UnCSS Minify Done Source Minified JavaScript Works with Sass, Less, Stylus
59. Sizing up the average Bootstrap page MINIFIED ORIGINAL STYLES UNCSS + MINIFICATION 120KB 110KB 11KB (1) ~ 90% improvement (2) Based on average improvements reported by UnCSS users
61. Sizing up JSConf.eu styles MINIFIED ORIGINAL STYLES UNCSS + MINIFICATION 20KB 11KB 7KB (1) > 50% improvement on minification. Worth it? Questionable. (2) UnCSS is most useful when using a CSS library or have a large site
62. Unused CSS removed Speed Index 1316 Old Speed Index 2093
63. Warnings We cannot identify with 100% certainty all the CSS that you still need for your site, since it's likely to be missing some CSS that you will actually need in some cases. Dynamically injected styles are supported, but have many edge-cases where they may lead to inaccurate removals of CSS. When removing unused CSS, don’t guess it. Test it.
64. CSS Regression Testing Useful for more than just catching imperfect updates
65. Build-time styles & UI verification Before After Diff
67. Why care about it? It’s useful Regressions in your UI can be hard to identify Cost of manual testing gets higher with responsive layouts Can drive tests with fake data if needed Solution Visual regression tooling + Resemble.js
68. npm install phantomcss Install grunt.initConfig({ 'phantomcss-gitdiff': { options: { baseUrl: 'http://localhost:3000/', serverRoot: 'test/files/' }, mobile: { options: { screenshots: 'screens/mobile/', results: 'failures/mobile/', viewportSize: [320, 480] }, src: ['test/files/{,**/}*.html'] ... Gruntfile.js PhantomCSS PhantomJS - scriptable headless browser CasperJS - navigation scripting & caching PhantomCSS - screenshot comparison library npm install grunt-phantomcss-gitdiff Grunt task
69. Verifies visual optimizations didn’t mess up.
70. 0.06% difference from the original
71. Warnings Imperfect solution Not as useful on pages with mutable content that changes regularly More difficult to use on complex applications Your mileage may vary
72. Evaluate your options and choose the best tool for your use-case • Huxley • Wraith • Needle • CSSCritic • dpxdt Many alternatives
73. Optimize Critical Path CSS
74. Our goal is to show content asap
75. 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 JavaScript Don’t render the whole page!
76. // for each selector in my site.css var elements = document.querySelectorAll('.someClass'); // for each element on the page matched for (var i=0; i < elements.length; i++) { // if "above the fold" if (elements[i].getBoundingClientRect().top > window.innerHeight) { // Keep the CSS rules that use this selector keep = true; } } Scripting alone is not good enough https://gist.github.com/PaulKinlan/6284142 Harder to handle.. Special characters - content: '\2192' etc. @-Rules - @font-face, @media, @keyframe pseudo-selectors - :before, :hover
77. Multi-part problem to automate. 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 <head> 4. Asynchronously load the rest of your styles ◦ Remove them from the critical path
78. New Critical-path CSS tools which builds on Penthouse <333 $ npm install --save-dev penthouse CriticalCSS by FilamentGroup is also solid $ npm install --save-dev criticalcss Critical $ npm install --save-dev critical
79. Extract stylesheets (Oust) Generate Critical path CSS for a viewport (Penthouse) Inline styles in <head> (inline-critical) Output Source Critical’s workflow Inject loadCSS & async load site. css Wrap link tags in <noscript> for users with JS disabled
80. function loadCSS( href, before, media ){ var ss = window.document.createElement( "link" ); var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; ss.rel = "stylesheet"; ss.href = href; ss.media = "only x"; // inject link ref.parentNode.insertBefore( ss, ref ); setTimeout( function(){ ss.media = media || "all"; } ); return ss; } Set media back to all so the stylesheet applies once it loads Async load CSS with loadCSS.js Temporarily set media to something non- matching. Fetches without blocking render. loadCSS(‘site.css’) http://filamentgroup.com/lab/performance-rwd.html
82. critical: { dist: { options: { base: './', css: [ 'app/styles/main.css', 'app/styles/bootstrap.css' ], width: 320, height: 70 }, src: 'app/index.html', dest: 'app/styles/critical.css' } } Specify stylesheets or use Oust to extract them grunt-critical Specify viewport
83. Critical-path CSS optimized version New Speed Index 1225 Old Speed Index 2093
84. Challenges Background images or Fonts missing Relative paths may need updating to absolute Unstyled content showing The most common problem is with clearing floats. Use the clear-fix-pattern. Special glyphs not showing/showing incorrectly When using hexadecimal format in CSS it needs to be prepended with a backslash, like so: \2192
86. Bottleneck: that 5MB GIF...
88. (1) Optimizations made with best tools available ▪ PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, ▪ JpegOptim, jpegrescan, jpegtran, and Gifsicle. (2) Animated GIFs are HARD to automate optimizations to ImageOptim / Imagemin :(
89. GIFBrewery ~1MB half-res, 256 colors ~4MB full-res, 256 colors
90. (1) Run OSX screencapture every 0.1 seconds ▪ Get a folder of images (PNGs) (2) Run `python anim_encoder.py folderName` over the output (3) Single packed PNG with diffs between frames. JS for turning PNG + JSON into animation Packed Image Diffs https://github.com/benvanik/anim_encoder with thanks to @umaar for introducing me to the above workflow (1) Works best for UI where only small areas change between frames (2) ~600KB for our animation. Introduces more render-blocking JS.
91. <video> ~450KB
93. Minify + UnCSS + <video> New Speed Index 1327 Old Speed Index 2093
94. static?
95. Minify + UnCSS + static header Speed Index 923 Old Speed Index 2093
96. grunt-critical + optimisations + static header Speed Index 917 Old Speed Index 2093
97. What’s important to you?
98. Automating Tier 1 + Tier 2
99. A magic bullet? No, Timmy
100. (1) Client renders page, custom JS beacons back ATF CSS styles ▪ PageSpeed gathers critical CSS beacons from visitors (2) Critical CSS is inlined... ▪ Remaining CSS loaded after first paint + https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css ModPagespeedEnableFilters prioritize_critical_css # Apache pagespeed EnableFilters prioritize_critical_css # Nginx • modpagespeed.com • ngxpagespeed.com
101. Tuesday: JSConf.eu New images Old Speed Index 2149
102. Optimized: JSConf.eu + mod_pagespeed Old Speed Index 2149 New Speed Index 1310
103. Mileage does vary (a few changes later..) Old Speed Index 1310 New Speed Index 1542
104. Automate performance measurement Detect when you’ve fallen off the fast-path
105. WebPageTest CLI $ npm install -g webpagetest Install $ webpagetest test <url> $ webpagetest test <url> -- wait 8000 Usage Jenkins
106. Grunt-PerfBudget http://cognition.happycog.com/article/grunt-plugins-reviewed $ npm install grunt-perfbudget Install 1 2 3 Budget in ms for render, KB for page weight Over budget? Task fails and reports an error. GitHub PRs will show the build failed
107. PageSpeed Insights CLI $ npm install -g psi Install $ psi <url> -- strategy=mobile Usage
108. Grunt-PageSpeed $ npm install grunt-pagespeed $ grunt pagespeed Usage Install Set performance thresholds for mobile/desktop!
109. Phantomas CLI $ npm install -g phantomas Install $ phantomas --url http://jsconf.eu $ phantomas --url http://jsconf.eu --assert-requests=10 Usage
110. Grunt-Phantomas $ npm install grunt-phantomas Install $ grunt phantomas:default $ grunt phantomas:screenshot Usage
111. Tier 3: Stylesheet Complexity Analysis
112. The easiest way to keep CSS maintainable is to minimize repetition.
114. npm install -g colorguard Install $ colorguard --file styles.css Collision: #020202, #000000 - #020202 [line: 2] is too close (0.3146196209793196) to #000000 [line: 2, 3, 7, 12, 13, 16, 17] Collision: #020202, #010101 - #020202 [line: 2] is too close (0.1574963682909058) to #010101 [line: 20] Collision: #000000, #010101 - #000000 [line: 2, 3, 7, 12, 13, 16, 17] is too close (0.15712369811016996) to #010101 [line: 20] Example CSS Colorguard
116. http://www.stylestats.org
117. http://www.wallarc.com/wallpaper/view/370816 Step 3: Rinse & Repeat
118. about:blank is the baseline to beat
120. Stay light, stay fast.
121. 1.1 seconds 12.1 seconds ~ 2100 1321 1316 1225 1327 923 917 Speed Index Scores
122. #perfmatters 1. Don’t guess it, test it. ◦ Performance advice is addictive. Always measure. 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
123. https://www.flickr.com/photos/keijoknutas/8850877937
124. We have one last thing to do. A pull request.
125. CSSConf LGTM’d!
126. Let’s Perf The Web Forward Together <3
127. High-Performance Browser Networking Udacity Perf Optimization https://www.udacity.com/course/ud884
128. Improving SmashingMag performance http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/ “Strategically speaking, the following could be your performance optimization roadmap: • Remove blocking scripts from the header of the page. • Identify and defer non-critical CSS and JavaScript. • Identify critical CSS and load it inline in the head, and then load the full CSS after rendering. • Keep all critical HTML and CSS to under 14 KB, and aim for a Speed Index of under 1000. • Consider using WOFF2 to further reduce latency and file size of the web fonts. • Replace JavaScript libraries with leaner JavaScript modules.”
129. Getting Your PageSpeed Score Up https://www.youtube.com/watch?v=pNKnhBIVj4w
130. #perfmatters <thank-you> +AddyOsmani @addyosmani