per·for·mance

/pərˈfôrməns/

an action, task, or operation, seen in terms of how successfully it was performed

Performance is Our Biggest Job

Beautiful != Useable

Useable > Beautiful

Google has calculated that by slowing its search results by just four tenths of a second they could lose 8 million searches per day.

• 8 million searches
• $111,000/day
• $40.5 million/year

100% of users have felt frustated by poor performance. - Una Kravets

Web Stress

Content Strategy

Do I really need that?

What Is the Main Goal Here?

What Next?

Image File Types

• jpg

  

• png-8

  

• png-24

  

• gif

  

• svg

  

"Never put an image on the web that you haven't optimized"

Compression Tools

• ImageAlpha (png-24)

  

• TinyPNG

  

• ImageOptim (png, gif, jpg)

  

• Compressor.io (png, gif, svg)

  

• SVG Optimizer

  

Compressive Images

Progressive .JPEGs

It's About How Fast the Page Feels

Do I really need that?

whatdoesmysitecost.com

The Delivery

CMAT

• Concatenate
• Minify
• Async
• Test

C: Concatenate

Pull your files into one to minimize requests.

Images

CSS

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';
@import 'utils/placeholders';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Javascript

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});

M: Minify

Make those files as small as possible.

Images

CSS

body,fieldset,form,html,legend,li,ol,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p{margin-top:0}fieldset,img{border:0}legend{color:#000}li{list-style:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;vertical-align:top;font-weight:400}input,select,textarea{font-size:110%;line-height:1.1}abbr,acronym{border-bottom:.1em dotted;cursor:help}*,:after,:before{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;height:100%}body{font-family:"Carrois Gothic",sans-serif;font-weight:400;padding:2em 10% 4em;max-width:1000px;margin:0 auto;background:#eef0f0;min-height:100%;position:relative}h1,h2,h3{font-family:"Fjalla One",serif;font-weight:700}h1{font-size:3.5em;margin-bottom:.25em;color:#5ab1bb}h2{color:#4e6766;font-family:"Carrois Gothic",sans-serif;text-transform:uppercase;font-size:.9em;letter-spacing:2px}

Javascript

!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.2",m=function(a,b){return new m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b){return b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return m.each(this,a,b)},map:function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.

Optimize what people see immediately

• Scripts
• Styles

critical rendering path:

/[krit-i-kuh l] [ren-der-ing] [path, pahth]/

The intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels

A: Async

LoadCSS

< head>
  
  
< /head>

• Above the Fold Bookmarklet
• Penthouse Plugin

"We don’t need to render the entire page in one second, [just] the above the fold content."

T: Test

Check Your Performance

Render. Display. Interact.

Network Panel

Audits Panel

page speed index:

/[peyj] [speed] [in-deks]/

some hippie math that tells you how fast it "feels" to load your website.

Page Speed Insights Extension

Google Analytics

Automate Your Performance Testing

Javascript Task Runners

Using Gulp

var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';

gulp.task('mobile', function () {
    return psi(site, {
        // key: key
        nokey: 'true',
        strategy: 'mobile',
    }, function (err, data) {
        console.log(data.score);
        console.log(data.pageStats);
    });
});

gulp.task('desktop', function () {
    return psi(site, {
        nokey: 'true',
        // key: key,
        strategy: 'desktop',
    }, function (err, data) {
        console.log(data.score);
        console.log(data.pageStats);
    });
});

gulp.task('default', ['mobile']);
						

gulp

• Grunt PageSpeed
• Gulp PageSpeed Insights

Results

URL:       https://www.google.com/?gws_rd=ssl
Score:     92
Strategy:  desktop

Number Resources                           | 13
Number Hosts                               | 5
Total Request                              | 2.62 kB
Number Static Resources                    | 9
Html Response                              | 116.9 kB
Image Response                             | 46.02 kB
Javascript Response                        | 879.68 kB
Other Response                             | 1.76 kB
Number Js Resources                        | 5
                                           |
Avoid Landing Page Redirects               | 7
Enable Gzip Compression                    | 0
Leverage Browser Caching                   | 0
Main Resource Server Response Time         | 0
Minify Css                                 | 0
Minify HTML                                | 0
Minify Java Script                         | 0.27
Minimize Render Blocking Resources         | 0
Optimize Images                            | 0
Prioritize Visible Content                 | 0
						

• Local Testing with Gulp PSI

Let's Review

We're All in This Together

Performance Optimization Checklist:

• Determine Important Content
• Create Most Performant Images
• Optimize Images
• DRY Stylesheet Architecture
• Consider Critical Rendering Path
• Concatenate files
• Minify files
• Async/Defer script loading
• Test! Repeat! Iterate!

Thank You!

@una

• perf.rocks
• Filament Group
• Point North
• Browser Diet
• Dave Rupert on RWD Bloat
• Discover Devtools
• Jank Free