A Primer on Performance

  • BD Conf Nashville 2015
  • Una Kravets | @una


Make something people love

people don't hate



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

Performance is Our Biggest Job

Beautiful != Useable

Useable > Beautiful

Let's Talk About Windows.

Performance-First Design

Amazon's calculated that a page load slow-down of just one second could cost it $1.6 billion in sales each year.
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

25% of users abandon a page if it takes more than 4 seconds to load.

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

Facepalm gif

It's about Neuroscience

Web Stress

Sensory Memory

UX Architecture

Content Strategy

Care About What Matters Most First

Do I really need that?

What Is the Main Goal Here?

What Next?

UI Design

lego cake!

Image Types

File Types

  • jpg

  • png-8

  • png-24

  • gif

  • svg

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

Compression Tools

Won't That Make My Beautiful Images Look Terrible And Pixelated!?

Compressive Images

size: 109kb

size: 49kb

size: 109kb

size: 49kb

Progressive Jpegs: A Blast from the Past

It's About How Fast the Page Feels

Retina Images

Do I really need that?


  • Scott Jehl's Picturefill
  • whatdoesmysitecost.com


    60 FPS

    Dev Tips Daily

    Layout Thrashing

    Avoid document reflow!

  • CSS Triggers
  • High Performance Animations
  • Flexbox > Older Layout Models

    Use Flexbox
  • Stolen from Paul Lewis
  • Use Flexbox


    Style Audit


  • Harry Roberts
  • Front End Development

    Cupcake Truck

    Let's Take a Look at Our Delivery


    • 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'])
  • The fastest HTTP request is the one not made.
    -Steve Souders, Head Performance Engineer, Google

    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.
  • 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

    Optimize what people see immediately

    • Scripts
    • Styles

    A: Async

    Manage How Your Scripts load with Async & Defer.

    • <script src="...">

    • <script src="..." async>

    • <script src="..." defer>


    < head>
    < /head>

    Critical CSS

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

    T: Test

    Check Your Performance

    Render. Display. Interact.

    Chrome Dev Tools

    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.

    A Look at the Numbers:

    • Time To First Byte: 200ms - 350ms
    • DOM Content Loaded: 1000ms - 2000ms
    • JS Load Event Fired: 900ms - 2200ms
    • Total Download Size: 1MB - 2MB
    • DNS Lookup: 10ms - 20ms
    • HTTP Requests: 50 - 75

    More Numbers:

    • First Byte Time: 85
    • Use persistent connection: 85
    • Use gzip compression for transferring compressible responses: 90
    • Compress Images: 90
    • Use Progressive JPEGs: 90
    • Leverage browser caching of static assets: 90
    • Use a CDN for all static assets: 85
    • Cited from Point North

    Google PageSpeed Insights

    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) {
    gulp.task('desktop', function () {
        return psi(site, {
            nokey: 'true',
            // key: key,
            strategy: 'desktop',
        }, function (err, data) {
    gulp.task('default', ['mobile']);


    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

    Performance Budget

    Setting a Performance Budget

    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!